# Kevin Thies – Dynamic Drawing

``````
var deg = 0; // Degrees to Rotate
var x = 0; // Offset from origin
var r = 255; // Rgb Code
var b = 0; // rgB  Code
var dim = 10; // Circle Dimension

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

function draw() {

angleMode(DEGREES); // This makes things easier for later
background(220, 220, 220, 90);

push();
fill(r, 0, b); // changes fill color as mouse moves
noStroke();

translate(320, 240); // moving origin to center of screen
rotate(-deg); // 6 Counter Clockwise circles
ellipse (0 + x, 0, dim, dim);

rotate(60);
ellipse (0 + x, 0, dim, dim);

rotate(60);
ellipse (0 + x, 0, dim, dim);

rotate(60);
ellipse (0 + x, 0, dim, dim);

rotate(60);
ellipse (0 + x, 0, dim, dim);

rotate(60);
ellipse (0 + x, 0, dim, dim);

rotate(deg * 2); // 6 Clockwise Circles
ellipse (0 + x, 0, dim, dim);

rotate(-60);
ellipse (0 + x, 0, dim, dim);

rotate(-60);
ellipse (0 + x, 0, dim, dim);

rotate(-60);
ellipse (0 + x, 0, dim, dim);

rotate(-60);
ellipse (0 + x, 0, dim, dim);

rotate(-60);
ellipse (0 + x, 0, dim, dim);

rotate(-60);
ellipse (0 + x, 0, dim, dim);

pop();

/* As mouseX Increases, make the circles
- Rotate CW and CCW
- Move further away from origin
- Change Color
- Grow larger
All of these don't want to go completely offscreen
255 is a convienient number as it's used for standard rgb
To make something change slower, mouseX needed to be
ivided by a larger numbers
*/

deg = constrain (mouseX/3, 10, 255);
x = constrain (mouseX/3, 10, 255);
r = constrain (mouseX/3, 10, 255);
b = constrain (mouseX/3, 10, 255);
dim = constrain (mouseX/6, 10, 50);
}
``````

I really liked the image shown on the project page, and it made me think about loading icons. We’d just covered a lot of rotation, and a lot of loading icons are rotations, so I just followed those ideas and took a stab at it.