Concept:

• The idea for this assignment is to replicate the look of sound waves as they would appear in computer applications: comprised of multiple parallel vertical lines that fluctuate in length to reflect changes in volume. While it is currently beyond the scope of my coding capabilities to create something that actually responds to external sound input, it would nonetheless be a good opportunity for me to practice using for() loops to generate repetition as well as randomized elements.

Highlight:

• I am proud of having utilized the random() function within the for() loop in order to generate rectangles that are in fixed positions but have randomized lengths that change every time the frame refreshes, replicating the look and movement of a sound wave.

for(let x=0;x <= width; x +=15){
  noStroke();
  fill(random(0,50),random(150,200),random(30,255));
  rectMode(CENTER);
  rect(x,200,10,random(20,200));
}

Sketch:

Future improvements:

• The point of sound waves being depicted as such in computer programs is to reflect the volume of the sounds being recorded. In the future, it would be interesting to have the lines respond to various inputs such as clicking, cursor hovering, and sound.

My concept 

• There were two main components that I wanted to explore with this project: creating a background and creating the figure. I drew a rough sketch of what I wanted to do. I wanted to create a background of the night sky, and in the foreground I wanted the figure of a cat/woman. My end product became very different from this preliminary sketch, but I had a rough idea of what I wanted to do. But I knew I wanted to create myself as my spirit animal, by blending my physical features with that of a cat. The choice of placing myself in space is because I simply love the idea of staring into the night sky and seeing the moon and stars, and to surround myself with these objects would be symbolic of the way I enjoy wondering, imagining, and dreaming. 

Reflection 

• I began with the background, the sky’s color, and the moon and stars. Then, I changed my mind and wanted my catwoman to be in space, so I created her planet and other planets around her. This was more time consuming than I originally thought it would be. I had to place the stars, I had to choose where to position the other planets, and I had to create the details of the main planet (the holes), which I later had to adjust because I put the catwoman on top and wanted the placement of these objects around her to look ideal. 
• After finishing the background, I jumped into creating my catwoman. I started with her head, neck, and body. I started becoming worried, because I wasn’t sure about their orientation. But then, I started adding the details: eyes, mouth, nose, hair. This proved particularly difficult, with each component taking longer than the last. I didn’t like how my piece looked, but continued adding details: the cat ears, whiskers, eyebrows, shirt, blush, necklace, astronaut helmet. In the end, I came up with my finished product that I have grown to like. I realized that the more time and more details to put into it, the more it begins looking like something worthwhile, and I realized that slowly the piece will start to come together. It won’t be as I imagined, but will be what I was able to make given what I have learned as well as what I had researched. 

Sketch 

Code I’m proud of 

Creating the hair for my portrait took me a while. I had to layer it and I had to think about where I was able to write the code for the different layers, I had to copy-paste it into later sections so the stars/ears did not overlap. I used a circle to create the first layer of the hair. I then wanted the hair to look like a bob-cut, so I created a rectangular cut-off with the color of the planet behind the figure so that it would blend. I then added the bangs. In a later line of code, I framed the face of the figure, by creating two rectangles and placing it on the sides of the face to look as if the hair is over her face.

//hair
fill('#471706');
noStroke();
ellipse(145,277,150,150);
fill('#A3A3A3');
rect(90,330,110,30);
//head
noStroke();
fill('rgb(201,139,76)');
circle(145,270,98);
//hair bangs
fill('#471706');
noStroke();
ellipse(125,230,50,40);
ellipse(167,230,50,40);

//hair to frame face
fill('#471706');
noStroke();
rect(94.25,242,10,70)
rect(186,240,10,70)

Ideas for future work/Improvements 

• I would really love to add animation to this work. I wasn’t sure how to do it so I looked at videos and articles online, but I did not completely understand the code for it, so I decided to leave it out for this assignment, but I look forward to implementing it in future projects. I wanted the background to not be so static, possibly with the moon phases and shooting stars, and possibly the rotation of the planets in the background. Regarding the catwoman, I’d want her to possibly wiggle her tail and move her ears. I feel like those animations would add to the portrait, by enhancing the background of outer space and the choice of a cat as my spirit animal. 

Concept:

