Concept
I am continuing the story of Dexter. I tried to incorporate as many things as we learned this week, including for loops, width/2, the mouseIsPressed function, and oscillations using the random function. What the audience sees is unstable because the varying sizes of circles are constantly changing, representing chaos when Dexter Morgan is not himself but is controlled by his inner devil, which he calls the Dark Passenger. The blood slide at the top represents him in this state, showing that he is currently in Bay Harbor Butcher mode. The frameRate is set higher to emphasize how stressed and uncontrollable he is at this point.

By pressing the button, the audience sees calm Dexter Morgan, an ordinary husband with golden wings that symbolize how kind and loving he actually is in real life when the Dark Passenger is absent. He appears more stable, with the random function set to produce smaller differences in circle sizes, and the frameRate is lower to represent that. White represents his good nature, while red represents his killings and dark side..

Highlight of the code I am proud of

if (mouseIsPressed) {
      frameRate(5);
      if(mouseX <= width/2){
      textSize(32);
      fill('rgb(255,255,255)');
      stroke(0);
      text('Dexter Morgan', mouseX, mouseY);
    }
      for (let x = 0; x <= width-460; x += 50) {
        for (let y = 100; y <= height-100; y += 50) {
      fill ('gold');
      randomNumber = random(30, 40);
      rect(x, y, randomNumber);

else {
    frameRate(30);
    if(mouseX <= width/2){
      textSize(32);
      fill('red');
      stroke(0);
      text('Bay Harbor Butcher', mouseX, mouseY);
    }
  // blood
    fill(255, 255, 255, 90);
    rect(225,10,150,80);
    fill('#AC153A');
    circle(300,50,50);
    
    for (let x = 120; x <= width-120; x += 50) {
      for (let y = 350; y <= height; y += 50) {
    fill ('red');
    randomNumber = random(40, 80);
    circle(x, y, randomNumber);}}

I would say I made good use of if and else statements. I wanted the user to press a button to see Dexter’s good side, and when not pressing anything, they would see his dark side. By adding an if (mouseIsPressed) statement along with an else, I was able to make my concept work. Otherwise, I didn’t use else statement, initially, and only had if mouseIsPressed. So, those to visualizations of white & gold overlapped with red.

Sketch

Reflection
I believe Dexter’s unstable character could be developed further. For example, I’d like to incorporate another mouseIsPressed command into his evil character, so that when pressing more, the circles’ oscillations would become faster and grow larger and larger. However, to achieve this, I need to make sure that two mouseIsPressed commands don’t overlap, so I need to come up with a creative solution.

 

Assignment 1: Self-Portrait with p5.js

For this first assignment, I wanted to keep things fun. Instead of trying to make a realistic self-portrait, I went for a cartoon version of myself using only simple shapes in p5.js. I spend a lot of my free time messing around with cartoon animation, so it felt right to make something that leans more toward humor and character design than strict accuracy. To be honest, you can think about it as less “this is exactly me” and more “this could be a funny character version of me.”

While I was building it, I played around with how the shapes stacked and layered, almost like sketching with blocks of color. Gradually, the face started to take shape, and I found myself enjoying the process of tweaking small details until it felt right. One of my favorite parts is the hat and how the patterned brim adds a bit of texture and keeps it from looking too flat. Even though it’s all made from basic geometry, I’ve tried to make the final portrait have a personality that feels a little quirky, and I hope I’ve succeeded in doing so.

Highlight of Code

As I mentioned above, one part I’m particularly proud of is the hat pattern (I have this hat in real life). For it, I used a simple pair of for loops with line() to create a crosshatch effect. It gave the hat texture and visual interest without being too complicated:

// Hat pattern 
stroke(100);
for (let i = 130; i < 270; i += 20) {
  line(i, 120, i, 155);
}
for (let j = 120; j < 155; j += 15) {
  line(120, j, 280, j);
}
noStroke();

It is not 100% likeness, but just enough to provoke the character and the sense of personality I want.

Embedded Sketch

Here’s the live sketch (embedded from p5.js):

Reflection

This assignment was a lot of fun, but also more challenging than I expected. The hardest part for me was getting the proportions and placement to look right. At first the eyes looked uneven, or the body would run off the canvas, and fixing that was mostly trial and error. I spent a lot of time just adjusting numbers a little bit at a time until things felt balanced.

What I liked about this process is that it felt a bit like debugging, but in a more visual way. Instead of checking for errors in the console, I was checking with my own eyes to see if something looked off. That back and forth between logic and aesthetics was interesting and kept me engaged. In the end, I am very happy with how my self-portrait turned out. It is simple and kind of silly (one that I might use in my future animations), but that is what I wanted. More than anything, I enjoyed treating code like a sketching tool instead of just a way to solve technical problems. It was refreshing and utterly intersting.

 

Here’s the final output(hint: try to move the mouse around the portrait).

Inspiration:

From long ago, I watched the Love Death + Robots series produced by Netflix and loved the story of Zima Blue. https://www.imdb.com/title/tt9788510/ . I love the plot and the artistic choice, so when it comes to a chance to digitally create something related to my self-portrait, I decided to draw a painting in the style of Zima Blue.

However, I am not good at drawing and learn how to draw picture quickly in p5js almost seems impossible. Thanks to the development of computer vision and the style transfer algorithm(https://en.wikipedia.org/wiki/Neural_style_transfer), I was able to upload my picture and a photo of Zima Blue to ChatGPT and ask it to perform style transfer.

Here’s the Zima Blue original episode screenshot and the photo I obtained after style transferring to one of my photos.

(original episode screenshot)

(style-transferred picture)

Work Flow:

However, the produced format is in jpg style and it is impossible to convert it into drawing functions that are built in p5js. And directly asking GPT to transfer the image to p5js code produces unintended effects.

 

(direct p5js conversion)

 

I consulted previous student Pi(pi.ko@nyu.edu) for assistance and solution is followed:

1. upload the jpg file to websites like(https://www.cutout.pro/photo-enhancer-sharpener-upscaler) to increase the number of pixels in the photo.
2. load the file into Adobe Illustrator use the Make Trace Command to receive the SVG file(https://en.wikipedia.org/wiki/SVG) which contains all the x,y coordinate of the lines so it is possible for it to be converted into built-in functions in p5js(the parser could be found in the appendix)

After this, I worked with GPT to color the drawing. Since they are of irregular shapes and the parser convert them into coordinates, it is hard for me to identify which parts to color. So, I ask GPT to write a helper function to label the region of the curves and the coloring comes after.

In the end, I want to add an effect of changing the background color with mouse moving, so the central logic behind is as followed:

// Normalize mouse to 0..1 (works even when mouse is outside the canvas)
const mx = constrain(mouseX / width,  0, 1);
const my = constrain(mouseY / height, 0, 1);

// Use mouseX to steer hue, mouseY to steer saturation/brightness.
// Feel free to tweak the ranges to taste.
const baseHue = map(mx, 0, 1, 20, 220, true);     // left→right: orange → blue
const sat     = map(my, 0, 1, 70, 90,  true);     // bottom→top: more vivid
const bTop    = map(my, 0, 1, 95, 70,  true);     // top band gets darker as you go down
const bMid    = map(my, 0, 1, 90, 65,  true);
const bBot    = map(my, 0, 1, 80, 60,  true);

The complete code and the parser could be found on:

1. complete code(copy and paste the code into p5js and you will receive what’s above): https://github.com/dr04002/Intro_IM/blob/acaed841ba9257a17bef0dad063c0cf1d1e4a1bb/sketch.js
2. parser:https://github.com/dr04002/Intro_IM/blob/acaed841ba9257a17bef0dad063c0cf1d1e4a1bb/svg_conversion

Here are future improvements that I could make:

1. the left shoulder should be blue but they are left blank in this drawing
2. the size of the canvas should fit the size of the main portrait so there’s no blank on the bottom,

Concept:

When I began thinking about how I wanted to represent myself in a self-portrait, the moon immediately came to mind. My name, Aizhan, means “moonsoul” in Kazakh, and I feel that the moon will be the great representation of who I am. I wanted my portrait to convey not just my physical appearance, but also my personality and identity. Before bringing the portrait to life in p5, I started with sketches on paper. These first drawings helped me organize my ideas and experiment with shapes, composition, and visual elements, allowing me to see how I could best represent myself.

One of the interactive features of the final portrait is that when viewers click on it, my eyes move from side to side. This small animation gives the portrait a sense of life and presence, making it feel as though it is observing and engaging with the viewer. Another feature is a falling star across the background. The star represents an aspect of my inner self, like a spark of energy, curiosity, or imagination that is always part of who I am.

Highlight of the code I am proud of:

The part of my project that I am most proud of is the code that makes the eyes move when the viewer clicks on the portrait and it was probably the most time consuming part. I chose this feature because it adds a sense of life and interaction to my self-portrait, making it feel like the portrait is really engaging with the viewer. The tutorials and references helped me to figure out how to add interactive elements to my portrait. They guided me through understanding on how to track time with millis() and the lerp() allowed me to make the eyes and star transitions smoother with coordinates.

function mousePressed() { 
  //eye movement and star movement when mouse clicked
  toLeft = !toLeft;      
  anim = true; s = 0; t0 = millis();

 

//pupils
fill(0);
ellipse(pupilX(L0), CY, 5, 5);   
ellipse(pupilX(R0), CY, 5, 5);  


//pupils animation
if (anim) {
  s = (millis() - t0) / 250;
  if (s >= 1) { s = 1; anim = false; }
}

function pupilX(base){
  if (anim) return lerp(toLeft ? base : base + DX, toLeft ? base + DX : base, s);
  return toLeft ? base + DX : base;
}

Sketch:

Reflection:

This was my first time creating this kind of work in p5 and adding animation, and it was really exciting to see how the commands work together to make the portrait come alive. It helped me understand the concept better and gave me new ideas for future projects. In the future, I want to make my work even more interactive and add more details. For example, instead of having just one star falling, I could have several stars falling from the top of the screen. I could also make the moon shine or glow to make the scene feel more magical.

I also would like to add some body parts. For instance, I could add hands, change the outfit, or use different shapes to represent parts of the body. I also want to experiment more with colors to make the portrait more vibrant and expressive.

Full Screen Sketch 

My concept:

• For this assignment, I made a self-portrait using basic shapes in p5.js. I drew the face, hair, and features with ellipses, rectangles, and arcs, and added a fun starry background to make it playful. The goal was to practice placing shapes with coordinates and layering them correctly, like using red ellipses to add a blush effect and adding the star effect in the background. 

Code Highlight: 

• A highlight of some code that i’m particularly proud of is probably the eyes. I spent some extra time making sure the pupils, whites, and tiny highlights looked good together. Even though it’s all basic shapes, adding the little white highlights made the eyes feel alive and gave the portrait more personality. I made sure the codes are in the right order so they overlay the way i want them to and I kept it simple like what we learnt in class and what’s available on the reference website. Also, including the categories for each code really helped keep it organized and easier for me to process and edit.

//eyes
noStroke();
fill(255);
ellipse(170, 170, 25, 16);
ellipse(230, 170, 25, 16);

//pupils
fill(30);
ellipse(170, 170, 12, 12); 
ellipse(230, 170, 12, 12); 

fill(255);
ellipse(170, 168, 4, 4); 
ellipse(230, 168, 4, 4);

Reflection and ideas for future work or improvements: 

• This was my first time making a self-portrait in p5.js, so I definitely struggled a bit with getting the coordinates right and making the shapes look exactly how I imagined. Positioning everything took some time, but it was a good way to practice patience and planning. Next time, I want to experiment with more than just solid shapes; maybe using lines, gradients, or patterns to make the drawings more interesting. I’d also like to learn how to make the sketches interactive, so they respond to the mouse or keyboard, and generally make them look more polished and professional. Overall, it was a fun way to practice layering shapes, arranging them carefully, and thinking about composition, and I feel like I can improve a lot on these ideas in future projects and maybe further my creativity more with the new skills I’ll learn. 

Concept

In this assignment , I wanted to  create a simple cartoon-style portrait using  p5.js. I wanted to practice how basic shapes like circles, rectangles, and arcs can be layered to form a face. Instead of making it realistic, I focused on keeping it playful and expressive.

I also wanted my portrait to react to the viewer. That’s why I added interactivity with the mouse. The eyes follow the mouse pointer around the screen, and the mouth changes its size depending on how high or low the mouse is. This makes the portrait feel alive, almost as if it is looking back at you.

Code Highlight

One part of the code I am most proud of is how I handled the pupils. Normally, if you just link the pupils to mouseX and mouseY, they will move all over the canvas and leave the eyeballs. To fix this, I used the constrain() function. This keeps the pupils inside a specific range so they stay within the white part of the eyes.

// Pupils follow the mouse but stay inside the eyes
let pupilLeftX = constrain(mouseX, 140, 180);
let pupilLeftY = constrain(mouseY, 225, 255);
let pupilRightX = constrain(mouseX, 220, 260);
let pupilRightY = constrain(mouseY, 225, 255);

fill(0);
ellipse(pupilLeftX, pupilLeftY, 20, 20);
ellipse(pupilRightX, pupilRightY, 20, 20);

Here is my portrait:

Reflection

This assignment has  showed me how even the simplest shapes can be combined to make something expressive. The interactivity made it more engaging, and I enjoyed seeing how the eyes and mouth could “react” to movement.

If I had more time, I would like to:

1. Add more details to the hair using curved lines or shapes to make it less blocky.

2. Experiment with different facial expressions (for example, changing the mouth to a frown when the mouse is at the top of the screen, or raising the eyebrows).

3. Change the background color based on the mouse position to give the portrait different moods.

4. Add accessories like glasses or a hat using more shapes.In all , I enjoyed creating this portrait.

Concept

From the moment we got this assignment, I knew I wanted to create a self-portrait in a cartoon style that I loved as a kid. The first thing that came to mind was the Toca Boca games my cousins and I played all the time. Those characters had such a simple yet distinct style that really stuck with me, so I decided to take an inspiration picture from the game and model my self-portrait on it as closely as I could. I wanted my version to capture the charm of those characters while also being recognizable as me.

 The Inspiration Picture

I’m Particularly Proud of…

One part of the code I’m especially proud of is the mouth and eyebrows. I used arcs to draw them, which turned out to be trickier than I expected. Getting the curves and angles right took some trial and error, but it was so satisfying to see them finally come together.

//mouth
fill(0);
arc(200, 265, 20, 5, 0, PI, CHORD);

//eyebrows
fill('#D3A45F');
noStroke();
arc(158, 195, 30, 11, PI, TWO_PI, OPEN);
arc(242, 195, 30, 11, PI, TWO_PI, OPEN);

The Portrait

             

Always Room for Improvement

I think my portrait leans toward simplicity, which was partly intentional because I wanted it to reflect that clean, cartoonish style. That said, there’s so much room for improvement! In the future, I’d love to experiment with adding a more dynamic background to give the portrait some life. I’d also like to attempt a full-body version, which would be a fun challenge in balancing proportions and keeping the cartoon aesthetic consistent.

Another thing I want to work on is making my code more efficient and modular. Right now, some parts are repetitive, and I can see ways to organize it better with functions or loops. Overall, this project was a great opportunity to combine coding with creativity, and I’m really proud of the result.

Concept

For my self-portrait, I decided to base it on my Animal Crossing Avatar. I thought it would be a fun way to represent myself since my character in the game feels like a version of me. Also, the cartoon style of the avatar fits perfectly for this kind of assignment!

Here’s my character for reference:

Favorite Code

Although I didn’t do anything super complex, I’m especially proud of how the eyes turned out. I think they gave the portrait a lot of personality and helped bring the whole thing together.

//left eye
  fill("black");
  ellipse(175, 225, 38, 50);

  fill("white");
  ellipse(174, 213, 18, 12);
  ellipse(182, 235, 6, 10);

  fill("black");
  triangle(158, 220, 152, 200, 163, 210);

  //right eye
  fill("black");
  ellipse(265, 225, 38, 50);

  fill("white");
  ellipse(265, 213, 18, 12);
  ellipse(274, 235, 6, 10);

  fill("black");
  triangle(248, 220, 241, 200, 251, 210);

Here’s the self-portrait I created:

Reflection and Future Improvements

While working on the portrait, I experimented with different shapes for the mouth and lashes. I tried using curves and Bezier functions, but they didn’t turn out the way I had hoped. In the end, I used an arc for the mouth and a triangle for the lashes, which worked better for the style I was going for.

I also used a semicircle arc for the bangs, but it stuck out a little awkwardly. To fix it, I placed a triangle in the same color as the background on top of the part that was sticking out, but I’m sure there’s probably a cleaner way to handle this.

In the future, I’d like to practice more shapes and figure out better techniques for handling these things.

Overall, this project was a fun way to explore coding and experiment with shapes. I’m excited to keep practicing and see how much more expressive I can make my sketches in the future!