Kai Zhang-Project-03-Dynamic-Drawing

project03-kaiz1

//Kai Zhang
//Section B
//kaiz1@andrew.cmu.edu
//Project-03

var RECX = 255 / 480; //remap color index in X
var RECY = 255 / 640; //remap color index in Y

var REAX = 720 / 480; //remap angle index in X
var REAY = 720 / 640; //remap angle index in Y

var diffx = 0;
var diffx = 0;
var diffx1 = 0;
var diffy1 = 0;
var x = 240;
var y = 320;
var x1 = 240;
var y1 = 320;

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


function draw() {
	background(x*1.2, y*1.2, abs(x - y));
	
	//set delay for the movement
    diffx = mouseX - x;
    diffy = mouseY - y;
    diffx1 = mouseX - x1;
    diffy1 = mouseY - y1;

    x = x + 0.07*diffx;
    y = y + 0.07*diffy
    x1 = x1 + 0.06*diffx1;
    y1 = y1 + 0.06*diffy1;

    //the central dot
	translate(mouseX, mouseY);

	noStroke();
	fill(y * RECY, abs(x - y) * RECY, x * RECX)
	ellipse(0, 0, 20, 20)

	//the faster arcs
	translate(-mouseX, -mouseY);
	translate(x, y);//recenter canvas by using delayed variable

	strokeWeight(x/50 + y/50);
	noFill();

	stroke(y * RECY, x * RECX, abs(x - y) * RECY);
	arc(0, 0, 50, 50, REAX * x, REAX * x + 120);
	arc(0, 0, 130, 130, REAX * x - y, REAX * x - y + 120);
	arc(0, 0, 210, 210, REAX * y - x, REAX * y - x + 120);

	stroke(x * RECX, abs(x - y) * RECY, y * RECY);
	arc(0, 0, 70, 70, REAY * y, REAY * y + 120);
	arc(0, 0, 150, 150, REAY * y - x, REAY * y - x + 120);
	arc(0, 0, 230, 230, REAY * x - y, REAY * x - y + 120);

	//the slower arcs
	translate(-x, -y);
	translate(x1, y1);//recenter canvas again

	stroke(abs(x - y) * RECY, y * RECY, x * RECX);
	arc(0, 0, 90, 90, -REAX * x, -REAX * x + 120);
	arc(0, 0, 170, 170, REAY * y + x, REAY * y + x + 120);
	arc(0, 0, 250, 250, REAY * x + y, REAY * x + y + 120);

	stroke(abs(x - y) * RECY, x * RECX, y * RECY);
	arc(0, 0, 110, 110, -REAY * y, -REAY * y + 120);
	arc(0, 0, 250, 250, REAY * x + y, REAY * x + y + 120);
	arc(0, 0, 270, 270, -REAY * x + y, -REAY * x + y + 120);

}

In this project, I’ve created a series of arcs that rotates around the same center dot. There are four visual variables of the shapes, the arc rotation, arc colors, arc positions, and arc stroke weight. Also the canvas is changing the colors. All the variables are controlled by the mouse X and Y positions. In order to make it more visually pleasing, I’ve set delays of different parameters of the arc movings and color changings. So they would in fact spend some time to reach their desired conditions.