Casey Reas’s talk really changed the way I think about art. I never thought that code and art could come together because they were really different in my eyes before, but after watching/listening to his presentation, I now see them as connected. I always saw code as more of a technical thing, while art felt free and expressive, so it was kind of mind blowing to see him combine the two. He talked about different artists and showcased a lot of their work, along with his own, and it was really interesting seeing how many different ways people have found to turn shapes and code into art. It reminded me a lot of what we do in class with p5, where we use simple shapes and basic code to build something more complex.

In my own work, I personally want to bring in randomness by setting a few simple rules for shapes or patterns, and then letting things like color, size, or placement change around a little. For example, I could have a circle that changes size every time, so its never quite the same shape twice. Thats also where the whole balance thing comes in for me, because in my opinion, total randomness or total control in code doesnt actually make good art by itself. Too much control can make the art piece feel like its missing something, but too much randomness can make it look like a mess with no direction. That said, being planned out isnt always a bad thing either, sometimes having more structure is exactly what a piece needs to actually work. But I feel like the balance really depends on the piece itself, overall its somewhere in the middle, enough structure so it still makes sense, but enough randomness that it stays unique and doesnt feel too planned out.

Concept

For this assignment, I created a self-portrait inspired by video game character select screens. Instead of trying to make it realistic, I represented myself as a simple character with stats such as energy, luck and focus. For the character itself, I took some inspiration from Nintendo Mii’s characters.

Mii character reference – Nintendo

I also wanted to add some sort of twist, so every 15-20 seconds there is a chance for the screen to switch to a different one.

Code I like

The part I’m probably most proud of is the hair. At first, I thought it would be simple to make, but it ended up taking a lot of experimenting to get it to look the way I wanted.

I started with an ellipse behind the head to make the main shape of the hair. I then used several triangles for the strands at the front and the spikes on the side. A lot of it was just changing coordinates, seeing how it looked, and adjusting them again until I was happy with it.

//hair
  fill('black');
  triangle(116,251,132,247,124,269);
  triangle(130,247,149,244,140,272);
  triangle(147,244,165,244,156,268);
  triangle(163,244,182,247,173,272);
  triangle(180,247,198,253,188,268);

  triangle(123,238,90,244,120,263);
  triangle(115,260,87,263,112,287);

How Was This Made?

I made the portrait using basic shapes like rectangles, ellipses, triangles, arcs, and lines. I built the character piece by piece, starting with the head and body before adding the hair, face, and character information.

After finishing the normal character screen, I made a second version for the “YOU DIED” screen. I used a variable called isdead to decide which one should be shown. I then used the built-in functions, millis() to keep track of time and random() to give the sketch a chance to change between the two screens every 15–20 seconds. Most of the process was experimenting with values and coordinates and then looking at the result. If something looked wrong, I would change the numbers and try again.

Reflection

I enjoyed this assignment because I could make the self-portrait about something I like instead of just trying to recreate my actual appearance. Turning myself into a character-select screen made it feel more personal, and I liked adding the random “YOU DIED” screen as a small unexpected part of it.

The hair was probably the most annoying part to get right, but it also ended up being the part I was happiest with. If I were to improve the project, I would spend more time on the character itself by adding more details and making the body and face look better. I would also add more possible causes of death instead of always showing “Missed Deadline,” so that the death screen could be different each time. Another thing I would change is to make the text feel more “alive,” by making them blink instead of staying static.

edit: added image reference, sources for functions used, and made some minor improvements to text.

Concept

This is my first IM class and my first time working with JavaScript and therefore this assignment took longer than expected. My aim was to create a self portrait of myself wearing my favourite light blue colored abaya and included elements like my glasses to make the character more realistic. I also wanted to include an interactive elements, which is why I added my glasses that appear when the mouse is clicked.

Highlighted code

strokeWeight(2)
stroke('#d17a7a')
fill('#ffb3be')
arc(280,428,40,25,PI,PI-PI);
arc(320,428,40,25,PI,PI-PI);
arc(300,428,80,35,PI+PI,PI)
line(260,429,340,429);

I am most proud of the mouth. Though it looks simple, it took me a while to try and figure out the coordinates, and it took especially longer trying to figure out the correct arc angle. I am proud of the outcome and I think I did a great job without relying on AI and by using the resources provided.

 

