Project-03-Dynamic-Drawing

My initial idea was a sort of a compass or star that would rotate to always face the mouse. This was easiest as having the circle be in set positions, but grow when the mouse hovers close. I then had the idea to incorporate the “getting warmer” scheme, so that the circles would transition from one color to another as the mouse comes closer. Having 12 circles, this required extensive use of loops and arrays.

sketch

var centerx = 640/2;
var centery = 480/2;
var radius = 175;

var d = [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1];
var angles = [0, 30, 60, 90, 120, 150, 180, 210, 240, 270, 300, 330];

var largest = 0;
var trianglewidth = 50;

function setup() {
    createCanvas(640, 480);
    angleMode(DEGREES);
}

function draw() {
	background('white');
	noStroke();

	for(i = 0; i < d.length; i++){
		d[i] = (255 - dist(centerx + cos(angles[i])*radius, centery + sin(angles[i])*radius, mouseX, mouseY)) / 3;

		if (d[i] < 0){
			d[i] = 0;
		}

		if (d[i] > d[largest]){
			largest = i;
		}

		fill(255 - d[i]*3, 0, d[i]*3);
		ellipse(centerx + cos(angles[i])*radius, centery + sin(angles[i])*radius, d[i], d[i]);
	
	}
	var linecolor = dist(centerx, centery, mouseX, mouseY);
	if(linecolor > 255){
		linecolor = 255;
	}
	stroke(linecolor);
	strokeWeight(4);
	line(centerx, centery, centerx + cos(angles[largest])*(radius - d[largest]/2), centery + sin(angles[largest])*(radius - d[largest]/2));

}