Concept :

For this computer artwork, I decided to take inspiration from a stress relieving toy called Pop It. Basically the user can pop the silicon molds as a form of stress relief. I decided to use this idea and create a grid of colours and patterns, where one clicking the mouse, the colour and pattern changes.

I tried to use all the concepts we learned in class, including for loops, arrays, functions; both built in and user defined. Trying to use these different concepts in my code taught me how to use and incorporate them.

Highlight:

One part of the code I’m particularly proud of is the switching between patterns. I used switch statements, a concept I learned from CS in highschool,  to create pattern changing from circle to strikes.

function drawPattern(x, y, patternType) {
  push();
  stroke(0);
  strokeWeight(2);
  switch (patternType) {
    case 0:
      line(x, y, x + boxSize, y + boxSize); //strike pattern
      break;
    case 1:
      ellipse(x + boxSize / 2, y + boxSize / 2, boxSize / 2); //ellipse pattern
      break;
  }
  pop();
}

Embedded sketch:

What I love the most about this artwork is the fact that its never the same, its always changing. We can create art out of the art itself, and the whole “pressing the mouse to change colours and patterns” is so satisfying. I also love the colours, which

I made using a colour palette using arrays. I like how we can create patterns with the colours themselves.

Reflections:

Overall, I felt that this assignment was such a good way to revisit all the concepts we learned in class and create something beautiful out of it. In the future, I’d like to try and make the code more precise and versatile. Maybe more patterns, colours and animations in the grids themselves.

 

In his talk, Casey Reas explores the theme of order and chaos in art, emphasizing the role of randomness in creative processes. He also focuses on the notion of “controlled randomness” , where artists establish specific rules and parameters within code, allowing for unexpected outcomes while maintaining the overall coherence.

First of all, I really enjoyed listening to Reas’ talk. I appreciated the way he showcased his work and explained his philosophy on creativity and art. Reflecting on his insights, I aimed to incorporate the concept of controlled randomness in my most recent p5.js sketch, which I titled randomness. The overall structure of the artwork is straightforward—featuring a 10×10 grid of circles. However, the element of controlled randomness comes into play when the user interacts with the piece. Each time the user clicks on the canvas, the circles in the grid change in shape and size, creating a dynamic balance between order and unpredictability. While users can grasp the overall structure, every interaction (mouse click) generates a unique and evolving pattern. I wouldn’t go so far as to claim that my artwork revolutionizes the concept of generative art, but I believe it is an engaging and enjoyable piece to explore.

That being said, Reas’ perspective on art and the creative process encourages me to explore the potential of chance in my work. With every new p5.js sketch I create, I will keep the notion of “controlled randomness” in mind.

Concept

In this p5.js sketch, my main objective was to practice for loops and play around with the concept of randomness a bit. It is a simple generative art piece. The idea was to generate a grid of circles, where each circle varies in size, color and level of transparency. So by clicking on the window/canvas, the user can regenerate a completely random pattern (this adds an element of interactivity and makes the artwork dynamic).

Demo (Click on canvas)

Code Highlight:

One of the parts I’m most proud of is the loop structure that efficiently places the circles while maintaining randomness in their size and color:

for (let x = 0; x < width; x += spacing) {
  for (let y = 0; y < height; y += spacing) {
    let size = random(10, spacing * 0.8);
    let r = random(100, 255);
    let g = random(100, 255);
    let b = random(100, 255);

    fill(r, g, b, 180); // Semi-transparent random color
    noStroke();
    ellipse(x + spacing / 2, y + spacing / 2, size, size);
  }
}

Reflection & Improvements for Future Work

This project reinforced my understanding of looping structures in p5.js and the power of randomness in generative art. It was interesting to see how slight variations in parameters can lead to visually engaging results.

Future Work:
Experiment with different shapes (e.g., triangles, squares, or custom polygons). Add animation so circles gradually fade in and out.  Allow users to save their favorite generated patterns.

This was a fun dive into creative coding, and I look forward to exploring more complex generative techniques!

Concept:
I wanted to make my self-portrait in a minimalistic style that would accurately represent my appearance while being limited to the use of simple geometric primitives. I chose to not use outlines to add to that flat, minimalist aesthetic. I also wanted to add some simple interactivity, which came in the form of the background changing colours through a day-night palette when clicked.

Embed:

