Ean Grady-Project3-Dynamic Drawing

sketch

//Ean Grady
//section B
//egrady@andrew.cmu.edu
//Project-03

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

function draw() {
    var r = int(mouseX)
    var g = int(mouseY)
    background(r, g, 100);
    var m = max(min(mouseX, 640), 0);
    var z = max(min(mouseY, 480), 0);
    var size = m;
    var size2 = z;
    noStroke();
    ellipseMode(RADIUS);
    fill(mouseY, mouseX, 100)
    ellipse(m * 200 / 400, z, size, size2);
    rect(200 + m * 200 / 400, z/2, size, size2);
    ellipse(400 + m * 200 / 400, z/3, size, size2);
    fill(mouseX, mouseY, 100)
    rect(100 + m * 200 / 400, z/4, size, size2);
    ellipse(350 + m * 200 / 400, z/5, size, size2);
    size = 400 - size;
    fill(mouseY, mouseX, 150)
    ellipseMode(CENTER);
    rect(300 + m * 200 / 400, z, size, size2);
    ellipse(150 + m * 200 / 400, z/2, size, size2);
    fill(mouseY, mouseX, mouseY)
    ellipse(250 + m * 200 / 400, z/3, size, size2);
    rect(50 + m * 200 / 400, z/4, size, size2);
    ellipse(450 + m * 200 / 400, z/5, size, size2);
    size = 320 - size;
    fill(mouseY, mouseX, 50)
    ellipseMode(CORNERS);
    ellipse(z * 200 / 400, m, size, size2);
    rect(200 + z * 200 / 400, m/2, size, size2);
    ellipse(400 + z * 200 / 400, m/3, size, size2);
    fill(mouseX, mouseY, 150)
    ellipse(100 + z * 200 / 400, m/4, size, size2);
    ellipse(150 + z * 200 / 400, m/5, size, size2);
    size = 340 - size;
    fill(mouseX, 100, mouseY);
    ellipseMode(CORNER);
    rect(250 + z * 200 / 400, m, size, size2);
    ellipse(300 + z * 200 / 400, m/2, size, size2);
    fill(mouseX, 100, mouseY)
    ellipse(350 + z * 200 / 400, m/3, size, size2);
    fill(100, mouseX, mouseY)
    ellipse(450 + z * 200 / 400, m/4, size, size2);
    rect(50 + z * 200 / 400, m/5, size, size2);
    fill(mouseY, mouseX, 100)
    ellipse(75 + z * 200 / 400, m/5, size, size2);
}

I really enjoyed this project because it allowed me to get familiar with using the mouseX and mouseY variables, I also began to start feeling a lot more comfortable with programming in p5.js through making the dynamic drawing. Essentially, what I did was start with the example dynamic drawing as a template and then worked from there.

Leave a Reply