Category: Spring 2024 – Aya (Section 003)

Concept: My generative art created using P5.js presents a captivating display of colorful circles arranged in a dynamic pattern using OOPS, Arrays and Functions. I have integrated few interactive functions to make it more interesting. Inspired by the interplay of randomness and user interaction as discussed in class, this artwork embodies the concept of controlled chaos.

Main Inspiration:

At initial phase: At first, I had the idea to create artwork like the one in the video, but instead of using curves, I wanted to use circles. Each circle in my artwork has its own size, color gradient, and movement, which all come together to make the overall picture interesting. I added an interactive feature so people can join in and make the artwork themselves by clicking the mouse to add new circles. This makes the artwork more dynamic and engaging. The colors of the circles change gradually based on their position on the screen, which gives the artwork depth and liveliness. Additionally, each circle rotates at its own speed, adding a sense of flow and motion. Overall, my artwork demonstrates how randomness can be controlled to create harmony, inviting viewers to appreciate the beauty of unpredictability.

[Initial Output] This is how it looks! Try tapping anywhere in canvas to create more fun circles.. 

Initial Art Code:

let circles = [];

function setup() {
  createCanvas(600, 600);
  
  // Create an initial set of circles
  for (let i = 0; i < 50; i++) {
    let circle = new Circle(random(width), random(height), random(10, 50));
    circles.push(circle);
  }
}

function draw() {
  background(255);

  // Update and display each circle
  for (let circle of circles) {
    circle.update();
    circle.display();
  }
}

function mousePressed() {
  // Add a new circle at the mouse position when clicked
  let newCircle = new Circle(mouseX, mouseY, random(10, 50));
  circles.push(newCircle);
}

// Circle class definition
class Circle {
  constructor(x, y, diameter) {
    this.x = x;
    this.y = y;
    this.diameter = diameter;
    this.color1 = color(random(255), random(255), random(255));
    this.color2 = color(random(255), random(255), random(255));
    this.speedX = random(-2, 2);
    this.speedY = random(-2, 2);
    this.rotation = random(TWO_PI); // Random initial rotation
    this.rotationSpeed = random(-0.05, 0.05); // Random rotation speed
  }

  update() {
    // Move the circle
    this.x += this.speedX;
    this.y += this.speedY;

    // Bounce off the walls
    if (this.x > width || this.x < 0) {
      this.speedX *= -1;
    }
    if (this.y > height || this.y < 0) {
      this.speedY *= -1;
    }

    // Update rotation
    this.rotation += this.rotationSpeed;
  }

  display() {
    // Draw the circle with color gradient and rotation
    let gradientColor = lerpColor(this.color1, this.color2, map(this.y, 0, height, 0, 1));
    fill(gradientColor);
    noStroke();
    push();
    translate(this.x, this.y);
    rotate(this.rotation);
    ellipse(0, 0, this.diameter, this.diameter);
    pop();
  }
}

I felt that my artwork needed some additional features to make it more engaging, so I decided to incorporate three new elements:

1. Interactive Drawing: Now, users can click and drag their mouse to draw colorful circles directly onto the canvas. This adds an interactive dimension to the artwork, allowing people to actively participate in its creation.

2.Dynamic Color Palette: To enhance visual appeal, I introduced a dynamic color palette. Each circle is filled with colors randomly selected from a predefined palette, adding variety and vibrancy to the overall composition.

3.Transparency Effect: To create a sense of depth and visual interest, I implemented a transparency effect. The transparency of each circle varies based on its diameter, resulting in a captivating depth effect as circles overlap on the canvas.

Final Output (Tap and drag the mouse anywhere in the canvas)

This is how it looks if the user added more circles:

Final Code:

let circles = [];
let colorPalette = ['#FFC857', '#F4A35F', '#EE6C4D', '#F95738', '#FF5733', '#FF355E', '#D40C6B', '#7A00FF', '#0045FF', '#0088FF']; //Creating an array filled with color palettes. 

