This is my project for dynamic drawing. The most difficult part for me is understanding the relationship between the size of the hearts and the distance between the hearts and my mouse.
sketch
//Jenny Wang
//Section B
function setup() {
createCanvas(600,450);
background(220);
text("p5.js vers 0.9.0 test.", 10, 15);
smooth();
noStroke();
}
var s = 30 //space in between
var x = 0
var y = 0
var heart
var angle = 0
function draw() {
background("lightblue");
//set color variation
var R = (dist(x,y,mouseX,mouseY)/100)*30;
var G = (dist(x,y,mouseX,mouseY)/100)*20;
var B = (dist(x,y,mouseX,mouseY)/100)*30;
//draw hearts with for loops
var maxD = 50;
var maxS = 3;
for (x = 0; x < width; x += s) {
for (y = 0; y < height; y += s) {
fill (R,G,B);
var size = (dist(x,y,mouseX,mouseY)/maxD)*maxS;
//set size variation
heart(x+s/2, y+s/2, size);
}
}
//draw heart
var r = mouseX/2
push()//square1
fill("lightyellow");
translate(width/2,height/2);
rotate(radians(angle)+10);
ellipse(mouseX/2,mouseY/2,r*2+mouseX/2);
pop();
angle += 2;
push()//square2
fill("lightgreen");
translate(width/2,height/2);
rotate(radians(angle)+20);
ellipse(mouseX/2,mouseY/2,r*2+mouseX/2);
pop();
angle += 2;
push();
fill("pink");//circle 3
translate(width/2,height/2);
rotate(radians(angle)+30);
ellipse(mouseX/2,mouseY/2,r*2+mouseX/2);
pop()
angle += 2;
function heart (x,y,size){
// fill(R,G,B);
beginShape();
vertex(x, y);
bezierVertex(x - size / 2, y - size / 2, x - size, y + size / 3, x, y + size);
bezierVertex(x + size, y + size / 3, x + size / 2, y - size / 2, x, y);
endShape(CLOSE);
}
//draw a heart
}