akluk – section A – project-03 – DynamicDrawings

sketch.jsIt was quite challenge to align and create a dynamic ring of shapes that was uniformly spaced and distributed.

var radius = 200
var x_c = 320;
var y_c = 240;
//1/8 of 2 pi
var theta = 0.785;
var shapes = 8;
function setup() {
    createCanvas(640, 480);
    background(220);
}

function draw() {
    background(0);

    //draws dynamically colored background
    //left rectangle
    fill(color(255-mouseX/3,mouseX/2,255-mouseX/3));
    rect(0,0,mouseX,480);

    //right rectangle
    fill(color(100,170,255-mouseX/4));
    rect(mouseX,0,640-mouseX,480);

    //calculations to create dynamic behavior
    var distance = dist(width,y_c,mouseX,mouseY);
    radius = distance/2;
    translate(320,240);
    push();

    //offset rotation
    rotate(radius/10);

    //creates the ring of shapes
    for (i = 0; i < shapes; i++)
    {
    	rotate(theta);
    	fill(color(40+i*radius/8,100-i*radius/8,100));
    	if (i%2 == 1){
    		triangle(160-radius,0,180-radius,-20,180-radius,20);
    	}
    	else{
    		ellipse(160-radius,0,30+radius/6,30+radius/6);
    	}
    }
    pop();
}