Highlight:
I was proud of this snippet, where I used an array of hex codes to implement my colour cycling feature. It is perhaps more simple than I had hoped for, but I’m happy with how it turned out overall.

// // Array containing possible background colours
let bgs = ["#fff2bd", "#f4d797", "#c9ebff", "#abb5ff", "#7475b6", "#5148b2"];
let curr_bg = 0;

function mouseClicked() {
  // // Change to next bg colour on click
  curr_bg = (curr_bg + 1) % bgs.length;
}

Reflection:
I feel a bit conflicted about this assignment, since on the one hand it was an interesting change of pace to try and create art directly using code, but also very annoying. I found myself frequently trying to force coordinates or dimensions to be multiples of the canvas’ dimensions to allow it to scale, but often found it to be an exercise in frustration. Having to essentially guess-and-check all my numbers was another aspect I didn’t enjoy, since there were little quirks I wouldn’t expect such as circle’s being plotted by their center versus rectangles by their top-left corner.

In the future, I would like to try and plan things out more before starting, especially in regards to using custom variables. The built-in width and height variables made sense at first, but I quickly gave up on sticking to them and added pixel offsets instead. I think the most important thing for me is finding a way to streamline my workflow, since my struggle to put my concept on paper/screen caused me to fall short of where I wanted to be in terms of both artistic and programmatic aspects.

For this assignment, we had to create a self-portrait in p5js. I began by deciding which elements of myself were important to incorporate. Of course, this includes basic features like eyes, nose, mouth but also things like my wavy hair or silver earrings. Once I figured out what to incorporate, I began making shapes in p5js, making sure the layers were right to get the results I wanted. The final result of my self-portrait is as follows:

As I worked, I realized making shapes in this program is quiteee annoying, especially because you need to play guess and check when figuring out coordinates. This led to it taking more time than expected, especially when it came to places where there are many shapes combined. For example, the eyes are something I am proud of because I went a step further to make them a tad bit more realistic by adding a flash spot. You can see the code for this below:

//eyes
  push()
  stroke('black')
  fill('white');
  ellipse(220,190,30,19)
  fill('black');
  circle(220,190,12)
  fill('white')
  circle(224,186,4)
  pop()
  push()
  stroke('black')
  fill('white');
  ellipse(280,190,30,19)
  fill('black')
  circle(280,190,12)
  fill('white')
  circle(284,186,4)
  pop()

Overall though, I think this assignment was a great introduction to creating objects in Javascript and required a lot of self-teaching from the references on the p5js website when it came to things like arcs, rounding out rectangles, push and pop, ellipses, etc. Breaking down myself into simple shapes really pushed my creativity when it came to combining shapes like ellipses and rectangles and circles for my hair and bangs. I was able to think outside the box on how to create what I wanted because I wasn’t even sure what the best way to get what I wanted to create was. My hope for the future is the be able to understand curves better to be able to make more custom shapes from scratch. Perhaps one day I can revisit this self-portrait and make it more realistic.

 

Concept:

This was my first project using p5.js, and also my first for this class. So, I decided to experiment and explore as much as I could to build a solid foundation for the projects ahead.

To start, I used a photo of myself to get a rough idea of how to align my basic features. The goal was to create a portrait as realistic and true to life as possible. I used different shapes, like ellipses, arches, and rectangles, to form the features, and added line strokes to bring in more detail.

Since I’m a computer science major, I wanted to add some movement and interactivity, instead of just making a still portrait. First, I made the eyes follow the cursor by adjusting their position as the cursor moved. At first, though, the pupils kept escaping the eyes, so I had to put some limits on the movement to keep them inside the eyes. Then, since I love flowers, I created a function that draws small flowers whenever the mouse clicks anywhere on the screen. This made it look like I was looking in the direction where each flower appeared, reflecting my interest and excitement for flowers. After every five flowers, I added a little celebration with confetti falling from above. Once the confetti finished, the flowers slowly started falling too. The user would then need to refresh the page to draw more flowers.

Ideally, I would’ve made the flower creation loop infinite, so the user wouldn’t have to refresh to make new flowers. However, I’ve been feeling really worn out with work lately, so I decided to leave it as is. The idea was that I needed to refresh before getting more work — since the project is meant to reflect me, not just being a simple program, it kind of shows that I need a break too.