function setup() {
  createCanvas(800, 600);
  
  // Creating an initial set of circles
  for (let i = 0; i < 100; i++) {
    let x = random(width);
    let y = random(height);
    let diameter = random(10, 50);
    let colorIndex = floor(random(colorPalette.length));
    let circle = new Circle(x, y, diameter, colorPalette[colorIndex]);
    circles.push(circle);
  }
  
  // Adding interactive features (just need to tap and drag)
  background(0);
  textAlign(CENTER, CENTER);
  textSize(36);
  fill(255);
  text("Click and drag to draw!", width / 2, height / 2);
}

function draw() {
  // Updating and displaying each circle
  for (let circle of circles) {
    circle.update();
    circle.display();
  }
}

function mouseDragged() {
  // Add a new circle at the mouse position when dragged
  let diameter = random(10, 50);
  let colorIndex = floor(random(colorPalette.length));
  let circle = new Circle(mouseX, mouseY, diameter, colorPalette[colorIndex]);
  circles.push(circle);
}

// Defining Circle class 
class Circle {
  constructor(x, y, diameter, color) {
    this.x = x;
    this.y = y;
    this.diameter = diameter;
    this.color = color;
    this.speedX = random(-2, 2);
    this.speedY = random(-2, 2);
    this.rotation = random(TWO_PI); // Random initial rotation
    this.rotationSpeed = random(-0.05, 0.05); // Random rotation speed
  }

  update() {
    // Moving the circle
    this.x += this.speedX;
    this.y += this.speedY;

    // Bouncing off the walls
    if (this.x > width || this.x < 0) {
      this.speedX *= -1;
    }
    if (this.y > height || this.y < 0) {
      this.speedY *= -1;
    }

    // Updating rotaion
    this.rotation += this.rotationSpeed;
  }

  display() {
    // Drawing the circle with rotation and transparency effect
    push();
    translate(this.x, this.y);
    rotate(this.rotation);
    fill(this.color);
    noStroke();
    let alpha = map(this.diameter, 10, 50, 50, 200); 
    // Varrying transparency based on diameter
    fill(red(this.color), green(this.color), blue(this.color), alpha);
    ellipse(0, 0, this.diameter, this.diameter);
    pop();
  }
}

Code I’m proud of: Initially, I found implementing the transparency effect challenging in my artwork. Understanding how to vary the transparency based on the diameter of each circle was tricky. However, I managed to overcome this difficulty by experimenting with the map() function in the display() method of the Circle class. By mapping the diameter of each circle to a range of transparency values, I was able to achieve the desired effect. This involved adjusting the parameters of the map() function until I achieved the desired transparency levels, ultimately resulting in a visually appealing depth effect as circles overlapped on the canvas. Overall, successfully implementing this feature added an extra dimension to my artwork that I’m proud of.

Additional Art Work: With Valentine’s Day approaching, I decided to enhance my artwork by making some adjustments to the code. Here’s the updated look!

Here’s the code for the Valentine’s Day themed artwork:

let hearts = [];
let colorPalette = ['#FF4D6D', '#FF6381', '#FF7992', '#FF8BA3', '#FFA3B5', '#FFBFC7', '#FFD1D9', '#FFEDF2'];

function setup() {
  createCanvas(800, 600);
  
  // Addinng a sweet message
  background(255);
  textAlign(CENTER, CENTER);
  textSize(36);
  fill(150);
  text("Happy Valentine's Day!", width / 2, height / 2 - 50);
  text("Click and drag to create love!", width / 2, height / 2 + 50);
}

function draw() {
  // Updating and displaying each heart
  for (let heart of hearts) {
    heart.update();
    heart.display();
  }
}

function mouseDragged() {
  // Adding a new heart at the mouse position when dragged
  let size = random(30, 100);
  let colorIndex = floor(random(colorPalette.length));
  let heart = new Heart(mouseX, mouseY, size, colorPalette[colorIndex]);
  hearts.push(heart);
}

// Heart class definition
class Heart {
  constructor(x, y, size, color) {
    this.x = x;
    this.y = y;
    this.size = size;
    this.color = color;
    this.speedX = random(-2, 2);
    this.speedY = random(-2, 2);
    this.rotation = random(TWO_PI); // Random initial rotation
    this.rotationSpeed = random(-0.05, 0.05); // Random rotation speed
  }

