Skip to content

Instantly share code, notes, and snippets.

@rewfergu

rewfergu/Blob.pde

Created October 31, 2013 20:53
Show Gist options
  • Save rewfergu/7256972 to your computer and use it in GitHub Desktop.
Save rewfergu/7256972 to your computer and use it in GitHub Desktop.
Download ZIP
Colorize external SVG in Processing
Raw
Blob.pde
class Blob {
PShape s, stroke, fills, shadow, accentOne, accentTwo, accentThree;
int baseColor = floor(random(100));
int x, y;
float hScale, vScale;
// constructor
Blob(int blob_x, int blob_y, int blob_w, int blob_h) {
x = blob_x;
y = blob_y;
s = loadShape("blob.svg");
hScale = blob_w / s.width;
vScale = blob_h / s.height;
stroke = s.getChild("stroke");
stroke.disableStyle();
stroke.scale(hScale, hScale);
fills = s.getChild("fill");
fills.disableStyle();
fills.scale(hScale, hScale);
shadow = s.getChild("shadow");
shadow.scale(hScale, hScale);
accentOne = s.getChild("accent1");
accentOne.scale(hScale, hScale);
accentOne.disableStyle();
accentTwo = s.getChild("accent2");
accentTwo.disableStyle();
accentTwo.scale(hScale, hScale);
accentThree = s.getChild("accent3");
accentThree.disableStyle();
accentThree.scale(hScale, hScale);
}
//draw blobs
void display() {
noStroke();
fill(baseColor, 50, 15);
shape(stroke, x, y);
fill(baseColor, 50, 80);
shape(fills, x, y);
fill(baseColor+5, 50, 50);
shape(accentOne, x, y);
fill(baseColor+10, 50, 50);
shape(accentTwo, x, y);
fill(baseColor-5, 50, 50);
shape(accentThree, x, y);
shape(shadow, x, y);
}
}
Display the source blob
Display the rendered blob
Raw
blob.svg
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="425px" height="425px" viewBox="0 0 425 425" enable-background="new 0 0 425 425" xml:space="preserve">
<path id="stroke" d="M211.547,382.344c-12.787,0-25.523-1.404-37.855-4.177c-11.613-2.608-23.342-6.778-35.858-12.747l-1.698-0.811
c-10.82-5.152-22.009-10.48-31.567-18.026c-11.294-8.915-20.336-17.646-27.642-26.692c-7.999-9.901-13.697-21.578-19.207-32.869
l-0.12-0.246c-5.833-11.952-10.176-24.041-12.909-35.926c-2.997-13.031-3.4-26.496-3.4-37.948c0-1.489-0.006-2.977-0.011-4.463
c-0.043-11.207-0.087-22.795,2.423-33.713c2.886-12.55,8.505-24.064,13.94-35.198l0.188-0.387
c4.929-10.101,11.393-19.885,20.957-31.727l2.051-2.546c7.185-8.933,14.615-18.17,23.868-25.475
c10.605-8.372,21.518-15.257,32.435-20.464c9.834-4.69,20.705-7.057,31.219-9.344c1.834-0.399,3.668-0.799,5.498-1.209l2.229-0.502
c11.364-2.565,23.115-5.219,35.462-5.219c14.666,0,28.646,2.762,37.888,4.837c13.381,3.007,25.371,5.932,36.592,11.283
c12.432,5.93,23.473,12.675,32.812,20.049c9.996,7.892,19.192,17.003,27.335,27.083c6.796,8.415,11.527,18.325,16.104,27.91
c0.877,1.836,1.753,3.67,2.643,5.491c5.919,12.13,11.05,23.177,13.896,35.549c3.354,14.59,4.917,26.678,4.917,38.043
c0,10.581-2.487,20.655-4.894,30.398c-0.601,2.427-1.196,4.843-1.749,7.248c-3.343,14.533-7.178,25.972-12.068,35.997
c-6.42,13.15-12.778,23.448-20.016,32.407c-7.37,9.125-16.1,19.543-26.43,27.696c-8.784,6.936-19.062,11.775-29.006,16.459
c-1.475,0.693-2.946,1.39-4.415,2.089l-1.964,0.938c-10.608,5.07-21.58,10.313-33.569,13.008
C237.1,381.956,223.922,382.344,211.547,382.344z"/>
<path id="fill" fill="#FFFFFF" d="M375.89,174.53c-2.842-12.357-8.229-23.762-13.667-34.906
c-5.521-11.312-10.541-23.121-18.384-32.831c-7.867-9.74-17.016-18.843-26.858-26.614c-9.78-7.722-20.865-14.269-32.244-19.694
c-11.18-5.332-23.573-8.281-35.959-11.063c-11.984-2.693-24.422-4.765-37.229-4.765c-12.806,0-25.047,2.954-37.031,5.647
c-12.385,2.783-24.904,5.003-36.084,10.334c-11.378,5.427-22.086,12.39-31.868,20.109c-9.845,7.772-17.577,17.812-25.444,27.552
c-7.843,9.71-15.074,19.845-20.594,31.156c-5.438,11.145-11.059,22.583-13.901,34.941c-2.754,11.977-2.336,24.699-2.336,37.504
c0,12.805,0.57,25.3,3.324,37.276c2.842,12.358,7.244,24.139,12.682,35.28c5.521,11.312,11.122,22.838,18.964,32.548
c7.867,9.74,17.322,18.451,27.167,26.223c9.78,7.723,21.319,13.058,32.698,18.483c11.179,5.331,22.84,9.746,35.224,12.527
c11.986,2.692,24.394,4.104,37.199,4.104c12.807,0,25.432-0.437,37.417-3.129c12.386-2.782,23.722-8.396,34.898-13.728
c11.378-5.429,23.073-10.475,32.854-18.193c9.846-7.771,18.086-17.487,25.953-27.229c7.843-9.709,14.132-20.525,19.651-31.838
c5.438-11.146,9-22.994,11.842-35.354c2.755-11.978,6.565-24.17,6.565-36.975S378.644,186.508,375.89,174.53z M97.882,301.812
c-4.423,2.905-10.887-2.014-16.439-10.463c-5.553-8.443-8.48-17.812-4.057-20.719c4.422-2.906,14.548,1.727,20.1,10.174
C103.041,289.251,102.304,298.906,97.882,301.812z M171.635,333.773c-5.312,10.782-22.173,14.263-39.138,5.903
c-16.966-8.357-25.823-24.509-20.511-35.291c5.311-10.78,23.991-14.565,40.956-6.209
C169.908,306.535,176.947,322.992,171.635,333.773z M171.584,145.01c-18.197,14.316-41.295,16.519-51.668,3.333
c-10.373-13.187-3.956-36.59,14.243-50.906c18.198-14.317,42.813-15.326,53.187-2.14
C197.717,108.483,189.782,130.693,171.584,145.01z M344.384,182.436c-1.005,15.542-5.396,31.96-18.077,41.203
c-12.68,9.243-30.522,11.864-45.629,8.064c-13.953-3.51-25.766-15.202-35.414-28.44c-9.649-13.237-15.697-27.966-14.771-42.325
c1.005-15.542,9.755-28.719,22.433-37.962c12.68-9.242,27.477-11.848,42.58-8.049c13.953,3.51,28.821,10.425,38.474,23.664
C343.629,151.827,345.312,168.077,344.384,182.436z"/>
<path id="accent3" fill="#FFFFFF" d="M150.202,341.326c-5.604,0-11.615-1.5-17.378-4.341c-7.592-3.739-13.747-9.258-17.33-15.531
c-3.265-5.72-3.926-11.456-1.815-15.741c2.761-5.604,10.161-9.086,19.312-9.086c5.897,0,11.993,1.467,17.626,4.242
c7.383,3.637,13.185,9.149,16.337,15.525c2.833,5.729,3.194,11.58,0.991,16.052C165.206,338.008,158.573,341.326,150.202,341.326z"
/>
<path id="accent2" fill="#FFFFFF" d="M139.042,153.094c-5.376,0-12.823-1.319-17.769-7.604c-4.422-5.621-5.509-13.564-3.061-22.371
c2.512-9.035,8.635-17.899,16.8-24.322c8.704-6.849,19.396-10.775,29.331-10.775c8.541,0,15.517,2.888,19.642,8.132
c8.977,11.41,2.132,31.821-15.256,45.5C159.486,148.924,148.665,153.094,139.042,153.094z"/>
<g id="accent1">
<path id="ball2" fill="#FFFFFF" d="M295.533,229.385c-4.514,0-8.93-0.535-13.123-1.59c-11.391-2.865-22.421-11.795-33.723-27.3
c-10.102-13.855-15.012-27.813-14.201-40.364c0.887-13.72,8.416-26.408,21.207-35.731c8.336-6.076,17.611-9.157,27.572-9.157
c4.096,0,8.305,0.536,12.508,1.594c16.545,4.161,28.921,11.738,36.78,22.521c7.646,10.487,10.953,24.579,9.835,41.885
c-1.2,18.585-6.87,31.697-16.852,38.973C317.428,226.128,306.771,229.385,295.533,229.385z"/>
<path id="ball1" fill="#FFFFFF" d="M94.064,299.652c-2.112,0-6.289-2.604-11.114-9.949c-2.684-4.082-4.586-8.153-5.355-11.467
c-0.606-2.611-0.442-4.52,0.439-5.098c0.375-0.246,0.95-0.377,1.664-0.377c3.89,0,10.295,3.625,14.282,9.69
c2.263,3.438,3.486,7.312,3.447,10.897c-0.031,2.805-0.871,5.086-2.192,5.953C94.875,299.542,94.502,299.652,94.064,299.652z"/>
</g>
<g id="shadow">
<path opacity="0.1" enable-background="new " d="M87.113,319.669c0,0,49.225,51.938,117.829,54.264
c68.604,2.326,123.645-48.062,123.645-48.062s-66.279,37.209-121.706,34.884C151.541,358.434,136.727,351.839,87.113,319.669z"/>
<path opacity="0.1" enable-background="new " d="M120.058,128.584c0,0-2.325,18.992,14.729,20.154
c17.054,1.162,39.146-17.441,39.146-17.441s-25.968,10.465-36.82,8.526C126.26,137.886,120.058,128.584,120.058,128.584z"/>
<path opacity="0.1" enable-background="new " d="M242.926,180.521c0,0,16.279,31.396,33.332,39.147
c17.055,7.751,34.108,2.325,41.475-1.163c7.364-3.489,14.341-13.566,14.729-20.155c-5.812,10.465-16.666,15.503-29.846,15.892
s-19.77-1.163-32.559-11.239C257.268,192.926,242.926,180.521,242.926,180.521z"/>
<path opacity="0.1" enable-background="new " d="M114.631,314.243c0,0,7.365,17.828,25.194,22.093
c17.829,4.264,24.03-2.325,25.969-6.589c-6.202,4.264-15.117,3.876-25.582,0.388C129.747,326.647,120.058,321.607,114.631,314.243z
"/>
<path opacity="0.1" enable-background="new " d="M78.69,275.928c0,0,0.75,5.688,4.938,11.875
c4.188,6.188,9,10.062,10.438,10.062s1.5-3.625,1.5-3.625s-1.188,2-2.875,0.625s-4.938-4-9.25-10.25S78.69,275.928,78.69,275.928z"
/>
</g>
</svg>
Raw
dynamicBlob.pde
int baseColor = floor(random(100));
int canvasWidth = 1000;
int canvasHeight = 1000;
int gridSize = 200;
int cols = canvasWidth / gridSize;
int rows = canvasHeight / gridSize;
void setup() {
int rowCount = 0;
size(canvasWidth, canvasHeight);
smooth();
colorMode(HSB, 100);
fill(50, 10, 75);
rect(0,0,width,height);
for (int i = 0; i < cols*rows; i++) {
if (i > 1 && i%cols == 0) {
rowCount += gridSize;
}
Blob b = new Blob((i%cols)*gridSize, rowCount, gridSize, gridSize);
b.display();
}
//saveFrame("screen.jpg");
}
void draw() {}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment