Category: Spring 2024 – Aaron (Section 001)

First, below is the p5 js Editor embedding.

In case p5js Editor website is down, below is the recording of working demo on YouTube.

1) 🤔 Conceptualization

As below, I wanted my self portrait to reflect my silhouette, not too realistic but not too cartoony, but something in the style of graphic novels or marvel/DC comics. I am an artist and engineer, and hence, I also would like to include some bells and whistles which define both my art and engineering aspects. Normally for my everyday casual wear, I usually wear the black Chinese long dress – Changshan (長衫), with a red and black Tangzhuang (唐裝) coat on the top, with my long hair properly tied with a red ribbon as below. 

Moreover, I also wanted the portrait to show my personal emblem, the stylized rectangular Greek letter Pi.

As below, my usual real life portraits will feature me wearing my Chinese traditional outfit, with floating glowing code in futuristic HUD (Head-up display), and some equations that either I derived, or some equations I use in my work frequently. And of course the Pi emblem. This concept perfectly “marries the traditions from the past with the technology of the future, and hence justifying my existence as the artistic engineer in 2024 at present.”

While doing this portrait, here are the constraints I would like to adhere to.

• Implement the portrait purely in p5js without any external libraries, external files in a single sketch.js file – such that when you copy and paste and run, it will run without additional configuration.
• Follow the rubrics of the course assignment (do not import any existing image or do not use mouse to draw, and must not be realistic – A manga style silhouette is ‘not’ realistic)
• In addition to the portrait, have items around me that defines me.

2) ⚙️ Technical Plan of Attack & Implementation

Since this is a “self-portrait” it should contain all the elements that gives the viewer a super brief introduction about a fraction of my life. Hence, below are the individual components used for the composition of the portrait.

• Portrait : I am a manga/anime artist and animator. The entire portrait is implemented using bezierVertex() functions to allow me greater control over the shapes, and obtain the sketchy graphic novel/manga style I want to achieve. This has to combine 1) the line art and the 2) color. Colors are added in between the bezier curves to fill the shape.  Therefore, a component of my portrait would look like

beginShape();
vertex(324, 76);
bezierVertex(323, 76, 322, 76, 321, 75);
...
bezierVertex(324, 76, 324, 76, 324, 76);
endShape(CLOSE);
fill("#010101");

• Animated Gears : I am a roboticist, and very fond of gears and servos. The gears are nothing but circles with partial opacity, and rectangles rendered on the side of the circles programmatically.
• Animated Cubes : I am an XR/VR/AR developer, a 3D artist and a mathematician. Hence, I want to do some maths to show some interactive floating 3D cubes around me to symbolize this aspect of my life. Just because p5 js is a 2D canvas technology does not mean I should not attempt my beloved 3D art here. And just because webGL is available in p5  does not mean I have to follow what everyone is doing. Who needs webGL when we can just do some readings in linear algebra, define the vertices of the cubes, and do some matrix multiplication through rotation matrices in 3D space, and project them to the 2D p5js canvas? The matrix multiplication, and the rendering the projection is coded in my single sketch.js file, a snapshot of the code is as follows.

// Rotation matrices for X, Y, and Z axes
let rotationZ = [
  [cos(angleCube), -sin(angleCube), 0],
  [sin(angleCube), cos(angleCube), 0],
  [0, 0, 1],
];

let rotationY = [
  [cos(angleCube), 0, sin(angleCube)],
  [0, 1, 0],
  [-sin(angleCube), 0, cos(angleCube)],
];

let rotationX = [
  [1, 0, 0],
  [0, cos(angleCube), -sin(angleCube)],
  [0, sin(angleCube), cos(angleCube)],
];

• Personal Emblem : I am a citizen Sinologist, and have always been inspired by East Asian culture. Traditional Japanese clans have their own family emblems called Mon (紋). I also have one myself, visually designed similar to that used by Nakagawa clan. I can draw my emblem by defining the  (x,y) coordinates of my emblem through an array, and letting vertex function loop through the shape.

function drawPiEmblem(x, y, scale) {
  const points = [
    { x: 46.3, y: 72.7 },
    ...
    { x: 73.3, y: 72.7 },
  ];

  beginShape();
  fill("#903C37");
  for (let i = 0; i < points.length; i++) {
    vertex(x + points[i].x * scale, y + points[i].y * scale);
  }
  endShape(CLOSE);
}

• Quine Code : I am a Computer Engineer, and quite fond of cool code tricks. In Computer Science, a quine is a computer program which takes no input and produces a copy of its own source code as its only output.  Since I usually put code in my real life portraits, I thought it would be cool for my self portrait to print out its own p5js code at my back. The approach is simple, I just copy the first a few lines of my code and just let it print like a terminal. This would have been a lot cooler if I can go under the hood of p5js, and overwrite its event loop + file reading permissions to read its own source code and print it out dynamically, rather than me hardcoding it.
• Custom font without using a custom font : I also wanted to use a better font, but I do not want to import anything into my single sketch.js implementation, hence I just produced some other good looking unicode characters using Stylish Text Generator (https://lingojam.com/StylishTextGenerator), if it works it works.
• Falling Pi Digits : My name is Pi, the infinite mathematical constant which never repeats. This means a lot to me since that name allows me to pull out infinite ideas from my brain, which never repeats (but pratically work, and aesthetically beautiful) at will. Hence, in my portrait, the mouse pointer will drop the digits of pi, as a particle system, in a repeated fashion (because you can’t hard code infinite Pi digits)… So, the mouse pointer at time intervals will drop the digits three, point, one, four, one , five , nine, two ….
• Backpropagation Equations : I am a published machine learning researcher, and deep learning is my default weapon of choice. Therefore, I wanted to honor the basic four equations which allows me to do my everyday work (sorry Maxwell, your equations take the second priority in my heart). Hence, I have the equations floating around me in my portrait.
• Accompanying music : I am a multi instrumentalist and a composer, and I wanted to give a background music to my portrait. However, since I am not using any external libraries, and I still want to implement a basic metal guitar riff, I ended up defining two oscillators to symbolize the top two guitar strings in dropped D tuning, and hard coding a metal riff  – but only using the simple waveforms 🙁 . I could have done the wave superpositions to simulate the acoustics and distortion pedal signal processing of the electric guitar, but let it be for now.

3) 🎨 Artistic Plan of Attack & Implementation

Vignette : The white background is bland, and as a big fan of Assassin’s Creed Animus Loading Screens, I wanted a pale vignette effect. However, since I am not importing anything, I just loop over the entire canvas and painting each of the background pixels the right intensity and alpha values.

Rule of third placement : A good rule of thumb in visual composition is to divide the entire canvas in three and place the subjects on these lines. My portrait is on the left line. Checklist checked.

Whitespace consideration : I could have added more because this portrait paints a very limited aspect of my life. I could have added more computational chemistry, professional Game Development, martial arts choreography, epidemiology simulation models, Web Dev , Dev Ops and linguistics and so on – but stopped, to keep the whitespace visually clear, I let the majority of dark colors sit on the left side, and right side of the portrait contains the main whitespace.

Mouse Interactivity : Also, I find my self portrait after coding to be very static, so I browsed through old archives of this Intro to IM blogs. My friend Naz did something cool and interactive with the mouse pointer to give a parallax effect, so I ended up stealing her idea from Self-Portrait by Naz (https://editor.p5js.org/iremnaz/sketches/oxRGnv701).

4) 💪 Challenges

There was zero challenge. I became one with the machine, and implemented the entire sketch.js in one sitting in one boring afternoon, sipping Jasmine tea.

5) 💡 Potential Improvements

One tricky thing is how quick my self portrait code runs (on computers which are slow). Since I am generating a lot of objects and doing a lot, I could have refactored my code more to run more smoothly. For instance, for the falling Pi digits, I can implement an Object pool pattern and reuse the previous particles as soon as they are out of frame. But these are just off the top of my head.

As a bonus, through obfuscation and clever syntax formatting, I could have made the source code of the program actually look like my portrait ascii art, just like how this donut generation code is in the shape of a donut (https://www.a1k0n.net/2006/09/15/obfuscated-c-donut.html). But let it be this time.

6) 🖥️ Source code