  update() {
    // Moving the heart
    this.x += this.speedX;
    this.y += this.speedY;

    // Bounce off the walls
    if (this.x > width || this.x < 0) {
      this.speedX *= -1;
    }
    if (this.y > height || this.y < 0) {
      this.speedY *= -1;
    }

    // Update rotation
    this.rotation += this.rotationSpeed;
  }

  display() {
    // Drawing the heart with rotation and transparency effect
    push();
    translate(this.x, this.y);
    rotate(this.rotation);
    fill(this.color);
    noStroke();
    let alpha = map(this.size, 30, 100, 50, 200); // Vary transparency based on size
    fill(red(this.color), green(this.color), blue(this.color), alpha);
    beginShape();
    vertex(0, -this.size / 2);
    bezierVertex(this.size / 2, -this.size / 2, this.size, 0, 0, this.size);
    bezierVertex(-this.size, 0, -this.size / 2, -this.size / 2, 0, -this.size / 2);
    endShape(CLOSE);
    pop();
  }
}

In this reading, Chris Crawford presents interesting insights into what interactivity exactly means. I personally had not thought much about this, but this reading gave me a different perspective of looking at things. The idea of interactivity being qualitatively different from reactivity was interesting to me. It seems that there are certain things that are very hard to make interactive if they are kept as it is (such as a book).

The idea of how an interactivity designer is different from a user interface designer was also new to me. I really liked the analogy of form v/s function and how an interactivity designer focus on all three aspects of interactivity (listening, thinking and speaking). He also writes about graphic designing as being merely a subset of interactive designing.

I had never considered the challenges that interactivity designers would face in an industry where this is still an emerging field and, in a context, where interactivity designers are generally younger and less technically proficient.

Overall, this reading gave me a better understanding of what interactivity is and why it is important. The example that the author gave of a teacher being better than a mere book because of interactivity was very useful and helped me realize its importance. I hope to incorporate this way of thinking in designing future projects.

For this assignment, I wanted to create a geometric and interactive artwork using OOP and functions. I was inspired by this youtube video: https://www.youtube.com/watch?v=4lCD9B4Dlik

My idea was to have a grid of spinning dial controls. Each dial displays a different hue pulled from the colour spectrum and it gives the final piece an ombre effect. As you move your mouse across the grid, the dials swivel to follow along. It creates this really cool hypnotic effect!

I created a Dial class to represent each control. In the setup(), I iterate through a 2D array to place Dial instances in rows and columns. I calculated the number of rows and columns based on the canvas size to fully fill up the space.

Each Dial is coloured according to its position in the grid using HSB colour mode. This lets me pull nice saturated tones from around the colour wheel. I mapped the grid indices to hue, saturation and brightness values. This creates a smooth gradient of colours.