As someone who is terrible at art and with zero experience with coding, this assignment scared me quite a lot. I wanted to keep it plain and simple while trying to keep it relatively accurate to what I look like. By using basic lines and shapes, I managed to unintentionally make a version of me that seems to have come straight out from Bob’s Burgers, which I found really funny. I’m not quite sure if I succeeded in the accuracy department, but I think it is good enough for my first time!

The Self-Portrait:

 

Highlight:

It took me a while to get used to the trial and error to create a self-portrait from basic 2D shapes, but it got better the more I practiced. However, creating the hair was an absolute nightmare with trying to rotate the arcs. The biggest highlight would have to be when I finally managed to get the hair looking somewhat decent, especially after adding some side bangs

//hair
fill(0)
arc(200,390,300,700,PI,0)

  //hair 2
fill(0)
arc(160,120,150,170)
arc(100,105,180,132,(11/6)*PI,PI/2,OPEN)

Otherwise, it would’ve looked like this egg…

Reflection:

Overall, I’m quite proud of myself for facing my coding fears and being able to create something like this in a short period of time. My brain refused to take in the information at first, but it got used to it eventually. I stuck with the simple plan I had due to time, but I would’ve loved to have been able to add my own personal touch to it and make it interactive. I was thinking of a little flashing camera or a phone on a gimbal. It would also have been cool to make the pupils both follow the cursor so that the eyeballs can move around while never looking at the same direction. Regardless, I’m still satisfied with how it turned out and I think it’s a cute first memory of my coding experience and result! It definitely wasn’t as bad as I thought it would be

Concepts: 

For this assignment, my concept was a self portrait of me, wearing a NYU shirt, and a sunny and sandy background. I utilized basic shapes to construct the portrait, with the concept being me in NYUAD right now. I aimed to recreate my hairstyle as much as I could on a 2D space. Apart from the portrait of myself, I also drew the sun in the background, which I believe is an important feature of Abu Dhabi.

Portrait

Highlight

I implemented a feature where the nightsky, moon, and stars would show when you click down on the canvas. I used an if statement to detect whether a mouse button was being held down, which is detected with the function ‘mouseIsPressed’.

if (mouseIsPressed){
//nightsky
fill(40)
rect(0,0,400,250)
fill(190)
//moon
circle(0,0,250)
fill(240)
circle(30,24,30)
fill(230)
circle(16,81,15)
fill(215)
circle(48,83,20)
fill(242)
circle(87,19,15)
fill(250)
circle(70,50,30)
//stars
fill(255)
circle(294,25,2)
circle(187,42,2)
circle(361,52,2)
circle(218,9,2)
circle(276,115,2)
circle(279,70,2)
circle(355,85,2)
circle(133,91,2)
circle(215,85,2)

} 

Improvements 

For the drawing of the rays of the sun, I tediously drew the triangles one by one to achieve the way I wanted it to look. This was quite time consuming and wasn’t very efficient. In the future, I could utilize a loop to speed up this process.

I saw this assignment as an opportunity to get creative with p5.js and make something visually appealing using basic shapes, while also adding some elements of interactivity. I have had some experience with coding and I’m also really passionate about design, so overall, I really loved how this project made me think of new ideas and navigate the challenges that came up.

Main Idea

For this portrait, I wanted to create something that truly represents a part of me. As someone who absolutely loves books, I decided that a simple library setting (with a bookshelf) would perfectly capture this passion. Instead of going for a generic self-portrait, I focused on the details that define my personality, aiming to reflect my love for reading in both the visuals and interactivity of the piece.

Implementation

Creating the library scene involved several key steps, from drawing the bookshelves to the self-portrait itself. The books in the library are not just static; they come alive through interactivity, making the scene more engaging and fun. Every time you hover your mouse over a book, it bounces up and down, creating a playful effect. I’m particularly proud of the way the books bounce—implementing this took some effort, as it involved calculating the physics for a smooth jumping motion and resetting them back to their original positions. A fun surprise was discovering how, when you swipe the mouse across a row of books, it creates a wave effect, adding another layer of interaction.

Here’s a snippet of code that controls the bouncing of the books :))

// Drawing books with jumping effect
  for (let i = 0; i < books.length; i++) {
    let book = books[i];

    // Checking if the mouse is hovering over book
    if (
      mouseX > book.x &&
      mouseX < book.x + book.width &&
      mouseY > book.y &&
      mouseY < book.y + book.height &&
      !book.isJumping
    ) {
      book.isJumping = true; // book starts jumping when hovered
      book.velocity = -5; // initial jump velocity
    }

    // Handling jumping animation
    if (book.isJumping) {
      book.y += book.velocity; // updating y position based on velocity
      book.velocity += 0.4; // applying gravity effect

      // checking if the book has fallen back to its original position on the shelf
      if (book.y >= book.originalY) {
        book.y = book.originalY; // resetting position to the shelf
        book.isJumping = false; // stop jumping
        book.velocity = 0; // resetting velocity
      }
    }

 

Another feature I implemented is the colour change of the book held by the girl in the portrait. When you click on any book in the library, the book’s colour changes to match the one clicked, and I think this really adds to the interactivity of the scene and somehow just makes it seem more of a representation of my personality.

This is the code that controls the book changing colour:

function mousePressed() {
  // Checking if a book is clicked
  for (let i = 0; i < books.length; i++) {
    let book = books[i];
    if (
      mouseX > book.x &&
      mouseX < book.x + book.width &&
      mouseY > book.y &&
      mouseY < book.y + book.height
    ) {
      // Changing the girl's book color to the clicked book's color
      girlBookColor = book.color;
    }
  }
}

 

One of the most challenging parts of the drawing was the hair, which required understanding how the bezierVertex() function works. I spent time experimenting with the curves to get the right look, and I’m happy with how the hair flows in the final version. I also focused on the randomization of book sizes, spacing and colours to create a more realistic and dynamic library scene. The varied spacing between the books was particularly important because it prevented the scene from looking too uniform and added to the realistic clutter you’d expect in a real library.

Reflections and Possible Improvements

I’m proud of how the self-portrait captures a unique part of me through both the visuals and interactions. The bouncing books, the randomization of elements and the changing book colours all work together to create a portrait that isn’t just about how I look, but about what I love. The process was a great learning experience, especially in terms of coding the animations and achieving a realistic look using basic p5.js knowledge.

Possible improvements include adding more interactive features, such as having the girl’s expression change when clicking on different books or adding a subtle glow effect around the hovered book to enhance the visual feedback. Also, optimizing the code for smoother animations, especially when multiple books are interacting simultaneously, would enhance user-experience. Overall, I really enjoyed this project and look forward to exploring more of my creative potential throughout the course.

My passion towards the art was born a long time ago and I couldn’t truly believe that I would be able to find an area, which would challenge my art skills as much as an art production using p5js. It allowed me to combine my artistic expertise and expand my knowledge of Javascript. This work was inspired by the contemporary art that I experimented a lot lately. I decided to bring in my artwork a wide pallette of colors symbolizing the diversity of human beings in terms of their character development. Combining it with nature that could be observed in the front, I wanted to depict the idea of close relationship between human and nature. Undoubtedly, we are a part of nature and it has a profound effect on our development and nurturing of essential.

I’m particularly proud of the code I wrote for the interactive eyes that follow the mouse movement and the effect of color changing lips. This adds an element of interactivity and brings the portrait to life. Here’s a snippet of the codes:

// Eye movement based on mouse position
  fill(mouseX % 255, mouseY % 255, 100, mouseY % 255); // Color changes based on mouse position
  let pupilOffsetX = constrain(map(mouseX, 0, width, -20, 10), -10, 10);
  let pupilOffsetY = constrain(map(mouseY, 0, height, -5, 5), -5, 8);
  ellipse(160 + pupilOffsetX, 280 + pupilOffsetY, 15, 15); // left pupil
  ellipse(230 + pupilOffsetX, 280 + pupilOffsetY, 15, 15); // right pupil
}

lipcol.r = random(111, 218);
  lipcol.g = random(72, 47);
  lipcol.b = random(209, 67);
  fill(lipcol.r, lipcol.g, lipcol.b);
  strokeWeight(1);
  stroke(lipcol.r, lipcol.g, lipcol.b);
  beginShape();

 

For future improvements, I’d like to:

-Enhance the interactivity by adding more elements that respond to mouse clicks or movements.

-Improve the smoothness of the animated features to make them more natural.

– Explore using different algorithms for more complex shapes and patterns, such as fractals or noise functions, to add more depth and texture to the portrait.

Working on this self-portrait allowed me to explore various aspects of my creativity through code. I learned a lot about using shapes, colors, and transformations to create a digital representation of myself. In the future, I would like to add more interactive elements, like changing colors or shapes based on user input, to make the sketch more dynamic. Additionally, I’d explore adding animations to give the portrait a lively, animated feel that captures my personality even more.

 

Reference to this genius guy from “The Coding Train”

Concept

I love cats. I don’t have one but I would love to have one in the future. One of my favorite type of cats are orange cats; they’re silly and funny to me. Hence, I decided to create a silly orange cat with their tongue out making a silly face. The cat is also seen to be waving their paw as if to say hello!

Process

I started making the head using a circle and planned on using triangles for the ears, but soon found it difficult to make it look neat so I opted for a long rectangle pointing from one side of the circle to the other to act as ears. This way the ears are more symmetrical.

Highlight

I particularly liked how I made the mouth section where I used different sizes and orientations of ellipses and combining them with layering in mind to form the shape of the cat’s snout.

// mouth
fill('rgb(255,114,38)')
ellipse(200, 270, 15, 30)
fill('rgb(255,182,49)')
ellipse(190, 250, 35, 30)
ellipse(210, 250, 35, 30)
fill('#FF9700')
ellipse(200, 240, 20, 15)

Sketch

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

function draw() {
  
  background('rgb(178,223,250)');
  
  // body
  fill('orange')
  rect(90, 260, 220, 400, 100)
  fill('rgb(255,182,49)')
  rect(115, 290, 170, 400, 100)
  fill('rgb(255,151,0)')
  
  // arm
  rect(115, 310, 50, 400, 100)
  fill('#FF9700')
  circle(140, 340, 55)
  fill('rgb(255,182,49)')
  circle(140, 340, 35)
  stroke('orange')
  circle(125, 339, 15)
  circle(133, 327, 15)
  circle(147, 327, 15)
  circle(155, 340, 15)
  
  // head
  noStroke()
  fill('orange')
  ellipse(200, 220, 200, 180)
  rect(100, 140, 200, 80)
  
  // streaks
  fill('#FF9700')
  rect(192.5, 130, 15, 50, 10)
  rect(170, 132, 15, 40, 10)
  rect(215, 132, 15, 40, 10)
  
  // ears
  fill('rgb(255,182,49)')
  ellipse(115, 170, 15, 50)
  ellipse(285, 170, 15, 50)
  
  // eyes
  fill('black')
  circle(155, 220, 25)
  circle(245, 220, 25)
  
  fill('white')
  circle(160, 215, 10)
  circle(250, 215, 10)
  
  // blush
  fill('rgb(255,116,44)')
  ellipse(125, 250, 50, 20)
  ellipse(275, 250, 50, 20)  
  
  // mouth
  fill('rgb(255,114,38)')
  ellipse(200, 270, 15, 30)
  fill('rgb(255,182,49)')
  ellipse(190, 250, 35, 30)
  ellipse(210, 250, 35, 30)
  fill('#FF9700')
  ellipse(200, 240, 20, 15)
  
}

Reflection

Though I did use a variety of shapes, my sketch is still very simple. So in the future, I’d like to incorporate more shapes and learn how to animate them as well to make it more interactive and lively; like maybe make the cat’s paw move!

Concept

When I first thought about what kind of recognizable features I would like to emphasize in my work, I chose 3 of them: curly hair, earrings and background.

In this portrait, I decided to solely focus on collaboration between 2D shapes and colors to bring simplistic, yet realistic picture of me.

My first task lied in creating an interesting background for portrait that would resemble my personality in some way. Walking through library, I stumbled upon one journal that was only focused on photographs of ocean and waves. It reminded me of calmness and solitude that I do value myself, so I implemented gradient of water on background.

 

 

 

 

 

 

Furthermore, I was confused on how I could illustrate curly hair in p5, but then I decided to choose two colors and use unfilled circles patterns to show the curls.

Working on facial features, I decided to choose style similar to emoji drawings. I worked with opacity and arc’s to deliver also very calm mood of the face.

At the right bottom corner I decided to add a small signature of letter A, as it is very symbolic letter in my life.

Highlight of some code that I’m particularly proud of

