Category: Project-03-Dynamic-Drawing

sketch

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.

kzr-project-03

/*Kevin Riordan
Section C
kzr@andrew.cmu.edu
project_03*/
var lineX=0;
var lineY=0;
var colorX=0;
var colorY=0;
var colorR=0;

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

function draw() {
    background(0);
    //gridlines
    for(var c=0; c<=640; c+=20) {
        strokeWeight(0.3);
        stroke(200);
        line(c,0,c,480);
        line(0,c,640,c);
    }
    //lines coming in from the edges from top and bottom
    for (lineX=0; lineX<=640; lineX+=60) {
        //varying the color based on where mouse is
        colorX=mouseX;
        colorX=constrain(mouseX,0,255);
        colorY=mouseY;
        colorY=constrain(mouseY,0,255);
        stroke(lineX/4,colorX,colorY);
        line(lineX,0,mouseX,mouseY);
        line(640-lineX,640,mouseX,mouseY);
    }
    //lines coming in from the edges from left and right
    for (lineY=0; lineY<=640; lineY+=60) {
        //varying the color based on where mouse is
        colorX=mouseX;
        colorX=constrain(mouseX,0,255);
        colorY=mouseY;
        colorY=constrain(mouseY,0,255);
        stroke(lineY/4,colorX,colorY);
        line(0,lineY,mouseX,mouseY);
        line(640,640-lineY,mouseX,mouseY);
    };
    //lines going out from center to positions around the mouse
    for (var a=50; a<=650; a+=50) {
        //varying the color based on where mouse is
        colorR=(mouseX+mouseY)/2;
        colorR=constrain(colorR,0,255);
        colorX=255-mouseX;
        colorX=constrain(mouseX,0,255);
        colorY=255-mouseY;
        colorY=constrain(mouseY,0,255);
        stroke(colorR,colorX,colorY);
        line(width/2,height/2,mouseX+a,mouseY-a);
        line(width/2,height/2,mouseX-a,mouseY-a);
        line(width/2,height/2,mouseX+a,mouseY+a);
        line(width/2,height/2,mouseX-a,mouseY+a);
    }
    //large circle made up of smaller circles at certain increments
    for(var b=0; b<=360; b+=5) {
        colorX=(mouseX+mouseY)/2;
        colorX=constrain(colorX,0,255);
        fill(0,colorX,colorX);
        push();
        translate(width/2,height/2);
        rotate(radians(b));
        //loop used for incrementing the larger circles
        for (var g=1; g<=40; g++) {
            ellipse(mouseX*g,mouseY*g,5*(g/2),5*(g/2));
            ellipse(mouseX/g,mouseY/g,5/g,5/g);
        }
        pop();
        //triangular grid-like lines around circles
        push();
        translate(width/2,height/2);
        rotate(radians(b*2));
        for (var h = 1; h<=40; h++) {
            triangle((mouseX+b)/h,(mouseY-b)/h,mouseX/h,mouseY/h,(mouseX-b)/h,(mouseY+b)/h);
            triangle((mouseX+b)*h,(mouseY-b)*h,mouseX*h,mouseY*h,(mouseX-b)*h,(mouseY+b)*h);
        }
        pop();
    }
    //rectangles in background over gridlines
    for(var d=20;d<=640;d+=40) {
        //two different loops because I wanted to adjust color and placement, probably unneccessary
        for(var e=0;e<=640;e+=40) {
            fill(0,colorX-20,colorY-20,40);
            rect(d,e,20,20);
            fill(colorX-30,colorY-30,colorX-50,10);
            rect(d+10,e,mouseX/10,mouseY/10);
        }
        for(var f=0;f<=640;f+=40) {
            fill(colorX-40,colorY-40,0,50);
            rect(d+10,f-10,20,20);
            fill(colorY-40,0,colorY-40,60);
            rect(d+30,f-10,20,20);
        }
    }
}

I started by making the gridlines, and then started using loops to put in shapes, changing the color and position based on where the mouse was. I originally made it 800×800, but changed it to 640×480 at the end.