for (let i = 0; i < cols; i++) {
  for (let j = 0; j < rows; j++) {
    // Map the grid position to HSB color values
    let hue = map(i + j, 0, cols + rows, 0, 360);
    let saturation = map(i, 50, cols, 100, 100);
    let brightness = map(j, 50, rows, 100, 100);

    // Set the fill color based on mapped HSB values
    fill(hue, saturation, brightness);

    // Call the rotateDial method of the  Dial instance with the current mouse position
    dials[i][j].rotateDial(mouseX, mouseY);

In draw(), all that’s left is to animate the Dials. This simply involves calling each Dial’s rotateDial() method, passing in the mouse position. Some tweaking was needed to get the rotation speed and smoothness right.

While the core concept is simple – a grid of colourful spinning things – the end result is quite striking and mesmerising. As the mouse moves, these colourful triangles swirl around the grid in different patterns. The black background makes it stand out and I’m pleased with how well it turned out.
I’m considering ways to expand on the idea in the future, maybe adding interactivity to control the colour mapping or rotation speed. I’m open to suggestions for other fun tweaks!

 

The way the author defined the term “interactivity” caught my attention. To me, interactivity simply means interactions between two things or people. However, the author defined it in terms of a conversation where two actors actively take turn listening, thinking, and speaking. To further the definition, the author mentioned the role of subtasks (thinking, listening, speaking) in determining the quality of the interaction. Interactivity is not only about the interaction itself but also the subtasks that need to be well-performed to result in a high-quality interaction.

The author made an argument on what things are considered not interactive. I found myself agreeing with what the author defined as not interactive and an example given was a printed book. Although it speaks the words to the readers, it does not listen or think. In other words, the book and the reader do not alternately listen, speak, and think. In this way, the book is not interactive and hence cannot collaborate with humans, who are considered interactive.

To add on, an example of dancing as a non-interactive activity was a surprise. I thought dancing was interactive because dancers move according to the music. However, according to the author, dancing is not interactive because music is not an actor that can think and listen. It speaks the melodies and lyrics of the song but is not able to interchange with the dancer. Similarly, the movie is another subject that humans cannot interact with. Although I felt like I was exchanging ideas with the movies I watched, in fact, I was not interacting with the movies or the actors displayed in the movies.

Overall, the author’s definition of interactivity was fascinating. The author’s definition made me rethink what I consider interactive and hence how to develop good designs. While great designs can result between interactive and non-interactive actors, harmony between two interactive actors can also create designs of high quality and interest. With this reading, I will be trying to create designs that show the conversation of several interactive actors.

The product of this assignment is an extension of assignment 2: I wanted to further develop the code for bouncing ball by using class. The concept of this work is shooting star. Recently, the weather in Abu Dhabi has been so nice and I have been enjoying taking “sky-gaze”. Looking at the night sky and the stars, I thought I could use class to create several stars on P5.

This is the class named Star. Under this class, there is a constructor that determines the position and speed of the star. Also, there are three other instructions that guide the actions of the star (move, bounce, and show). I didn’t encounter any difficulty while constructing class and this process was easier than constructing the code under function draw.

class Star {
  constructor(x,y,xspeed,yspeed) {
    this.x = x;
    this.y = y;
    this.xspeed = xspeed;
    this.yspeed = yspeed;
  }

  move() {
    this.x = this.x + this.xspeed;
    this.y = this.y + this.yspeed;
  }

  bounce() {
    if (this.x > width || this.x < 0) {
      this.xspeed = this.xspeed * -1;
    }

    if (this.y > height || this.y < 0) {
      this.yspeed = this.yspeed * -1;
    }
  }

  show() {
    noStroke();
    fill('rgb(241,241,214)');
    ellipse(this.x, this.y, 15, 15);
  }
}

This is the section of code that I struggled with. Because I wasn’t familiar with some of the code such as interactive, new,  and push, I had to spend extra time to figure out how to use the code. However, once I grasped an understanding of the code by referencing class slide, I could use it to draw interactive stars.

function mousePressed(){
  
  //adding new star
  let interactiveStar = new Star(mouseX, mouseY, random(-5,5), random(-5,5));
  star.push(interactiveStar);

}

This is a portion of code that I am proud of. I learned how to animate objects in P5 using arrow keys by watching this video. The overall process of creating this code was easy but I had to go back and make global variables to be able to animate the object (rocket).

  //moving the rocket up and down
  if (keyIsPressed){
    if (keyCode == UP_ARROW){
      b--;
    } else if (keyCode == DOWN_ARROW){
      b++;
    }
  }
  
  //moving the rocket right and left
  if (keyIsPressed){
    if (keyCode == LEFT_ARROW){
      a--;
    } else if (keyCode == RIGHT_ARROW){
      a++;
    }
}

For improvement, I would like to actually create a star shaped shooting star and not use an ellipse. In this way, a shooting star would be more well-represented.

I resonate with the interaction that the author proposes. Interaction is a “cyclic process” in which two actors alternately listen, think, and speak; it’s a back-and-forth listening, thinking, and speaking process indeed. The key is more than one, irrefutably. But I entertain his idea that we should think of interactivity as a “variable with relative measures.” Sometimes, defining whether an object as either interactive or non-interactive seems reductive and regressive. Things are more than what they seem and they certainly belong in the grey area of interactivity definition. Aiming to discuss the degree of interactivity seems to be a legitimate approach.

The author thinks that movies are non-interactive. However, in today’s context, this is not true entirely anymore, given the rise of interactive content on streaming platforms such as Netflix, with shows or movies like Carmen Sandiego: To Steal Of Not To Steal, Black Mirror Bandersnatch, etc.. Sure, the end result is pretty much very pre-determined, these programs are scripted anyway, but the concept and operation of the interactivity is successfully implemented. Pretty soon in the future, there will be interactive movie made for VR glass devices such as the newly released Apple Vision Pro.

I also find the idea about the contention between user interface and interactivity design to be fascinating. User interface from what I understand is all about front-end and the interactivity design back-end. But I’ve never thought about the tense relation between the interactivity designers and the user interface designers who detest the intrusion of interactivity designers into their work. I’ve always thought that each of these two aspects cannot exist without the other!

This generative artwork is essentially me implementing the concepts of arrays and class that we learned. I was thinking of creating something fun and colorful and demonstrate a chaotic pattern that can be generated when a user press the mouse. And while scrolling through Openprocessing.org to look for inspirations, I stumbled upon a generative artwork called “Noise Turbulence Doodles” by Raven Kwok (https://openprocessing.org/sketch/143842).

The idea is that a circle generated from a mouse click is followed by a chain of automatically generated circles decreasing in size that scatter in random directions. I set the color spectrum for the circles to be a rainbow spectrum (referencing this p5js example by aferriss: https://editor.p5js.org/aferriss/sketches/Bys1YDQx7), with the root circle taking a random color every time the mouse is pressed or held. The longer the mouse is pressed at one position on the canvas, the more rainbow “spikes” are generated starting from the root. If the user moves the cursor around, they will scatter the root while creating the spikes as well.

The artwork generated looks like sea urchins or something spiky in 3D. This illusion is created by randomizing the distance between each circle that are generated in the chain from the root.

Using class and array:

let particle = new Particles(
      mouseX,
      mouseY,
      30,
      random(-5, 5),
      random(-5, 5)
    );
    //     add each circle generated after the root circle to the array
    circlelst.push(particle);

Creating a move class:

move() {
    //     the x-coordinate the circles increase according to the x-direction
    this.posX += this.directionX;
    //     the y-coordinate the circles increase according to the y-direction
    this.posY += this.directionY;
    //     the radius of the circles decrease by a random float from 0 to 1
    this.radius -= random(0, 1);
    //     draw the chain of circles
    if (this.radius > 0) {
      circle(this.posX, this.posY, this.radius);
    }
  }

Embedded sketch (Please press the mouse (either short press or long press) and move the cursor around to play with the effects):

This is very fun to make. The hardest part is to figure out how to generate the chain of circles that decrease in size as they are generated and how to trigger the circles to move in random direction consisting of x-direction and y-direction. It essentially required me to figure out how to work with arrays.

As for future work or improvements, I want to make the circles blend with one another smoothly to create a shape instead of separate circles. That way it can look even more hallucinatory.

Interactivity, to me, is the intimate, hands-on interaction with tools, systems, or experiences that change according to your input. It’s about engaging in a conversation with technology such that your actions produce significant, real-time results. This definition places a strong emphasis on having a hands-on, interactive engagement with the digital world in which you interact with technology or media as a conversation rather than just as a means of consumption. Your inputs are met with responsive and developing feedback.

The Significance of Interactivity

Creating responsive, captivating, and—above all—conversational experiences is what makes an experience interactive. It goes beyond simply having buttons to click and menus to navigate. Crawford’s concept, which describes true interaction as a cycle of speaking, hearing, and thinking between the user and the system, forces us to reconsider what true interaction actually entails. The significance of creating systems that can actually “understand” and “respond” to user inputs in a meaningful way is increased by this concept.

Putting Real Interactivity Into Practice

Developers and designers need to give communication flow top priority in their work if they want to achieve meaningful interactivity. This entails developing systems that are able to intelligently analyze user input, deliver pertinent, contextual feedback, and receive input from users. It’s about building an ecosystem in which the system thoughtfully responds to each action taken by the user, encouraging dialogue and a sense of community.

The Future of Interactive Media

Future-oriented, the possibilities for interaction appear endless. Advances in artificial intelligence, machine learning, and natural language processing may allow for ever more sophisticated and customized user conversations in the upcoming generation of interactive systems. Imagine interactive systems that can anticipate our wants and gradually adjust to our preferences in addition to obeying our directions.

Interesting questions

How can designers make sure that consumers are still having meaningful conversations with interactive systems?
How does empathy fit into the process of creating interactive experiences?
How can we keep the human factor in interactive design as AI gets more advanced?

For this assignment, I wanted to push myself out of my comfort zone and create something a bit more complex than what I typically make. By using a combination of arrays and object oriented programming, I was able to create an art piece that combines animation and user interaction to create a piece of art. My main concept came about when I was looking for inspiration on the internet. I knew I wanted to do something ‘nature’ related as it is something I love. When I came across the user Drea007’s work of a 2D solar system (see reference link at the end of the sketch), I knew what trajectory my sketch was going to head to.

 

The image above was directly taken from Drea007’s sketch, which has been linked at the end of this post. 

 

The main concept of the sketch was space, specifically the solar system. I wanted to emulate the ways in which the solar system worked but put a twist on it. Instead of the planets moving around the sun, as seen in Drea007’s work, I made them move around on their own in an unorganized way. Thus, I call this piece, ‘Cosmic Chaos’, due to the fact that the planets are moving around chaotically and in a non-synchronous manner. 

The process of creating this sketch involved a lot of practicing the material, especially object oriented programming. Through practicing, I was able to better understand how object oriented programming works within a sketch. I will also say that I learned a lot about movement with this assignment, particularly mouse or pointer movements. What I mean by this is that I have learned how to integrate user interaction into my sketches in a different way than I am used to. Through utilizing the command, ‘mousePressed’, I was able to allow users to directly engage with the objects within the sketch. By employing this command, I was able to essentially manipulate the objects in the sketch to follow the movements of the mouse cursor. To do this though, I needed to understand how to integrate mathematical principles within my code and utilize them to my advantage. The ones I learned how to incorporate were ‘atan2’ and ‘sin’ and ‘cosine’. Understanding these mathematical concepts in the context of p5js, I was able to conceptualize and compute angles in my sketch, enhancing the responsiveness and flow of user interaction within my sketch. Due to this new found skill, this is the part of my code that I am most proud of. 

You can see the code here:

function mousePressed() {
  // When mouse is pressed, make planets move towards mouse position
  for (let i = 0; i < planets.length; i++) {
    let dx = mouseX - planets[i].x;
    let dy = mouseY - planets[i].y;
    let angle = atan2(dy, dx);
    planets[i].xspeed = cos(angle) * 20;
    planets[i].yspeed = sin(angle) * 20;
  }
}

 

My final sketch: 

In terms of difficulties, I was having a lot of trouble with navigating how to begin the sketch as a whole. I had an idea of what I wanted to do but never knew how to execute it. I was having trouble wrapping my head around using the different classes and functions at the beginning but started to get a hang of it when I practiced. It was only when this happened that I felt like my creativity was able to flow. Therefore, in a sense, this assignment forced me to explore animation styles and effects on a deeper level as I wanted to incorporate elements that I do not know much about. Although I keep saying this, I think by actually exploring different elements of p5js with this assignment, I was able to feel more comfortable doing more complex things with code, something I was hesitant with doing. I was able to add a combination of complex shapes, features, styles, and user interaction, creating something that is interactive yet complex at the same time. This really helped me overcome my misconception that a sketch can simultaneously be both complex and interactive for users. I really enjoyed this process and am really happy that I pushed myself out of my comfort zone by creating something complex yet interactive.

---

References: 

https://editor.p5js.org/Drea007/sketches/5-vqHY3Te