How this was made

I used the skills we learnt in class and the p5.js reference to help me create my self portrait. The main shapes where ellipse, used for the eyes, glasses, and hijab, and the arc, used for the nose and lips. I also experimented with adding an interactive elements using the if() tool. I added my glasses, which appear when the mouse is clicked, and I implemented what we learnt in class about colors and transparency to bring the glasses to life.

Reflection

Although it looks like a human, I don’t think it looks like me. If I had to do this again I would have a reference photo of myself to refer to as I was working instead of freestyling it. In the future, I would also like to add more details, like drawing the eyebrows arc and more realistic pupils. I would also love to experiment with interactive elements, like changing backgrounds or moving elements.

De Blob

Concept:

Instead of going with my actual face I decided to make a video game character. Blob is a character from the game called De Blob, and I felt like this character has left an impact on me since I was a child and represented me better than my face ever will. The character,  Blob is a round blob that absorbs color and goes around putting color back into a world that’s been drained of color by an evil corporation and I felt like its a good character to pick for my first assignment even since I started with nothing but a blank canvas with no color and have to build everything up myself.

And he was also a pretty good fit for the assignment itself. He’s almost entirely made up of circles and rectangles and had and was easy to draw or get an idea of how to draw him. I used alot of ellipses, rectangles, quads, etc.

Highlighted Code:

// Smile

fill('#fffafa');
ellipse(250, 295, 190, 105);
fill('#c53127');
ellipse(250, 245, 202, 82);

I think one my favorites to tweak with or the most interesting one in my opinion is the smile itself. Because I made it by removing the shape instead of drawing it, I drew a big white ellipse, then a second one in the body color directly ontop of it and then made it so the second ellipse eats up the top half of the white one and whats left under it is the grin.

// Jelly from the inside of the body

fill('#c53127');
ellipse(250, 200, 196, 104);
rect(152, 200, 196, 170);
ellipse(250, 367, 196, 94);
fill('#bd3026');
ellipse(163, 306, 34, 150);
fill('#c23026');
ellipse(341, 303, 27, 145);

The other part I liked is the darker crimson jelly that filled him and make it like he’s actually a Blob and not just like a red thing. Essentially what I did is a darker red over the body and I did it in three pieces I did a rounded top, I did one straight down the middle and the rounded out bottom so the fill follows the body’s shape and isn’t just a flat out rectangle.

I think what I really want to point at though are the last two ellipses, they are tall and narrow and tucked against the left and right edges so they make it look curved instead of just flat.

I think what I learned from this was how connected these layers are actually are, how to put them one over the other properly. Like even while I was doing this I broke something so when I was filling the jelly fill to fill out the rest of the body it broke the the grin so it broke the smile and just showed up as a pale band across his face this was because the thing that carved the smile was still the old lighter red and the fix was just recoloring it to make it match the new fill instead of the old one.

How was this made?

Honestly at the start I didnt really have anything but just a rectangle and to lines at the top coming out of it for the ears and I was just kind of building the base and at that point it looked nothing like him.

I used a reference image and started to get to work and needed the body to become a bit rounder at the top and bottom and so I decided to built it out of a rectangle and I made it also with an ellipse on each end making the top and bottom look more squashed and blob like.

The biggest thing I had to learn while doing this is the order of things, I worked everything kind of like when your actually painting something so I put the shadow on the ground first like I had in my reference picture, then everything that was like behind the body or like poking out like the arms and the hands and the ears then the body andthen the face last. Honestly most of my bugs came from that, like a few times a shape I spent like so many minutes trying to position just completely disappeared and every single time its because I put something over it without thinking.

For the shapes themselves, the body and the hands and like the shading of it are all ellipses and rectangles and the arms and the fingers are quads because I needed shapes that could be kind of angled instead of just rectangles and the peace sign for the fingers are quads. Then the wink I used it like how you, the Professor, showed us in class by using an arc and I used PI and TWO_PI to get a half circle and its the only arc in the whole sketch the rest honestly is ellipses, rectangles or quad.

Reflection:

Honestly I’m pretty happy with how this came out with my first time using p5js for like an assignment and stuff it came out a lot closer to the reference image than I expected when I first started off. I think the most satisfying part of all this was just like seeing it all come together and starting to actually see the thing I envisioned and the thing I’m making become recognizable because for the longest time it was just a red rectangle with sticks coming out of it on top andthen the eyes, then the grin, then the wink, then the peace sign andthen it was clearly him.

I think if I wanted to add anything in the future I think I’d want to make him move somehow like his ears swaying back and forth and make it so De Blob isn’t naturally winking at first but when they click the screen he winks and maybe it plays like a sound or something. And maybe a way to make it so he changes color every second because he absorbs any color around him or make it so the user picks what color he’d want De Blob to be from an RGB perspective.

My Concept

For my self-portrait, I wanted to create something that represented me through the colors and details I chose. I used some of my favorite colors especially blue and purple throughout the background, shirt, hearts and stars. I also added sunglasses because they are my favorite accessory and I wanted that to be one of the main details that represented my personality.

I used p5.js to code the sketch and built the character using basic shapes like ellipse(), rect(), arc() and line(). I used ellipses for the head, hair, eyes and sunglasses, rectangles for the shirt, arms and neck and lines for details like the eyebrows and nose. 

Code I am proud of

let glassesY = constrain(mouseY,150,230);
ellipse(225, glassesY, 40, 30);
ellipse(275, glassesY, 40, 30);
line(245, glassesY, 255, glassesY);
line(205,glassesY -2, 190, glassesY-8);
line(295,glassesY -2, 310, glassesY-8);

This code I am particularly proud of , the sunglasses. I didn’t want to keep them in one fixed position, so I decided to have them move up and down with the mouse. I used mouseY to control their vertical position and constrain() to keep them within a certain range on the face. The line glassesY = constrain(mouseY, 150, 230); was particularly helpful because it links the mouse movement to the sunglasses. Then I used glassesY for the lenses and for the lines that represent the arms of the glasses. This meant that the whole pair moved along when the mouse moved, giving the portrait more interactivity.

How this was made

I used the p5.js v1 Reference as an external source to help me understand the different functions and how to use them correctly. I also used a little bit of AI to help me figure out how to connect the sunglasses to the mouse and make them move up and down. I tried the code myself and made the final edits to best suit my design. I used external Unicode symbols for the hearts and stars and added them into the sketch using the text() function.

Reflection and ideas

In this project I had to experiment a lot to create the perfect picture. I had to modify the position, size, color, and order of each individual shape to create the complete picture. I often made small errors in my coding, but fixed them to build a better understanding of p5.js.

This project, overall, taught me that coding can be a creative and flexible process. It was fun to see how a character could be developed with the use of simple lines and shapes. I found that making the sunglasses interactive really enhanced a personalized component to the project and made it more enjoyable. If I were to do this project again, I would spend time developing more features of the project. This would include adding more animations to the character which could include making the character blink, and developing more movement to the character and the additional animations in this project.

My Concept
My concept was to create a simple self-portrait using the shapes and colors we learned in class. My self-portrait includes a face, hair, eyes, a nose, a mouth, ears, and a blue shirt. I also added a red cap as the interactive part of the portrait. The cap follows the mouse as the user moves it around the canvas.

I kept the design simple because I am still learning how coordinates, shapes, and colors work in p5.js.

A Code Highlight
The part of my code that I am particularly proud of is the moving cap:

// Cap
fill(170, 25, 25);
ellipse(mouseX + 65, mouseY + 25, 100, 25);

// Cap moves with the mouse
noStroke();
fill(200, 40, 40);
ellipse(mouseX, mouseY, 180, 80);

I am proud of this section because it makes my portrait interactive. Instead of giving the cap a fixed position, I used “mouseX” and “mouseY”. This causes the cap to follow the horizontal and vertical position of the mouse. I added numbers to the brim’s position so it stays connected to the main part of the cap.

function setup() {
  createCanvas(500, 500);
}

function draw() {
  background(180, 220, 255);

  // Shirt/Top
  noStroke();
  fill(60, 120, 200);
  square(150, 380, 200);

  // Ears
  fill(195, 140, 100);
  ellipse(145, 270, 40, 70);
  ellipse(355, 270, 40, 70);

  // Head
  fill(195, 140, 100);
  ellipse(250, 270, 200, 240);

  // Hair
// Hair
fill(50, 30, 20);
arc(250, 220, 190, 160, PI, TWO_PI);

  // Eyes
  fill(255);
  ellipse(210, 260, 42, 28);
  ellipse(290, 260, 42, 28);

  // Pupils
  fill(40);
  circle(210, 260, 14);
  circle(290, 260, 14);

  // Nose
  stroke(110, 70, 50);
  strokeWeight(3);
  line(250, 275, 240, 310);
  line(240, 310, 255, 310);

  // Mouth
  stroke(100, 30, 30);
  strokeWeight(4);
  line(225, 330, 250, 340);
  line(250, 340, 275, 330);

  // Cap 
  noStroke();
  fill(200, 40, 40);
  ellipse(mouseX, mouseY, 180, 80);

  // Cap that moves with mouse movement
  fill(170, 25, 25);
  ellipse(mouseX + 65, mouseY + 25, 100, 25);

  //  The mouse coordinates in the console
  print(mouseX + "," + mouseY);
}

 

Embedded Sketch
<>

How This Was Made:
I made this project in the p5.js Web Editor. I built the portrait by combining simple shapes, including square(), circle(), ellipse(), line(), and arc(). I used fill() to give the shapes different colors. I also used stroke(), noStroke(), and strokeWeight() to control the outlines.

The code inside setup() creates the canvas once. The code inside draw() runs repeatedly, which allows the cap to update its position whenever the mouse moves. Additionally, the order of the code is important because shapes drawn later appear in front of earlier shapes.

I used the official p5.js reference pages provided in class to check how the drawing commands work. Additionally I used the course week 1 power points as it gives a clear and broad explaination of all functions and codes I had to use to complete the portrait. Chiefly, every part of the portrait was drawn directly with p5.js shapes and colors.

Reflection and Future Improvements
This project helped me understand how basic shapes can be combined to create a recognizable person. I also learned that coordinates control where each shape appears and that the order of the code affects which shapes appear in front. The most difficult part was placing the facial features and hair correctly. I had to adjust their coordinates and sizes until they fit the head. Making the cap follow the mouse also helped me understand how mouseX and mouseY can make a sketch interactive. In the future, I could improve the portrait by adding more details to the hair, clothing, and background. I could also make the eyes follow the mouse or add more movement after learning additional p5.js commands.

 

Hello!! For my first assignment in Intro to IM, I made a self portrait using p5.js. I just combined basic shapes and a few lines for smaller details like the nose and glasses.

Embedded Sketch!!

How I made it!!

I started by making the body using a simple rectangle shape and then added an ellipse on top for the face. For the eyes, I created a wider white ellipse with a smaller black ellipse on top to create the pupil. For the hair, I used the arc() function set to only draw the top half of a circle so it sits like a dome over the head. I also added a moon in the night sky background and glasses over the eyes since I always wear glasses.

The main source I used to help me code was the p5js reference site to remind myself of the parameters of each shape especially for the arc.

Code Highlights

//glasses
    stroke(0);
    strokeWeight(4);
    noFill();
    ellipse(width/2.5, height/1.9, 45, 30);
    ellipse(width/1.66, height/1.9, 45, 30);
    line(width/2.5+22, height/1.9, width/1.66-22, height/1.9);
    line(width/2.5-22, height/1.9, width/2.5-40, height/1.9-5);
    line(width/1.66+22, height/1.9, width/1.66+40, height/1.9-5);

The glasses gave me the most trouble. I had to line up two more ellipses exactly on top of the eyes without covering the pupils so I used noFill() so I would get only an outline instead of a solid shape. Then I needed a bridge line connecting the two lenses and two more lines angled slightly outward on each side to look like the arms of the glasses. Getting all of them to actually connect at the same points took a lot of trial and error.

//moon
    fill(255, 255, 220);
    noStroke();
    ellipse(340, 50, 50, 50);
    fill('#464444');
    ellipse(352, 42, 45, 45);

I found that I could fake a crescent shape by drawing a full ellipse and then covering part of it with a second ellipse painted the exact same color as the background

Reflection and Ideas:

This assignment was fun and I found myself losing track of time while doing it, for future assignments I would love to go more in depth with p5.js and add animations and more detailed drawings.. I could have added more details in the background and maybe even designed the body to make it look more detailed.

 

 

Concept:

For this first assignment we were instructed to code a self-portrait. Instead, I thought it would be more interesting to code a childhood favorite character: SpongeBob SquarePants. For some reason, he was the first character that came to mind when we were told that we were allowed to code anything, not necessarily ourselves. When I googled SpongeBob to use as a reference image while I coded, I was able to analyze it and think of all the different shapes I could use for each part. I broke every part down into little pieces so I could visualize the shapes it needs, which helped me code it much more efficiently.

Highlighted Code:

// 4a. eyes + lashes
  // left eye
  fill('#2f2f2d'); // eyelashes
  stroke('#2f2f2d')
  strokeWeight(1.5)
  rect(141, 102, 5, 20)
  
  fill('#2f2f2d');
  stroke('#2f2f2d')
  strokeWeight(1.5)
  rect(156.5, 100, 5, 20)

  fill('#2f2f2d');
  stroke('#2f2f2d')
  strokeWeight(1.5)
  rect(172, 102, 5, 20)
  
  fill('#ffffff'); // eyeball
  stroke('#2f2f2d')
  strokeWeight(1.5)
  ellipse(162, 147, 70, 72)

  fill('#26B9C8'); // iris
  stroke('#2f2f2d')
  strokeWeight(1.5)
  circle(165, 147, 30)

  fill('#2f2f2d'); // pupil
  stroke('#2f2f2d')
  strokeWeight(1.5)
  circle(165, 147, 15)

  fill('#ffffff'); // "reflection"
  noStroke()
  circle(163, 140, 6)

  fill('#ffffff');
  noStroke()
  circle(170, 153, 3)

  // right eye
  fill('#2f2f2d'); // eyelashes
  stroke('#2f2f2d')
  strokeWeight(1.5)
  rect(216, 102, 5, 20)
  
  fill('#2f2f2d');
  stroke('#2f2f2d')
  strokeWeight(1.5)
  rect(230.5, 100, 5, 20)

  fill('#2f2f2d');
  stroke('#2f2f2d')
  strokeWeight(1.5)
  rect(245, 102, 5, 20)
  
  fill('#ffffff'); // eyeball
  stroke('#2f2f2d')
  strokeWeight(1.5)
  ellipse(233, 147, 70, 72)

  fill('#26B9C8'); // iris
  stroke('#2f2f2d')
  strokeWeight(1.5)
  circle(230, 147, 30)

  fill('#2f2f2d'); // pupil
  stroke('#2f2f2d')
  strokeWeight(1.5)
  circle(230, 147, 15)

  fill('#ffffff'); // "reflection"
  noStroke()
  circle(228, 140, 6)

  fill('#ffffff');
  noStroke()
  circle(235, 153, 3)

This is the code I wrote for the eyes. I am most proud of it because it looks almost identical to the actual SpongeBob character. It is the first thing that stands out when I look at the code. Also, the placement of the eyes is well-positioned for the face as well as the iris, pupils, and reflection spots. On top of that, both eyes are identical with the same structure and dimension. I also really like that I added the two small white circles that serve as reflection spots. I initially was not going to do it because I did not feel like it, honestly, but I am so glad I did. Those four little white circles made all the difference, as they made it seem like it was animated and lively. It really was the cherry on top.

I think an honorable mention would be the outline of SpongeBob’s face, as anyone could have easily just done a square, but I think the curves, though it took long to code, is what made it really look like SpongeBob after the eyes.

How This Was Made?

When I started the code, I just had a yellow rectangle (almost square) and a thin white rectangle under for the shirt and a thin brown rectangle under that for the pants. After I pulled up a reference image of SpongeBob to help me code, I realized that the shape of the head was not ideal, as it is more of a square cloud with the curves. For that, I used ellipses to create different circular shapes for the natural, uneven curved face. A mistake I noticed after reaching the bottom is that due to the face code being at the start, the shirt overlapped it, so I had to rearrange the code throughout the entire process in order of the correct layering.  This happened with the lashes too, so I had to have that first before the whole eye. It also happened with the shirt, where I had to have the code for the arms first as well.