//setting background
  //first row
  strokeWeight(15);
  stroke(91,184,229,50)
  fill(93, 170, 233)
  rect(0,300,100,100)
  fill(90, 177, 231)
  rect(100,300,100,100)
    fill(91, 184, 229)
  rect(200,300,100,100)
  fill(95, 190, 226)
  rect(300,300,100,100)
  //second row
  strokeWeight(15);
  stroke(110, 201, 220,50)
   fill(133, 211, 214)
  rect(0,200,100,100)
  fill(121, 206, 216)
  rect(100,200,100,100)
  fill(110, 201, 220)
  rect(200,200,100,100)
  fill(101, 196, 223)
  rect(300,200,100,100)
  //thrid row
  strokeWeight(15);
  stroke(157, 220, 210,50)
   fill(145, 216, 212)
  rect(0,100,100,100)
  fill(157, 220, 210)
  rect(100,100,100,100)
  fill(170, 224, 210)
  rect(200,100,100,100)
  fill(182, 228, 211)
  rect(300,100,100,100)
  //fourth row
  strokeWeight(15);
  stroke(218, 239, 221,50)
   fill(228, 243, 226)
  rect(0,0,100,100)
  fill(218, 239, 221)
  rect(100,0,100,100)
  fill(206, 235, 216)
  rect(200,0,100,100)
  fill(195, 232, 213)
  rect(300,0,100,100)

I am particularly proud of the background of the portrait, because it reveals additional detail I put in the work to deliver idea about my character.  I had intention in mind about creating a gradient using the tools we already learned on the lessons, so I experimented with colors, strokes, opacity, to create a kind of smooth picture that would resemble a gradient. And I think I could accomplish that.

Embedded sketch

Reflection and ideas for future work

In the future assignments, I would like to explore more efficient and realistic ways to portrait a gradient background and curly hair. In this work, major part of the code required manual instructions to create a specific illustration of curls and pattern in the background. I want to find out more efficient ways of how I could code these things. Moreover, I would further work on more specific and detail-oriented picture of the earrings, as it stays one of the key features in my portrait. I would tie shape of earrings to Kazakh national ornaments to show my identity. In addition, I didn’t have much chance to work with interactivity of my portrait in this concept, so next time I would definitely create more interactive background or interactive face features. As I progress in interactive media, I would also love to implement 3D shapes in my work.

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();

 

Idea & Sketching.

As a newcomer to coding, this small project has been an important exercise in practicing what I have learned in class so far. I primarily focused on experimenting with basic shapes, still trying to find useful tools to add (at least) some interactivity to a static portrait.

First, I made a quick sketch in Figma of what I roughly aimed to create (see below). As a Film & New Media major, I couldn’t help but show my passion for filmmaking by incorporating a “Kodak” T-shirt (which I actually own and wear) paired with a green jacket made up of two symmetrical triangles.

My cartoon character shows no mercy to my real self: protruding ears, furrowed eyebrows, and a discontented smirk. Nevertheless, I’m still fine with that…

Highlights.

Having finished the layering of the character in p5.js, I felt that something was missing, and I had to soon realize that it was the absence of movement. Since it was my first time coding, I did a quick research to find different options for animating in JavaScript. The most suitable and easiest to comprehend for my case turned out to be the lerp() function.

I implemented the lerp() function to animate my character’s mouth by following a tutorial on p5.js.

if (mouseX > 150 && mouseX < 450 && mouseY > 150 && mouseY < 600) { // to check if the mouse reaches the body
  finalX = 300;  
  finalY = 400; 
} else {
  finalX = 280; 
  finalY = 410;  
}

initialX = lerp(initialX, finalX, 0.5);
initialY = lerp(initialY, finalY, 0.2);

I’m particularly proud of how I figured out the pace of the animation, specifically the “amt” parameter, which I set at 0.5 and 0.2. After experimenting with the function for a while, I decided to use different values for the “x” and “y” positions, so that the mouth movement would look more natural and eye-catching.

Reflection.

To summarize, I truly enjoyed working on this tiny project. I’m quite satisfied with my whatever cartoonish self and excited to dive deeper into the lerp() function as the course progresses to create more sophisticated animations and interactive projects. So far so good – JavaScript seems to be fun.

Embedded Sketch.

P.S. Place the mouse around the body so the mouth moves.