Project 09 – Computational Portrait

sketch
//Stefanie Suk
//15-104 Section D

var selfPic;
var starSize = 10; //initial star size 10
let stefanie = ['s', 't', 'e', 'f', 'a', 'n', 'i', 'e']; //letters of my name
let stars = ['✦', '★', '✷', '✸']; //shapes of stars

function preload() {
  selfPic = loadImage("https://i.imgur.com/iSI6MtQ.jpg"); //preloading image
} 

function setup() {
  createCanvas(400, 400);
  noStroke();
  background(0); //initial background color set to black
  imageMode(CENTER);
  selfPic.loadPixels(); 
  frameRate(30);
  
}

function draw() {
  //get random x, y coordinates 
  var x = random(selfPic.width);
  var y = random(selfPic.height);
  var p = selfPic.get(x, y); //color to image at location

  //draw letters s,t,e,f,a,n,i,e
  fill(p);
  textSize(15);
  textFont("Helvetica");
  textStyle(BOLD);
  text(random(stefanie), x, y); //draw random letters from my name 

  //draw stars
  var mouseColor = selfPic.get(mouseX, mouseY); //color star to image at mouse location
  fill(mouseColor);
  textSize(starSize);
  text(random(stars), mouseX, mouseY); //draw random stars
}

function mousePressed() {
  background(255); //resets with the color of white
}

function keyPressed() {
  starSize += 1; //star size increases when any key is pressed
}

I chose a photo of me during quarantine taking pictures of myself because I was really bored. This portrait draws random letters of my name, as well as random shapes of stars based on the mouse position. The star increases in size when any key is pressed, and the portrait resets to a color of white when the mouse is clicked. 

Image of portrait
Portrait with only letters
Portrait with letters and stars with different sizes

Leave a Reply