For the eyes, I used an ellipse for the eyeball because it did not look like a perfect circle based on my reference image. The iris, pupil, and reflection spots were all circles. Then for the mouth, nose, and cheeks, I used PI and TWO_PI to create the half circles. The lashes, teeth, and black belt all just needed the rectangle shape but in different positions. For the collar, I used triangles and quads for the tie, as it starts with an upside-down trapezoid and then a sharp diamond. Finally, I just used a mix of circles and ellipses as the sponge marks SpongeBob has on his face to make it more identical with the animation.

This all wouldn’t have been done without the code that prints the mouse’s X and Y because that made positioning everything much easier and took less time.

The only source I used to help me code was the p5js reference site to remind myself of the parameters of each shape, especially for the arc. It is what made me realize that I could set PI as the starting point and have it end at TWO_PI to make an upside down half-circle for the cheeks and nose. I also used the website Color Hex Color Codes and SchemeColor to get the most accurate color palette of SpongeBob SquarePants.

Reflection:

Overall, I am super proud of how my code turned out. It was better than I had expected even though I had my doubts throughout the whole process. It was a really satisfying process seeing the image come to life as I code, edit, and make changes. It was also enjoyable, as I knew what to do to achieve the results I wanted but just needed the time and patience and trust in the process.

For improvements, I would definitely have to say the smile. SpongeBob actually has a much bigger smile with a deeper and taller curved smile that reaches all the way to his cheeks. Unfortunately, I was not sure on how to do that, and that is what made the final product slightly inaccurate. I tried having the half-circle shape as the mouth and two triangles on the side of each to pull them and make them more curved, but it did not work out due to the strokes. It also looked rigid and not smooth. If I wanted to add anything in the future, it would definitely be a SpongeBob-related background with all the fun colors and shapes.

 

I made this usign mostly squares, rectangles and circles. I tried to add some ellipses and triangles but they’re kind of confusing to use, even with the guide. So maybe for future works I could use a wider variety of shapes.

//Torso
 fill("#c44f1c");
 rect(325,215,245,280,30);
 fill("#b14802");
 rect(365,265,10,400);
 fill("#b14802");
 rect(520,265,10,400);
 fill("#197624");
 triangle(450,290,400,340,500,340);
 fill("#40b329");
 ellipse(450,320,35,15);
 fill("#7ad011");
 ellipse(450,320,5,15);

 

My Concept:

As this was my very first time coding in p5, I wanted to make sure I created a portrait that represented me but still simple enough to build with the coding skills I’m learning. I decided to incorporate my hijab in this assignment to really showcase my national identity. I wanted to emphasize on the shapes by making my portrait cartoon style. I’m pretty satisfied with the outcome and I’m glad it all came together at the end.

Highlight:

One of my favorite parts of my code has to be creating the eyeliner. Although it seems like a small detail, it took me a while to mirror it properly. I’m also not the best at triangles, so this really got me practicing. I really wanted to include the eyeliner into my portrait because it added some individuality to an otherwise simple portrait and made it feel more me. Anyone who knows me knows I love incorporating eyeliner into my look, so this made my portrait feel more personal. The lashes were also something I was proud of. Simply because I thought it elevated the eyes more.

// left lashes
line(151, 208, 145, 202);
line(156, 205, 153, 198);

// right lashes
line(249, 208, 255, 202);
line(244, 205, 247, 198);

//eyeliner
triangle (152,218,140,207,150,210);
triangle(248, 218, 260, 207, 250, 210);

 

Embedded Sketch:

How this was made: 

I mainly used what I learned in class to create my self portrait. I started with the ellipses to build the main parts, which include the body, the face, the eyes, and the hijab. I wanted the shapes to really be emphasized, so I tried my best to incorporate almost all of them. Sometimes I had to go back to p5’s reference page when I forgot how the coordinates go. (https://p5js.org/reference/)  I also looked at last years projects to help me better understand how to utilize the arc code. There was an error to my code which I couldn’t figure out, and that is when I used AI to help me fix it. Turns out I added one too many coordinates to one line. Overall, the portrait was built from what I learned and experminetd myself.

Reflection:

This assignment made me so much more comfortable with using coordinates and understanding how different shapes can come together. Something to reflect on is how time consuming mirroring can be. I wanted my portrait to be symmetrical and I tried my best to do so. In the future I’d like to experiment with a moving element and more complex shapes, and possibly some interaction. Overall, I am very satisfied with both the process and the final product.