Project-09 Portrait

sketch

I made this interactive work which allows the user to move their mouse around to fill out the image with the brush feature. The brush has the shape of leaves. The user can change the brush shape with key press. I want to create a painting like atmosphere. The elements at each pixel consists of text “she, 20, art” and patterns such as flowers, stars, hearts, etc.

//Heying Wang
//section B
let img;
//key words abut me
let words=['20','she','art','✿','*','♥︎','❀','♛']
var leafShape='serrate'

function preload() {
  img = loadImage('https://i.imgur.com/fgOhCaN.jpeg');
}

function setup() {
  createCanvas(480, 480);
  imageMode(CENTER);
  noStroke();
  background(255);
  img.loadPixels();
  img.resize(480,480);
  background(map(mouseX,0,width,0,255),70,90);
  frameRate(10000);
  
}

//find the pixel color 
function draw() {
  let x = floor(random(img.width));
  let y = floor(random(img.height));
  let pc = img.get(x, y);
  fill(pc);
  //smaller founts for important parts of the image
  //so that there will be more details
  if(x>150 & x<350 && y>0 && y<220){
      textSize(8);
  }
  else if(x>120 & x<400 && y>300 && y<400){
      textSize(12);

}else{
    textSize(15)
}
    /* brush Feature: the player can move 
    the mouse around to fill out the image faster
    the brush stroke has the shape of leaves */

    text(random(words),x,y);

    if(leafShape=='serrate'){
        fill(img.get(mouseX,mouseY));
        beginShape()
        curveVertex(mouseX,mouseY);
        curveVertex(mouseX,mouseY-8);
        curveVertex(mouseX-4,mouseY-15);
        curveVertex(mouseX,mouseY-20);
        curveVertex(mouseX+4,mouseY-15);
        curveVertex(mouseX,mouseY-8);
        endShape(CLOSE);
    }
    //change brushes
    else if (leafShape=='digitate'){
        fill(img.get(mouseX,mouseY));
        line(mouseX,mouseY,mouseX,mouseY-6);
        beginShape();
        vertex(mouseX,mouseY);
        vertex(mouseX,mouseY-5);
        vertex(mouseX+8,mouseY-8);
        vertex(mouseX,mouseY-11);
        vertex(mouseX-8,mouseY-8);
        endShape(CLOSE);
    }
    console.log(leafShape);



    

   


}

function keyTyped(){
    
    if(key==='d'){
        leafShape='digitate'
    }
    else if(key==='s'){
        leafShape='serrate'
    }
}