🖥️ Source code is just a single sketch.js file at : https://github.com/Pi-31415/Intro-To-IM/blob/main/Assignment-1/sketch.js

📖 References :

Rendering a rotating 3D cube in 2D (https://rosettacode.org/wiki/Draw_a_rotating_cube#JavaScript)

Backpropagation Equations (http://neuralnetworksanddeeplearning.com/chap2.html#the_four_fundamental_equations_behind_backpropagation)

Quine (https://cs.lmu.edu/~ray/notes/quineprograms/)

Stylish Text Generator (https://lingojam.com/StylishTextGenerator)

FREQUENCY CHARTS FOR NOTES ON THE GUITAR (https://douglasniedt.com/frequency-chart-for-notes-on-the-guitar.html)

Self-Portrait by Naz (https://editor.p5js.org/iremnaz/sketches/oxRGnv701)

Japanese crest Nakagawake kurusu (https://en.wikipedia.org/wiki/File:Japense_crest_Nakagawake_kurusu.svg)

Note: GPT-4 is utilized in the implementation of the code.

 

For this assignment, I aimed to incorporate one of my favorite things to do, that instantly fills my entire body with peace and happiness. Watching the sunset. The plan was ideally to make the background more ombre other than fading, however, as it’s my first time using p5js I found it difficult to implement that into my background. For future assignments, I’m hoping to create more interactive projects and master the ombre affect as well as getting more familiar with coding.

let rectWidth;
let rectHeight;
let rectX, rectY;
let eye1X = 170;
let eye2X = 230;
let speed = 8;

function setup() {
  createCanvas(400, 400);
  rectWidth = width/4;
  rectHeight = height/4;
  rectX = 0;
  rectY = height/2;
  angleMode(DEGREES);
}

function draw() {
  background(255, 255, 153, 10);

  //SUNSET BG
  
  rectMode(CENTER); //LIGHT ORANGE TOP
  stroke(255, 204, 0)
  fill(255,204, 0);
  rect(rectX, rectY-120, rectWidth+50, rectHeight+50);
  
  rectMode(CENTER); //D.ORANGE MID
  stroke(255, 153, 0)
  fill(255,153, 0);
  rect(rectX, rectY, rectWidth+50, rectHeight+50);

  rectMode(CENTER); //BOTTOM
  stroke(255, 102, 0)
  fill(255,102, 0);
  rect(rectX, rectY+120, rectWidth+50, rectHeight+50);
  

  
  rectX = rectX + speed;
  
  if (rectX > width){
  rectX = 0;
  }
  
  //hair
  fill(43, 28, 17);
  stroke(0, 0, 0);
  rect(200, 220, 205, 330, 90);
  
  //neck
  fill(240,190, 120);
  stroke(0,0, 0);
  rect(200, 239, 100, 100, 20);
  
  //face
  fill(240,190, 120);
  stroke(0,0, 0);
  ellipse(200, 150, 150, 175);
  
  //nose
  noFill();
  arc(198, 175, 20, 15, 270, 90);
  
  //shirt
  fill(136, 189, 242);
  rect(200, 380, 190, 270, 50);
  
  //bangs
  noStroke();
  fill(43, 28, 17);
  rect(200, 81, 100, 40, 58);
  strokeWeight(1.5);
  
  //right eye
  fill(255);
  ellipse(eye2X, 143, 40, 40)
  
  //left eye
  fill(255);
  ellipse(eye1X, 143, 40, 40);
  
  //right pupil
  fill(51, 0, 0);
  ellipse(eye2X, 143, 15, 20);
  
  //left pupil
  fill(51, 0, 0);
  ellipse(eye1X, 143, 15, 20);
  
  //mouth
  fill(0);
  arc(200, 192, 50, 50, 0 ,180);
  
  
  
}

 

While working on this assignment, I wanted to recreate my middle school self. I had some experience with Processing so working with P5.js wasn’t so hard to navigate and work with. The thing I struggles with the most in this assignment was the bow. The idea is simple but I never worked with triangles in code before so it was quite difficult trying to figure out the right coordinates. For future assignments I’d like to make my projects much more interactive and fun.

 

function setup() {
  createCanvas(400, 400);
  background(250, 195, 231);
  rectMode(CENTER);
 

}

function draw() {
  
  //Hair
  fill(99, 64, 18, 20);
  rect(200, 235,160, 250, 70);

  //Dress
  fill(232, 133, 12);
  rect(200, 390, 190, 200,60);
    
  //Neck
  fill(250, 207, 150);
  rect(200, 245, 70, 150);

  //Face
  fill(250, 207, 150);
  ellipse(width/2, height/2, 130, 150);
  
  //right eye
  fill(255,255,255);
  ellipse(173, 200, 25, 25);
  //pupil color
  fill(0),
  ellipse(173, 200, 11, 20);

  //left eye
  fill(255,255,255);
  ellipse(226, 200, 25, 25);
  //pupil color
  fill(0);
  ellipse(226, 200, 11, 20);  

  // Eyebrows
  strokeWeight(3);
  noFill();
  //Left eyebrow
  arc(173, 183, 35, 20, PI, TWO_PI); 
  //Right eyebrow
  arc(226, 183, 35, 20, PI, TWO_PI); 
  
  //Nose
  fill(166, 128, 78);
  ellipse(200, 220, 10, 15);

  //Mouth
  fill(255,255,255);
  arc(200, 240, 40, 40, 0, PI + 0, CHORD);
  
  //Bow
  fill(171, 50, 66);
  ellipse(250, 120, 20, 20);
  triangle(240,120,210,90,230,150);
  triangle(260,120,270,90,300,145);

  
  //Earings
  fill(237, 192, 66);
  //right earing
  ellipse(134, 210, 10, 10);  
  //left earing
  ellipse(267, 210, 10, 10);  


}

 

Concept:

My initial Idea was to create a realistic picture of a self-portrait of how I look in the traditional clothes I would wear when I am out.

Reflection and ideas for future work or improvements:

I would say that in the future, I would truly write down the numbers I try when it comes to centering things on the sketch because I kept going around in circles trying to center everything and because I kept placing the same numbers for the different heights and length due to me constantly forgetting what numbers I already tried so It just unnecessarily prolonged the process.

Code Implementation:

I have never used Javascript before, and my understanding of coding is somewhat simple. I had a tough time managing to create hair that looked normal at first, so I tossed that Idea out and wanted to create something else without knowing it was going to be a more complex idea in terms of coding, which was the Ghutra, thinking I would have to create a rectangle and be done with it. However, it did not look like anything close to what I wanted it to be, so I had to use a circle to show that the portrait was wearing it while using three different rectangles layered at different heights so that it shows the way I would personally tie it around my head. But now, looking back at the finished sketch, I would say that I was glad to take the long road of creating a Ghutra to showcase a more realistic portrait of the whole look I have going on.

function setup() {
  createCanvas(400, 400);
  background(255);
}

function draw() {
  
  // Body
  fill("white")// Body base color.
  ellipse(200,420,240,300)// Body base.
  
  // Face
  fill(210, 180, 140); // skin color
  ellipse(200, 200, 160, 200); // head shape
  
  // Ghutra
  fill("white");
  arc(200, 130, 130, 90, PI, 0); 
  rect(125, 120, 150, 30); 
  rect(125, 110, 150, 25);
  rect(125, 130, 150, 10);
  
  // Eyebrows
  fill("black"); 
  rect(150, 160, 40, 10); // left eyebrow
  rect(215, 165, 40, 10); // right eyebrow
  
    // Eyes
  fill("white");
  ellipse(170, 190, 40, 20); // left eye white
  ellipse(230, 190, 40, 20); // right eye white
  fill("black");
  ellipse(170, 190, 20, 20); // left pupil
  ellipse(230, 190, 20, 20); // right pupil
  
  // Mustache
  fill("black");
  arc(200, 248, 80, 30, PI, TWO_PI);

  // Beard
  fill("black");
  arc(200, 245, 140, 120, 0, PI);
  
  // Mouth
  fill("white");
  arc(200, 250, 50, 20, 0, PI);

  // Hair
  fill("white");
  
  noLoop(); // Stops draw loop
}

In my first coding project, I decided to represent myself through a unique concept, creating a digital persona that reflects my identity.

I used a triangular shape body to symbolize my abaya and incorporated a head turban, adding personal elements to the visual representation. Choosing lilac as the background, my favorite color, not only adds aesthetic appeal but also creates a connection to my preferences. I took pride in successfully integrating my name into the background and even discovered the possibility of including an emoji through my research, which was a pleasant surprise. Looking ahead, I aspire to advance my coding skills by incorporating more details like hands and feet, aiming for a more realistic depiction of a human figure.

Taking small steps and exploring the possibilities at my own pace is part of my learning journey, and I’m excited about the potential for future improvements in my coding projects.

This is my first attempt at p5.js. I’ve tried to reflect my personal preferences and appearances in this “self-portrait”. My idea is to portray a Bangladeshi girl with big eyes, dark lipstick, and blush wearing a dress and a necklace. I matched the skin color with my own complexion, and the hair color with my hair highlight’s color. Concept wise I think the intention was to personalize the drawing as much as I can using only the simple shapes like ellipse, circle, arc, rectangles and straight lines. I tried to make the colors pop and to make it very detailed for example the necklace is similar to an actual one that I have with an Emerald stone, then the parting between the hair which is something very prominent in my appearance. Placing the lips and the eyelashes were the most difficult part for me I think.
I added interactivity with a smile formed on the mouth upon mouse-click with the if-else statement and mouseIsPressed function. So if you click on the image the lips change to a smile.
For improvements I think adding interactivity with the eyes opening and closing periodically and having some texts would have been nice. Also maybe making it a full-body self-portrait would be a very detailed development I believe which I intend to work on later. Overall, I loved playing with the numbers and parameters and colors and shapes to make it more and more perfect to the reality.

function setup() {
  createCanvas(500, 500);
  background(255, 182, 193); //Pink background
}

function draw() {
  //Hair
  noStroke();
  fill(90, 56, 37); // Hair color
  arc(250, 140, 200, 180, PI, 0); // Top hair
  rect(150, 140, 200, 300); // Side hair
  
  //Neck
  fill(230, 180, 145);
  rect(200, 260, 100, 70);
  
  //Dress
  fill(220, 0, 100);
  arc(250, 445, 250, 300, PI, 0, OPEN);
  
  //Necklace Design
  noFill();
  strokeWeight(2);
  stroke(255);
  arc(250, 320, 137, 200, 0, PI);
  arc(250, 317, 127, 190, 0, PI);
  stroke(0);
  fill(31.4, 78.4, 49);
  ellipse(250, 416, 9, 12);

  //Face
  stroke(0);
  strokeWeight(1);
  fill(230, 180, 145); //Skin color
  ellipse(250, 200, 170, 195); //Face shape
 
  //Eyes
  fill(255); //White of the eyes
  ellipse(215, 180, 40, 20); //Left eye
  ellipse(285, 180, 40, 20); //Right eye
  fill(0); //Pupil color
  ellipse(215, 180, 10, 20); //Left pupil
  ellipse(285, 180, 10, 20); //Right pupil

  // Eyelashes
  stroke(0);
  strokeWeight(0.5);
  // Left eye eyelashes
  for (let i = 0; i < 5; i++) {
    line(190 + i * 6, 162, 200 + i * 6, 172);
  }
  // Right eye eyelashes
  for (let i = 0; i < 5; i++) {
    line(278 + i * 6, 172,  288 + i * 6, 162);
  }

  // Eyebrows
  strokeWeight(2);
  noFill();
  arc(215, 167, 40, 20, PI, TWO_PI); //Left eyebrow
  arc(285, 167, 40, 20, PI, TWO_PI); //Right eyebrow
  
  //Middle parting of Hair
  strokeWeight(1);
  line(250, 52, 250, 103);
  
  //Nose
  noFill();
  strokeWeight(1);
  arc(250, 210, 10, 15, 180, 90, OPEN); 
  
  //Blush
  noStroke();
  fill(255, 192, 203);
  ellipse(195, 210, 20, 10);
  ellipse(305, 210, 20, 10);

  //Forming a smiley face when mouse is pressed
  if(mouseIsPressed){
    noFill();
    stroke(0);
    arc(250, 225, 80, 45, 120, 103);
    fill(255);
    arc(250, 225, 58, 70, 120, 103, OPEN);
    
  }
  else{
    //Lips
    fill(128, 0, 0); //Lip color
    noStroke();
    arc(260, 250, 28, 12, PI, 0);
    arc(240, 250, 28, 12, PI, 0);
    arc(250, 250, 50, 20, 0, PI);
  }
}

 

Description:
For this assignment, I opted for a straightforward approach to create a self-portrait. The portrait includes various facial features, notably the eyes move horizontally due to the animation, and the eyebrows respond to the eye movement.

Sketch:

Code Implementation:

let eye1X = 170;
let eye2X = 230;
let direction1 = 1;
let direction2 = 1;
let lipYOffset = 0;

function setup() {
  angleMode(DEGREES);
  rectMode(CENTER);
  createCanvas(400, 400);
  background(240);
}

function draw() {
  background(240);

  // Draw the existing elements

  // hair
  fill(41, 38, 31);
  rect(200, 220, 205, 330, 90);

  // shirt
  fill(167, 181, 169);
  rect(200, 380, 190, 270, 40);

  // neck
  fill(245, 227, 176);
  rect(200, 239, 100, 100, 30);

  // face
  fill(245, 227, 176);
  ellipse(200, 150, 150, 175);

  // left eye
  fill(255);
  ellipse(eye1X, 143, 40, 40);

  // right eye
  ellipse(eye2X, 143, 40, 40);

  // left pupil
  fill(0);
  ellipse(eye1X, 143, 15, 20);

  // right pupil
  ellipse(eye2X, 143, 15, 20);

  // mouth
  arc(200, 192, 50, 50, 0, 180);

  // nose
  noFill();
  arc(198, 175, 20, 15, 270, 90);

  // bangs
  noStroke();
  fill(41, 38, 31);
  rect(200, 81, 90, 43, 58);
  strokeWeight(5);
  stroke(41, 38, 31);
  line(150, 115, 175, 115); // left eyebrow
  line(225, 115, 250, 115); // right eyebrow
  strokeWeight(1);
  stroke(0);



  // eye positions 
  eye1X += direction1 * 2;
  eye2X += direction2 * 2;

  // Check if eyes reach the edge and change direction
  if (eye1X <= 160 || eye1X >= 180) {
    direction1 *= -1;
  }

  if (eye2X <= 220 || eye2X >= 240) {
    direction2 *= -1;
  }

  
}

 

Concept:

Considering my beginner coding skills and the project’s deadline, I focused on portraying recognizable features like my curly hair and glasses in my self-portrait. To achieve this, I used circles to mimic the curls of my hair and smooth squares to represent the frames of my glasses. This approach allowed me to create a clear and straightforward depiction of these key features within the technical and time constraints of the project.

A highlight of some code that you’re particularly proud of:

//Hair
  noStroke()
  fill(0); 
  arc(200, 140, 120, 100, PI, 0); 

//Curls
fill("#181009")
  circle(150, 120, 50)
  circle(180, 120, 50)
  circle(210, 120, 50)
  circle(240, 120, 50)
  circle(245, 120, 50)

 

Embedded sketch:

Reflection and ideas for future work or improvements:

In my self-portrait, I generally feel content with the overall outcome, but there are elements I now recognize could have been improved. After looking at other examples, I realized a missed opportunity in the portrayal of my glasses. I wish I had learned to isolate a specific area for the eyes that would follow the cursor, adding an interactive and dynamic aspect to the artwork.

Another aspect I would revise is the portrayal of my facial features. Initially, I used simple shapes, but now I see the potential for more accurately representing features like my eyes, nose, and mouth. With more advanced coding skills, I could have added detail to these features, making the portrait not just an abstract representation but a more recognizable portrait of myself.

However I look forward to delving deeper into the possibilities of creative coding, pushing the boundaries of what I can create and express.