# Kai Zhang-Project-03-Dynamic-Drawing

//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.