dynamic drawing

sketch.js

/* Arden Wolf
Section B
ardenw@andrew.cmu.edu
dynamic drawing */

function setup() {
    createCanvas(640, 480);
}
 
function draw() {
    background(0,24,255);
 
    var opposite = width-mouseX// makes object go in opposite direction

 //middle

    fill(255);
    ellipse(mouseX, 100, 60, 60);
    fill(0);
    ellipse(mouseX, 100, 30, 30);
 
    fill(255);
    ellipse(opposite, 200, 60, 60);
    fill(0);
    ellipse(opposite, 200, 30, 30);

    fill(255);
    ellipse(mouseX, 300, 60, 60);
    fill(0);
    ellipse(mouseX, 300, 30, 30);

    fill(255);
    ellipse(opposite, 400, 60, 60);
    fill(0);
    ellipse(opposite, 400, 30, 30);

    fill(255);
    ellipse(mouseX, 500, 60, 60);
    fill(0);
    ellipse(mouseX, 500, 30, 30);

//side
    fill(255);
    ellipse(100, mouseX, 60, 60);
    fill(0);
    ellipse(100, mouseX, 30, 30);

    fill(255);
    ellipse(400, opposite, 60, 60);
    fill(0);
    ellipse( 400,opposite, 30, 30);

    fill(255);
    ellipse(200, mouseX, 60, 60);
    fill(0);
    ellipse(200, mouseX, 30, 30);

    fill(255);
    ellipse(300, opposite, 60, 60);
    fill(0);
    ellipse(300,opposite, 30, 30);

    fill(255);
    ellipse(500, mouseX, 60, 60);
    fill(0);
    ellipse(500, mouseX, 30, 30);






    /*

    fill(255);
    ellipse( 100,mouseX, 60, 60);

    fill(255);
    ellipse(opposite-50,200, 60, 60);

    fill(0);
    ellipse(opposite-100, 250, 60, 60);

    fill(0);
    ellipse(opposite-500, 250, 60, 60);

    fill(0);
    ellipse(opposite-300, 400, 60, 60);

    fill(0);
    ellipse(mouseX+300, 400, 60, 60);

    fill(0);
    ellipse(mouseX+300, 100, 60, 60);
*/

}

I created a dynamic image of floating eyes using the variable we learned with width-mouseX.

Leave a Reply