Sketch

Idea

I’m quite new to P5js so I started the project by drawing myself out.

The sketch is easy but I ended up giving up on the complicated version of my bang and chose to use an arc & a transparent triangle. I removed the stroke at the end because I like how an image is created just by these big chunks of color composing together. The blush, the piercing, and the top are all obvious characteristics of mine so I decided to include them apart from just coding my facial features out. The self portrait looks sad because I was sleepy when working on it.

I like photography a lot so I decided to use the background to show that.

 

Highlighted code

I used the variable & random code that we talked about in class to create the camera that appears at the beginning and the flashes. To make them obvious, I chose a plain green background. The camera’s movement is set using CameraX & CameraY global variables. I used CameraX = frameCount % width to make sure that they will reappear. The flashes appear using random. One thing that I might change in the future is to make the rectangles into a diamond shape and add white highlights so that they = look more like flashes. I might also add interactivity: users click on the camera to produce the flash.

//the flash
//make random camera flashes
frameRate(10);
let x = random(600);
let y = random(600);
fill('yellow');
rect(x,y,90,120);
fill('white');
//the camera
fill('rgb(224,216,216)');
rect(CameraX+4,CameraY-10,40,100,0)
fill('white');
rect(CameraX,CameraY,150,100,10);
fill('grey');
rect(CameraX,CameraY+20,150,60,5);
fill('rgb(175,165,165)');
circle(CameraX+80,CameraY+50,80);
fill('black');
circle(CameraX+80,CameraY+50,60);
fill('yellow');
circle(CameraX+90,CameraY+40,10);
CameraX = CameraX +1
CameraX = frameCount % width
CameraY = frameCount % width
noStroke();