Click anywhere to make flowers. I’ll be super happy if you can make 5 !

Highlights:

I think the highlight of my project was the confetti and the flowers falling down. It added a fun sense of celebration and reflected my love for flowers.

// confetti falling down if celebration has started
if (celeb_start) {
for (let i = 0; i < confetti.length; i++) {
confetti[i].y += confetti[i].speedY; // move the confetti down
confetti[i].x += confetti[i].speedX; // move the confetti horizontally to give a wavy effect
fill(confetti[i].color);
noStroke();
ellipse(confetti[i].x, confetti[i].y, 10, 10);
}

// removing confetti that has gone off the screen
confetti = confetti.filter(c => c.y < height);
}

// falling flowers after celebration
if (flower_count >= 5 && !celeb_start) {
celeb_start = true;

// pause for 1 second before the celebration starts
setTimeout(() => {
generateConfetti(); // start the confetti
}, 300);

// pause for 5 seconds after confetti
setTimeout(() => {
makeFlowersFall(); // making flowers fall
}, 3000); // confetti and delay time
}

// move the falling flowers
for (let i = 0; i < fall_flowers.length; i++) {
fall_flowers[i].y += fall_flowers[i].speedY; // make flowers fall
fall_flowers[i].x += fall_flowers[i].speedX; // adding horizontal drift to the flowers
drawFlower(fall_flowers[i].x, fall_flowers[i].y);
}

// removing flowers that have fallen off the screen
fall_flowers = fall_flowers.filter(f => f.y < height);
}

I also liked the idea of making the shirt with a round neckline using a skin-colored semi-circle (to extend the neck skin), which gave the clothes a more realistic look. This saved me time because creating the shirt itself with that structure would have been much more difficult than simply extending the neck.

Reflections, ideas for future work & Improvements:

I have slightly wavy hair and wanted to capture that instead of using simple straight line strokes. I tried using sin() functions to create the waves, but I couldn’t get it right due to time constraints. Since the thing I love most about myself is my hair, I really want to make it more realistic and true to mine. I also hope to make my bangs look more natural by using arches instead of line strokes.

I could definitely improve the aesthetics of the background and add a more appealing scenery. Since the theme of this portrait is all about flowers and positive vibes, I could create a garden in the background to complement that idea. Lastly, I’d love to make a full-body portrait with a nice dress in the future.

Project Concept

For my first assignment, I envisioned creating a  portrait using only one shape thats minimalist yet offers visual depth. I decided that pixel art was the perfect medium for this idea since Its built out of squares yet shading features help provide the sense of depth. Its structured grid format and the ability to control each individual “pixel” felt ideal for achieving the clean aesthetic I had in mind.

Challenges Faced

While my initial plan was to use nested loops to generate the grid and automate the process, as a complete coding beginner, I encountered errors that made it difficult to implement this approach. To overcome this, I decided to hardcode each pixel manually. This allowed me to fully control the placement and colors but turned the process into a labor-intensive task. Every pixel had to be individually positioned and assigned a color, which made the project take much longer than anticipated. It obviously isn’t ideal but I gained a hands-on understanding of positioning features , drawing features.

Key Takeaways

Despite the challenges, this project turned out to be a significant learning experience. Some of the key insights I gained include:

1. The necessity of loops and conditions: Hardcoding each pixel gave me total control, but it also highlighted how essential loops are for reducing repetitive tasks and improving efficiency in coding. When I wanted to change my background in the end, it wasn’t possible because that’d need me to hardcode everything all over again.
2. Improved understanding of p5.js positioning: By working manually on every pixel, I developed a solid understanding of how p5.js handles positioning and coordinates, which will undoubtedly help me in future projects.
3. Patience and problem-solving: This project tested my patience but also pushed me to find doable solutions when my initial approach didn’t work as planned.

 

Reflection

For this self-portrait, I wanted to create a clean, simple, and expressive representation of myself, combining basic shapes like ellipses, arcs, and rectangles. The goal was to balance realism and a playful, cartoon-like aesthetic while incorporating distinct features like a small beard, expressive eyebrows, and stylized hair. I focused on ensuring proportionality and seamless transitions between shapes, such as the neck connecting to the head and the shirt integrating an arc and rectangle for a polished look.

