Please hover your mouse over the canvas to interact with the sketch.

life and Death

Personal Project | Mar 2017

Creative Coding

Tool: Javascript library P5.js

 

 

I created a sketch that generates various patterns of generative circles by using a rose curve. In mathematics, a rose or rhodonea curve is a sinusoid plotted in polar coordinates. The sketch represents lives that are being born, growing and dying at this very moment. MouseX (left - right) controls the shape of the pattern, and mouseY (up - down) controls the velocity of its rotation. 

The whole code is as simple as this:

 

var p=1;
var speed=0;
var slider;
var angle=0;
var n=1;

function setup() { 
  createCanvas(windowWidth, windowHeight);
} 

function draw() { 
  p= map(mouseX,0,width, 0, 1000);
  background(0);
  translate(width/2, height/2);
  rotate(angle);
  beginShape();
  for (var a=0; a <TWO_PI*500/n; a+=0.5){
    var r= 350*cos(p*a);
    var x= r*cos(a);
    var y=r*sin(a);
    stroke(255);
    strokeWeight(0.02);
    noFill();
    vertex(x,y);  
  }
  endShape(CLOSE);
  speed= map(mouseY,0,height,-0.1,0.1);
  angle+=speed;
}
 
Screen Shot 2017-02-14 at 4.10.43 AM.png
Screen Shot 2017-02-14 at 3.48.58 AM.png
circle3.png
Screen Shot 2017-02-15 at 4.34.35 PM.png
Screen Shot 2017-02-15 at 4.35.53 PM.png
Screen Shot 2017-02-15 at 4.53.01 PM.png
Screen Shot 2017-02-15 at 4.35.07 PM.png
Screen Shot 2017-02-15 at 4.34.35 PM.png
Screen Shot 2017-02-15 at 4.34.52 PM.png