Drawing with Code

February 8th, 2025 by Isaac Cheaz

Prof: J.H. Moon

p5.js embed of the sketch

click here for fullscreen

For this mini project, we were tasked to code a self-portrait of ourselves and be as creative as possible. For mine, I used the selfie I took on Halloween, wearing a sloth onesie, and coded the face part of it.

process:

finding a reference:

I first had to find a reference to take inspiration from. This was the base of the mini project, a photo that defined myself and was simple enough to deconstruct into simple shapes to codify into P5.js. Scrolling through my gallery, a selfie of me wearing a onesie caught my attention and I decided right away that I wanted to turn that into a self portrait, or the reference for my first mini project.

2. sketching it on paper into simple shapes

Now, coding the picture and all of its details would be too time consuming and difficult at my level of P5.js. So on paper, I drew the selfie and broke it down into simple shapes. E.g. squares, circles, rectangles, semi-circles, ovals.

Final Sketch

First attempt

3. coding it!

The final section of the process was coding it. Since P5.js was awfully similar to Processing and I had learnt it previously on Interaction Lab, coding it was fairly easy. Although I have to admit that I needed some refreshers for some of the shape's parameters. The only tedious part of coding was the coordinates, it required a lot of mental math and imagination...

code

function setup() {
createCanvas(500, 500);
background(255, 218, 115);
}

function draw() {
noStroke();
fill(150, 75, 0);
arc(250, 220, 200, 270, 0, PI+PI);
triangle((width/4)+20,height-150, (width/4)+100, height-150, (width/4)+25, (height/2)-17)
triangle((width/2)+30,height-150, (width/2)+110, height-150, (width/2)+100, (height/2)-17)
fill(255, 253, 208);
circle(250,250,140);
rect(180,175,140,70,10);
rect(215,175, 70, 175, 5);
fill(0);
arc(250, 200, 145, 170, PI, 0);
fill(255, 253, 208);
triangle(230, 200, 270, 200, 250, 150);
fill(255);
arc(250, 150, 160,100, PI, 0)
beginShape();
vertex(180, 350);
vertex(160, 350);
vertex(170, 150);
vertex(190, 150);
endShape();
beginShape();
vertex(320, 350);
vertex(340, 350);
vertex(330, 150);
vertex(310, 150);
endShape();
fill(0);
arc(250, 110, 75,50, PI, 0)
circle(205,103,10);
circle(295,103,10);
stroke(0);
beginShape(LINES);
vertex(205,120);
vertex(235,130);
vertex(235,130);
vertex(265,130);
vertex(265,130);
vertex(295,120);
endShape();
fill(66, 37, 25);
rect(190,195,45,10);
rect(265,195,45,10);
fill(255, 253, 208);
circle(217,230,45);
circle(283,230,45);
fill(255);
circle(217,230,25);
circle(283,230,25);
fill(0);
circle(219,227,15);
circle(285,227,15);
beginShape(LINES);
vertex(305,227);
vertex(315,227);
vertex(195,227);
vertex(185,227);
vertex(240,227);
vertex(260,227);
endShape();
noStroke();
beginShape();
vertex(225,280);
vertex(275,280);
vertex(270,290);
vertex(230,290);
endShape();
fill(255, 135, 102);
triangle(250,240,240,265,260,265);
}

The code doesn't exactly have to be broken down into snippets. In short, everything inside "function draw()" generates shapes that come together into the self-portrait. While on the other hand, everything inside "function setup()" sets up the canvas for the shapes (the background color and canva size).

redundant sections

before

after

This is probably the only part of the code that could be "smoothened" out. I started using width and height variables since I saw Professor Moon using in class. However, I found it challenging to do operations with the variables other than divide, since I needed to use parenthesis. So for the rest of the code I stopped using width and height and instead wrote the exact coordinate.

takeaways

There wasn't much to learn since I've already played around with Processing and we all know how similar it is to P5.js. However, I didn't touch a lot of nuance shapes such as vertexes and arcs so that was something new. I also learned that its important to plan the layers and which shapes need strokes and which don't. LA Alex gave the suggestion of using "stroke()" in specific sections of the code in order to not mess up the layers of the shapes. In short, a lot of the fundamentals were easy since I have experience from previous classes, but some tedious problems occurred so I had to carefully find a solution for each one.

Page updated

Report abuse