I’m proud of how the self-portrait turned out, as it reflects a good balance of simplicity and personal expression. The use of arcs and ellipses allowed me to create distinct facial features, and the small beard adds a unique touch to the design. However, there is room for improvement. In the future, I’d like to experiment with adding shading or gradients to enhance depth and realism. Additionally, I could explore animations, such as blinking eyes or a waving hand, to bring the portrait to life. This project has been a rewarding exercise in creative coding, helping me better understand shape integration and design principles in p5.js.

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

function draw() {
  background(220);

  // Drawing the neck
  fill(240, 200, 170);
  rect(180, 280, 40, 20);

  // Drawing the head
  fill(240, 200, 170);
  ellipse(200, 200, 150, 180);

  // Drawing the eyes
  fill(255);
  ellipse(170, 190, 30, 20);
  ellipse(230, 190, 30, 20);

  fill(50);
  ellipse(170, 190, 10, 10);
  ellipse(230, 190, 10, 10);

  // Adding eyebrows using arcs for expression
  stroke(50);
  strokeWeight(3);
  noFill();
  arc(170, 175, 40, 10, PI, TWO_PI);
  arc(230, 175, 40, 10, PI, TWO_PI);

  // Drawing the nose
  stroke(150, 100, 80);
  strokeWeight(2);
  line(200, 190, 200, 220);
  arc(200, 220, 20, 10, 0, PI);

  // Adding mouth
  noStroke();
  fill(200, 80, 80);
  arc(200, 250, 50, 30, 0, PI);

  // Adding a small beard below the mouth
  fill(100, 50, 30);
  arc(200, 280, 70, 30, 0, PI);

  // Drawing the hair 
  fill(50);
  arc(200, 150, 160, 120, PI, TWO_PI);
  rect(120, 150, 20, 80);
  rect(260, 150, 20, 80);

  // Drawing ears on both sides of the head
  fill(240, 200, 170);
  ellipse(125, 200, 20, 40);
  ellipse(275, 200, 20, 40);

  // Drawing a shirt 
  fill(100, 150, 200);
  noStroke();
  arc(200, 347, 100, 100, PI, TWO_PI);
  rect(150, 345, 100, 50);
}

 

 

 

For this project, I created an animated self portrait using  p5.js. The design uses basic shapes like ellipses, arcs, triangles and lines to create the structure of the face.

My 2 favourite things that I spent so much time on is the eyelashes as I had  a hard time adjusting the angles and the coordinates which I couldn’t just calculate, I had to just guess where to place them and see how it looks after running (trial and error).

Here’s the code snippet for the eyelashes:

stroke("Black");
strokeWeight(3);
line(160,170,150,145);
line(240,170,250,145);
line(180,170,190,145);
line(220,170,210,145);
line(170,170,170,142);
line(230,170,230,142);

I also like the interactivity of the portrait. By clicking the mouse, the eyes blink, and the face smiles and upon clicking again the face returns back to its original state.

Here is the portrait:

One thing that I’d like to improve is making the portrait more realistic as that’s what I wanted at first but couldn’t do as I had such a hard time figuring out the coordinates  and the best shapes to use to create the features (ex: the blush on the cheeks and the hair).

Concept

For the first assignment, I will present a simplified picture of myself using p5.js. I chose to cover my eyes in the portrait because I wanted to symbolize introspection and the idea of seeing beyond appearances, as I used in other mediums.

The highlight of the code I am proud of is this snippet:

//small detail in Abaya
 stroke('rgb(32,32,32)'); 
  strokeWeight(5);
 let dx = 256 - 210; // Difference in X
  let dy = 399 - 410; // Difference in Y

  // Adjusting both points by the calculated difference
  line(210 + dx, 410 + dy, 1006 + dx, 1198 + dy)

This is because it really required me to understand the coordinates to position the detail. Finding an accurate x and y coordinates to perfectly align the detail was pretty challenging, with the errors ruining the other details of the portrait. However, using console.log to track positions and fine-tune them allowed me to get it right.

Embedded Sketch

Reflections

 I think I need to improve more on the colors and the use of shapes since my current portraits lack depth and realism. In addition, I would also add a background and add a bit more details in areas like the headscarf. While the task comes with a lot of challenges and debugging to do, I do learn more about JavaScript than I realized, and hopefully, as I learn how to utilize other functions, like the console.log() function, and line(), the processes of learning JavaScript will slowly become easier.