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