Project 9

sketch

var img;

function preload() {
    img = loadImage("https://i.imgur.com/mbg1U1D.jpg");
}

function setup() {
    img.resize(img.width/7, img.height/7);
    createCanvas(img.width, img.height);
    smallPoint = 4;
    largePoint = 10;
    //imageMode(CENTER);
    noStroke();
    img.loadPixels();
    textAlign(CENTER);
    text("CLICK TO CHANGE COLOR",width / 2,height / 2)

}

function draw() {
    //fill with heart
    let pointillize = map(mouseX, 0, width, smallPoint, largePoint);
    let x = floor(random(img.width));
    let y = floor(random(img.height));
    let pix = img.get(x, y);
    fill(pix, 10);
    heart(x, y, pointillize, pointillize);
    var cols = img.get(mouseX, mouseY);

    //fun text fills image according to mouse
    fill(cols);
    textStyle(BOLD);
    textSize(20);
    text("YA", mouseX, mouseY);
}

function heart(x, y, size) {
  //custom shape
  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);
}

function mousePressed() {
    //background color changes
    background(color(random(255), random(255), random(255)));
}

Once I figured out how to make this project more creative, it was more fun to create. The text that follows the mouse to fill in the image was fun to play around with.