Author: Maryam Almatrooshi

Concept

This project is a creative expansion of my initial experience with p5.js, where I first ventured into the world of coding shapes and sketches. In our very first week of classes, we were encouraged to explore and create a house using p5.js. Now, for this assignment, I’ve revisited that initial sketch of a house, but with a twist. I aimed to breathe life into it by adding animation and interactivity, combining the fundamentals we learned previously with new elements. Additionally, winter is my favorite season, and I wanted to capture its essence in this project. To convey the beauty of winter, I decided to add falling snow in the background that accumulates on the ground as it descends. This not only adds movement and interactivity but also creates a serene winter landscape.

Highlight of the Code

One of the standout features of my code is the dynamic snowfall. Each snowflake is generated with a random position and speed, and they fall gracefully to the ground, accumulating over time. Here’s a snippet of the code responsible for this:

// Generate 300 random snowflakes with positions and speeds.
for (let i = 0; i < 300; i++) {
  snowflakes.push(createVector(random(width), random(height), random(minSpeed, maxSpeed)));
}

// Update and draw each snowflake.
for (const snowflake of snowflakes) {
  snowflake.y += snowflake.z; // Move the snowflake downwards.
  fill(255); // Set the snowflake color to white.
  rect(snowflake.x, snowflake.y, 1, 1); // Draw a small rectangle for each snowflake.

Moreover, I’ve added an interactive element where users can increase the snowfall by clicking on the canvas background. Additionally, pressing the mouse button while moving increases the snowfall, allowing users to control the intensity of the snowstorm dynamically.

Reflection/Improvements

While I’m pleased with the outcome, I recognize that there’s always room for improvement and further exploration. One possible avenue for improvement is to introduce a day-and-night cycle. By implementing this feature, the project could dynamically transition between day and night, altering the mood and atmosphere. This could involve changing the background color, adjusting the brightness of objects, and simulating the passage of time. Such a feature would not only add visual interest but also make the project more immersive and interactive. As I continue to explore creative coding, I look forward to experimenting with such dynamic elements in future projects, enriching the user experience and pushing the boundaries of what’s possible.

Edit Link

Concept

After learning more about coding shapes in class using p5.js, I was eager to push the boundaries and explore the artistic and creative possibilities it offered, which I aimed to demonstrate in this assignment. My goal was to create a cartoon-like representation of a self-portrait, allowing for the smooth application of various shapes. This portrait is a reflection of my moments of solitude when I enjoy listening to music and savoring my day. To represent my personality, I chose my favorite color as the background. In an effort to infuse interactivity, I experimented with adding movement to the portrait, where elements respond dynamically as the mouse interacts with the canvas. This exploration allowed me to combine code, art, and personal expression into a single creative assignment.

Highlight of my Code

The addition of interactivity in my codes is one feature that makes me proud. I have two personal favorites, and I find it difficult to choose between them. The first is the way the eyes respond when you interact with them using the mouse – they close, adding an engaging and lifelike dimension to the portrait. The second highlight is the implementation of headphones; when you move your mouse over the ears, a set of headphones magically appears. Below, you can find the relevant sections of code for both interactions:

Eyes Interaction:

// Eyes open
noStroke();
fill(255);
ellipse(240, 260, 60, 60);
ellipse(360, 260, 60, 60);

// Left eye closed
if(mouseX > 210 && mouseX < 270) {
  if(mouseY > 230 && mouseY < 290) {
    noStroke();
    fill(255, 225, 190);
    ellipse(240, 260, 61, 61);
    strokeWeight(10);
    stroke(0);
    noFill();
    bezier(210, 260, 210, 305, 270, 305, 270, 260);
  }
}

Headphones Interaction:

// Headphones
if(mouseX > 120 && mouseX < 160) {
  if(mouseY > 270 && mouseY < 330) {
    noStroke();
    fill(0);
    ellipse(150, 300, 120, 120);
    ellipse(450, 300, 120, 120);
    strokeWeight(17);
    stroke(0);
    noFill();
    ellipse(300, 210, 350, 268);
  }
}

Reflection/Improvements 

Although I’m proud of how my self-portrait turned out, I know that I can always do better and improve my knowledge of coding. One avenue for exploration is the realm of interactive elements. Instead of focusing on specific features like eyes and headphones, I could create more interactive elements that enrich the overall experience. For instance, I could have experimented with the background’s interactivity. Rather than having a static color, I could have implemented dynamic changes in response to user interactions. This could involve background color shifts or even more captivating visual effects to make the portrait engaging and visually stimulating.

Edit Link