<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Beautiful ProgrammingBeautiful Programming</title>
	<atom:link href="http://beautifulprogramming.com/feed/" rel="self" type="application/rss+xml" />
	<link>http://beautifulprogramming.com</link>
	<description>An Exploration of Aesthetics via Instruction</description>
	<lastBuildDate>Sat, 13 Feb 2016 20:14:34 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.6.1</generator>
		<item>
		<title>Endless Kaleidoscope</title>
		<link>http://beautifulprogramming.com/endless-kaleidoscope/</link>
		<comments>http://beautifulprogramming.com/endless-kaleidoscope/#comments</comments>
		<pubDate>Sat, 13 Feb 2016 19:00:59 +0000</pubDate>
		<dc:creator>colordodge</dc:creator>
				<category><![CDATA[Uncategorized]]></category>

		<guid isPermaLink="false">http://beautifulprogramming.com/?p=505</guid>
		<description><![CDATA[Click to randomize. Press &#8220;SPACEBAR&#8221; to pause. Press &#8220;C&#8221; to randomize color. Press &#8220;A&#8221; to change the number of axes. Press &#8220;Z&#8221; to change the zoom level. Press &#8220;S&#8221; to save an image. Press &#8220;T&#8221; to show the texture. Press &#8220;G&#8221; to show the hex-grid lines.   Press &#8220;R&#8221; to randomize the texture. Press &#8220;L&#8221; to change [&#8230;]]]></description>
				<content:encoded><![CDATA[<canvas datasrc="http://beautifulprogramming.com/wp-content/uploads/EndlessKaleidoscope.pde"></canvas>
<p>Click to randomize. Press &#8220;SPACEBAR&#8221; to pause. Press &#8220;C&#8221; to randomize color. Press &#8220;A&#8221; to change the number of axes. Press &#8220;Z&#8221; to change the zoom level. Press &#8220;S&#8221; to save an image. Press &#8220;T&#8221; to show the texture. Press &#8220;G&#8221; to show the hex-grid lines.   Press &#8220;R&#8221; to randomize the texture. Press &#8220;L&#8221; to change the line color. Press &#8220;+&#8221; and &#8220;-&#8221; to change the speed.</p>
<p>Made with Processing 2 in javascript mode.</p>
<div id="gallery"><a href="http://beautifulprogramming.com/wp-content/uploads/2016/02/EndlessKaleidoscope12.png"><img class="alignnone size-full wp-image-516" alt="EndlessKaleidoscope12" src="http://beautifulprogramming.com/wp-content/uploads/2016/02/EndlessKaleidoscope12.png" width="940" height="540" /></a> <a href="http://beautifulprogramming.com/wp-content/uploads/2016/02/EndlessKaleidoscope11.png"><img class="alignnone size-full wp-image-515" alt="EndlessKaleidoscope11" src="http://beautifulprogramming.com/wp-content/uploads/2016/02/EndlessKaleidoscope11.png" width="940" height="540" /></a> <a href="http://beautifulprogramming.com/wp-content/uploads/2016/02/EndlessKaleidoscope10.png"><img class="alignnone size-full wp-image-514" alt="EndlessKaleidoscope10" src="http://beautifulprogramming.com/wp-content/uploads/2016/02/EndlessKaleidoscope10.png" width="940" height="540" /></a><a href="http://beautifulprogramming.com/wp-content/uploads/2016/02/EndlessKaleidoscope9.png"><img class="alignnone size-full wp-image-513" alt="EndlessKaleidoscope9" src="http://beautifulprogramming.com/wp-content/uploads/2016/02/EndlessKaleidoscope9.png" width="940" height="540" /></a> <a href="http://beautifulprogramming.com/wp-content/uploads/2016/02/EndlessKaleidoscope8.png"><img class="alignnone size-full wp-image-512" alt="EndlessKaleidoscope8" src="http://beautifulprogramming.com/wp-content/uploads/2016/02/EndlessKaleidoscope8.png" width="940" height="540" /></a> <a href="http://beautifulprogramming.com/wp-content/uploads/2016/02/EndlessKaleidoscope7.png"><img class="alignnone size-full wp-image-511" alt="EndlessKaleidoscope7" src="http://beautifulprogramming.com/wp-content/uploads/2016/02/EndlessKaleidoscope7.png" width="940" height="540" /></a><a href="http://beautifulprogramming.com/wp-content/uploads/2016/02/EndlessKaleidoscope6.png"><img class="alignnone size-full wp-image-510" alt="EndlessKaleidoscope6" src="http://beautifulprogramming.com/wp-content/uploads/2016/02/EndlessKaleidoscope6.png" width="940" height="540" /></a> <a href="http://beautifulprogramming.com/wp-content/uploads/2016/02/EndlessKaleidoscope5.png"><img class="alignnone size-full wp-image-509" alt="EndlessKaleidoscope5" src="http://beautifulprogramming.com/wp-content/uploads/2016/02/EndlessKaleidoscope5.png" width="940" height="540" /></a> <a href="http://beautifulprogramming.com/wp-content/uploads/2016/02/EndlessKaleidoscope4.png"><img class="alignnone size-full wp-image-504" alt="EndlessKaleidoscope4" src="http://beautifulprogramming.com/wp-content/uploads/2016/02/EndlessKaleidoscope4.png" width="940" height="540" /></a><a href="http://beautifulprogramming.com/wp-content/uploads/2016/02/EndlessKaleidoscope3.png"><img class="alignnone size-full wp-image-503" alt="EndlessKaleidoscope3" src="http://beautifulprogramming.com/wp-content/uploads/2016/02/EndlessKaleidoscope3.png" width="940" height="540" /></a> <a href="http://beautifulprogramming.com/wp-content/uploads/2016/02/EndlessKaleidoscope2.png"><img class="alignnone size-full wp-image-502" alt="EndlessKaleidoscope2" src="http://beautifulprogramming.com/wp-content/uploads/2016/02/EndlessKaleidoscope2.png" width="940" height="540" /></a> <a href="http://beautifulprogramming.com/wp-content/uploads/2016/02/EndlessKaleidoscope1.png"><img class="alignnone size-full wp-image-501" alt="EndlessKaleidoscope1" src="http://beautifulprogramming.com/wp-content/uploads/2016/02/EndlessKaleidoscope1.png" width="940" height="540" /></a></div>
<div></div>
<div></div>
<div>
<pre class="crayon-plain-tag">Cluster cluster;
int numSlices = 6;
float radius = 180;
float gridWidth;
float gridHeight;
boolean isPaused = false;
boolean showTexture = false;
boolean showLines = false;
int axisMode = 1;
float speedMod = 1;
boolean darkStroke = true;
float texWidth;
float texHeight;
float uv0, uv1;

float satMod = 0;

void setup()
{
  size(940, 540, P3D);
  colorMode(HSB);
  background(0);
  textureMode(NORMALIZED);

  angleStep = radians(360/numSlices);
  calculateGrid();
  cluster = new Cluster();
}

void draw()
{ 
  background(0);
  if (showLines) stroke(0);
  else noStroke();

  cluster.update();

  if (showTexture) image(cluster.tex, width/2-cluster.pg.width/2, height/2-cluster.pg.height/2);
  else drawHexGrid();
}

void randomize()
{
  axisMode = floor(random(0, 3));

  int r = floor(random(0, 3));
  switch (r)
  {
  case 0:
  radius = 90;
  break;

  case 1:
  radius = 120;
  break;

  case 2:
  radius = 180;
  break;

    default:
      break;
  }

  calculateGrid();
  cluster.createParts();
}

void drawHexGrid()
{ 
  int xCount = width/gridWidth + 1;
  int yCount = height/gridHeight + 1;
  float xOffset;

  for (int x=0; x&lt;xCount; x++)
  {
    for (int y=0; y&lt;yCount; y++)
    {
      if (y%2 == 0) xOffset = 0;
      else xOffset = gridWidth/2;

      pushMatrix();
      translate(x*gridWidth+xOffset, y*gridHeight, 0);
      rotateZ(angleStep/2);

      switch (axisMode)
      {
      case 0:
        drawHex1();
        break;

      case 1:
        drawHex2();
        break;

      case 2:
        drawHex3();
        break;

      default:
        break;
      }

      popMatrix();
    }
  }
}

void drawHex1()
{
  beginShape(TRIANGLE_FAN);
  texture(cluster.tex);
  vertex(0, 0, 0, 0.5, 1);

  for (int i=0; i&lt;6; i++)
  {
    float x1 = cos(angleStep*i) * radius;
    float y1 = sin(angleStep*i) * radius;
    float x2 = cos(angleStep*(i+1)) * radius;
    float y2 = sin(angleStep*(i+1)) * radius;

    if (i%2 == 0)
    {
      vertex(x1, y1, 0, uv0, 0);
      vertex(x2, y2, 0, uv1, 0);
    } else
    {
      vertex(x1, y1, 0, uv1, 0);
      vertex(x2, y2, 0, uv0, 0);
    }
  }

  endShape();
}

void drawHex2()
{
  beginShape(TRIANGLE_FAN);
  texture(cluster.tex);
  vertex(0, 0, 0, 0.5, 1);

  for (int i=0; i&lt;numSlices; i++)
  {
    float x1 = cos(angleStep*i) * radius;
    float y1 = sin(angleStep*i) * radius;
    float x3 = cos(angleStep*(i+1)) * radius;
    float y3 = sin(angleStep*(i+1)) * radius;
    float x2 = (x1 + x3) / 2;
    float y2 = (y1 + y3) / 2;

    vertex(x1, y1, 0, uv0, 0);
    vertex(x2, y2, 0, uv1, 0);
    vertex(x3, y3, 0, uv0, 0);
  }

  endShape();
}

void drawHex3()
{
  beginShape(TRIANGLE_FAN);
  texture(cluster.tex);
  vertex(0, 0, 0, 0.5, 1);

  for (int i=0; i&lt;numSlices; i++)
  {
    float x1 = cos(angleStep*i) * radius;
    float y1 = sin(angleStep*i) * radius;
    float x5 = cos(angleStep*(i+1)) * radius;
    float y5 = sin(angleStep*(i+1)) * radius;
    float x3 = (x1 + x5) / 2;
    float y3 = (y1 + y5) / 2;
    float x2 = (x1 + x3) / 2;
    float y2 = (y1 + y3) / 2;
    float x4 = (x3 + x5) / 2;
    float y4 = (y3 + y5) / 2;

    vertex(x1, y1, 0, uv0, 0);
    vertex(x2, y2, 0, uv1, 0);
    vertex(x3, y3, 0, uv0, 0);
    vertex(x4, y4, 0, uv1, 0);
    vertex(x5, y5, 0, uv0, 0);
  }

  endShape();
}

void calculateGrid()
{
  float angle = radians(360/numSlices/2);
  float b = radius * cos(angle);
  gridWidth = b * 2;
  float a = sqrt(radius*radius - b*b);
  gridHeight = radius + a;

  texHeight = b;
  texWidth = a*2;

  switch (axisMode)
  {
  case 0:
    uv0 = 0;
    uv1 = 1;
    break;

  case 1:
    uv0 = 0.25;
    uv1 = 0.75;
    break;

  case 2:
    uv0 = 0.375;
    uv1 = 0.625;
    break;

  default:
    break;
  }
}

void cycleAxisMode()
{
  axisMode++;
  if (axisMode &gt; 2) axisMode = 0;
  calculateGrid();
}

void cycleZoom()
{
  switch (radius)
  {
  case 90:
    radius = 180;
    break;

  case 120:
    radius = 90;
    break;

  case 180:
    radius = 120;
    break;

  default:
    radius = 120;
    break;
  }
  calculateGrid();
}

void mousePressed()
{
  randomize();
}

void keyPressed()
{
  if (key == ' ') isPaused = !isPaused;
  if (key == 's') save();
  if (key == 't') showTexture = !showTexture;
  if (key == 'g') showLines = !showLines;
  if (key == 'c') cluster.randomizeColor();
  if (key == 'a') cycleAxisMode();
  if (key == 'z') cycleZoom();
  if (key == 'r') cluster.createParts();
  if (key == '=') speedMod *= 1.2;
  if (key == '-') speedMod *= 0.8;
  if (key == 'l') darkStroke = !darkStroke;
}

class Cluster
{
  PGraphics pg;
  PImage tex;
  int numParts = 40;
  Part[] allParts;

  Cluster()
  {
    pg = createGraphics(texWidth, texHeight);
    pg.colorMode(HSB);
    pg.noSmooth();

    createParts();
    update();
  }

  void update()
  {
    pg.beginDraw();
    updateParts(); 
    pg.endDraw();  
    tex = pg.get();
  }

  void createParts()
  {
    allParts = new Part[numParts];

    for (int i=0; i&lt;numParts; i++)
    {
      allParts[i] = new Part(pg);
    }
  }

  void updateParts()
  {
    pg.ellipseMode(CORNER);
    pg.background(0);
    pg.strokeWeight(0.5);

    for (int i=0; i&lt;numParts; i++)
    {
      allParts[i].update();
    }
  }

  void randomizeColor()
  {
    for (int i=0; i&lt;numParts; i++)
    {
      allParts[i].randomizeColor();
    }
  }
}

class Part
{
  PGraphics pg;
  int age;
  int numVectors = 10;
  PVector[] v;
  float x, y;
  float rot, rotSpeed;
  float scale, scaleOsc, scaleOscSpeed;
  float hue, sat, bright;
  float hueSpeed;
  float satOsc, satOscSpeed;
  float brightOsc, brightOscSpeed;

  Part(PGraphics _pg)
  {
    pg = _pg;
    v = new PVector[numVectors];
    init();
    scaleOsc = random(100);
    move();
  }

  void init()
  {
    age = 0;
    x = random(0, pg.width);
    y = random(0, pg.height);
    rot = random(radians(360));
    rotSpeed = random(0.002, 0.005);
    if (random() &gt; 0.5) rotSpeed *= -1;
    scale = 0;
    scaleOsc = 0;
    scaleOscSpeed = random(0.002, 0.004);
    randomizeColor();

    for (int i=0; i&lt;numVectors; i++) {
      v[i] = new PVector(random(-pg.width, pg.width), random(-pg.height, pg.height));
    }
  }

  void randomizeColor()
  {
    hue = random(255);
    hueSpeed = random(0.01, 0.2);

    satOsc = random(100);
    satOscSpeed = random(0.001, 0.003);
    sat = sin(satOsc);
    sat = map(sat, -1, 1, 0, 255);

    brightOsc = random(100);
    brightOscSpeed = random(0.001, 0.003);
    bright = sin(brightOsc);
    bright = map(bright, -1, 1, 0, 255);
  }

  void update()
  {
    if (!isPaused) move();
    render();
  }

  void move()
  {
    age++;

    rot += rotSpeed * speedMod;
    scaleOsc += scaleOscSpeed * speedMod;
    scale = sin(scaleOsc);
    if (age &gt; 100 &amp;&amp; abs(scale) &lt; 0.01) init();

    hue += hueSpeed;
    satOsc += satOscSpeed;
    brightOsc += brightOscSpeed;
    sat = sin(satOsc);
    sat = map(sat, -1, 1, 0, 255);
    bright = sin(brightOsc);
    bright = map(bright, -1, 1, 0, 255);
  }

  void render()
  {
    if (darkStroke) pg.stroke(0);
    else pg.stroke(255);

    pg.pushMatrix();
    pg.fill(hue%255, sat, bright, 255);
    pg.translate(x, y);
    pg.rotate(rot);
    pg.scale(scale, scale);
    pg.beginShape();
    pg.vertex(v[0].x, v[0].y);
    pg.bezierVertex(v[1].x, v[1].y, v[2].x, v[2].y, v[3].x, v[3].y);
    pg.bezierVertex(v[4].x, v[4].y, v[5].x, v[5].y, v[6].x, v[6].y);
    pg.bezierVertex(v[7].x, v[7].y, v[8].x, v[8].y, v[9].x, v[9].y);
    pg.vertex(v[0].x, v[0].y);
    pg.endShape();
    pg.popMatrix();
  }
}</pre>
</div>
]]></content:encoded>
			<wfw:commentRss>http://beautifulprogramming.com/endless-kaleidoscope/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Arcanum Figura</title>
		<link>http://beautifulprogramming.com/arcanum-figura/</link>
		<comments>http://beautifulprogramming.com/arcanum-figura/#comments</comments>
		<pubDate>Mon, 25 Jan 2016 01:04:43 +0000</pubDate>
		<dc:creator>colordodge</dc:creator>
				<category><![CDATA[Uncategorized]]></category>

		<guid isPermaLink="false">http://beautifulprogramming.com/?p=476</guid>
		<description><![CDATA[Click to generate next layer. Press &#8220;SPACEBAR&#8221; to pause. Press &#8220;A&#8221; to toggle auto-draw. Press &#8220;C&#8221; to clear the screen. Press &#8220;S&#8221; to save a screenshot. Press &#8220;D&#8221; to toggle dissolve transition. This sketch is drawing multiple passes of perlin noise. A threshold is applied to the noise and anything below the threshold is drawn [&#8230;]]]></description>
				<content:encoded><![CDATA[<canvas datasrc="http://beautifulprogramming.com/wp-content/uploads/ArcanumFigura.pde"></canvas>
<p>Click to generate next layer. Press &#8220;SPACEBAR&#8221; to pause. Press &#8220;A&#8221; to toggle auto-draw. Press &#8220;C&#8221; to clear the screen. Press &#8220;S&#8221; to save a screenshot. Press &#8220;D&#8221; to toggle dissolve transition.</p>
<p>This sketch is drawing multiple passes of perlin noise. A threshold is applied to the noise and anything below the threshold is drawn transparent. Doing large resolution perlin noise images like this is very computationally costly, so I had to develop a way to draw the images in chunks &#8211; which is why you see the images paint from top to bottom &#8211; it&#8217;s rendering 3,000 pixels of the perlin noise at a time. This way I can maintain a decent frame rate and keep the keyboard commands responsive. Each layer has a different noise resolution and threshold.</p>
<div id="gallery"><a href="http://beautifulprogramming.com/wp-content/uploads/2016/01/ArcanumFigura12.png"><img class="alignnone size-full wp-image-489" alt="ArcanumFigura12" src="http://beautifulprogramming.com/wp-content/uploads/2016/01/ArcanumFigura12.png" width="940" height="540" /></a> <a href="http://beautifulprogramming.com/wp-content/uploads/2016/01/ArcanumFigura11.png"><img class="alignnone size-full wp-image-488" alt="ArcanumFigura11" src="http://beautifulprogramming.com/wp-content/uploads/2016/01/ArcanumFigura11.png" width="940" height="540" /></a> <a href="http://beautifulprogramming.com/wp-content/uploads/2016/01/ArcanumFigura10.png"><img class="alignnone size-full wp-image-487" alt="ArcanumFigura10" src="http://beautifulprogramming.com/wp-content/uploads/2016/01/ArcanumFigura10.png" width="940" height="540" /></a><a href="http://beautifulprogramming.com/wp-content/uploads/2016/01/ArcanumFigura9.png"><img class="alignnone size-full wp-image-486" alt="ArcanumFigura9" src="http://beautifulprogramming.com/wp-content/uploads/2016/01/ArcanumFigura9.png" width="940" height="540" /></a> <a href="http://beautifulprogramming.com/wp-content/uploads/2016/01/ArcanumFigura8.png"><img class="alignnone size-full wp-image-485" alt="ArcanumFigura8" src="http://beautifulprogramming.com/wp-content/uploads/2016/01/ArcanumFigura8.png" width="940" height="540" /></a> <a href="http://beautifulprogramming.com/wp-content/uploads/2016/01/ArcanumFigura7.png"><img class="alignnone size-full wp-image-484" alt="ArcanumFigura7" src="http://beautifulprogramming.com/wp-content/uploads/2016/01/ArcanumFigura7.png" width="940" height="540" /></a><a href="http://beautifulprogramming.com/wp-content/uploads/2016/01/ArcanumFigura6.png"><img class="alignnone size-full wp-image-483" alt="ArcanumFigura6" src="http://beautifulprogramming.com/wp-content/uploads/2016/01/ArcanumFigura6.png" width="940" height="540" /></a> <a href="http://beautifulprogramming.com/wp-content/uploads/2016/01/ArcanumFigura5.png"><img class="alignnone size-full wp-image-482" alt="ArcanumFigura5" src="http://beautifulprogramming.com/wp-content/uploads/2016/01/ArcanumFigura5.png" width="940" height="540" /></a> <a href="http://beautifulprogramming.com/wp-content/uploads/2016/01/ArcanumFigura4.png"><img class="alignnone size-full wp-image-481" alt="ArcanumFigura4" src="http://beautifulprogramming.com/wp-content/uploads/2016/01/ArcanumFigura4.png" width="940" height="540" /></a><a href="http://beautifulprogramming.com/wp-content/uploads/2016/01/ArcanumFigura3.png"><img class="alignnone size-full wp-image-480" alt="ArcanumFigura3" src="http://beautifulprogramming.com/wp-content/uploads/2016/01/ArcanumFigura3.png" width="940" height="540" /></a> <a href="http://beautifulprogramming.com/wp-content/uploads/2016/01/ArcanumFigura2.png"><img class="alignnone size-full wp-image-479" alt="ArcanumFigura2" src="http://beautifulprogramming.com/wp-content/uploads/2016/01/ArcanumFigura2.png" width="940" height="540" /></a> <a href="http://beautifulprogramming.com/wp-content/uploads/2016/01/ArcanumFigura1.png"><img class="alignnone size-full wp-image-478" alt="ArcanumFigura1" src="http://beautifulprogramming.com/wp-content/uploads/2016/01/ArcanumFigura1.png" width="940" height="540" /></a></div>
<div>
<pre class="crayon-plain-tag">PGraphics buffer;
PerlinImage perlinImage;
boolean autoPlay = true;
boolean isPaused = false;
boolean doesDissolve = false;

void setup()
{
  size(940, 540);
  background(0);
  perlinImage = new PerlinImage(940, 540);
  perlinImage.start();
  buffer = createGraphics(940, 540);
  buffer.colorMode(HSB);
}

void draw()
{
  doesDissolve = 23.4;

  buffer.beginDraw();
  if (!isPaused)
  {
    perlinImage.update();
    if (autoPlay) if (frameCount % 300 == 0) perlinImage.start();
  }
  buffer.endDraw();
  image(buffer, 0, 0);
}

void reset()
{
  buffer.background(0);
  perlinImage.init();
}

void mousePressed()
{
  isPaused = false;
  perlinImage.start();
}

void keyPressed()
{
  if (key == 'a') autoPlay = !autoPlay; 
  if (key == 'c') reset();
  if (key == ' ') isPaused = !isPaused;
  if (key == 's') save();
  if (key == 'd') doesDissolve = !doesDissolve;
}

class PerlinImage
{
  boolean isRunning = false;

  float w;
  float h;
  int ix;
  int iy;
  int count;
  float hue, sat, bright;
  float noiseOffset;
  float threshold;
  float noiseScale;

  int[] positions;
  int index;
  int numPixels;

  PerlinImage(float _w, float _h)
  {
    w = _w;
    h = _h;
    numPixels = w*h;
    positions = new int[numPixels];
    init();
  } 

  void init()
  {
    index = 0;

    for (int i=0; i&lt;numPixels; i++) positions[i] = i;

    if (doesDissolve)
    {
      for (int i = numPixels - 1; i &gt; 0; i--) 
      {
        int j = floor(random() * (i + 1));
        int temp = positions[i];
        positions[i] = positions[j];
        positions[j] = temp;
      }
    }

    ix = 0;
    iy = 0;
    hue = random(255);
    sat = random(255);
    bright = random(255);
    noiseOffset = random(10000);
    threshold = random(0.4, 0.6);
    noiseScale = random(0.001, 0.02);
  }

  void start()
  {
    if (!isRunning)
    {
      isRunning = true; 
      init();
    }
  }

  void update()
  { 
    if (isRunning) render();
  }

  void render()
  {
    int numSteps = 3000;
    float n;

    for (int i=0; i&lt;numSteps; i++)
    {
      iy = floor(positions[index]/width);
      ix = positions[index]%width;

      n = noise(ix*noiseScale, iy*noiseScale, noiseOffset);
      if (n &lt; threshold) n = 0;
      else n = 1;

      buffer.fill(hue, sat, bright, n*255);
      buffer.noStroke();
      buffer.rect(ix, iy, 1, 1);

      index++;
      if (index &gt; numPixels) isRunning = false;
    }
  }
}</pre>
</div>
]]></content:encoded>
			<wfw:commentRss>http://beautifulprogramming.com/arcanum-figura/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Mechanica Oceanus</title>
		<link>http://beautifulprogramming.com/mechanica-oceanus/</link>
		<comments>http://beautifulprogramming.com/mechanica-oceanus/#comments</comments>
		<pubDate>Wed, 13 Jan 2016 04:09:23 +0000</pubDate>
		<dc:creator>colordodge</dc:creator>
				<category><![CDATA[Uncategorized]]></category>

		<guid isPermaLink="false">http://beautifulprogramming.com/?p=451</guid>
		<description><![CDATA[Click to randomize. Press &#8220;SPACEBAR&#8221; to pause. Press &#8220;C&#8221; to change colors. Press &#8220;A&#8221; to toggle auto-randomization. Press &#8220;O&#8221; to toggle orthographic camera. Holding any of the number keys 1-9 while moving the mouse horizontally will edit the following parameters: 1: Color Map Density 2: Color Speed 3: Oscillation Shape 4: Oscillation Shape Multiplier 5: [&#8230;]]]></description>
				<content:encoded><![CDATA[<canvas datasrc="http://beautifulprogramming.com/wp-content/uploads/MechanicaOceanus.pde"></canvas>
<p>Click to randomize. Press &#8220;SPACEBAR&#8221; to pause. Press &#8220;C&#8221; to change colors. Press &#8220;A&#8221; to toggle auto-randomization. Press &#8220;O&#8221; to toggle orthographic camera.</p>
<p>Holding any of the number keys 1-9 while moving the mouse horizontally will edit the following parameters:</p>
<p>1: Color Map Density<br />
2: Color Speed<br />
3: Oscillation Shape<br />
4: Oscillation Shape Multiplier<br />
5: Oscillation Speed<br />
6: Box Width, Height, and Depth<br />
7: Box Width<br />
8: Box Height<br />
9: Box Depth</p>
<p>This sketch was made with Processing 2 in Javascript mode.</p>
<div id="gallery"><a href="http://beautifulprogramming.com/wp-content/uploads/2016/01/MechanicaOceanus1.png"><img class="alignnone size-full wp-image-454" alt="MechanicaOceanus1" src="http://beautifulprogramming.com/wp-content/uploads/2016/01/MechanicaOceanus1.png" width="940" height="540" /></a> <a href="http://beautifulprogramming.com/wp-content/uploads/2016/01/MechanicaOceanus9.png"><img class="alignnone size-full wp-image-450" alt="MechanicaOceanus9" src="http://beautifulprogramming.com/wp-content/uploads/2016/01/MechanicaOceanus9.png" width="940" height="540" /></a> <a href="http://beautifulprogramming.com/wp-content/uploads/2016/01/MechanicaOceanus5.png"><img class="alignnone size-full wp-image-446" alt="MechanicaOceanus5" src="http://beautifulprogramming.com/wp-content/uploads/2016/01/MechanicaOceanus5.png" width="940" height="540" /></a><a href="http://beautifulprogramming.com/wp-content/uploads/2016/01/MechanicaOceanus7.png"><img class="alignnone size-full wp-image-448" alt="MechanicaOceanus7" src="http://beautifulprogramming.com/wp-content/uploads/2016/01/MechanicaOceanus7.png" width="940" height="540" /></a> <a href="http://beautifulprogramming.com/wp-content/uploads/2016/01/MechanicaOceanus8.png"><img class="alignnone size-full wp-image-449" alt="MechanicaOceanus8" src="http://beautifulprogramming.com/wp-content/uploads/2016/01/MechanicaOceanus8.png" width="940" height="540" /></a> <a href="http://beautifulprogramming.com/wp-content/uploads/2016/01/MechanicaOceanus4.png"><img class="alignnone size-full wp-image-445" alt="MechanicaOceanus4" src="http://beautifulprogramming.com/wp-content/uploads/2016/01/MechanicaOceanus4.png" width="940" height="540" /></a><a href="http://beautifulprogramming.com/wp-content/uploads/2016/01/MechanicaOceanus2.png"><img class="alignnone size-full wp-image-443" alt="MechanicaOceanus2" src="http://beautifulprogramming.com/wp-content/uploads/2016/01/MechanicaOceanus2.png" width="940" height="540" /></a> <a href="http://beautifulprogramming.com/wp-content/uploads/2016/01/MechanicaOceanus3.png"><img class="alignnone size-full wp-image-444" alt="MechanicaOceanus3" src="http://beautifulprogramming.com/wp-content/uploads/2016/01/MechanicaOceanus3.png" width="940" height="540" /></a> <a href="http://beautifulprogramming.com/wp-content/uploads/2016/01/MechanicaOceanus6.png"><img class="alignnone size-full wp-image-447" alt="MechanicaOceanus6" src="http://beautifulprogramming.com/wp-content/uploads/2016/01/MechanicaOceanus6.png" width="940" height="540" /></a></div>
<div></div>
<div>
<pre class="crayon-plain-tag">Gradient g;
Part[][] allParts;
int xCount;
int yCount;
int numParts;
int gridSize = 30;

boolean cameraOrtho = false;
boolean isPaused = false;
boolean autoPlay = false;
boolean[] edit;

void setup()
{
  size(940, 540, P3D);
  colorMode(HSB);
  background(0);
  noStroke();
  smooth();
  edit = new boolean[10];
  g = new Gradient();
  createParts();
}

void draw()
{
  if (!isPaused &amp;&amp; autoPlay) if (frameCount % 800 == 0) randomizeParts();

  g.update();

  background(0);

  pushMatrix();
  translate(0, 0, 10);
  directionalLight(255, 0, 150, -0.3, 0.5, -1);
  directionalLight(255, 0, 150, 0.5, -0.3, -1);
  popMatrix();

  translate(0, 0, -100);
  if (cameraOrtho) ortho(-940/2, 940/2, -540/2, 540/2, -10000, 10000);
  else perspective();

  updateParts();
}

void createParts()
{
  xCount = ceil(width/gridSize);
  yCount = ceil(height/gridSize);
  allParts = new Part[xCount+1][yCount+1];

  for (int i=0; i&lt;=yCount; i++)
  {
    for (int j=0; j&lt;=xCount; j++)
    {     
      Part part = new Part(j*gridSize, i*gridSize, (i*j+j)*0.01);
      part.colorRatio = (i+j)/(xCount+1+yCount+1);
      allParts[i][j] = part;
    }
  }
}

void updateParts()
{
  xCount = ceil(width/gridSize);
  yCount = ceil(height/gridSize);

  for (int i=0; i&lt;=yCount; i++)
  {
    for (int j=0; j&lt;=xCount; j++)
    {
      Part part = allParts[i][j];
      part.update();
    }
  }
}

void randomizeParts(Part part)
{
  g.changeColors();

  float scaleMod = random(0, 0.01);
  float rotMod = random(0, 3);
  float speedMod = random(0.5, 1);

  float noiseMod = random(0.0, 0.01);
  float colorSpeed = random(0, 0.015);

  float boxW = random(1, 600);
  float boxH = random(1, 600);
  float boxD = random(1, 600);

  xCount = ceil(width/gridSize);
  yCount = ceil(height/gridSize);

  for (int i=0; i&lt;=yCount; i++)
  {
    for (int j=0; j&lt;=xCount; j++)
    {
      Part part = allParts[i][j];
      part.tscaleMod = scaleMod;
      part.tnoiseMod = noiseMod;
      part.trotMod = rotMod;
      part.tspeedMod = speedMod;
      part.tcolorSpeed = colorSpeed;
      part.tboxW = boxW;
      part.tboxH = boxH;
      part.tboxD = boxD;
    }
  }
}

void mousePressed()
{
  randomizeParts();
  autoPlay = false;
}

void keyPressed()
{
  if (key == 'o') cameraOrtho = !cameraOrtho;
  if (key == 's') save();
  if (key == ' ') isPaused = !isPaused;
  if (key == 'r') randomizeParts();
  if (key == 'a') autoPlay = !autoPlay;
  if (key == 'c') g.changeColors();

  if (key == '1') edit[1] = true;
  if (key == '2') edit[2] = true;
  if (key == '3') edit[3] = true;
  if (key == '4') edit[4] = true;
  if (key == '5') edit[5] = true;
  if (key == '6') edit[6] = true;
  if (key == '7') edit[7] = true;
  if (key == '8') edit[8] = true;
  if (key == '9') edit[9] = true;
}

void keyReleased()
{
  if (key == '1') edit[1] = false;
  if (key == '2') edit[2] = false;
  if (key == '3') edit[3] = false;
  if (key == '4') edit[4] = false;
  if (key == '5') edit[5] = false;
  if (key == '6') edit[6] = false;
  if (key == '7') edit[7] = false;
  if (key == '8') edit[8] = false;
  if (key == '9') edit[9] = false;
}

class Gradient
{
  PGraphics pg;
  float w = 300;
  color[] allColorsNew;
  color[] allColorsCurrent;
  int trans = w;
  int brightFloor = 100;
  int satFloor = 200;

  Gradient()
  {
    allColorsNew = new color[w];
    allColorsCurrent = new color[w];

    createPalette();

    for (int i=0; i&lt;=w; i++)
    {
      allColorsCurrent[i] = allColorsNew[i];
    }
  }

  void update()
  {
    for (int i=0; i&lt;5; i++)
    {
      if (trans &lt;= w)
      {
        allColorsCurrent[trans] = allColorsNew[trans];
      }
      trans++;
    }
  }

  void changeColors()
  {
    trans = 0;
    satFloor = random(255);
    brightFloor = random(255);
    createPalette();
  }

  void createPalette()
  {
    pg = createGraphics(w, 1);
    pg.colorMode(HSB);
    pg.beginDraw();

    pg.noStroke();

    color baseColor = color(random(255), random(satFloor, 255), random(brightFloor, 255));
    pg.background(baseColor);

    int numColors = 4;
    for (int i=0; i&lt;numColors; i++)
    {
      addColor();
    }

    pg.endDraw();

    for (int i=0; i&lt;w; i++)
    {
      allColorsNew[i] = pg.get(i, 0);
    }
  }

  void addColor()
  {
    color c = color(random(255), random(satFloor, 255), random(brightFloor, 255));
    float pos = random(w);
    float size = w/4;

    for (int i=0; i&lt;w; i++)
    {
      float ratio = 0;
      float d = abs(i-pos);
      if (d &lt; size)
      {
        ratio = 1.0 - (d/size);
      }
      pg.fill(hue(c), saturation(c), brightness(c), (ratio)*255);
      pg.rect(i, 0, 1, 1);
    }
  }

  void draw()
  {
    image(pg, 0, height/2, width, 10);
  }

  color getColor(float _ratio)
  {
    float ratio = constrain(_ratio, 0, 1);
    int index = floor((w-1) * _ratio);
    return allColorsCurrent[index];
  }
}

class Part
{
  float x, y, z;
  float rx, ry, rz;
  float vrx, vry, vrz;
  float colorRatio;

  float osc1, osc2, osc3;

  float scaleMod = 0.001;
  float noiseMod = 0.002;
  float rotMod = 3;
  float speedMod = 0.25;
  float colorSpeed = 0.003;
  float colorTime = 0;
  float boxW = 300;
  float boxH = 300;
  float boxD = 300;

  float tscaleMod = scaleMod;
  float tnoiseMod = noiseMod;
  float trotMod = rotMod;
  float tspeedMod = speedMod;
  float tcolorSpeed = colorSpeed;
  float tboxW = boxW;
  float tboxH = boxH;
  float tboxD = boxD;

  Part(float _x, float _y, float _z)
  {
    x = _x;
    y = _y;
    z = _z;
  }

  void update()
  {
    updateInputValues();
    updateProperties();
    if (!isPaused) 
    {
      updateColor();
      move();
    }
    render();
  }

  void updateInputValues()
  {
    if (edit[1]) tnoiseMod = getValue(tnoiseMod, -0.01, 0.01);
    if (edit[2]) tcolorSpeed = getValue(tcolorSpeed, -0.02, 0.02);

    if (edit[3]) tscaleMod = getValue(tscaleMod, -0.02, 0.02);
    if (edit[4]) trotMod = getValue(trotMod, -3, 3);
    if (edit[5]) tspeedMod = getValue(tspeedMod, -2, 2);

    if (edit[6]) tboxW = tboxH = tboxD = getValue(tboxW, 0, 800);
    if (edit[7]) tboxW = getValue(tboxW, 0, 800);
    if (edit[8]) tboxH = getValue(tboxH, 0, 800);
    if (edit[9]) tboxD = getValue(tboxD, 0, 800);
  }

  void updateProperties()
  {
    float transMod = 0.1;
    scaleMod += (tscaleMod - scaleMod) * transMod;
    noiseMod += (tnoiseMod - noiseMod) * transMod;
    rotMod += (trotMod - rotMod) * transMod;
    speedMod += (tspeedMod - speedMod) * transMod;
    colorSpeed += (tcolorSpeed - colorSpeed) * transMod;
    boxW += (tboxW - boxW) * transMod;
    boxH += (tboxH - boxH) * transMod;
    boxD += (tboxD - boxD) * transMod;
  }

  void updateColor()
  {
    colorTime += colorSpeed;

    float n = noise(x*noiseMod, y*noiseMod, colorTime);
    n = map(n, 0.3, 0.7, 0, 1);
    n = constrain(n, 0, 1); 
    colorRatio = n;
  }

  void move()
  {
    osc1 += 0.01 * speedMod;
    osc2 += 0.007 * speedMod;
    osc3 += 0.003 * speedMod;

    rx = sin(osc1 + x*scaleMod) * rotMod;
    ry = sin(osc2 + y*scaleMod) * rotMod;
    rz = sin(osc3 + (x+z)*scaleMod*0.1) * rotMod;
  }

  void render()
  { 
    pushMatrix();
    translate(x, y, z);
    rotateY(ry);
    rotateX(rx);
    rotateZ(rz);
    fill(g.getColor(colorRatio));
    box(boxW, boxH, boxD);
    popMatrix();
  }

  float getValue(float value, float lower, float upper)
  {
    float v = value;
    v += (map(mouseX, 0, width, lower, upper) - value) * 0.3;
    return v;
  }
}</pre>
</div>
]]></content:encoded>
			<wfw:commentRss>http://beautifulprogramming.com/mechanica-oceanus/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Orientalem Murum</title>
		<link>http://beautifulprogramming.com/orientalem-murum/</link>
		<comments>http://beautifulprogramming.com/orientalem-murum/#comments</comments>
		<pubDate>Thu, 07 Jan 2016 02:21:43 +0000</pubDate>
		<dc:creator>colordodge</dc:creator>
				<category><![CDATA[Uncategorized]]></category>

		<guid isPermaLink="false">http://beautifulprogramming.com/?p=425</guid>
		<description><![CDATA[Click to randomize. Press &#8220;SPACEBAR&#8221; to pause. Press &#8220;A&#8221; to toggle autoplay. Press &#8220;L&#8221; to change line size. Press &#8220;S&#8221; to save a screenshot. This sketch was made with Processing 2 in Javascript mode. &#160;    [crayon-5c9921e4e431b934067852/]]]></description>
				<content:encoded><![CDATA[<canvas datasrc="http://beautifulprogramming.com/wp-content/uploads/OrientalemMurum.pde"></canvas>
<p>Click to randomize. Press &#8220;SPACEBAR&#8221; to pause. Press &#8220;A&#8221; to toggle autoplay. Press &#8220;L&#8221; to change line size. Press &#8220;S&#8221; to save a screenshot.</p>
<p>This sketch was made with Processing 2 in Javascript mode.</p>
<p>&nbsp;</p>
<div id="gallery"><a href="http://beautifulprogramming.com/wp-content/uploads/2016/01/OrientalemMurum7.png"><img class="alignnone size-full wp-image-432" alt="OrientalemMurum7" src="http://beautifulprogramming.com/wp-content/uploads/2016/01/OrientalemMurum7.png" width="940" height="540" /></a> <a href="http://beautifulprogramming.com/wp-content/uploads/2016/01/OrientalemMurum9.png"><img class="alignnone size-full wp-image-434" alt="OrientalemMurum9" src="http://beautifulprogramming.com/wp-content/uploads/2016/01/OrientalemMurum9.png" width="940" height="540" /></a> <a href="http://beautifulprogramming.com/wp-content/uploads/2016/01/OrientalemMurum6.png"><img class="alignnone size-full wp-image-431" alt="OrientalemMurum6" src="http://beautifulprogramming.com/wp-content/uploads/2016/01/OrientalemMurum6.png" width="940" height="540" /></a><a href="http://beautifulprogramming.com/wp-content/uploads/2016/01/OrientalemMurum8.png"><img class="alignnone size-full wp-image-433" alt="OrientalemMurum8" src="http://beautifulprogramming.com/wp-content/uploads/2016/01/OrientalemMurum8.png" width="940" height="540" /></a> <a href="http://beautifulprogramming.com/wp-content/uploads/2016/01/OrientalemMurum10.png"><img class="alignnone size-full wp-image-438" alt="OrientalemMurum10" src="http://beautifulprogramming.com/wp-content/uploads/2016/01/OrientalemMurum10.png" width="940" height="540" /></a> <a href="http://beautifulprogramming.com/wp-content/uploads/2016/01/OrientalemMurum2.png"><img class="alignnone size-full wp-image-427" alt="OrientalemMurum2" src="http://beautifulprogramming.com/wp-content/uploads/2016/01/OrientalemMurum2.png" width="940" height="540" /></a><a href="http://beautifulprogramming.com/wp-content/uploads/2016/01/OrientalemMurum3.png"><img class="alignnone size-full wp-image-428" alt="OrientalemMurum3" src="http://beautifulprogramming.com/wp-content/uploads/2016/01/OrientalemMurum3.png" width="940" height="540" /></a> <a href="http://beautifulprogramming.com/wp-content/uploads/2016/01/OrientalemMurum1.png"><img class="alignnone size-full wp-image-426" alt="OrientalemMurum1" src="http://beautifulprogramming.com/wp-content/uploads/2016/01/OrientalemMurum1.png" width="940" height="540" /></a> <a href="http://beautifulprogramming.com/wp-content/uploads/2016/01/OrientalemMurum4.png"><img class="alignnone size-full wp-image-429" alt="OrientalemMurum4" src="http://beautifulprogramming.com/wp-content/uploads/2016/01/OrientalemMurum4.png" width="940" height="540" /></a></div>
<div></div>
<div></div>
<div>
<pre class="crayon-plain-tag">Part part;
Gradient g;
float count = 1;
int timeStep = 0;

float osc = 0;
float gridMod = 1.0;

boolean isPaused = false;
boolean autoPlay = true;
boolean bigLine = false;

void setup()
{
  size(940, 540);
  colorMode(HSB);
  background(255);
  rectMode(CENTER);
  init();
}

void init()
{
  if (random(10) &gt; 5) bigLine = true;
  else bigLine = false;

  timeStep = 0;
  gridMod = random(0.4, 1.2);
  g = new Gradient();
  background(0);
  part = new Part(0, 0);
}

void mousePressed()
{
  init();
}

void draw()
{
  if (autoPlay) if (timeStep % 2000 == 0) init();
  if (!isPaused) update();
}

void update()
{
  timeStep++;

  osc += 0.01;
  float ratio = map(sin(osc), -1, 1, 0, 1);

  fill(g.getColorAtRatio(ratio));
  noStroke();

  int count = 0;

  float xRes = 15*gridMod;
  float yRes = 10*gridMod;

  float w = width * 2.0;
  float h = height * 2.0;

  for (int i=-width/2; i&lt;=w+w/10; i+=w/xRes)
  {
    count++;
    for (int j=-height/2; j&lt;=h+h/10; j+=h/yRes)
    {
      pushMatrix();

      float offset = 0;
      if (count % 2 == 0) offset = h/yRes/2;

      translate(floor(i), floor(j+offset));

      drawRect(part.x, part.y);
      drawRect(-part.x, part.y);
      drawRect(part.x, -part.y);
      drawRect(-part.x, -part.y);

//      renderRadial(part.x, part.y);

      popMatrix();
    }
  }

  part.update();
}

void renderRadial(float x, float y)
{
  int numAxis = 4;
  float step = 360 / numAxis;
  step = radians(step);

  for (int i=0; i&lt;numAxis; i++)
  {
    drawRect(x, y);
    rotate(step);
  }
}

void drawRect(float _x, float _y)
{
  float x = _x % width;
  float y = _y % height;

  if (bigLine) rect(x, y, 20, 1);
  else rect(x, y, 1, 1);
}

void keyPressed()
{
  if (key == ' ') isPaused = !isPaused;
  if (key == 's') save();
  if (key == 'a') autoPlay = !autoPlay;
  if (key == 'l') bigLine = !bigLine;
}

class Gradient
{
  PGraphics pg;
  float w = 300;
  color[] allColorsNew;
  color[] allColorsCurrent;

  int trans = w;

  int brightnessFloor = 0;

  Gradient()
  {
    allColorsNew = new color[w];
    allColorsCurrent = new color[w];

    createPalette();

    for (int i=0; i&lt;=w; i++)
    {
      allColorsCurrent[i] = allColorsNew[i];
    }
  }

  void update()
  {
    for (int i=0; i&lt;5; i++)
    {
      if (trans &lt;= w)
      {
        allColorsCurrent[trans] = allColorsNew[trans];
      }
      trans++;
    }
  }

  void changeColors()
  {
    trans = 0;
//    brightnessFloor = random(255);
    createPalette();
  }

  void createPalette()
  {
    pg = createGraphics(w, 1);
    pg.colorMode(HSB);
    pg.beginDraw();

    pg.noStroke();

    color baseColor = color(random(255), random(255, 255), random(255, 255));
    pg.background(baseColor);

    int numColors = 6;
    for (int i=0; i&lt;numColors; i++)
    {
      addColor();
    }

    pg.endDraw();

    for (int i=0; i&lt;w; i++)
    {
      allColorsNew[i] = pg.get(i, 0);
    }
  }

  void addColor()
  {
    color c = color(random(255), random(0, 255), random(brightnessFloor, 255));
    float pos = random(w);
    float size = w/4;

    for (int i=0; i&lt;w; i++)
    {
      float ratio = 0;
      float d = abs(i-pos);
      if (d &lt; size)
      {
        ratio = 1.0 - (d/size);
      }
      pg.fill(hue(c), saturation(c), brightness(c), (ratio)*255);
      pg.rect(i, 0, 1, 1);
    }
  }

  void draw()
  {
    image(pg, 0, height/2, width, 10);
  }

  color getColorAtRatio(float _ratio)
  {
    int index = floor(w * _ratio);
    return allColorsCurrent[index];
  }
}

class Part
{
  float x;
  float y;
  float dir = 0;
  int life = 0;
  int dirSwitch = 0;

  Part(float _x, float _y)
  {
    x = _x;
    y = _y;
    dir = floor(random(0, 3));
    changeDirections();
  }

  void update()
  {
    life++;
    checkDirection();
    move();
  }

  void checkDirection()
  { 
    if (life % dirSwitch == 0) 
    {
      changeDirections();
    }
  }

  void changeDirections()
  {
    life = 0;
    dirSwitch = ceil(random(0, 4)) * 10;

    float trigger = random(100);

    switch(dir)
    {
    case 0:
    case 1:
      if (trigger &gt; 50) dir = 2;
      else dir = 3;
      break;

    case 2:
    case 3:
      if (trigger &gt; 50) dir = 0;
      else dir = 1;
      break;
    }
  }

  void move()
  {
    switch(dir)
    {
    case 0:
      x++;
      break;

    case 1:
      x--;
      break;

    case 2:
      y++;
      break;

    case 3:
      y--;
      break;
    }
  }

  void wrap()
  {
    if (x &gt; width) x = 0;
    if (x &lt; 0) x = width;
    if (y &gt; height) y = 0;
    if (y &lt; 0) y = height;
  }
}</pre>
</div>
]]></content:encoded>
			<wfw:commentRss>http://beautifulprogramming.com/orientalem-murum/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Recessus Aequoris</title>
		<link>http://beautifulprogramming.com/recessus-aequoris/</link>
		<comments>http://beautifulprogramming.com/recessus-aequoris/#comments</comments>
		<pubDate>Sun, 13 Dec 2015 17:31:30 +0000</pubDate>
		<dc:creator>colordodge</dc:creator>
				<category><![CDATA[Uncategorized]]></category>

		<guid isPermaLink="false">http://beautifulprogramming.com/?p=398</guid>
		<description><![CDATA[Click to cycle through 4 animation modes: oscillating waves, mouse waves, perlin noise, and mouse bubble. Press &#8220;C&#8221; to change colors. Press &#8220;A&#8221; to toggle auto color switching. Press &#8220;P&#8221; to pause. Press &#8220;X&#8221; to change the color axis. Press &#8220;L&#8221; to change the line color between black, gray, and white. This sketch was made [&#8230;]]]></description>
				<content:encoded><![CDATA[<canvas datasrc="http://beautifulprogramming.com/wp-content/uploads/RecessusAequoris.pde"></canvas>
<p>Click to cycle through 4 animation modes: oscillating waves, mouse waves, perlin noise, and mouse bubble. Press &#8220;C&#8221; to change colors. Press &#8220;A&#8221; to toggle auto color switching. Press &#8220;P&#8221; to pause. Press &#8220;X&#8221; to change the color axis. Press &#8220;L&#8221; to change the line color between black, gray, and white.</p>
<p>This sketch was made with Processing 2 in Javascript mode.</p>
<div id="gallery"><a href="http://beautifulprogramming.com/wp-content/uploads/2015/12/RecessusAequoris1.jpg"><img class="alignnone size-full wp-image-399" alt="RecessusAequoris1" src="http://beautifulprogramming.com/wp-content/uploads/2015/12/RecessusAequoris1.jpg" width="940" height="540" /></a> <a href="http://beautifulprogramming.com/wp-content/uploads/2015/12/RecessusAequoris2.jpg"><img class="alignnone size-full wp-image-400" alt="RecessusAequoris2" src="http://beautifulprogramming.com/wp-content/uploads/2015/12/RecessusAequoris2.jpg" width="940" height="540" /></a> <a href="http://beautifulprogramming.com/wp-content/uploads/2015/12/RecessusAequoris3.jpg"><img class="alignnone size-full wp-image-401" alt="RecessusAequoris3" src="http://beautifulprogramming.com/wp-content/uploads/2015/12/RecessusAequoris3.jpg" width="940" height="540" /></a><a href="http://beautifulprogramming.com/wp-content/uploads/2015/12/RecessusAequoris4.jpg"><img class="alignnone size-full wp-image-402" alt="RecessusAequoris4" src="http://beautifulprogramming.com/wp-content/uploads/2015/12/RecessusAequoris4.jpg" width="940" height="540" /></a> <a href="http://beautifulprogramming.com/wp-content/uploads/2015/12/RecessusAequoris5.jpg"><img class="alignnone size-full wp-image-403" alt="RecessusAequoris5" src="http://beautifulprogramming.com/wp-content/uploads/2015/12/RecessusAequoris5.jpg" width="940" height="540" /></a> <a href="http://beautifulprogramming.com/wp-content/uploads/2015/12/RecessusAequoris6.jpg"><img class="alignnone size-full wp-image-404" alt="RecessusAequoris6" src="http://beautifulprogramming.com/wp-content/uploads/2015/12/RecessusAequoris6.jpg" width="940" height="540" /></a><a href="http://beautifulprogramming.com/wp-content/uploads/2015/12/RecessusAequoris7.jpg"><img class="alignnone size-full wp-image-405" alt="RecessusAequoris7" src="http://beautifulprogramming.com/wp-content/uploads/2015/12/RecessusAequoris7.jpg" width="940" height="540" /></a> <a href="http://beautifulprogramming.com/wp-content/uploads/2015/12/RecessusAequoris8.jpg"><img class="alignnone size-full wp-image-406" alt="RecessusAequoris8" src="http://beautifulprogramming.com/wp-content/uploads/2015/12/RecessusAequoris8.jpg" width="940" height="540" /></a> <a href="http://beautifulprogramming.com/wp-content/uploads/2015/12/RecessusAequoris9.jpg"><img class="alignnone size-full wp-image-407" alt="RecessusAequoris9" src="http://beautifulprogramming.com/wp-content/uploads/2015/12/RecessusAequoris9.jpg" width="940" height="540" /></a></div>
<div></div>
<div></div>
<div>
<pre class="crayon-plain-tag">Part[][] allParts;
int xCount = 20;
int yCount = 20;
int numPoints;

Gradient g;

boolean mouseIsMoving;
boolean horzColors = false;
boolean autoSwitchColors = true;
boolean isPaused = false;
int lineColor = 0;

int mode = 0;
int numModes = 4;

void setup()
{
  size(940, 540);
  colorMode(HSB);
  background(0);
  createParts();

  g = new Gradient();
}

void draw()
{
  if (mouseX-pmouseX == 0 &amp;&amp; mouseY-pmouseY == 0) mouseIsMoving = false; 
  else mouseIsMoving = true;

  g.update();

  if (frameCount % 400 == 0 &amp;&amp; autoSwitchColors &amp;&amp; !isPaused) changeColors();

  background(0);

  if (!isPaused) updateParts();

  strokeWeight(0.3);
  stroke(lineColor);

  if (horzColors) drawMeshHorz();
  else drawMeshVert();
}

void changeColors()
{
  g.changeColors();
}

void createParts()
{
  numPoints = (xCount+1) * (yCount+1);
  allParts = new Part[xCount+1][yCount+1];

  float xSpacing = width/xCount;
  float ySpacing = height/yCount;

  for (int i=0; i&lt;=xCount; i++)
  {
    for (int j=0; j&lt;=yCount; j++)
    {
      Part part = new Part(i*xSpacing, j*ySpacing);
      part.i = i;
      part.j = j;
      allParts[i][j] = part;
    }
  }
}

void updateParts()
{
  for (int i=1; i&lt;xCount; i++)
  {
    for (int j=1; j&lt;yCount; j++)
    {
      Part part = allParts[i][j];
      part.update();
    }
  }
}

void drawMeshHorz()
{  
  float count = 0;
  float ratio;
  Part part1;
  Part part2;

  for (int i=0; i&lt;xCount; i++)
  {
    beginShape(TRIANGLE_STRIP);
    for (int j=0; j&lt;=yCount; j++)
    {
      count++;
      part1 = allParts[i][j];
      part2 = allParts[i+1][j];
      ratio = count/numPoints;
      fill(g.getColorAtRatio(ratio));
      vertex(part1.x, part1.y, 0);
      vertex(part2.x, part2.y, 0);
    }
    endShape();
  }
}

void drawMeshVert()
{  
  float count = 0;
  float ratio;
  Part part1;
  Part part2;

  for (int j=0; j&lt;yCount; j++)
  {
    beginShape(TRIANGLE_STRIP);
    for (int i=0; i&lt;=xCount; i++)
    {
      count++;
      part1 = allParts[i][j];
      part2 = allParts[i][j+1];
      ratio = count/numPoints;
      fill(g.getColorAtRatio(ratio)); 
      vertex(part1.x, part1.y, 0);
      vertex(part2.x, part2.y, 0);
    }
    endShape();
  }
}

void mousePressed()
{
  mode++;
  if (mode &gt;= numModes) mode = 0;
}

void keyPressed()
{
  if (key == 'x') horzColors = !horzColors;
  if (key == 'a') autoSwitchColors = !autoSwitchColors;
  if (key == 'p') isPaused = !isPaused;
  if (key == 'c') changeColors();

  if (key == 'l')
  {
     switch (lineColor)
    {
      case 0:
      lineColor = 126;
      break;

      case 126:
      lineColor = 255;
      break;

      case 255:
      lineColor = 0;
      break;

       default:
       break;
    } 
  }
}

class Gradient
{
  PGraphics pg;
  float w = 300;
  color[] allColorsNew;
  color[] allColorsCurrent;

  int trans = w;

  int brightnessFloor = 100;

  Gradient()
  {
    allColorsNew = new color[w];
    allColorsCurrent = new color[w];

    createPalette();

    for (int i=0; i&lt;=w; i++)
    {
      allColorsCurrent[i] = allColorsNew[i];
    }
  }

  void update()
  {
    for (int i=0; i&lt;5; i++)
    {
      if (trans &lt;= w)
      {
        allColorsCurrent[trans] = allColorsNew[trans];
      }
      trans++;
    }
  }

  void changeColors()
  {
    trans = 0;
    brightnessFloor = random(255);
    createPalette();
  }

  void createPalette()
  {
    pg = createGraphics(w, 1);
    pg.colorMode(HSB);
    pg.beginDraw();

    pg.noStroke();

    color baseColor = color(random(255), random(255, 255), random(255, 255));
    pg.background(baseColor);

    int numColors = 6;
    for (int i=0; i&lt;numColors; i++)
    {
      addColor();
    }

    pg.endDraw();

    for (int i=0; i&lt;w; i++)
    {
      allColorsNew[i] = pg.get(i, 0);
    }
  }

  void addColor()
  {
    color c = color(random(255), random(0, 255), random(brightnessFloor, 255));
    float pos = random(w);
    float size = w/4;

    for (int i=0; i&lt;w; i++)
    {
      float ratio = 0;
      float d = abs(i-pos);
      if (d &lt; size)
      {
        ratio = 1.0 - (d/size);
      }
      pg.fill(hue(c), saturation(c), brightness(c), (ratio)*255);
      pg.rect(i, 0, 1, 1);
    }
  }

  void draw()
  {
    image(pg, 0, height/2, width, 10);
  }

  color getColorAtRatio(float _ratio)
  {
    int index = floor(w * _ratio);
    return allColorsCurrent[index];
  }
}

class Part
{
  float x;
  float y;
  float orgX;
  float orgY;
  float vx;
  float vy;
  int i;
  int j;

  float osc = 10;
  float osc2 = 20;
  float osc3 = 30;
  float osc4 = 40;
  float osc5 = 50;
  float osc6 = 60;

  Part(float _x, float _y)
  {
    orgX = x = _x;
    orgY = y = _y;
  }

  void update()
  {
    switch (mode)
    {
    case 0: 
      oscilate();
      break;

    case 1:
      mouseMove();
      break;

    case 2:
      noiseMove();
      break;

    case 3:
      mouseMove2();
      break;

    default:
      break;
    }
  }

  void oscilate()
  {
    osc += 0.03;
    osc2 += 0.051;
    osc3 += 0.0011;
    osc4 += 0.0013;
    osc5 += 0.0021;
    osc6 += 0.0034;

    float mod1 = sin(osc3) * 100;
    float mod2 = sin(osc4) * 100;  

    float mod3 = map(sin(osc5), -1, 1, 0.3, 2.0);
    float mod4 = map(sin(osc6), -1, 1, 0.3, 2.0);

    float newX = orgX + cos(osc + j*mod3) * mod1;
    float newY = orgY + sin(osc2 + i*mod4) * mod2;

    x += (newX - x) * 0.3;
    y += (newY - y) * 0.3;
  }

  void noiseMove()
  {
    float noiseMod = map(mouseX, 0, width, 0.001, 0.01);
    float n = noise(orgX*noiseMod, orgY*noiseMod, frameCount*0.003);
    n = map(n, 0, 1, -1, 1);

    float n2 = noise(orgX*noiseMod, orgY*noiseMod, (frameCount+10000)*0.003);
    n2 = map(n2, 0, 1, -1, 1);

    float h = map(mouseY, 0, height, 50, 400);

    x += ((orgX + n * h) - x) * 0.3;
    y += ((orgY + n2 * h) - y) * 0.3;
  }

  void mouseMove()
  {
    if (mouseIsMoving)
    {
      float d = dist(mouseX, mouseY, orgX, orgY); 
      float range = 200;
      float mag = range - d;
      if (d &lt; range)
      {
        vx -= mag * 0.005;
        vy -= mag * 0.005;
      }
    }

    vx += (orgX - x) * 0.01;
    vy += (orgY - y) * 0.01;

    vx *= 0.99;
    vy *= 0.99;

    x += vx;
    y += vy;
  }

  void mouseMove2()
  {
    float d = dist(mouseX, mouseY, orgX, orgY); 
    float range = 150;
    float mag = range - d;
    if (d &lt; range)
    {
      vx -= (mouseX - orgX) * mag/range * 0.03;
      vy -= (mouseY - orgY) * mag/range * 0.03;
    }

    vx += (orgX - x) * 0.01;
    vy += (orgY - y) * 0.01;

    vx *= 0.95;
    vy *= 0.95;

    x += vx;
    y += vy;
  }
}</pre>
</div>
]]></content:encoded>
			<wfw:commentRss>http://beautifulprogramming.com/recessus-aequoris/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Lissajous Oscillation</title>
		<link>http://beautifulprogramming.com/lissajous-oscillation/</link>
		<comments>http://beautifulprogramming.com/lissajous-oscillation/#comments</comments>
		<pubDate>Mon, 25 May 2015 18:49:07 +0000</pubDate>
		<dc:creator>colordodge</dc:creator>
				<category><![CDATA[Uncategorized]]></category>

		<guid isPermaLink="false">http://beautifulprogramming.com/?p=331</guid>
		<description><![CDATA[Click to randomize. Press &#8220;P&#8221; to toggle background painting. Press the spacebar to pause. Press &#8220;A&#8221; to toggle auto-randomizing. Press &#8220;C&#8221; to randomize colors. Press &#8220;S&#8221; to randomize the shape. Press &#8220;X&#8221; to randomize the number of axis. Press &#8220;+&#8221; and &#8220;-&#8221; to change the number of axis. Press &#8220;B&#8221; to clear the background. Press &#8220;D&#8221; [&#8230;]]]></description>
				<content:encoded><![CDATA[<canvas datasrc="http://beautifulprogramming.com/wp-content/uploads/LissajousOscillation.pde"></canvas>
<p>Click to randomize. Press &#8220;P&#8221; to toggle background painting. Press the spacebar to pause. Press &#8220;A&#8221; to toggle auto-randomizing. Press &#8220;C&#8221; to randomize colors. Press &#8220;S&#8221; to randomize the shape. Press &#8220;X&#8221; to randomize the number of axis. Press &#8220;+&#8221; and &#8220;-&#8221; to change the number of axis. Press &#8220;B&#8221; to clear the background. Press &#8220;D&#8221; to change the amount of decay when the background isn&#8217;t painting. Press &#8220;F&#8221; to show the frame rate.</p>
<p>This sketch was made with Processing 2 in Javascript mode.</p>
<div id="gallery"><a href="http://beautifulprogramming.com/wp-content/uploads/2015/05/Lissajous1.jpg"><img class="alignnone size-full wp-image-330" alt="Lissajous1" src="http://beautifulprogramming.com/wp-content/uploads/2015/05/Lissajous1.jpg" width="940" height="540" /></a> <a href="http://beautifulprogramming.com/wp-content/uploads/2015/05/Lissajous2.jpg"><img class="alignnone size-full wp-image-329" alt="Lissajous2" src="http://beautifulprogramming.com/wp-content/uploads/2015/05/Lissajous2.jpg" width="940" height="540" /></a> <a href="http://beautifulprogramming.com/wp-content/uploads/2015/05/Lissajous3.jpg"><img class="alignnone size-full wp-image-328" alt="Lissajous3" src="http://beautifulprogramming.com/wp-content/uploads/2015/05/Lissajous3.jpg" width="940" height="540" /></a><a href="http://beautifulprogramming.com/wp-content/uploads/2015/05/Lissajous4.jpg"><img class="alignnone size-full wp-image-327" alt="Lissajous4" src="http://beautifulprogramming.com/wp-content/uploads/2015/05/Lissajous4.jpg" width="940" height="540" /></a> <a href="http://beautifulprogramming.com/wp-content/uploads/2015/05/Lissajous5.jpg"><img class="alignnone size-full wp-image-326" alt="Lissajous5" src="http://beautifulprogramming.com/wp-content/uploads/2015/05/Lissajous5.jpg" width="940" height="540" /></a> <a href="http://beautifulprogramming.com/wp-content/uploads/2015/05/Lissajous6.jpg"><img class="alignnone size-full wp-image-325" alt="Lissajous6" src="http://beautifulprogramming.com/wp-content/uploads/2015/05/Lissajous6.jpg" width="940" height="540" /></a><a href="http://beautifulprogramming.com/wp-content/uploads/2015/05/Lissajous7.jpg"><img class="alignnone size-full wp-image-324" alt="Lissajous7" src="http://beautifulprogramming.com/wp-content/uploads/2015/05/Lissajous7.jpg" width="940" height="540" /></a> <a href="http://beautifulprogramming.com/wp-content/uploads/2015/05/Lissajous8.jpg"><img class="alignnone size-full wp-image-323" alt="Lissajous8" src="http://beautifulprogramming.com/wp-content/uploads/2015/05/Lissajous8.jpg" width="940" height="540" /></a> <a href="http://beautifulprogramming.com/wp-content/uploads/2015/05/Lissajous9.jpg"><img class="alignnone size-full wp-image-322" alt="Lissajous9" src="http://beautifulprogramming.com/wp-content/uploads/2015/05/Lissajous9.jpg" width="940" height="540" /></a></div>
<div></div>
<div>
<pre class="crayon-plain-tag">PFont font;
Part part;
int time = 1;
int r1, r2, r3, r4;
int numAxis = 1;
color bgColor;
boolean showsFPS = false;
boolean doesPaint = true;
boolean autoplay = true;
boolean isPaused = false;
ColorPalette cp;
float spread = 5;
float osc1, osc2;

void setup()
{
  size(940, 540);
  colorMode(HSB);
  background(0);
  strokeWeight(0.5);
  font = createFont("Helvetica", 24);
  bgColor = color(0, 10);
  randomize();
  part = new Part(0, 0);
}

void draw()
{ 
  if (!isPaused)
  {
    if (!doesPaint)
    {
      fill(bgColor);
      noStroke();
      rect(0, 0, width, height);
    }

    if (showsFPS) displayFPS();

    if (autoplay)
    {
      time++;
      if (time &gt; 700) randomize();
    }

    translate(width/2, height/2);
    noFill();

    osc1 += 0.0011;
    osc2 += 0.0013;

    r1 = abs(sin(osc1) * 0.009) + 0.001;
    r2 = abs(sin(osc2) * 0.009) + 0.001;

    part.draw();
  }
}

void randomize()
{
  time = 1;
  if (doesPaint) background(0);
  randomizeColor();
  randomizeShape();
  randomizeAxis();
}

void randomizeShape()
{
  if (doesPaint) background(0);
  int bottom = 0.001;
  int top = 0.01;
  r1 = random(bottom, top); 
  r2 = random(bottom, top); 
  r3 = random(bottom, top); 
  r4 = random(bottom, top);
  spread = random(1, 20);
}

void randomizeAxis()
{
  if (doesPaint) background(0);
  numAxis = round(random(2, 30));
}

void randomizeColor()
{
  cp = new ColorPalette();
}

void mouseClicked()
{
  randomize();
  autoplay = false;
}

void keyPressed()
{
  if (key == 'f') showsFPS = !showsFPS;
  if (key == 'd')
  {
    float a = alpha(bgColor);
    if (a == 10) a = 40;
    else a = 10;
    bgColor = color(0, a);
  }

  if (key == 'p') doesPaint = !doesPaint;
  if (key == 'a') autoplay = !autoplay;
  if (key == ' ') isPaused = !isPaused;
  if (key == 'c') randomizeColor();
  if (key == 's') randomizeShape();
  if (key == 'x') randomizeAxis();
  if (key == 'b') background(0);

  if (key == '=') 
  {
    numAxis++;
    if (doesPaint) background(0);
  }
  if (key == '-') 
  {
    numAxis--;
    if (doesPaint) background(0);
  }
  if (numAxis &lt; 1) numAxis = 1;
  if (numAxis &gt; 30) numAxis = 30;
}

void displayFPS()
{
  textFont(font, 18);
  fill(255);
  String output = "fps=";
  output += (int) frameRate;
  text(output, 10, 30);
}

class ColorPalette
{
  PGraphics pg;
  float w = 300;
  color[] allColors;

  ColorPalette()
  {
    createPalette();

    allColors = new color[w];
    for (int i=0; i&lt;w; i++)
    {
      allColors[i] = pg.get(i, 0);
    }
  }

  color getColorAtRatio(float _ratio)
  {
    int index = floor(w * _ratio);
    return allColors[index];
  }

  void createPalette()
  {
    pg = createGraphics(w, 1);
    pg.colorMode(HSB);
    pg.beginDraw();

    pg.noStroke();

    color baseColor = color(random(255), random(255, 255), random(255, 255));
    pg.background(baseColor);

    int numColors = 6;
    for (int i=0; i&lt;numColors; i++)
    {
      addColor();
    }

    pg.endDraw();
  }

  void addColor()
  {
    color c = color(random(255), random(0, 255), random(150, 255));
    float pos = random(w);
    float size = w/4;

    for (int i=0; i&lt;w; i++)
    {
      float ratio = 0;
      float d = abs(i-pos);
      if (d &lt; size)
      {
        ratio = 1.0 - (d/size);
      }
      pg.fill(hue(c), saturation(c), brightness(c), (ratio)*255);
      pg.rect(i, 0, 1, 1);
    }
  }

  void draw()
  {
    image(pg, 0, height/2, width, 10);
  }
}

class Part
{
  PVector pos[];
  int trailLength = 100;
  float speed = 0.03;
  float o1, o2, o3, o4;

  Part(float _x, float _y)
  {
    pos = new PVector[trailLength];

    for (int i=0; i&lt;trailLength; i++)
    {
      pos[i] = new PVector(0, 0);
    }
  }

  void draw()
  {
    float step = radians(360/numAxis);
    float x, y;

    for (int i=0; i&lt;trailLength; i++)
    {
      o1 += r1*speed;
      o2 += r2*speed;
      o3 += r3*speed;
      o4 += r4*speed;

      x = sin(o1 + i*spread*r1) * 250;
      y = cos(o2 + i*spread*r2) * 100;
      x += sin(o3 + i*spread*r3) * 250;
      y += cos(o4 + i*spread*r4) * 100;
      pos[i].x += (x - pos[i].x) * 0.1;
      pos[i].y += (y - pos[i].y) * 0.1;
    }

    for (int i=1; i&lt;trailLength; i++)
    {  
      stroke(cp.getColorAtRatio(i/trailLength));

      pushMatrix();
      for (int j=0; j&lt;numAxis; j++)
      {
        rotate(step);
        line(pos[i].x, pos[i].y, pos[i-1].x, pos[i-1].y);
      }
      popMatrix();
    }
  }
}</pre>
</div>
]]></content:encoded>
			<wfw:commentRss>http://beautifulprogramming.com/lissajous-oscillation/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Infinite Arboretum</title>
		<link>http://beautifulprogramming.com/infinite-arboretum/</link>
		<comments>http://beautifulprogramming.com/infinite-arboretum/#comments</comments>
		<pubDate>Sun, 17 May 2015 23:37:41 +0000</pubDate>
		<dc:creator>colordodge</dc:creator>
				<category><![CDATA[Uncategorized]]></category>

		<guid isPermaLink="false">http://beautifulprogramming.com/?p=316</guid>
		<description><![CDATA[Click to generate a new random tree. Move the mouse left and right to push the tree. Press &#8220;A&#8221; to enable auto-play. Press &#8220;P&#8221; to enable background painting. Press &#8220;W&#8221; to toggle wind. Press &#8220;R&#8221; to regrow the current type of tree. Press &#8220;B&#8221; to randomize the background color. Press &#8220;C&#8221; to randomize the tree [&#8230;]]]></description>
				<content:encoded><![CDATA[<canvas datasrc="http://beautifulprogramming.com/wp-content/uploads/InfiniteArboretum.pde"></canvas>
<p>Click to generate a new random tree. Move the mouse left and right to push the tree. Press &#8220;A&#8221; to enable auto-play. Press &#8220;P&#8221; to enable background painting. Press &#8220;W&#8221; to toggle wind. Press &#8220;R&#8221; to regrow the current type of tree. Press &#8220;B&#8221; to randomize the background color. Press &#8220;C&#8221; to randomize the tree colors.</p>
<p>This sketch was made with Processing 2 in Javascript mode.</p>
<div id="gallery"><a href="http://beautifulprogramming.com/wp-content/uploads/2015/05/InfiniteArboretum1.jpg"><img class="alignnone size-full wp-image-315" alt="InfiniteArboretum1" src="http://beautifulprogramming.com/wp-content/uploads/2015/05/InfiniteArboretum1.jpg" width="940" height="540" /></a> <a href="http://beautifulprogramming.com/wp-content/uploads/2015/05/InfiniteArboretum15.jpg"><img class="alignnone size-full wp-image-389" alt="InfiniteArboretum15" src="http://beautifulprogramming.com/wp-content/uploads/2015/05/InfiniteArboretum15.jpg" width="940" height="540" /></a> <a href="http://beautifulprogramming.com/wp-content/uploads/2015/05/InfiniteArboretum2.jpg"><img class="alignnone size-full wp-image-388" alt="InfiniteArboretum2" src="http://beautifulprogramming.com/wp-content/uploads/2015/05/InfiniteArboretum2.jpg" width="940" height="540" /></a><a href="http://beautifulprogramming.com/wp-content/uploads/2015/05/InfiniteArboretum3.jpg"><img class="alignnone size-full wp-image-387" alt="InfiniteArboretum3" src="http://beautifulprogramming.com/wp-content/uploads/2015/05/InfiniteArboretum3.jpg" width="940" height="540" /></a> <a href="http://beautifulprogramming.com/wp-content/uploads/2015/05/InfiniteArboretum4.jpg"><img class="alignnone size-full wp-image-386" alt="InfiniteArboretum4" src="http://beautifulprogramming.com/wp-content/uploads/2015/05/InfiniteArboretum4.jpg" width="940" height="540" /></a> <a href="http://beautifulprogramming.com/wp-content/uploads/2015/05/InfiniteArboretum5.jpg"><img class="alignnone size-full wp-image-385" alt="InfiniteArboretum5" src="http://beautifulprogramming.com/wp-content/uploads/2015/05/InfiniteArboretum5.jpg" width="940" height="540" /></a><a href="http://beautifulprogramming.com/wp-content/uploads/2015/05/InfiniteArboretum6.jpg"><img class="alignnone size-full wp-image-384" alt="InfiniteArboretum6" src="http://beautifulprogramming.com/wp-content/uploads/2015/05/InfiniteArboretum6.jpg" width="940" height="540" /></a> <a href="http://beautifulprogramming.com/wp-content/uploads/2015/05/InfiniteArboretum12.jpg"><img class="alignnone size-full wp-image-378" alt="InfiniteArboretum12" src="http://beautifulprogramming.com/wp-content/uploads/2015/05/InfiniteArboretum12.jpg" width="940" height="540" /></a> <a href="http://beautifulprogramming.com/wp-content/uploads/2015/05/InfiniteArboretum11.jpg"><img class="alignnone size-full wp-image-379" alt="InfiniteArboretum11" src="http://beautifulprogramming.com/wp-content/uploads/2015/05/InfiniteArboretum11.jpg" width="940" height="540" /></a><a href="http://beautifulprogramming.com/wp-content/uploads/2015/05/InfiniteArboretum10.jpg"><img class="alignnone size-full wp-image-380" alt="InfiniteArboretum10" src="http://beautifulprogramming.com/wp-content/uploads/2015/05/InfiniteArboretum10.jpg" width="940" height="540" /></a> <a href="http://beautifulprogramming.com/wp-content/uploads/2015/05/InfiniteArboretum9.jpg"><img class="alignnone size-full wp-image-381" alt="InfiniteArboretum9" src="http://beautifulprogramming.com/wp-content/uploads/2015/05/InfiniteArboretum9.jpg" width="940" height="540" /></a> <a href="http://beautifulprogramming.com/wp-content/uploads/2015/05/InfiniteArboretum8.jpg"><img class="alignnone size-full wp-image-382" alt="InfiniteArboretum8" src="http://beautifulprogramming.com/wp-content/uploads/2015/05/InfiniteArboretum8.jpg" width="940" height="540" /></a><a href="http://beautifulprogramming.com/wp-content/uploads/2015/05/InfiniteArboretum7.jpg"><img class="alignnone size-full wp-image-383" alt="InfiniteArboretum7" src="http://beautifulprogramming.com/wp-content/uploads/2015/05/InfiniteArboretum7.jpg" width="940" height="540" /></a> <a href="http://beautifulprogramming.com/wp-content/uploads/2015/05/InfiniteArboretum13.jpg"><img class="alignnone size-full wp-image-377" alt="InfiniteArboretum13" src="http://beautifulprogramming.com/wp-content/uploads/2015/05/InfiniteArboretum13.jpg" width="940" height="540" /></a> <a href="http://beautifulprogramming.com/wp-content/uploads/2015/05/InfiniteArboretum14.jpg"><img class="alignnone size-full wp-image-376" alt="InfiniteArboretum14" src="http://beautifulprogramming.com/wp-content/uploads/2015/05/InfiniteArboretum14.jpg" width="940" height="540" /></a></div>
<div></div>
<div>
<pre class="crayon-plain-tag">boolean autoplay = false;
boolean showsFPS = false;
boolean clearsBackground = true;
boolean windEnabled = true;
PFont font;
float rotRange = 10;
float rotDecay = 1.1;
float sizeDecay = 0.7;
float lengthDecay = 0.91;
int levelMax = 8;
int leafLevel = 2;
float leafChance = 0.3;
float branchHue = 50;
float leafHue = 150;
float leafSat = 100;
float mouseWind = 0;
float mouseWindV = 0;
float startLength;
float startSize;
color trunkColor;
color bgColor;
int time = 0;
float lengthRand = 1.0;
float bloomWidthRatio = 0.6;
float bloomSizeAverage = 15;

float mDamp = 0.00002;
float wDamp = 0.003;
float mFriction = 0.98;

float flowerChance = 0.1;
color flowerColor;
float flowerWidth = 10;
float flowerHeight = 20;

Node node;

void setup()
{
  size(940, 540);
  colorMode(HSB);
  font = createFont("Helvetica", 24);
  ellipseMode(CENTER);

  randomize();
  reset();
}

void draw()
{
  if (autoplay)
  {
    time++;
    if (time &gt; 600)
    {
      time = 0;
      randomize();
      reset();
    }
  }

  float dx = mouseX - pmouseX;
  mouseWindV += dx * mDamp;
  mouseWindV += (0 - mouseWind) * wDamp;
  mouseWindV *= mFriction;
  mouseWind += mouseWindV;

  if (clearsBackground) background(bgColor);
  if (showsFPS) displayFPS();
  translate(width/2, height);
  node.draw();
}

void reset()
{
  background(bgColor);
  node = new Node(startLength, startSize, rotRange, 0);
}

void randomize()
{
  randomizeBackground();
  randomizeColor();
  rotRange = random(20, 60);
  rotDecay = random(0.9, 1.1);
  startLength = random(20, 80);
  startSize = random(3, 20);
  lengthRand = random(0.0, 0.2);
  leafChance = random(0.3, 0.9);
  sizeDecay = random(0.6, 0.7);
  lengthDecay = map(startLength, 20, 80, 1.1, 0.85); 
  leafLevel = random(0, 4);
  bloomWidthRatio = random(0.01, 0.9);
  bloomSizeAverage = random(10, 40);

  mDamp = 0.00002;
  wDamp = 0.005;
  mFriction = 0.96;

  flowerWidth = random(5, 15);
  flowerHeight = random(10, 30);
  flowerChance = 0.1;
}

void randomizeBackground()
{
    bgColor = color(random(255), random(0, 100), 255);
}

void randomizeColor()
{
  branchHue = random(0, 255);
  leafHue = random(0, 255);
  leafSat = random(0, 255);
  flowerColor = color(random(255), random(0, 255), 255);
  if (node) node.randomizeColor();
}

void displayFPS()
{
  textFont(font, 18);
  fill(150);
  String output = "fps=";
  output += (int) frameRate;
  text(output, 10, 30);
}

void keyPressed()
{
  if (key == 'f') showsFPS = !showsFPS;
  if (key == 'a') autoplay = !autoplay;
  if (key == 'p') clearsBackground = !clearsBackground;
  if (key == 'w') windEnabled = !windEnabled;
  if (key == 'r') reset();
  if (key == 'b') randomizeBackground();
  if (key == 'c') randomizeColor();
}

void mousePressed()
{
  time = 0;
  randomize();
  reset();
}
class Node
{
  float len;
  float size;
  float rot;
  int level;
  float s = 0;
  float windFactor = 1.0;
  boolean doesBloom;
  color branchColor;
  float bloomSize;
  color leafColor;
  float leafRot;
  float leafScale = 0.0;
  int leafDelay;
  boolean doesFlower;
  float flowerScale = 0.0;
  float flowerScaleT = 1.0;
  float flowerBright = 255;
  int flowerDelay;

  Node n1;
  Node n2;

  Node(float _len, float _size, float _rotRange, int _level)
  {
    len = _len * (1 + random(-lengthRand, lengthRand));
    size = _size;
    level = _level;
    rot = radians(random(-_rotRange, _rotRange));
    if (level &lt; leafLevel) rot *= 0.3;
    if (level == 0 ) rot = 0;
    windFactor = random(0.2, 1);
    doesBloom = false;
    if (level &gt;= leafLevel &amp;&amp; random(1) &lt; leafChance) doesBloom = true;
    bloomSize = random(bloomSizeAverage*0.7, bloomSizeAverage*1.3);
    leafRot = radians(random(-180, 180));
    flowerScaleT = random(0.8, 1.2);
    flowerDelay = round(random(200, 250));
    leafDelay = round(random(50, 150));
    randomizeColor();

    if (random(1) &lt; flowerChance) doesFlower = true;

    float rr = _rotRange * rotDecay;

    if (level &lt; levelMax)
    {
      n1 = new Node(len*lengthDecay, size*sizeDecay, rr, level+1);
      n2 = new Node(len*lengthDecay, size*sizeDecay, rr, level+1);
    }
  }

  void draw()
  {
    strokeWeight(size);
    s += (1.0 - s) / (15 + (level*5));
    scale(s);

    pushMatrix();

    if (level &gt;= leafLevel) stroke(branchColor);
    else stroke(0);
    float rotOffset = sin( noise( (float)millis() * 0.000006  * (level*1) ) * 100 );
    if (!windEnabled) rotOffset = 0;
    rotate(rot + (rotOffset * 0.1 + mouseWind) * windFactor);
    line(0, 0, 0, -len);
    translate(0, -len);

    // draw leaves
    if (doesBloom)
    {
      if (leafDelay &lt; 0)
      {
        leafScale += (1.0 - leafScale) * 0.05;
        fill(leafColor);
        noStroke();
        pushMatrix();
        scale(leafScale);
        rotate(leafRot);
        translate(0, -bloomSize/2);
        ellipse(0, 0, bloomSize*bloomWidthRatio, bloomSize);
        popMatrix();
      } 
      else
      {
        leafDelay--;
      }
    }

    // draw flowers
    if (doesFlower &amp;&amp; level &gt; levelMax-3)
    {
      if (flowerDelay &lt; 0)
      {
        pushMatrix();
        flowerScale += (flowerScaleT - flowerScale) * 0.1;
        scale(flowerScale);
        rotate(flowerScale*3);
        noStroke();
        fill(hue(flowerColor), saturation(flowerColor), flowerBright);
        ellipse(0, 0, flowerWidth, flowerHeight);
        rotate(radians(360/3));
        ellipse(0, 0, flowerWidth, flowerHeight);
        rotate(radians(360/3));
        ellipse(0, 0, flowerWidth, flowerHeight);
        fill(branchColor);
        ellipse(0, 0, 5, 5);
        popMatrix();
      } else
      {
        flowerDelay--;
      }
    }

    pushMatrix();
    if (n1) n1.draw();
    popMatrix();

    pushMatrix();
    if (n2) n2.draw();
    popMatrix();

    popMatrix();
  }

  void randomizeColor()
  {
    branchColor = color(branchHue, random(170, 255), random(100, 200));
    leafColor = color(leafHue, leafSat, random(100, 255));
    flowerBright = random(200, 255);

    if (n1) n1.randomizeColor();
    if (n2) n2.randomizeColor();
  }
}</pre>
</div>
]]></content:encoded>
			<wfw:commentRss>http://beautifulprogramming.com/infinite-arboretum/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Geometric Deconstruction</title>
		<link>http://beautifulprogramming.com/geometric-deconstruction/</link>
		<comments>http://beautifulprogramming.com/geometric-deconstruction/#comments</comments>
		<pubDate>Sat, 09 May 2015 18:14:42 +0000</pubDate>
		<dc:creator>colordodge</dc:creator>
				<category><![CDATA[Uncategorized]]></category>

		<guid isPermaLink="false">http://beautifulprogramming.com/?p=209</guid>
		<description><![CDATA[Click to randomize. Press &#8220;M&#8221; to change the mouse interaction mode. Press &#8220;G&#8221; to change the grid size. Press &#8220;C&#8221; to change colors. Press &#8220;P&#8221; to pause. Press &#8220;L&#8221; to turn lines on and off. Press &#8220;D&#8221; to toggle box growth from the center or side. Press &#8220;B&#8221; to change the background from light to [&#8230;]]]></description>
				<content:encoded><![CDATA[<canvas datasrc="http://beautifulprogramming.com/wp-content/uploads/GeometricDeconstruction.pde"></canvas>
<p>Click to randomize. Press &#8220;M&#8221; to change the mouse interaction mode. Press &#8220;G&#8221; to change the grid size. Press &#8220;C&#8221; to change colors. Press &#8220;P&#8221; to pause. Press &#8220;L&#8221; to turn lines on and off. Press &#8220;D&#8221; to toggle box growth from the center or side. Press &#8220;B&#8221; to change the background from light to dark.</p>
<p>This sketch was made with Processing 2 in Javascript mode.</p>
<div id="gallery"><a href="http://beautifulprogramming.com/wp-content/uploads/2015/05/GeometricDeconstruction3.png"><img alt="GeometricDeconstruction3" src="http://beautifulprogramming.com/wp-content/uploads/2015/05/GeometricDeconstruction3.png" width="940" height="540" /></a> <img class="alignnone size-full wp-image-358" alt="GeometricDeconstruction4" src="http://beautifulprogramming.com/wp-content/uploads/2015/05/GeometricDeconstruction4.jpg" width="940" height="540" /> <a href="http://beautifulprogramming.com/wp-content/uploads/2015/05/GeometricDeconstruction5.jpg"><img class="alignnone size-full wp-image-357" alt="GeometricDeconstruction5" src="http://beautifulprogramming.com/wp-content/uploads/2015/05/GeometricDeconstruction5.jpg" width="940" height="540" /></a><a href="http://beautifulprogramming.com/wp-content/uploads/2015/05/GeometricDeconstruction6.jpg"><img class="alignnone size-full wp-image-356" alt="GeometricDeconstruction6" src="http://beautifulprogramming.com/wp-content/uploads/2015/05/GeometricDeconstruction6.jpg" width="940" height="540" /></a> <a href="http://beautifulprogramming.com/wp-content/uploads/2015/05/GeometricDeconstruction7.jpg"><img class="alignnone size-full wp-image-355" alt="GeometricDeconstruction7" src="http://beautifulprogramming.com/wp-content/uploads/2015/05/GeometricDeconstruction7.jpg" width="940" height="540" /></a> <a href="http://beautifulprogramming.com/wp-content/uploads/2015/05/GeometricDeconstruction8.jpg"><img class="alignnone size-full wp-image-354" alt="GeometricDeconstruction8" src="http://beautifulprogramming.com/wp-content/uploads/2015/05/GeometricDeconstruction8.jpg" width="940" height="540" /></a><a href="http://beautifulprogramming.com/wp-content/uploads/2015/05/GeometricDeconstruction9.jpg"><img class="alignnone size-full wp-image-353" alt="GeometricDeconstruction9" src="http://beautifulprogramming.com/wp-content/uploads/2015/05/GeometricDeconstruction9.jpg" width="940" height="540" /></a> <a href="http://beautifulprogramming.com/wp-content/uploads/2015/05/GeometricDeconstruction10.jpg"><img class="alignnone size-full wp-image-352" alt="GeometricDeconstruction10" src="http://beautifulprogramming.com/wp-content/uploads/2015/05/GeometricDeconstruction10.jpg" width="940" height="540" /></a> <a href="http://beautifulprogramming.com/wp-content/uploads/2015/05/GeometricDeconstruction11.jpg"><img class="alignnone size-full wp-image-351" alt="GeometricDeconstruction11" src="http://beautifulprogramming.com/wp-content/uploads/2015/05/GeometricDeconstruction11.jpg" width="940" height="540" /></a><a href="http://beautifulprogramming.com/wp-content/uploads/2015/05/GeometricDeconstruction12.jpg"><img class="alignnone size-full wp-image-350" alt="GeometricDeconstruction12" src="http://beautifulprogramming.com/wp-content/uploads/2015/05/GeometricDeconstruction12.jpg" width="940" height="540" /></a> <a href="http://beautifulprogramming.com/wp-content/uploads/2015/05/GeometricDeconstruction13.jpg"><img class="alignnone size-full wp-image-349" alt="GeometricDeconstruction13" src="http://beautifulprogramming.com/wp-content/uploads/2015/05/GeometricDeconstruction13.jpg" width="940" height="540" /></a> <a href="http://beautifulprogramming.com/wp-content/uploads/2015/05/GeometricDeconstruction14.jpg"><img class="alignnone size-full wp-image-348" alt="GeometricDeconstruction14" src="http://beautifulprogramming.com/wp-content/uploads/2015/05/GeometricDeconstruction14.jpg" width="940" height="540" /></a></div>
<div></div>
<div>
<pre class="crayon-plain-tag">Pylon allPylons[];
int numPylons = 10;
boolean cameraOrtho = true;
boolean whiteLines = false;
boolean lightBackground = false;

float minDist = 150;
float growMax = 300;
int mode = 1;
int gridSizeX = 10;
int gridSizeY = 10;

float rotX = 45;
float rotY = 45;

boolean isPaused = false;
boolean drawsFromCenter = false;

void setup()
{
  size(940, 540, P3D);
  colorMode(HSB);

  createPylons();
}

void draw()
{
  pushMatrix();
  translate(0, 0, 10);

  directionalLight(255, 0, 150, -0.3, 0.5, -1);
  directionalLight(255, 0, 150, 0.5, -0.3, -1);
  popMatrix();

  if (lightBackground) background(200);
  else background(50);

  if (cameraOrtho) ortho(-940/2, 940/2, -540/2, 540/2, -10000, 10000);
  else perspective();

  for (int i=0; i&lt;gridSizeX*gridSizeY; i++)
  {
    Pylon pylon = allPylons[i];
    pylon.draw();
  }
}

void createPylons()
{
  int index = 0;
  allPylons = new PVector[gridSizeX*gridSizeY];

  float w = 940/gridSizeX;
  float h = 540/gridSizeY;

  float hue1 = random(0, 255);
  float hue2 = random(0, 255);
  float hue3 = random(0, 255);
  float hue4 = random(0, 255);
  float hue5 = random(0, 255);

  float sat1 = random(0, 255);
  float sat2 = random(0, 255);
  float sat3 = random(0, 255);
  float sat4 = random(0, 255);
  float sat5 = random(0, 255);

  float chance = random(1);

  for (int x=0; x&lt;gridSizeX; x++)
  {
    for (int y=0; y&lt;gridSizeY; y++)
    {
      Pylon pylon = new Pylon();
      pylon.x = x * w + w/2;
      pylon.y = y * h + h/2;
      pylon.w = w * 1.0;
      pylon.h = h * 1.0;

      pylon.hue = hue1;
      pylon.sat = sat1;
      if (random(1) &gt; chance)
      { 
        pylon.hue = hue2;
        pylon.sat = sat2;
      } else if (random(1) &gt; chance)
      {
        pylon.hue = hue3;
        pylon.sat = sat3;
      } else if (random(1) &gt; chance)
      {
        pylon.hue = hue4;
        pylon.sat = sat4;
      } else if (random(1) &gt; chance) 
      {
        pylon.hue = hue5;
        pylon.sat = sat5;
      }

      pylon.time = -dist(mouseX, mouseY, pylon.x, pylon.y) * 0.06;
      allPylons[index] = pylon;
      index++;
    }
  }
}

void mousePressed()
{
  gridSizeX = round(random(1, 30));
  gridSizeY = round(random(1, 30));
  mode = round(random(0, 3));

  drawsFromCenter = round(random(0, 1));

  float range = 360;
  rotX = random(0, range);
  rotY = random(0, range);

  createPylons();
}

void keyPressed()
{
  if (key == 'o') cameraOrtho = !cameraOrtho;
  if (key == 'l') whiteLines = !whiteLines;
  if (key == 'b') lightBackground = !lightBackground;
  if (key == 'd') drawsFromCenter = !drawsFromCenter;
  if (key == 'p') isPaused = !isPaused;
  if (key == 'c') createPylons();

  if (key == 'm')
  {
    mode++;
    if (mode &gt; 3) mode = 0;
  }

  if (key == '=')
  {
    gridSizeX++;
    gridSizeY++;
    createPylons();
  }

  if (key == '-')
  {
    gridSizeX--;
    gridSizeY--;
    createPylons();
  }

  if (key == 'g')
  {
    gridSizeX = round(random(1, 30));
    gridSizeY = round(random(1, 30)); 
    createPylons();
  }
}

class Pylon
{
  float w, h, d;
  float x, y, z;
  float hue, sat, bright;
  float size = 0.0;
  float targetSize = 1.0;
  float scaleSpeed = 0.05;
  float maxSize = 700;

  float vd;
  float target = 10;
  float time = 0;

  Pylon()
  {
    scaleSpeed = random(0.05, 0.1);
    z = random(10);
    w = 0;
    h = 0;
    d = 0;

    hue = random(0, 255);
    sat = random(100, 255);
    bright = random(100, 255);
  }

  void draw()
  {
    pushMatrix();

    if (whiteLines) noStroke();
    else stroke(0);

    if (!isPaused)
    {
      z = y-x;
    time++;
    if (time &gt; 0) size += (targetSize - size) * scaleSpeed;
    else size = 0;

    if (mode == 0)
    {
      float dx = abs(mouseX-x);
      float dy = abs(mouseY-y);

      if (dx &lt; w/2 &amp;&amp; dy &lt; h/2) target = 500;
      else target *= 0.99;

      vd += (target - d) * 0.3;
      vd *= 0.5;
      d += vd;
    } 
    else if (mode == 1)
    {
      float distance = dist(mouseX, mouseY, x, y);
      target = map(distance, 150, 0, 10, 350);

      vd += (target - d) * 0.3;
      vd *= 0.5;
      d += vd;
    }
    else if (mode == 2)
    {
      float distance = dist(mouseX, mouseY, x, y);
      target = map(distance, 300, 0, 10, 200);

      vd += (target - d) * 0.01;
      vd *= 0.99;
      d += vd;
    }
    else if (mode == 3)
    {
      float distance = dist(mouseX, mouseY, x, y);
      target = sin(distance * 0.01 - millis()*0.002) * 100;
      target = abs(target);

      vd += (target - d) * 0.3;
      vd *= 0.5;
      d += vd;
    }

    if (d &lt; 10)
    {
      d = 10;
      vd = 0;
    }
    }

    translate(x, y, z);
    rotateY(radians(rotY));
    rotateX(radians(rotX));  

    if (!drawsFromCenter) translate(0, 0, d/2*size);

    fill(hue, sat, bright);
    box(w*size, h*size, d*size);

    popMatrix();
  }
}</pre>
</div>
]]></content:encoded>
			<wfw:commentRss>http://beautifulprogramming.com/geometric-deconstruction/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Robot Dreams</title>
		<link>http://beautifulprogramming.com/robot-dreams/</link>
		<comments>http://beautifulprogramming.com/robot-dreams/#comments</comments>
		<pubDate>Thu, 07 May 2015 20:47:55 +0000</pubDate>
		<dc:creator>colordodge</dc:creator>
				<category><![CDATA[Uncategorized]]></category>

		<guid isPermaLink="false">http://beautifulprogramming.com/?p=203</guid>
		<description><![CDATA[Click anywhere to regenerate. Press &#8220;C&#8221; to change colors and keep shapes. Press &#8220;S&#8221; to change the shape and keep the colors. Press &#8220;P&#8221; to toggle camera from perspective to orthographic. Press &#8220;B&#8221; to change background color. Press &#8220;L&#8221; to change line color. Press &#8220;X&#8221; to change both the background and the line color. This [&#8230;]]]></description>
				<content:encoded><![CDATA[<canvas datasrc="http://beautifulprogramming.com/wp-content/uploads/RobotDreams.pde"></canvas>
<p>Click anywhere to regenerate. Press &#8220;C&#8221; to change colors and keep shapes. Press &#8220;S&#8221; to change the shape and keep the colors. Press &#8220;P&#8221; to toggle camera from perspective to orthographic. Press &#8220;B&#8221; to change background color. Press &#8220;L&#8221; to change line color. Press &#8220;X&#8221; to change both the background and the line color.</p>
<p>This sketch was made with Processing 2 in Javascript mode.</p>
<div id="gallery"><a href="http://beautifulprogramming.com/wp-content/uploads/2015/05/Robot2.jpg"><img class="alignnone size-full wp-image-342" alt="Robot2" src="http://beautifulprogramming.com/wp-content/uploads/2015/05/Robot2.jpg" width="940" height="540" /></a> <a href="http://beautifulprogramming.com/wp-content/uploads/2015/05/Robot5.jpg"><img alt="Robot5" src="http://beautifulprogramming.com/wp-content/uploads/2015/05/Robot5.jpg" width="940" height="540" /></a> <a href="http://beautifulprogramming.com/wp-content/uploads/2015/05/Robot3.jpg"><img class="alignnone size-full wp-image-341" alt="Robot3" src="http://beautifulprogramming.com/wp-content/uploads/2015/05/Robot3.jpg" width="940" height="540" /></a><a href="http://beautifulprogramming.com/wp-content/uploads/2015/05/Robot4.jpg"><img class="alignnone size-full wp-image-340" alt="Robot4" src="http://beautifulprogramming.com/wp-content/uploads/2015/05/Robot4.jpg" width="940" height="540" /></a> <a href="http://beautifulprogramming.com/wp-content/uploads/2015/05/Boxes1.jpg"><img alt="Boxes1" src="http://beautifulprogramming.com/wp-content/uploads/2015/05/Boxes1.jpg" width="940" height="540" /></a> <a href="http://beautifulprogramming.com/wp-content/uploads/2015/05/Robot6.jpg"><img class="alignnone size-full wp-image-338" alt="Robot6" src="http://beautifulprogramming.com/wp-content/uploads/2015/05/Robot6.jpg" width="940" height="540" /></a></div>
<div></div>
<div>
<pre class="crayon-plain-tag">Pylon allPylons[];
int numPylons = 10;
boolean cameraOrtho = true;
boolean whiteLines = true;
boolean lightBackground = true;

void setup()
{
  size(940, 540, P3D);
  colorMode(HSB);

  allPylons = new PVector[numPylons];
  createPylons();
}

void draw()
{
  if (lightBackground) background(220);
  else background(50);

  if (cameraOrtho) ortho(-width, width, -height, height, -10000, 10000);
  else perspective();

  float camX = map(mouseX, 0, width, 1000, -1000);
  float camY = map(mouseY, 0, height, 1000, -1000);
  camera(camX, camY, 1000, 0, 0, 0, 0.0, 1.0, 0.0);

  for (int i=0; i&lt;numPylons; i++)
  {
    Pylon pylon = allPylons[i];
    pylon.draw();
  }
}

void createPylons()
{
  for (int i=0; i&lt;numPylons; i++)
  { 
    Pylon pylon = new Pylon();
    allPylons[i] = pylon;
  }
}

void mousePressed()
{
  createPylons();
}

void keyPressed()
{
  if (key == 'p') cameraOrtho = !cameraOrtho;
  if (key == 'l') whiteLines = !whiteLines;
  if (key == 'b') lightBackground = !lightBackground;

  if (key == 'c')
  { 
    for (int i=0; i&lt;numPylons; i++)
    { 
      allPylons[i].randomizeColor();
    }

  }
  if (key == 's')
  {
    for (int i=0; i&lt;numPylons; i++)
    { 
      allPylons[i].randomizeSize();
    }
  }

  if (key == 'x')
  {
    lightBackground = !lightBackground;
    whiteLines = !whiteLines;
  }
}

class Pylon
{
  float w, h, d;
  float x, y, z;
  float hue, sat, bright;
  float size = 0.0;
  float targetSize = 1.0;
  float scaleSpeed = 0.05;

  float maxSize = 700;

  Pylon()
  {
    x = random(-50, 50);
    y = random(-50, 50);
    z = random(-50, 50);

    randomizeSize();
    randomizeColor();

    scaleSpeed = (w/maxSize) * 0.1 + 0.1;
  }

  void draw()
  {
    pushMatrix();
    size += (targetSize - size) * scaleSpeed;

    if (whiteLines) stroke(255);
    else stroke(0);
    fill(hue, sat, bright);
    box(w*size, h, d);

    popMatrix();
  }

  void randomizeColor()
  {
    hue = random(0, 255);
    sat = random(0, 255);
    bright = random(0, 255);
  }

  void randomizeSize()
  {
    w = random(10, maxSize);
    h = random(10, maxSize);
    d = random(10, maxSize);
    size = 0;
  }
}</pre><br />
&nbsp;</p>
</div>
]]></content:encoded>
			<wfw:commentRss>http://beautifulprogramming.com/robot-dreams/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Floral Bloom</title>
		<link>http://beautifulprogramming.com/floral-bloom/</link>
		<comments>http://beautifulprogramming.com/floral-bloom/#comments</comments>
		<pubDate>Thu, 07 May 2015 14:27:57 +0000</pubDate>
		<dc:creator>colordodge</dc:creator>
				<category><![CDATA[Uncategorized]]></category>

		<guid isPermaLink="false">http://beautifulprogramming.com/?p=186</guid>
		<description><![CDATA[Click to randomize flower. Press &#8220;P&#8221; to pause. Moving the mouse left and right will scrub the animation. Press &#8220;B&#8221; to toggle background between black and white. Press &#8220;A&#8221; to toggle auto-play. Auto-play will randomize the flower occasionally. This sketch was made with Processing 2 in Javascript mode. [crayon-5c9921e4e79ee775320240/]]]></description>
				<content:encoded><![CDATA[<canvas datasrc="http://beautifulprogramming.com/wp-content/uploads/FloralBloom.pde"></canvas>
<p>Click to randomize flower. Press &#8220;P&#8221; to pause. Moving the mouse left and right will scrub the animation. Press &#8220;B&#8221; to toggle background between black and white. Press &#8220;A&#8221; to toggle auto-play. Auto-play will randomize the flower occasionally.</p>
<p>This sketch was made with Processing 2 in Javascript mode.</p>
<div id="gallery"><a href="http://beautifulprogramming.com/wp-content/uploads/2015/05/Bloom3.jpg"><img class="alignnone size-full wp-image-190" alt="Bloom3" src="http://beautifulprogramming.com/wp-content/uploads/2015/05/Bloom3.jpg" width="940" height="540" /></a> <a href="http://beautifulprogramming.com/wp-content/uploads/2015/05/Bloom2.jpg"><img class="alignnone size-full wp-image-189" alt="Bloom2" src="http://beautifulprogramming.com/wp-content/uploads/2015/05/Bloom2.jpg" width="940" height="540" /></a> <a href="http://beautifulprogramming.com/wp-content/uploads/2015/05/Bloom1.jpg"><img class="alignnone size-full wp-image-188" alt="Bloom1" src="http://beautifulprogramming.com/wp-content/uploads/2015/05/Bloom1.jpg" width="940" height="540" /></a><a href="http://beautifulprogramming.com/wp-content/uploads/2015/05/FloralBloom10.jpg"><img class="alignnone size-full wp-image-297" alt="FloralBloom10" src="http://beautifulprogramming.com/wp-content/uploads/2015/05/FloralBloom10.jpg" width="940" height="540" /></a> <a href="http://beautifulprogramming.com/wp-content/uploads/2015/05/FloralBloom2.jpg"><img class="alignnone size-full wp-image-305" alt="FloralBloom2" src="http://beautifulprogramming.com/wp-content/uploads/2015/05/FloralBloom2.jpg" width="940" height="540" /></a> <a href="http://beautifulprogramming.com/wp-content/uploads/2015/05/FloralBloom3.jpg"><img class="alignnone size-full wp-image-304" alt="FloralBloom3" src="http://beautifulprogramming.com/wp-content/uploads/2015/05/FloralBloom3.jpg" width="940" height="540" /></a><a href="http://beautifulprogramming.com/wp-content/uploads/2015/05/FloralBloom11.jpg"><img class="alignnone size-full wp-image-296" alt="FloralBloom11" src="http://beautifulprogramming.com/wp-content/uploads/2015/05/FloralBloom11.jpg" width="940" height="540" /></a> <a href="http://beautifulprogramming.com/wp-content/uploads/2015/05/FloralBloom8.jpg"><img class="alignnone size-full wp-image-299" alt="FloralBloom8" src="http://beautifulprogramming.com/wp-content/uploads/2015/05/FloralBloom8.jpg" width="940" height="540" /></a> <a href="http://beautifulprogramming.com/wp-content/uploads/2015/05/FloralBloom1.jpg"><img class="alignnone size-full wp-image-306" alt="FloralBloom1" src="http://beautifulprogramming.com/wp-content/uploads/2015/05/FloralBloom1.jpg" width="940" height="540" /></a><a href="http://beautifulprogramming.com/wp-content/uploads/2015/05/FloralBloom9.jpg"><img class="alignnone size-full wp-image-298" alt="FloralBloom9" src="http://beautifulprogramming.com/wp-content/uploads/2015/05/FloralBloom9.jpg" width="940" height="540" /></a> <a href="http://beautifulprogramming.com/wp-content/uploads/2015/05/FloralBloom12.jpg"><img class="alignnone size-full wp-image-295" alt="FloralBloom12" src="http://beautifulprogramming.com/wp-content/uploads/2015/05/FloralBloom12.jpg" width="940" height="540" /></a> <a href="http://beautifulprogramming.com/wp-content/uploads/2015/05/FloralBloom5.jpg"><img class="alignnone size-full wp-image-302" alt="FloralBloom5" src="http://beautifulprogramming.com/wp-content/uploads/2015/05/FloralBloom5.jpg" width="940" height="540" /></a><a href="http://beautifulprogramming.com/wp-content/uploads/2015/05/FloralBloom6.jpg"><img class="alignnone size-full wp-image-301" alt="FloralBloom6" src="http://beautifulprogramming.com/wp-content/uploads/2015/05/FloralBloom6.jpg" width="940" height="540" /></a> <a href="http://beautifulprogramming.com/wp-content/uploads/2015/05/FloralBloom7.jpg"><img class="alignnone size-full wp-image-300" alt="FloralBloom7" src="http://beautifulprogramming.com/wp-content/uploads/2015/05/FloralBloom7.jpg" width="940" height="540" /></a> <a href="http://beautifulprogramming.com/wp-content/uploads/2015/05/FloralBloom4.jpg"><img class="alignnone size-full wp-image-303" alt="FloralBloom4" src="http://beautifulprogramming.com/wp-content/uploads/2015/05/FloralBloom4.jpg" width="940" height="540" /></a></div>
<div></div>
<div>
<pre class="crayon-plain-tag">Flower flower;
float bgColor = 0;
boolean isPaused = false;
int time = 0;
boolean autoplay = false;

void setup()
{
  size(940, 540, P3D);
  colorMode(HSB);

  init();
}

void draw()
{
  if (autoplay)
  {
    time++;
    if (time &gt; 1000)
    {
      init();
      time = 0;
    }
  }

  background(bgColor);

  pushMatrix();
  translate(width/2, height/2);
  flower.draw();
  popMatrix();
}

void init()
{
  time = 0;
  flower = new Flower();
}

void mousePressed()
{
  init();
}

void keyPressed()
{
  if (key == 'b')
  {
    if (bgColor == 0) bgColor = 255;
    else if (bgColor == 255) bgColor = 0;
  }

  if (key == 'p')
  {
    isPaused = !isPaused;
  }

  if (key == 'a') autoplay = !autoplay;
}

class Flower
{
  PetalCluster[] clusters;
  int numClusters = 5;

  Flower()
  {
    numClusters = round(random(2, 5));
    createClusters();
  }

  void draw()
  {
    for (int i=0; i&lt;numClusters; i++)
    {
      clusters[i].draw();
    }
  }

  void createClusters()
  { 
    clusters = new PetalCluster[numClusters];

    int numPetals = round(random(2, 30));

    for (int i=0; i&lt;numClusters; i++)
    {
      if (numPetals % 2 == 0 &amp;&amp; numPetals &gt; 2 &amp;&amp; i &gt; 0)
      {
        if (random(1) &gt; 0.5)
        {
          numPetals *= 0.5;
        }
      } else if (numPetals % 3 == 0 &amp;&amp; numPetals &gt; 3 &amp;&amp; i &gt; 0)
      {
        if (random(1) &gt; 0.5)
        {
          numPetals /= 3;
        }
      }

      PetalCluster cluster = new PetalCluster(numPetals);
      clusters[i] = cluster;
    }
  }
}

class Petal
{
  PVector[] allVectors;
  int numNodes = 3;
  float hue, sat, bright;

  float nearRot = -360;
  float farRot = 360;

  float rotation = 0;
  float rotSpeed = 1;

  float size = 0.0;
  float targetSize = 1.0;

  float time = 0;
  float mouseRot = 0;
  float shadowRatio = 0.5;

  Petal()
  {
    hue = random(0, 255);
    sat = random(0, 255);
    bright = random(150, 255);
    numNodes = round(random(1, 10));
    nearRot = random(-360, 360);
    farRot = random(-360, 360);
    rotSpeed = random(0.1, 1.0);
    shadowRatio = random(0.3, 0.7);
    createVectors();
    mouseRot = map(mouseX, 0, width, nearRot*3, farRot*3);
  }

  void update()
  {
    time++;

    size += (targetSize - size) * 0.01;

    if (!isPaused)
    {
      rotation += rotSpeed;
    }

    mouseRot += (map(mouseX, 0, width, nearRot*3, farRot*3) - mouseRot) * 0.1;
  }

  void draw()
  {
    pushMatrix();

    scale(size);

    float rotX = map(size, 0, 1, 90, 0);
    rotateX(radians(rotX));

    rotateY(radians(rotation + mouseRot));

    fill(hue, sat, bright);
    stroke(hue, sat, bright * 0.7);
    strokeWeight(1);

    beginShape(TRIANGLE);

    curveVertex(0, 0, 0);
    curveVertex(0, 0, 0);

    fill(hue, sat, bright * shadowRatio);
    for (int i=0; i&lt;numNodes; i++)
    {
      curveVertex(allVectors[i].x, allVectors[i].y, allVectors[i].z);
    }

    fill(hue, sat, bright);
    curveVertex(0, 0, 0);
    curveVertex(0, 0, 0);

    endShape();

    popMatrix();
  }

  void createVectors()
  {
    allVectors = new PVector[numNodes];

    for (int i=0; i&lt;numNodes; i++)
    {
      PVector vector = new PVector(random(-200, 200), random(300), random(-200, 200));
      allVectors[i] = vector;
    }
  }
}

class PetalCluster
{
  Petal petal;
  int numPetals = 10;
  float rotationOffset = 0.01;
  float time = 0.0;

  PetalCluster(int _numPetals)
  {
    numPetals = _numPetals;
    petal = new Petal();
    rotationOffset = random(-0.1, 0.1);
    time = random(1000);
  }

  void draw()
  {
    if (!isPaused)
    {
      time++;
      time += map(mouseX, 0, width, -rotationOffset*10, rotationOffset*10);
    }
    petal.update();

    for (int i=0; i&lt;numPetals; i++)
    {
      float step = 360.0f/numPetals;
      float rot = step * i;
      drawPetal(rot);
    }
  }

  void drawPetal(float rot)
  {
    pushMatrix();

    rotateZ(radians(rot + time*rotationOffset));
    petal.draw();

    popMatrix();
  }
}</pre>
</div>
]]></content:encoded>
			<wfw:commentRss>http://beautifulprogramming.com/floral-bloom/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Recursive Subdivision</title>
		<link>http://beautifulprogramming.com/recursive-subdivision/</link>
		<comments>http://beautifulprogramming.com/recursive-subdivision/#comments</comments>
		<pubDate>Wed, 06 May 2015 02:18:17 +0000</pubDate>
		<dc:creator>colordodge</dc:creator>
				<category><![CDATA[Uncategorized]]></category>

		<guid isPermaLink="false">http://beautifulprogramming.com/?p=180</guid>
		<description><![CDATA[Click anywhere to redraw. Press &#8220;L&#8221; to toggle line drawing. Press &#8220;C&#8221; to cycle line color between black, white, and colored. Press &#8220;+&#8221; and &#8220;-&#8221; to change the line size. This sketch was made with Processing 2 in Javascript mode. [crayon-5c9921e4e82c0502321539/]]]></description>
				<content:encoded><![CDATA[<canvas datasrc="http://beautifulprogramming.com/wp-content/uploads/RecursiveSubdivision.pde"></canvas>
<p>Click anywhere to redraw. Press &#8220;L&#8221; to toggle line drawing. Press &#8220;C&#8221; to cycle line color between black, white, and colored. Press &#8220;+&#8221; and &#8220;-&#8221; to change the line size.</p>
<p>This sketch was made with Processing 2 in Javascript mode.</p>
<div id="gallery"><a href="http://beautifulprogramming.com/wp-content/uploads/2015/05/Subdivision1.jpg"><img class="alignnone size-full wp-image-286" alt="Subdivision1" src="http://beautifulprogramming.com/wp-content/uploads/2015/05/Subdivision1.jpg" width="940" height="540" /></a> <a href="http://beautifulprogramming.com/wp-content/uploads/2015/05/Subdivision2.jpg"><img class="alignnone size-full wp-image-285" alt="Subdivision2" src="http://beautifulprogramming.com/wp-content/uploads/2015/05/Subdivision2.jpg" width="940" height="540" /></a> <a href="http://beautifulprogramming.com/wp-content/uploads/2015/05/Subdivision3.jpg"><img class="alignnone size-full wp-image-284" alt="Subdivision3" src="http://beautifulprogramming.com/wp-content/uploads/2015/05/Subdivision3.jpg" width="940" height="540" /></a><a href="http://beautifulprogramming.com/wp-content/uploads/2015/05/Subdivision4.jpg"><img class="alignnone size-full wp-image-283" alt="Subdivision4" src="http://beautifulprogramming.com/wp-content/uploads/2015/05/Subdivision4.jpg" width="940" height="540" /></a> <a href="http://beautifulprogramming.com/wp-content/uploads/2015/05/Subdivision5.jpg"><img class="alignnone size-full wp-image-282" alt="Subdivision5" src="http://beautifulprogramming.com/wp-content/uploads/2015/05/Subdivision5.jpg" width="940" height="540" /></a> <a href="http://beautifulprogramming.com/wp-content/uploads/2015/05/Subdivision6.jpg"><img class="alignnone size-full wp-image-281" alt="Subdivision6" src="http://beautifulprogramming.com/wp-content/uploads/2015/05/Subdivision6.jpg" width="940" height="540" /></a><a href="http://beautifulprogramming.com/wp-content/uploads/2015/05/Subdivision7.jpg"><img class="alignnone size-full wp-image-280" alt="Subdivision7" src="http://beautifulprogramming.com/wp-content/uploads/2015/05/Subdivision7.jpg" width="940" height="540" /></a> <a href="http://beautifulprogramming.com/wp-content/uploads/2015/05/Subdivision8.jpg"><img class="alignnone size-full wp-image-279" alt="Subdivision8" src="http://beautifulprogramming.com/wp-content/uploads/2015/05/Subdivision8.jpg" width="940" height="540" /></a> <a href="http://beautifulprogramming.com/wp-content/uploads/2015/05/Subdivision9.jpg"><img class="alignnone size-full wp-image-278" alt="Subdivision9" src="http://beautifulprogramming.com/wp-content/uploads/2015/05/Subdivision9.jpg" width="940" height="540" /></a></div>
<div></div>
<div>
<pre class="crayon-plain-tag">ArrayList&lt;Rect&gt; allRects;

float prob = 0;

float hueRange = 0.05;
float satRange = 0.05;
float brightRange = 0.1;

float time = 0;
float drawSpacing = 1.0;
float axisSwitch = 0.5;
boolean doesDrawLines = true;
float lineSize = 0.5;
int lineType = 1;
static final int LineTypeWhite = 0;
static final int LineTypeBlack = 1;
static final int LineTypeColor = 2;

void setup()
{
  size(940, 540, P3D);
  colorMode(HSB, 1.0, 1.0, 1.0, 1.0);
  background(0.0);

  drawFractal();
}

void draw()
{
  translate(0.5, 0.5);

  time += 0.1;

  if (doesDrawLines)
  {
    switch (lineType)
    {
    case LineTypeWhite:
      stroke(1.0, 1.0);
      break;

    case LineTypeBlack:
      stroke(0.0, 1.0);
      break;

    case LineTypeColor:
      stroke(allRects.get(0).hue, allRects.get(0).sat, allRects.get(0).bright, 1.0);
      break;

    default:
      break;
    }

    strokeWeight(lineSize);
  } else
  {
    noStroke();
  }

  for (int i=0; i&lt;allRects.size (); i++)
  {
    Rect rect = allRects.get(i);

    if (rect.isAlive)
    {
      if (time &gt; rect.drawTrigger)
      {
        rect.draw();
        rect.lifeCounter += 1;
        if (rect.lifeCounter &gt; 10) rect.isAlive = false;
      }
    }
  }
}

void drawRect(Rect rect)
{
  if (rect.w &gt; 20 &amp;&amp; rect.h &gt; 20)
  {
    float ratio1 = random(1);
    float ratio2 = 1 - ratio1;

    float offset = 1;

    if (random(1) &gt; axisSwitch)
    {
      Rect r1 = new Rect(rect.x, rect.y, rect.w*ratio1, rect.h, rect.hue, rect.sat, rect.bright, rect.drawTrigger+drawSpacing);
      allRects.add(r1);
      if (random(1) &gt; prob) drawRect(r1);

      Rect r2 = new Rect(rect.x+rect.w*ratio1, rect.y, rect.w*ratio2, rect.h, rect.hue, rect.sat, rect.bright, rect.drawTrigger+drawSpacing*1.5);
      allRects.add(r2);
      if (random(1) &gt; prob) drawRect(r2);
    } else
    {
      Rect r1 = new Rect(rect.x, rect.y, rect.w, rect.h*ratio1, rect.hue, rect.sat, rect.bright, rect.drawTrigger+drawSpacing);
      allRects.add(r1);
      if (random(1) &gt; prob) drawRect(r1);

      Rect r2 = new Rect(rect.x, rect.y+rect.h*ratio1, rect.w, rect.h*ratio2, rect.hue, rect.sat, rect.bright, rect.drawTrigger+drawSpacing*1.5);
      allRects.add(r2);
      if (random(1) &gt; prob) drawRect(r2);
    }
  }
}

void drawFractal()
{
  allRects = new ArrayList&lt;Rect&gt;();

  Rect rect = new Rect(0, 0, width, height, 1.0, 1.0, 1.0, 0);
  rect.hue = random(1);
  rect.sat = random(1);
  rect.bright = random(0.2, 1.0);
  drawRect(rect);
}

void mousePressed()
{
  background(0.0);
  axisSwitch = random(0.1, 0.9);
  time = 0;
  prob = random(0, 0.1);
  hueRange = random(0, 0.2);
  satRange = random(0, 0.2);
  brightRange = random(0, 0.3);
  drawFractal();
}

void keyPressed()
{
  if (key == 'l')
  {
    doesDrawLines = !doesDrawLines;
  }

  if (key == '=')
  {
    lineSize++;
    if (lineSize &gt; 20) lineSize = 20;
  }

  if (key == '-')
  {
    lineSize--;
    if (lineSize &lt; 1) lineSize = 1;
  }

  if (key == 'c')
  {
     lineType++;
    if (lineType&gt; 2) lineType = 0; 
  }
}

class Rect
{
  float x;
  float y;
  float w;
  float h;
  float hue;
  float sat;
  float bright;
  float drawTrigger;
  boolean isAlive = true;
  int lifeCounter = 0;

  Rect(float _x, float _y, float _w, float _h, float _hue, float _sat, float _bright, float _drawTrigger)
  {
    x = _x;
    y = _y;
    w = _w;
    h = _h;

    float tempHue = _hue + random(-hueRange, hueRange);
    if (tempHue &gt; 1.0) tempHue = 0.0;
    if (tempHue &lt; 0.0) tempHue = 1.0;
    hue = tempHue;

    float tempSat = _sat + random(-satRange, satRange);
    sat = constrain(tempSat, 0, 1);

    float tempBright = _bright + random(-brightRange, brightRange);
    bright = constrain(tempBright, 0, 1);

    drawTrigger = _drawTrigger;
  }

  void draw()
  {
    fill(hue, sat, bright);
    rect(x, y, w, h);
  }
}</pre>
</div>
]]></content:encoded>
			<wfw:commentRss>http://beautifulprogramming.com/recursive-subdivision/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Quantum Tapestry</title>
		<link>http://beautifulprogramming.com/quantum-tapestry/</link>
		<comments>http://beautifulprogramming.com/quantum-tapestry/#comments</comments>
		<pubDate>Tue, 05 May 2015 03:25:48 +0000</pubDate>
		<dc:creator>colordodge</dc:creator>
				<category><![CDATA[Uncategorized]]></category>

		<guid isPermaLink="false">http://beautifulprogramming.com/?p=161</guid>
		<description><![CDATA[Click to randomize and reset animation. Press &#8220;A&#8221; to toggle autoplay &#8211; autoplay will automatically clear and redraw the screen when it is full. Press &#8220;R&#8221; to reset the draw color to white. Press &#8220;C&#8221; to randomize the current draw color. This sketch was made with Processing 2 in Javascript mode. [crayon-5c9921e4e8b91225712747/]]]></description>
				<content:encoded><![CDATA[<canvas datasrc="http://beautifulprogramming.com/wp-content/uploads/QuantumThread.pde"></canvas>
<p>Click to randomize and reset animation. Press &#8220;A&#8221; to toggle autoplay &#8211; autoplay will automatically clear and redraw the screen when it is full. Press &#8220;R&#8221; to reset the draw color to white. Press &#8220;C&#8221; to randomize the current draw color.</p>
<p>This sketch was made with Processing 2 in Javascript mode.</p>
<div id="gallery"><a href="http://beautifulprogramming.com/wp-content/uploads/2015/05/QuantumTapestry9.jpg"><img class="alignnone size-full wp-image-271" alt="QuantumTapestry9" src="http://beautifulprogramming.com/wp-content/uploads/2015/05/QuantumTapestry9.jpg" width="940" height="540" /></a> <a href="http://beautifulprogramming.com/wp-content/uploads/2015/05/QuantumTapestry8.jpg"><img class="alignnone size-full wp-image-175" alt="QuantumTapestry8" src="http://beautifulprogramming.com/wp-content/uploads/2015/05/QuantumTapestry8.jpg" width="940" height="540" /></a> <a href="http://beautifulprogramming.com/wp-content/uploads/2015/05/QuantumTapestry7.jpg"><img class="alignnone size-full wp-image-174" alt="QuantumTapestry7" src="http://beautifulprogramming.com/wp-content/uploads/2015/05/QuantumTapestry7.jpg" width="940" height="540" /></a><a href="http://beautifulprogramming.com/wp-content/uploads/2015/05/QuantumTapestry6.jpg"><img class="alignnone size-full wp-image-173" alt="QuantumTapestry6" src="http://beautifulprogramming.com/wp-content/uploads/2015/05/QuantumTapestry6.jpg" width="940" height="540" /></a> <a href="http://beautifulprogramming.com/wp-content/uploads/2015/05/QuantumTapestry5.jpg"><img class="alignnone size-full wp-image-172" alt="QuantumTapestry5" src="http://beautifulprogramming.com/wp-content/uploads/2015/05/QuantumTapestry5.jpg" width="940" height="540" /></a> <a href="http://beautifulprogramming.com/wp-content/uploads/2015/05/QuantumTapestry4.jpg"><img class="alignnone size-full wp-image-171" alt="QuantumTapestry4" src="http://beautifulprogramming.com/wp-content/uploads/2015/05/QuantumTapestry4.jpg" width="940" height="540" /></a><a href="http://beautifulprogramming.com/wp-content/uploads/2015/05/QuantumTapestry3.jpg"><img class="alignnone size-full wp-image-170" alt="QuantumTapestry3" src="http://beautifulprogramming.com/wp-content/uploads/2015/05/QuantumTapestry3.jpg" width="940" height="540" /></a> <a href="http://beautifulprogramming.com/wp-content/uploads/2015/05/QuantumTapestry2.jpg"><img class="alignnone size-full wp-image-169" alt="QuantumTapestry2" src="http://beautifulprogramming.com/wp-content/uploads/2015/05/QuantumTapestry2.jpg" width="940" height="540" /></a> <a href="http://beautifulprogramming.com/wp-content/uploads/2015/05/QuantumTapestry1.jpg"><img class="alignnone size-full wp-image-168" alt="QuantumTapestry1" src="http://beautifulprogramming.com/wp-content/uploads/2015/05/QuantumTapestry1.jpg" width="940" height="540" /></a></div>
<p></p><pre class="crayon-plain-tag">ArrayList&lt;PVector&gt; allVectors;

float wanderSpeed = 0.7;
int numSteps = 10; 

float lineHue = 1.0;
float lineSat = 0.0;
float lineBright = 1.0;
float colorTrigger = 0.999;

boolean autoplay = false;

void setup()
{
  size(940, 540);
  colorMode(HSB, 1.0, 1.0, 1.0, 1.0);
  background(0.0);
  noFill();

  createLine();
  randomizeColor();
}

void draw()
{
  strokeWeight(1.01);
  // randomize color if neccesary
  if (random(0, 1) &gt; colorTrigger) randomizeColor();

  stroke(lineHue, lineSat, lineBright, 0.05);
  fill(255);

  // draw top line
  beginShape();

  for (int i=0; i&lt;allVectors.size (); i++)
  {
    PVector vector = allVectors.get(i);
    if (i == 0) curveVertex(vector.x, vector.y);
    curveVertex(vector.x, vector.y);
    if (i == allVectors.size()-1) curveVertex(vector.x, vector.y);
  }
  endShape();

  // draw bottom line
  beginShape();
  for (int i=0; i&lt;allVectors.size (); i++)
  {
    PVector vector = allVectors.get(i);
    if (i == 0)curveVertex(vector.x, height-vector.y);
    curveVertex(vector.x, height-vector.y);
    if (i == allVectors.size()-1) curveVertex(vector.x, height-vector.y);

    vector.x += random(-wanderSpeed, wanderSpeed);
    vector.y += random(-wanderSpeed, wanderSpeed);
    vector.y += 0.1;

    if (i == 0) vector.x = 0;
    if (i == allVectors.size()-1) vector.x = width;
  }
  endShape();

  checkAutoplay();
}

void checkAutoplay()
{
  if (autoplay)
  {
    // reset if line has left screen
    for (int i=0; i&lt;allVectors.size (); i++)
    {
      PVector vector = allVectors.get(i);
      if (vector.y &lt; height) return;
    }
    // reset if boundary check didn't exit functiion
    reset();
  }
}

void createLine()
{
  allVectors = new ArrayList&lt;PVector&gt;();

  for (int i=0; i&lt;=numSteps; i++)
  {
    PVector vector = new PVector(i * width/numSteps, height/2);
    allVectors.add(vector);
  }
}

void randomizeColor()
{
  lineHue = random(0, 1);
  lineSat = random(0, 1);
}

void reset()
{
  background(0.0);
  createLine();
  randomizeColor();
  wanderSpeed = random(0.3, 2.0);
  numSteps = (int)random(1, 20);
  colorTrigger = random(0.99, 0.9999);
}

void mousePressed()
{
  reset();
}

void keyPressed()
{
  if (key == 'c')
  {
    randomizeColor();
  }

  if (key == 'r')
  {
    lineHue = 1.0;
    lineSat = 0.0;
    lineBright = 1.0;
  }

  if (key == 'a')
  {
    autoplay = !autoplay;
  }
}</pre><p></p>
]]></content:encoded>
			<wfw:commentRss>http://beautifulprogramming.com/quantum-tapestry/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Monochrome Tessellation</title>
		<link>http://beautifulprogramming.com/monochrome-tessellation/</link>
		<comments>http://beautifulprogramming.com/monochrome-tessellation/#comments</comments>
		<pubDate>Tue, 05 May 2015 02:34:57 +0000</pubDate>
		<dc:creator>colordodge</dc:creator>
				<category><![CDATA[Uncategorized]]></category>

		<guid isPermaLink="false">http://beautifulprogramming.com/?p=158</guid>
		<description><![CDATA[Click to randomize. Press &#8220;M&#8221; to toggle mouse interaction. Press &#8220;O&#8221; to toggle oscillation. Press &#8220;C&#8221; to change the colors. Press &#8220;R&#8221; to reset the colors to black and white. This sketch was made with Processing 2 in Javascript mode. [crayon-5c9921e4e93fa364120240/]]]></description>
				<content:encoded><![CDATA[<canvas datasrc="http://beautifulprogramming.com/wp-content/uploads/MonochromeTessellation.pde"></canvas>
<p>Click to randomize. Press &#8220;M&#8221; to toggle mouse interaction. Press &#8220;O&#8221; to toggle oscillation. Press &#8220;C&#8221; to change the colors. Press &#8220;R&#8221; to reset the colors to black and white.</p>
<p>This sketch was made with Processing 2 in Javascript mode.</p>
<div id="gallery"><a href="http://beautifulprogramming.com/wp-content/uploads/2015/05/MonochromeTessellation6.jpg"><img class="alignnone size-full wp-image-264" alt="MonochromeTessellation6" src="http://beautifulprogramming.com/wp-content/uploads/2015/05/MonochromeTessellation6.jpg" width="940" height="540" /></a> <a href="http://beautifulprogramming.com/wp-content/uploads/2015/05/MonochromeTessellation2.jpg"><img class="alignnone size-full wp-image-263" alt="MonochromeTessellation2" src="http://beautifulprogramming.com/wp-content/uploads/2015/05/MonochromeTessellation2.jpg" width="940" height="540" /></a> <a href="http://beautifulprogramming.com/wp-content/uploads/2015/05/MonochromeTessellation3.jpg"><img class="alignnone size-full wp-image-262" alt="MonochromeTessellation3" src="http://beautifulprogramming.com/wp-content/uploads/2015/05/MonochromeTessellation3.jpg" width="940" height="540" /></a><a href="http://beautifulprogramming.com/wp-content/uploads/2015/05/MonochromeTessellation4.jpg"><img class="alignnone size-full wp-image-261" alt="MonochromeTessellation4" src="http://beautifulprogramming.com/wp-content/uploads/2015/05/MonochromeTessellation4.jpg" width="940" height="540" /></a> <a href="http://beautifulprogramming.com/wp-content/uploads/2015/05/MonochromeTessellation5.jpg"><img class="alignnone size-full wp-image-260" alt="MonochromeTessellation5" src="http://beautifulprogramming.com/wp-content/uploads/2015/05/MonochromeTessellation5.jpg" width="940" height="540" /></a> <a href="http://beautifulprogramming.com/wp-content/uploads/2015/05/MonochromeTessellation1.jpg"><img class="alignnone size-full wp-image-157" alt="MonochromeTessellation1" src="http://beautifulprogramming.com/wp-content/uploads/2015/05/MonochromeTessellation1.jpg" width="940" height="540" /></a></div>
<div></div>
<div>
<pre class="crayon-plain-tag">int tileCountX = 5;
int tileCountY = 5;
float tileWidth;
float tileHeight;

int lineCountX = 10;
int lineCountY = 10;

boolean doesOscilate = false;
boolean doesTrackMouse = true;

float lineHue = 1.0;
float lineSat = 0.0;
float lineBright = 0.0;
float bgHue = 1.0;
float bgSat = 0.0;
float bgBright = 1.0;
float lineSize = 1;
float centerOffset = 0.1;

boolean doesOffsetRows = true;
boolean doesInterlaceMouse = true;

void setup()
{
  size(940, 540);
  colorMode(HSB, 1.0, 1.0, 1.0, 1.0);
  background(1.0);
  strokeWeight(1);
}

void draw()
{
  background(bgHue, bgSat, bgBright);

  tileWidth = 940 / tileCountX;
  tileHeight = 540 / tileCountY;

  float HH = tileHeight/2;
  float HW = tileWidth/2;

  for (int gridY=0; gridY&lt;=tileCountY; gridY++)
  {
    for (int gridX=0; gridX&lt;=tileCountX; gridX++)
    {
      pushMatrix();

      float rowOffset = 0;

      if (doesOffsetRows)
      {
        rowOffset = gridY%2 * tileWidth/2;
      }

      translate(tileWidth*gridX + rowOffset, tileHeight*gridY);

      noFill();
      stroke(lineHue, lineSat, lineBright, 0.5);

      PVector center = new PVector(0, 0);
      float offsetMag = 20;

      float mouseOffsetX = map(mouseX, 0, width, -HW, HW);
      float mouseOffsetY = map(mouseY, 0, height, -HH, HH);

      if (doesInterlaceMouse)
      {
        if (rowOffset &gt; 0)
        {
          mouseOffsetX *= - 1;
          mouseOffsetY *= -1;
        }
      }

      if (doesTrackMouse)
      {
        center.x += mouseOffsetX * 1;
        center.y += mouseOffsetY * 1;
      }

      if (doesOscilate)
      {
        center.x += sin(gridX+millis()*0.001)*offsetMag + cos(gridY+millis()*0.0015)*offsetMag;
        center.y += cos(gridX+millis()*0.0015)*offsetMag + sin(gridY+millis()*0.001)*offsetMag;
      }

      // draw vertical lines
      for (int i=0; i&lt;=lineCountX; i++)
      {
        float ratioPos = (float)i / (float)lineCountX;
        float xPos = map(ratioPos, 0, 1, -HW, HW);

        PVector top = new PVector(xPos, HH);
        PVector bottom = new PVector(xPos, -HH);

        line(center.x, center.y, top.x, top.y);
        line(center.x, center.y, bottom.x, bottom.y);
      }

      // draw horizontal lines
      for (int i=0; i&lt;=lineCountY; i++)
      {
        float ratioPos = (float)i / (float)lineCountY;
        float yPos = map(ratioPos, 0, 1, -HH, HH);

        PVector left = new PVector(-HW, yPos);
        PVector right = new PVector(HW, yPos);

        line(center.x, center.y, left.x, left.y);
        line(center.x, center.y, right.x, right.y);
      }

      popMatrix();
    }
  }
}

void keyPressed()
{
  if (key == 'o')
  {
    doesOscilate = !doesOscilate;
  }

  if (key == 'm')
  {
    doesTrackMouse = !doesTrackMouse;
  }

  if (key == 'c')
  {
    lineHue = random(0, 1);
    lineSat = random(0, 1);
    lineBright = random(0, 1);
    bgHue = random(0, 1);
    bgSat = random(0, 1);
    bgBright = random(0, 1);
  }

  if (key == 'r')
  {
    lineHue = 1.0;
    lineSat = 0.0;
    lineBright = 0.0;
    bgHue = 1.0;
    bgSat = 0.0;
    bgBright = 1.0;
  }
}

void mousePressed()
{
  lineCountX = (int)random(0, 7) * 2;
  lineCountY = (int)random(0, 7) * 2;
  tileCountX = (int)random(1, 10);
  tileCountY = (int)random(1, 10);

  doesOffsetRows = true;
  if (random(1) &gt; 0.5) doesOffsetRows = false;

  doesInterlaceMouse = true;
  if (random(1) &gt; 0.5) doesInterlaceMouse = false;

}</pre>
</div>
]]></content:encoded>
			<wfw:commentRss>http://beautifulprogramming.com/monochrome-tessellation/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Arachnocampa Luminosa</title>
		<link>http://beautifulprogramming.com/arachnocampa-luminosa/</link>
		<comments>http://beautifulprogramming.com/arachnocampa-luminosa/#comments</comments>
		<pubDate>Tue, 05 May 2015 01:38:26 +0000</pubDate>
		<dc:creator>colordodge</dc:creator>
				<category><![CDATA[Uncategorized]]></category>

		<guid isPermaLink="false">http://beautifulprogramming.com/?p=148</guid>
		<description><![CDATA[Click anywhere to restart the animation.  Press &#8220;C&#8221; to clear the canvas. Press &#8220;P&#8221; to pause. Simple accumulation of shapes can lead to complex forms. Here we see what happens when a faint circle is painted on the canvas each frame. The circle&#8217;s positions and sizes wander with smoothed easing. Arachnocampa Luminosa is latin for &#8220;glow [&#8230;]]]></description>
				<content:encoded><![CDATA[<canvas datasrc="http://beautifulprogramming.com/wp-content/uploads/ArachnocampaLuminosa.pde"></canvas>
<p>Click anywhere to restart the animation.  Press &#8220;C&#8221; to clear the canvas. Press &#8220;P&#8221; to pause.</p>
<p>Simple accumulation of shapes can lead to complex forms. Here we see what happens when a faint circle is painted on the canvas each frame. The circle&#8217;s positions and sizes wander with smoothed easing. Arachnocampa Luminosa is latin for &#8220;glow worm&#8221;.</p>
<p>This sketch was made with Processing 2 in Javascript mode.</p>
<div id="gallery"><a href="http://beautifulprogramming.com/wp-content/uploads/2015/05/ArachnocampaLuminosa2.jpg"><img class="alignnone size-full wp-image-248" alt="ArachnocampaLuminosa2" src="http://beautifulprogramming.com/wp-content/uploads/2015/05/ArachnocampaLuminosa2.jpg" width="940" height="540" /></a> <a href="http://beautifulprogramming.com/wp-content/uploads/2015/05/ArachnocampaLuminosa4.jpg"><img class="alignnone size-full wp-image-247" alt="ArachnocampaLuminosa4" src="http://beautifulprogramming.com/wp-content/uploads/2015/05/ArachnocampaLuminosa4.jpg" width="940" height="540" /></a> <a href="http://beautifulprogramming.com/wp-content/uploads/2015/05/ArachnocampaLuminosa3.jpg"><img class="alignnone size-full wp-image-246" alt="ArachnocampaLuminosa3" src="http://beautifulprogramming.com/wp-content/uploads/2015/05/ArachnocampaLuminosa3.jpg" width="940" height="540" /></a><a href="http://beautifulprogramming.com/wp-content/uploads/2015/05/ArachnocampaLuminosa5.jpg"><img class="alignnone size-full wp-image-245" alt="ArachnocampaLuminosa5" src="http://beautifulprogramming.com/wp-content/uploads/2015/05/ArachnocampaLuminosa5.jpg" width="940" height="540" /></a> <a href="http://beautifulprogramming.com/wp-content/uploads/2015/05/ArachnocampaLuminosa6.jpg"><img class="alignnone size-full wp-image-244" alt="ArachnocampaLuminosa6" src="http://beautifulprogramming.com/wp-content/uploads/2015/05/ArachnocampaLuminosa6.jpg" width="940" height="540" /></a> <a href="http://beautifulprogramming.com/wp-content/uploads/2015/05/ArachnocampaLuminosa1.jpg"><img class="alignnone size-full wp-image-150" alt="ArachnocampaLuminosa1" src="http://beautifulprogramming.com/wp-content/uploads/2015/05/ArachnocampaLuminosa1.jpg" width="940" height="540" /></a></div>
<div></div>
<div></div>
<div>
<pre class="crayon-plain-tag">Part[] allParts;
int numParts = 10;
boolean isPaused = false;

Part part;

void setup()
{
  size(940, 540);
  colorMode(HSB, 1.0, 1.0, 1.0, 1.0);
  background(0.0);
  strokeWeight(1.01);
  createParts();
}

void draw()
{ 
  updateParts();
}

void createParts()
{
  numParts = round(random(3, 10));
  allParts = new Part[numParts];

  for (int i=0; i&lt;numParts; i++)
  {
    Part part = new Part(width/2, height/2, 0.05);
    allParts[i] = part;
  }
}

void updateParts()
{ 
  if (!isPaused)
  {
    for (int i=0; i&lt;allParts.length; i++)
    {
      allParts[i].update();
    }
  }
}

void mousePressed()
{
  background(0);
  firstTime = true;
  createParts();
}

void keyPressed()
{
  if (key == 'c')
  {
    background(0);
  }

  if (key == 'p')
  {
    isPaused = !isPaused;
  }
}

class Part
{
  PVector pos = new PVector(0,0,0);
  PVector vel = new PVector(0,0,0);
  float size = 10;
  float scale;
  float accelMod = 0.1;
  float hue = 0.0;
  float sat = 0.0;

  Part(float _x, float _y, float _accelMod)
  {
    accelMod = _accelMod;
    pos.set(_x, _y, 0);
    vel.set(random(-1, 1), random(-1, 1), 0);
    scale = random(5, 100);
    hue = random(0, 1);
    sat = random(0, 1);
  }

  void update()
  {
    PVector accel = PVector.random3D();
    accel.mult(accelMod);
    vel.add(accel);
    vel.mult(0.995);

    pos.add(vel);     
    size += (vel.mag() * scale - size) * 0.02;
    wrap();

    noFill();
    stroke(hue, sat, 1.0, 0.05);
    ellipse(pos.x, pos.y, size, size);
  }

  void wrap()
  {
    float radius = size/2;
    float top = 0 - radius;
    float bottom = height + radius;
    float left = 0 - radius;
    float right = width + radius;

    if (pos.x &gt; right)
    {
      pos.x = left;
    } else if (pos.x &lt; left)
    {
      pos.x = right;
    }

    if (pos.y &gt; bottom)
    {
      pos.y = top;
    } else if (pos.y &lt; top)
    {
      pos.y = bottom;
    }
  }
}</pre>
</div>
]]></content:encoded>
			<wfw:commentRss>http://beautifulprogramming.com/arachnocampa-luminosa/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Lightness of Line</title>
		<link>http://beautifulprogramming.com/lightness-of-line/</link>
		<comments>http://beautifulprogramming.com/lightness-of-line/#comments</comments>
		<pubDate>Fri, 22 Nov 2013 16:12:11 +0000</pubDate>
		<dc:creator>colordodge</dc:creator>
				<category><![CDATA[Uncategorized]]></category>

		<guid isPermaLink="false">http://beautifulprogramming.com/?p=134</guid>
		<description><![CDATA[Emergence is exemplified when patterns arise out of a multiplicity of relatively simple interactions. In this example, we&#8217;re again using Perlin noise to set the rotation of some graphical elements, in this case lines. By adjusting the length of the line and the resolution of the Perlin noise, we can accomplish a variety of effects. [&#8230;]]]></description>
				<content:encoded><![CDATA[<canvas datasrc="http://beautifulprogramming.com/wp-content/uploads/LightnessOfLine.pde"></canvas>
<p>Emergence is exemplified when patterns arise out of a multiplicity of relatively simple interactions. In this example, we&#8217;re again using Perlin noise to set the rotation of some graphical elements, in this case lines. By adjusting the length of the line and the resolution of the Perlin noise, we can accomplish a variety of effects. Move the mouse left and right to adjust the length of the lines; move the mouse up and down to control the resolution of the Perlin noise.</p>
<p>This sketch was made with Processing 2 in Javascript mode.</p>
<div id="gallery"><a href="http://beautifulprogramming.com/wp-content/uploads/2013/11/LightnessOfLine1.jpg"><img class="alignnone size-full wp-image-138" alt="LightnessOfLine1" src="http://beautifulprogramming.com/wp-content/uploads/2013/11/LightnessOfLine1.jpg" width="940" height="540" /></a> <a href="http://beautifulprogramming.com/wp-content/uploads/2013/11/LightnessOfLine2.jpg"><img class="alignnone size-full wp-image-139" alt="LightnessOfLine2" src="http://beautifulprogramming.com/wp-content/uploads/2013/11/LightnessOfLine2.jpg" width="940" height="540" /></a> <a href="http://beautifulprogramming.com/wp-content/uploads/2013/11/LightnessOfLine3.jpg"><img class="alignnone size-full wp-image-140" alt="LightnessOfLine3" src="http://beautifulprogramming.com/wp-content/uploads/2013/11/LightnessOfLine3.jpg" width="940" height="540" /></a></div>
<p></p><pre class="crayon-plain-tag">float cellSize = 15;
Node[] nodes;
int xRes, yRes;

boolean showsFPS = false;
PFont font;

float lineSize = 10;
float perlinRes;
float mx, my;

void setup()
{
  size(940, 540);
  colorMode(HSB, 100);
  background(0);
  font = createFont("Helvetica", 24);
  createNodes();
}

void draw()
{
  background(0);
  noFill();
  stroke(100, 20);

  mx = mouseX;
  my = mouseY;
  if (mx == 0) mx = width/2;
  if (my == 0) my = height/2;
  lineSize = mx + 20;
  perlinRes = my/100000 + 0.003;
  updateNodes();
  if (showsFPS) displayFPS();
}

void createNodes()
{
  xRes = ceil(width/cellSize) + 2;
  yRes = ceil(height/cellSize) + 2;
  nodes = new Node[(xRes)*(yRes)];

  for (int i=0; i&lt;yRes; i++)
  {
    for (int j=0; j&lt;xRes; j++)
    {
      float cx = j*cellSize + cellSize/2;
      float cy = i*cellSize + cellSize/2;
      cx -= cellSize;
      cy -= cellSize;
      Node node = new Node(cx, cy);
      nodes[i*xRes+j] = node;
    }
  }
}

void updateNodes()
{
  float noiseScale = 0.0053;
  noiseScale = perlinRes;
  float noiseSpeed = 0.001;
  float a;
  PVector vector;

  for (int i=0; i&lt;yRes; i++)
  {
    for (int j=0; j&lt;xRes; j++)
    {
      Node node = nodes[i*xRes+j];
      a = noise(i*noiseScale, j*noiseScale, frameCount*noiseSpeed)*TWO_PI*4;
      vector = new PVector(cos(a), sin(a));
      node.vector = vector;
      node.update();
    }
  }
}

void displayFPS()
{
  textFont(font, 18);
  fill(100);
  String output = "fps=";
  output += (int) frameRate;
  text(output, 10, 30);
}

void keyPressed()
{
  if (key == 'f') showsFPS = !showsFPS;
}

boolean sketchFullScreen() {
  return false;
}

class Node
{
  float x, y, vx, vy;
  PVector vector;

  Node(float _x, float _y)
  {
    x = _x;
    y = _y;
    vx = 0.0;
    vy = 0.0;
  }

  void update()
  {
    vector.mult(lineSize);
    line(x, y, x+vector.x, y+vector.y);
  }

}</pre><p><a class="button" href="http://beautifulprogramming.com/wp-content/uploads/2013/11/LightnessOfLine.zip" target="_blank"> DOWNLOAD SOURCE</a></p>
]]></content:encoded>
			<wfw:commentRss>http://beautifulprogramming.com/lightness-of-line/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Piscium Draconis</title>
		<link>http://beautifulprogramming.com/piscium-draconis/</link>
		<comments>http://beautifulprogramming.com/piscium-draconis/#comments</comments>
		<pubDate>Tue, 05 Nov 2013 16:32:46 +0000</pubDate>
		<dc:creator>colordodge</dc:creator>
				<category><![CDATA[Uncategorized]]></category>

		<guid isPermaLink="false">http://beautifulprogramming.com/?p=92</guid>
		<description><![CDATA[Here we&#8217;re creating a grid of overlapping shapes and giving them motion and color based off 2-dimensional Perlin noise. The hue values and the vertical offsets of each element are controlled by two different Perlin noise calls at different resolutions. The brightness and saturation values are adjusted using individual oscillators for each shape. All of [&#8230;]]]></description>
				<content:encoded><![CDATA[<canvas datasrc="http://beautifulprogramming.com/wp-content/uploads/PisciumDraconis.pde"></canvas>
<p>Here we&#8217;re creating a grid of overlapping shapes and giving them motion and color based off 2-dimensional Perlin noise. The hue values and the vertical offsets of each element are controlled by two different Perlin noise calls at different resolutions. The brightness and saturation values are adjusted using individual oscillators for each shape. All of the color values are then given an offset within a fixed range to create variety and interest. I imagine this is what dragon scales might look like if you were staring at them very closely &#8211; although I probably wouldn&#8217;t recommend getting that close to a dragon.</p>
<div id="gallery"><a href="http://beautifulprogramming.com/wp-content/uploads/2013/11/PiciumDraconis1.jpg"><img class="alignnone size-full wp-image-123" alt="PiciumDraconis1" src="http://beautifulprogramming.com/wp-content/uploads/2013/11/PiciumDraconis1.jpg" width="940" height="540" /></a> <a href="http://beautifulprogramming.com/wp-content/uploads/2013/11/PiciumDraconis2.jpg"><img class="alignnone size-full wp-image-124" alt="PiciumDraconis2" src="http://beautifulprogramming.com/wp-content/uploads/2013/11/PiciumDraconis2.jpg" width="940" height="540" /></a> <a href="http://beautifulprogramming.com/wp-content/uploads/2013/11/PiciumDraconis3.jpg"><img class="alignnone size-full wp-image-125" alt="PiciumDraconis3" src="http://beautifulprogramming.com/wp-content/uploads/2013/11/PiciumDraconis3.jpg" width="940" height="540" /></a></div>
<p></p><pre class="crayon-plain-tag">float cellWidth = 40;
float cellHeight = 10;
Node[] nodes;
int xRes, yRes;

void setup()
{
  size(940, 540);
  colorMode(HSB, 100);
  background(0);
  ellipseMode(CENTER);
  createNodes();
  noStroke();
}

void draw()
{
  updateNodes();
}

void createNodes()
{
  xRes = ceil(width/cellWidth) + 2;
  yRes = ceil(height/cellHeight) + 2;
  nodes = new Node[(xRes)*(yRes)];

  for (int i=0; i&lt;yRes; i++)
  {
    for (int j=0; j&lt;xRes; j++)
    {
      float cx = j*cellWidth + cellWidth/2;
      float cy = i*cellHeight + cellHeight/2;
      cx -= cellWidth;
      cy -= cellHeight;
      if (i%2 == 0) cx += cellWidth/2;
      Node node = new Node(cx, cy);
      nodes[i*xRes+j] = node;
    }
  }
}

void updateNodes()
{
  float noiseScale = 0.01;
  float noiseSpeed = 0.003;

  for (int i=0; i&lt;yRes; i++)
  {
    for (int j=0; j&lt;xRes; j++)
    {
      Node node = nodes[i*xRes+j];
      node.energy = noise(i*noiseScale, j*noiseScale*3, frameCount*noiseSpeed) * 2.0;
      node.setYOffset(noise(i*noiseScale*3.4, j*noiseScale*6.4, frameCount*noiseSpeed*1.33) * 2.0 - 1.0);
      node.update();
    }
  }
}

class Node
{
  float x, y;
  color c;
  float energy;
  float hue;
  float saturation;
  float brightness;
  float yOffset;
  float hueOffset;
  float osc = random(0.0, 100.0);
  float oscSpeed = random(0.003, 0.03);

  Node(float _x, float _y)
  {
    x = _x;
    y = _y;
    c = color(random(100), random(100), random(30, 100));
    saturation = random(10,80);
    brightness = random(20,80);
    hueOffset = random(-0.1, 0.1);
  }

  void update()
  { 
    osc += oscSpeed;
    saturation = (sin(osc) + 1.0) * 40 + 10;
    brightness = (sin(osc*0.6) + 1.0) * 30 + 20;

    c = color((energy+hueOffset)*100%100, saturation, brightness, 100);
    fill(c);
    noStroke();

    pushMatrix();
    translate(x, y + yOffset * 100.0);
    ellipse(x, y, cellWidth*2.1, cellHeight*5.8);
    popMatrix();
  }

  void setYOffset(float offset)
  {
    yOffset += (offset - yOffset) * 0.05;
  }

}</pre><p><a class="button" href="http://beautifulprogramming.com/wp-content/uploads/2013/11/PisciumDraconis.zip" target="_blank"> DOWNLOAD SOURCE</a></p>
]]></content:encoded>
			<wfw:commentRss>http://beautifulprogramming.com/piscium-draconis/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Cosmic Soup</title>
		<link>http://beautifulprogramming.com/cosmic-soup/</link>
		<comments>http://beautifulprogramming.com/cosmic-soup/#comments</comments>
		<pubDate>Mon, 04 Nov 2013 19:20:39 +0000</pubDate>
		<dc:creator>colordodge</dc:creator>
				<category><![CDATA[Uncategorized]]></category>

		<guid isPermaLink="false">http://beautifulprogramming.com/?p=85</guid>
		<description><![CDATA[One of the best tools in the motion design bag o&#8217; tricks is the spring. Here we have a bunch of springs linked together &#8211; 500 to be exact. The lead particle moves by itself, or it will follow the mouse if it&#8217;s moving. To get the fading and blurring effects, we&#8217;re using a pair [&#8230;]]]></description>
				<content:encoded><![CDATA[<canvas datasrc="http://beautifulprogramming.com/wp-content/uploads/CosmicSoup.pde"></canvas>
<p>One of the best tools in the motion design bag o&#8217; tricks is the spring. Here we have a bunch of springs linked together &#8211; 500 to be exact. The lead particle moves by itself, or it will follow the mouse if it&#8217;s moving. To get the fading and blurring effects, we&#8217;re using a pair of PGraphics objects to render the scene, distort it a bit, and then render it back into the main scene. This is sometimes referred to as &#8220;rendering to a texture&#8221;, but it&#8217;s much simpler to accomplish in processing than when working with OpenGL directly.</p>
<div id="gallery"><a href="http://beautifulprogramming.com/wp-content/uploads/2015/05/CosmicSoup4.jpg"><img class="alignnone size-full wp-image-236" alt="CosmicSoup4" src="http://beautifulprogramming.com/wp-content/uploads/2015/05/CosmicSoup4.jpg" width="940" height="540" /></a> <a href="http://beautifulprogramming.com/wp-content/uploads/2015/05/CosmicSoup3.jpg"><img class="alignnone size-full wp-image-235" alt="CosmicSoup3" src="http://beautifulprogramming.com/wp-content/uploads/2015/05/CosmicSoup3.jpg" width="940" height="540" /></a> <a href="http://beautifulprogramming.com/wp-content/uploads/2015/05/CosmicSoup2.jpg"><img class="alignnone size-full wp-image-234" alt="CosmicSoup2" src="http://beautifulprogramming.com/wp-content/uploads/2015/05/CosmicSoup2.jpg" width="940" height="540" /></a><a href="http://beautifulprogramming.com/wp-content/uploads/2015/05/CosmicSoup1.jpg"><img class="alignnone size-full wp-image-233" alt="CosmicSoup1" src="http://beautifulprogramming.com/wp-content/uploads/2015/05/CosmicSoup1.jpg" width="940" height="540" /></a> <a href="http://beautifulprogramming.com/wp-content/uploads/2015/05/CosmicSoup5.jpg"><img class="alignnone size-full wp-image-232" alt="CosmicSoup5" src="http://beautifulprogramming.com/wp-content/uploads/2015/05/CosmicSoup5.jpg" width="940" height="540" /></a> <a href="http://beautifulprogramming.com/wp-content/uploads/2015/05/CosmicSoup6.jpg"><img class="alignnone size-full wp-image-230" alt="CosmicSoup6" src="http://beautifulprogramming.com/wp-content/uploads/2015/05/CosmicSoup6.jpg" width="940" height="540" /></a></div>
<p></p><pre class="crayon-plain-tag">PGraphics canvas;
PGraphics auxCanvas;
float fadeSpeed = 2.0;
Chain chain;
float startX;
float startY;
float osc = 0.0;
float oscSpeed = 0.005;
boolean isPaused = false;
boolean chainIsActive = true;

void setup()
{
  size(940, 540);
  canvas = createGraphics(width, height);
  auxCanvas = createGraphics(width, height);
  startX = random(width);
  startY = random(height);
  chain = new Chain();

  canvas.beginDraw();
  canvas.background(0);
  canvas.endDraw();
  auxCanvas.beginDraw();
  auxCanvas.background(0);
  auxCanvas.endDraw();
  canvas.colorMode(HSB, 255);
  auxCanvas.colorMode(HSB, 255);
  colorMode(HSB, 255);

  smooth();
  canvas.smooth();
  auxCanvas.smooth();
}

void draw() 
{
  if (!isPaused)
  {
    osc += oscSpeed;
    float ratio = sin(osc);
    float invRatio = cos(osc);
    float offsetX = cos(osc) * 0.1;
    float offsetY = sin(osc) * 0.1;

    canvas.beginDraw();
    canvas.image(auxCanvas, 0, 0, width, height);
    if (chainIsActive) chain.update();
    canvas.endDraw();
    image(canvas, 0, 0);
    auxCanvas.beginDraw();
    auxCanvas.image(canvas, -fadeSpeed*0.5, -fadeSpeed*0.5, width+fadeSpeed, height+fadeSpeed);
    auxCanvas.endDraw();
  }
}

boolean sketchFullScreen()
{
  return false;
}

void keyPressed()
{
  if (key == 'p') isPaused = !isPaused;
  if (key == 'c') chainIsActive = !chainIsActive;
}

class Chain
{
  int numParts = 500;
  Part[] parts;
  float hue = random(TWO_PI);
  float saturation = 125;
  float brightness = 125;
  float osc = random(TWO_PI);
  float x, y, vx, vy;

  Chain()
  {
    x = startX;
    y = startY;
    vx = 0;
    vy = 0;
    createParts();
  }

  void update()
  {
    canvas.noFill();
    updateHue();

    if (mouseX == pmouseX &amp;&amp; mouseY == pmouseY)
    {
      vx += random(-1.0, 1.0) * 1.0;
      vy += random(-1.0, 1.0) * 1.0;

      vx *= 0.99;
      vy *= 0.99;
    }
    else
    {
      vx += (mouseX - x) * 0.01;
      vy += (mouseY - y) * 0.01;

      vx *= 0.9;
      vy *= 0.9;
    }

    x += vx;
    y += vy;

    if (x &gt; width)
    { 
      x = width;
      vx *= -1;
    }
    if (x &lt; 0)
    { 
      x = 0;
      vx *= -1;
    }
    if (y &gt; height) 
    { 
      y = height;
      vy *= -1;
    }
    if (y &lt; 0) 
    { 
      y = 0;
      vy *= -1;
    }

    updateParts();
  }

  void updateParts()
  {
    for (int i=0; i&lt;numParts; i++)
    {
      parts[i].update();
    }
  }

  void createParts()
  {
    parts = new Part[numParts];

    for (int i=0; i&lt;numParts; i++)
    {
      Part part = new Part();
      if (i &gt; 0) part.leader = parts[i-1];
      part.hueOffset = i * (255/6/numParts);
      parts[i] = part;
    }
  }

  void updateHue()
  {
    osc += 0.003;
    hue += 0.1;
    hue = hue % 255;
    saturation = (sin(osc)/2 + 0.5) * 255;
    brightness = (sin(osc*0.3)/2 + 0.5) * 255;
  }
}

class Part
{
  float x, y, vx, vy;
  Part leader = null;
  float spring = 0.2;
  float friction = 0.56;
  float hueOffset = 0.0;
  float hue = 0.0;

  Part()
  {
    x = startX;
    y = startY;
    vx = 0.0;
    vy = 0.0;
  }

  void update()
  {
    if (leader == null)
    {
      vx += (chain.x - x) * spring;
      vy += (chain.y - y) * spring;
    }
    else
    {
      vx += (leader.x - x) * spring;
      vy += (leader.y - y) * spring;
    }

    vx *= friction;
    vy *= friction;

    x += vx;
    y += vy;

    if (leader != null)
    {
      hue = (chain.hue + hueOffset) % 255;
      canvas.stroke(hue, chain.saturation, chain.brightness, 255);
      canvas.line(x, y, leader.x, leader.y);
    }
  }
}</pre><p><a class="button" href="http://beautifulprogramming.com/wp-content/uploads/2013/11/CosmicSoup.zip" target="_blank"> DOWNLOAD SOURCE</a></p>
]]></content:encoded>
			<wfw:commentRss>http://beautifulprogramming.com/cosmic-soup/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Gestalt Dreams</title>
		<link>http://beautifulprogramming.com/gestalt-dreams/</link>
		<comments>http://beautifulprogramming.com/gestalt-dreams/#comments</comments>
		<pubDate>Fri, 01 Nov 2013 19:25:28 +0000</pubDate>
		<dc:creator>colordodge</dc:creator>
				<category><![CDATA[Uncategorized]]></category>

		<guid isPermaLink="false">http://beautifulprogramming.com/?p=78</guid>
		<description><![CDATA[This is what is sometimes referred to as a &#8220;flow field&#8221;. In this sketch I&#8217;m using Perlin noise to create a grid of vectors. This vector grid is then used to dictate the motion of individual particles through the system. The end result is the illusion of coordination. You can press the &#8220;G&#8221; key to [&#8230;]]]></description>
				<content:encoded><![CDATA[<canvas datasrc="http://beautifulprogramming.com/wp-content/uploads/GestaltDreams.pde"></canvas>
<p>This is what is sometimes referred to as a &#8220;flow field&#8221;. In this sketch I&#8217;m using Perlin noise to create a grid of vectors. This vector grid is then used to dictate the motion of individual particles through the system. The end result is the illusion of coordination. You can press the &#8220;G&#8221; key to see the underlying vector grid.</p>
<div id="gallery"><a href="http://beautifulprogramming.com/wp-content/uploads/2013/11/GestaltDreams3.jpg"><img class="alignnone size-full wp-image-82" alt="GestaltDreams3" src="http://beautifulprogramming.com/wp-content/uploads/2013/11/GestaltDreams3.jpg" width="940" height="540" /></a> <a href="http://beautifulprogramming.com/wp-content/uploads/2013/11/GestaltDreams2.jpg"><img class="alignnone size-full wp-image-81" alt="GestaltDreams2" src="http://beautifulprogramming.com/wp-content/uploads/2013/11/GestaltDreams2.jpg" width="940" height="540" /></a> <a href="http://beautifulprogramming.com/wp-content/uploads/2013/11/GestaltDreams1.jpg"><img class="alignnone size-full wp-image-80" alt="GestaltDreams1" src="http://beautifulprogramming.com/wp-content/uploads/2013/11/GestaltDreams1.jpg" width="940" height="540" /></a></div>
<p></p><pre class="crayon-plain-tag">boolean showsFPS = false;
boolean showsField = false;
PFont font;

float gridSize = 70;
int xRes, yRes;
Node[] nodes;

int numParts = 3000;
Part[] parts;

void setup()
{
  size(940, 540);
  background(255);
  noStroke();
  rectMode(CENTER);
  ellipseMode(CENTER);
  createField();
  createParts();
  font = createFont("Helvetica", 24);
}

void draw()
{
  fill(0, 15);
  noStroke();
  rect(width/2, height/2, width, height);
  updateField();
  updateParts();
  if (showsFPS) displayFPS();
}

void scatter()
{
  for (int i=0; i&lt;numParts; i++)
  {
    Part part = parts[i];   
    part.vx += random(-1.0, 1.0) * 50.5;
    part.vy += random(-1.0, 1.0) * 50.5;
  }
}

void displayFPS()
{
  textFont(font, 18);
  fill(255);
  String output = "fps=";
  output += (int) frameRate;
  text(output, 10, 30);
}

void updateField()
{
  for (int i=0; i&lt;yRes; i++)
  {
    for (int j=0; j&lt;xRes; j++)
    {
      Node node = nodes[i*xRes+j];
      float noiseScale = 0.1;
      float a = noise(i*noiseScale,j*noiseScale, frameCount*0.003)*TWO_PI*2;
      PVector vector = new PVector(cos(a), sin(a));
      node.vector = vector;
      if (showsField) node.render();
    }
  }
}

void updateParts()
{
  noFill();
  stroke(255, 70);

  for (int i=0; i&lt;numParts; i++)
  {
    Part part = parts[i];

    int xPos = floor(part.x/gridSize);
    int yPos = floor(part.y/gridSize);
    int currentIndex = yPos*xRes + xPos;

    part.vx += nodes[currentIndex].vector.x * 0.7;
    part.vy += nodes[currentIndex].vector.y * 0.7;

    part.vx += random(-1.0, 1.0) * 0.5;
    part.vy += random(-1.0, 1.0) * 0.5;

    part.update();
    part.render();
  }
}

void createField()
{
  xRes = ceil(width/gridSize);
  yRes = ceil(height/gridSize);
  nodes = new Node[xRes*yRes];

  for (int i=0; i&lt;yRes; i++)
  {
    for (int j=0; j&lt;xRes; j++)
    {
      float noiseScale = 0.1;
      float a = noise(i*noiseScale,j*noiseScale)*TWO_PI;
      PVector vector = new PVector(cos(a), sin(a));

      float cx = j*gridSize + gridSize/2;
      float cy = i*gridSize + gridSize/2;
      PVector center = new PVector(cx, cy);
      Node node = new Node(vector, center);
      nodes[i*xRes+j] = node;
    }
  }
}

void createParts()
{
  parts = new Part[numParts];
  for (int i=0; i&lt;numParts; i++)
  {
    Part part = new Part(random(width), random(height));
    parts[i] = part;
  }
}

void keyPressed()
{
  if (key == 'f') showsFPS = !showsFPS;
  if (key == 'g') showsField = !showsField;
}

boolean sketchFullScreen() 
{
  return false;
}

class Node
{
  PVector vector;
  PVector center;
  color randColor;

  Node(PVector v, PVector c)
  {
    vector = v;
    center = c;
    selectNewColor();
  }

  void update()
  {
  }

  void render()
  {
    noStroke();
    fill(randColor);
    rect(center.x, center.y, gridSize, gridSize);
    PVector renderVector = vector.get();
    renderVector.mult(gridSize/2);
    stroke(150);
    line(center.x, center.y, center.x+renderVector.x, center.y+renderVector.y);
  }

  void selectNewColor()
  {
    randColor = color(random(255), random(255), random(255), 40);
  }

}

class Part
{
  float x, y, vx, vy, px, py;

  Part(float _x, float _y)
  {
    x = px = _x;
    y = py = _y;
    vx = 0.0;
    vy = 0.0;
  }

  void update()
  {
    px = x;
    py = y;

    vx *= 0.95;
    vy *= 0.95;

    x += vx;
    y += vy;

    wrap();
  }

  void wrap()
  {
    if (x &gt; width) x = px = 0;
    if (x &lt; 0) x = px = width;

    if (y &gt; height) y = py = 0;
    if (y &lt; 0) y = py = height;
  }

  void render()
  {
    line(x, y, px, py);
  }
}</pre><p><a class="button" href="http://beautifulprogramming.com/wp-content/uploads/2013/11/GestaltDreams.zip" target="_blank"> DOWNLOAD SOURCE</a></p>
]]></content:encoded>
			<wfw:commentRss>http://beautifulprogramming.com/gestalt-dreams/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Cubic Sunset</title>
		<link>http://beautifulprogramming.com/cubic-sunset/</link>
		<comments>http://beautifulprogramming.com/cubic-sunset/#comments</comments>
		<pubDate>Fri, 01 Nov 2013 14:36:47 +0000</pubDate>
		<dc:creator>colordodge</dc:creator>
				<category><![CDATA[Uncategorized]]></category>

		<guid isPermaLink="false">http://beautifulprogramming.com/?p=62</guid>
		<description><![CDATA[I&#8217;m always amazed at how much you can do with Perlin noise. It can lead to the illusion of coordination without the computational cost usually associated with large interdependent systems. In this example, I&#8217;m using a 2 dimensional Perlin noise call to generate the hues and rotations for the shapes. The grid consists of overlapping [&#8230;]]]></description>
				<content:encoded><![CDATA[<canvas datasrc="http://beautifulprogramming.com/wp-content/uploads/CubicSunset.pde"></canvas>
<p>I&#8217;m always amazed at how much you can do with Perlin noise. It can lead to the illusion of coordination without the computational cost usually associated with large interdependent systems. In this example, I&#8217;m using a 2 dimensional Perlin noise call to generate the hues and rotations for the shapes. The grid consists of overlapping rectangles that are exactly twice the size of the grid spacing. When these rectangles are rendered with fractional opacity, the overlapping shapes blend and create new forms.</p>
<div id="gallery"><a href="http://beautifulprogramming.com/wp-content/uploads/2013/11/CubicSunset3.jpg"><img alt="CubicSunset3" src="http://beautifulprogramming.com/wp-content/uploads/2013/11/CubicSunset3.jpg" width="940" height="540" /></a> <img class="alignnone size-full wp-image-67" alt="CubicSunset4" src="http://beautifulprogramming.com/wp-content/uploads/2013/11/CubicSunset4.jpg" width="940" height="540" /> <a href="http://beautifulprogramming.com/wp-content/uploads/2013/11/CubicSunset1.jpg"><img class="alignnone size-full wp-image-64" alt="CubicSunset1" src="http://beautifulprogramming.com/wp-content/uploads/2013/11/CubicSunset1.jpg" width="940" height="540" /></a></div>
<p></p><pre class="crayon-plain-tag">float cellSize = 50;
Node[] nodes;
int xRes, yRes;

float currentHue = 0.0;

void setup()
{
  size(940, 540);
  colorMode(HSB, 100);
  background(0);
  ellipseMode(CENTER);
  rectMode(CENTER);
  createNodes();
}

void draw()
{
  background(0);
  currentHue += 0.01;
  currentHue = currentHue%100;
  updateNodes();
}

void createNodes()
{
  xRes = ceil(width/cellSize) + 2;
  yRes = ceil(height/cellSize) + 2;
  nodes = new Node[(xRes)*(yRes)];

  for (int i=0; i&lt;yRes; i++)
  {
    for (int j=0; j&lt;xRes; j++)
    {
      float cx = j*cellSize + cellSize/2;
      float cy = i*cellSize + cellSize/2;
      cx -= cellSize;
      cy -= cellSize;
      Node node = new Node(cx, cy);
      nodes[i*xRes+j] = node;
    }
  }
}

void updateNodes()
{
  float noiseScale = 0.01;
  for (int i=0; i&lt;yRes; i++)
  {
    for (int j=0; j&lt;xRes; j++)
    {
      Node node = nodes[i*xRes+j];
      node.setEnergy(noise(i*noiseScale, j*noiseScale, frameCount*0.0008));
      node.update();
    }
  }
}

class Node
{
  float x, y, energy, ve;
  float size = 300;
  float rotation;

  Node(float _x, float _y)
  {
    x = _x;
    y = _y;
    energy = 0.5;
    ve = 0.0;
    rotation = PI / 4;
  }

  void update()
  {
    float edgeSoftness = 50;
    noStroke();
    fill(energy*400%100, 100, 100, 30);
    pushMatrix();
    translate(x, y);
    rotate(energy*TWO_PI*4);
    rect(0, 0, cellSize*2, cellSize*2);
    popMatrix();
  }

  void setEnergy(float e)
  {
    float de = e - energy;
    ve += de * 0.001;
    ve *= 0.95;
    energy += ve;
  }
}</pre><p><a class="button" href="http://beautifulprogramming.com/wp-content/uploads/2013/11/CubicSunset.zip" target="_blank"> DOWNLOAD SOURCE</a></p>
]]></content:encoded>
			<wfw:commentRss>http://beautifulprogramming.com/cubic-sunset/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>The Descent of Color</title>
		<link>http://beautifulprogramming.com/the-descent-of-color/</link>
		<comments>http://beautifulprogramming.com/the-descent-of-color/#comments</comments>
		<pubDate>Wed, 30 Oct 2013 15:27:59 +0000</pubDate>
		<dc:creator>colordodge</dc:creator>
				<category><![CDATA[Uncategorized]]></category>

		<guid isPermaLink="false">http://beautifulprogramming.com/?p=34</guid>
		<description><![CDATA[This sketch is relatively simple considering the compositions it ends up creating. There are a number of rectangles slowly floating upward. When the rectangles reach the top of the screen, they get repositioned at the bottom of the screen and given a new size and color. The hue is determined by a global hue value [&#8230;]]]></description>
				<content:encoded><![CDATA[<canvas datasrc="http://beautifulprogramming.com/wp-content/uploads/slidingBoxes.pde"></canvas>
<p>This sketch is relatively simple considering the compositions it ends up creating. There are a number of rectangles slowly floating upward. When the rectangles reach the top of the screen, they get repositioned at the bottom of the screen and given a new size and color. The hue is determined by a global hue value that is constantly cycling. The brightness, saturation, and size of the rectangles are selected randomly. To get the overlaid effects, each rectangle is drawn at a very low opacity and the underlying canvas (aka &#8216;graphics buffer&#8217;) is allowed to accumulate pixel colors instead of reseting each frame.</p>
<p>The end result is a lovely fish tank effect that I could just stare at for hours. The animation is done in processing and exported to processing.js. The source is available for download at the bottom of the page.</p>
<div id="gallery">
<a href="http://beautifulprogramming.com/wp-content/uploads/2013/10/descentOfColor1.jpg"><img class="alignnone size-full wp-image-37" alt="descentOfColor1" src="http://beautifulprogramming.com/wp-content/uploads/2013/10/descentOfColor1.jpg" width="940" height="540" /></a> <a href="http://beautifulprogramming.com/wp-content/uploads/2013/10/descentOfColor3.jpg"><img class="alignnone size-full wp-image-39" alt="descentOfColor3" src="http://beautifulprogramming.com/wp-content/uploads/2013/10/descentOfColor3.jpg" width="940" height="540" /></a> <a href="http://beautifulprogramming.com/wp-content/uploads/2013/10/descentOfColor4.jpg"><img class="alignnone size-full wp-image-40" alt="descentOfColor4" src="http://beautifulprogramming.com/wp-content/uploads/2013/10/descentOfColor4.jpg" width="940" height="540" /></a>
</div>
<p></p><pre class="crayon-plain-tag">Box[] allBoxes;
int numBoxes = 100;

float currentHue;
float hueStep = 0.5;
float xOffset;

void setup()
{
  size(940, 540);

  colorMode(HSB, 360, 1.0, 1.0, 1.0);
  background(360);
  currentHue = random(360.0);
  allBoxes = new Box[numBoxes];
  createBoxes();
  noStroke();

  xOffset = 0.0;
}

void draw()
{
  //  background(360);

  //  xOffset = (mouseX - width/2) * 0.002;
  xOffset = 0;

  for (int i=0; i&lt;allBoxes.length; i++)
  {
    allBoxes[i].update();
  }
}

void createBoxes()
{
  for (int i=0; i&lt;numBoxes; i++)
  {
    Box box = new Box();
    allBoxes[i] = box;
  }
}

float getNewHue()
{
  currentHue += hueStep;
  if (currentHue &gt;= 360.0) currentHue = 0.0;
  return currentHue;
}

boolean sketchFullScreen() {
  return false;
}
class Box
{
  float x, y, ww, hh;
  float h, s, v;
  float speed;
  float size = 400;

  Box()
  {
    reset();
    y = random(height);
  }

  void update()
  {
    y -= speed;
    x -= (xOffset*v);
    fill(h, s, v, 0.05);
    rect(x, y, ww, hh);

    wrap();
  }

  void wrap()
  {
    if (y+hh &lt; 0)
    {
      reset();
    }

    if (x &gt; width)
    {
      x = 0-ww;
    }

    if (x &lt; 0-ww)
    {
      x = width;
    }
  }

  void reset()
  {    
    x = random(width+size)-size/2;
    y = height;
    ww = random(size);
    hh = random(size);
    h = getNewHue();
    s = random(1.0);
    v = random(1.0);
    speed = random(0.2, 1.0);
  }
}</pre><p><a class="button" href="http://beautifulprogramming.com/wp-content/uploads/2013/10/descentOfColor.zip">DOWNLOAD SOURCE</a></p>
]]></content:encoded>
			<wfw:commentRss>http://beautifulprogramming.com/the-descent-of-color/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
