Project 03: Dynamic Drawing

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


}




Leave a Reply