Author: Ghadir Madani

Concept:

For this project I did my research more about generative artwork and I saw this picture from the following website: https://panopticon.am/generative-art/ Inspiration for my project

I really got inspired by this artwork, so I decided to create my project based on this piece. My idea was to loop squares on a black screen with random colors and when the mouse is clicked the squares start moving and if the mouse is clicked again the squares move faster, there are three different speeds and every time you click the speed changes from 1 to 3 to 10 to 1 and the cycle repeats.

Highlighted code:

// MovingSquare class
class MovingSquare {
  constructor(x, y, size) {
    this.x = x;
    this.y = y;
    this.size = size;
    this.speedX = 0; // Initial horizontal speed
    this.speedY = 0; // Initial vertical speed
  }
  
  // Method to set the speed of the square
  setSpeed(speedX, speedY) {
    this.speedX = speedX;
    this.speedY = speedY;
  }
  
  // Move the square based on its current speed
  move() {
    // Move the square
    this.x += this.speedX;
    this.y += this.speedY;
    
    // Bounce back when hitting the canvas edges
    if (this.x <= 0 || this.x + this.size >= width) {
      this.speedX *= -1; 
    }
    
    if (this.y <= 0 || this.y + this.size >= height) {
      this.speedY *= -1; 
    }
  }

The part of code I am particularly proud of is the MovingSquare class. I am proud of this code because I was having difficulties while I was doing the in class exercise that was related to the classes. It was still quite difficult to use the classes in this project but with trial and error I did it.

Future Improvements:

For the future I wish I could bring the animation back to its static position where all the squares were aligned in a loop function after the mouse is pressed for the fourth time, I tried to do it in this project but it was quite hard to figure it out.

When I changed my major from Biology to Interactive Media, I didn’t fully understand what interactivity really meant. Reading Chapter 3 of The Art of Interactive Design by Chris Crawford helped me make a clear distinction between interactivity and related concepts like reaction, participation, and design. Crawford defines true interactivity as a cyclical process where two actors alternately give input, process it, and provide output, much like a conversation.

Before reading, I assumed that systems allowing user participation, such as clicking buttons, were interactive. However, Crawford’s explanation made me realize that true interactivity requires meaningful feedback. Unlike simple reactions, which are one-way responses, interactive systems respond to the user’s input in ways that adapt and engage, creating a dynamic loop.

This new understanding has changed how I approach design, as I now realize the importance of creating systems that actively respond to user input in meaningful ways. Crawford’s insights will guide me in future projects, pushing me to design experiences that are truly interactive, with a focus on creating dynamic, engaging feedback loops between the user and the system.

In Casey Reas’ presentation, he explores the tension between order and chaos through the lens of visual art, particularly how software and algorithms have allowed for a deeper engagement with these concepts. His work demonstrates how randomness can coexist with controlled systems, creating art that is both calculated and unpredictable, offering new perspectives on the artistic process. What stood out to me was how his work evolved from simple systems to complex installations, with the unpredictability of the process being the common thread between all his artworks. His reliance on algorithms and chance, combined with borders, reflects a deep connection between control (borders) and randomness(algorithms and chance), making each artwork unique yet part of an artistic collection.

But the real question on my mind is whether his work is considered art. Even though his work stood out to me and it was interesting to see what pieces were created from software, algorithm, randomness and chance, I’m still wondering if this is actually considered a piece of art. I’ve been thinking about this because my twin, who is majoring in visual art, often questions what is considered art. In my opinion, not everything can be considered art; true art is what has been made with genuine feelings, created by hand, and has a meaning or story behind it. Some might argue that it is considered a piece of art because this person programmed it to do this piece of work, but I still argue that even though the person gave the commands the person still didn’t know how the artwork will end up looking like and there isn’t any story or meaning behind this piece of work. So, the question remains: is his work considered art?

Concept:

For this project I got my inspiration from Bridget Riley who is an artist specialized in optical illusion. She is known to use geometric shapes and patterns to create these optical illusions. Below are some of Bridget Riley’s artworks.

Getting the inspiration from Bridget Riley I decided to create my project from geometric shapes (triangles) and creating multiple loops to achieve this optical illusion that I came up with. I also added some interactivity that the user can use in my project where if the user pressed the mouse the project will change from black and white to orange and blue, and the transition between the two color schemes is supposed to create a surprising visual effect that aligns with the idea of shifting perception.

Highlighted Code:

if (mouseIsPressed){
   
   fill('#FF783D');
   rect(0,0,120,100);
   
   // loop for blue triangles 1
 for (let x1=0;x1 <= 100; x1 += 40) {
   for (let y1 = 0; y1 <= 90; y1 += 20) {
     let x2 = x1;
     let y2 = y1 + 20;
     let x3 = x1 + 20;
     let y3 = y1 + 10;
     
     fill('#3DC4FF');
     triangle(x1, y1, x2, y2, x3, y3); 
   }
 }
  // loop for opposite blue triangles 1
   
 for (let x1=20; x1<=100; x1 += 40){
   for (let y1=10; y1<=100; y1+=20){
     let x2=x1+20;
     let y2= y1+10;
     let x3=x1+20;
     let y3= y1-10;
     
     triangle(x1,y1,x2,y2,x3,y3);
   }
 } 
    rect(0,100,120,100);
 
  // loop for orange triangles 1
 for (let x1=0;x1 <= 100; x1 += 40) {
   for (let y1 = 100; y1 <= 190; y1 += 20) {
     let x2 = x1;
     let y2 = y1 + 20;
     let x3 = x1 + 20;
     let y3 = y1 + 10;
     
     fill('#FF783D');
     triangle(x1, y1, x2, y2, x3, y3); 
   }
 }
  // loop for opposite orange triangles 1
 for (let x1=20; x1<=100; x1 += 40){
   for (let y1=110; y1<=190; y1+=20){
     let x2=x1+20;
     let y2= y1+10;
     let x3=x1+20;
     let y3= y1-10;
     
     triangle(x1,y1,x2,y2,x3,y3);
   }
 }
 
   rect(0,200,120,100)
   // loop for blue triangles 2
 for (let x1=0;x1 <= 100; x1 += 40) {
   for (let y1 = 200; y1 <= 290; y1 += 20) {
     let x2 = x1;
     let y2 = y1 + 20;
     let x3 = x1 + 20;
     let y3 = y1 + 10;
     
     fill('#3DC4FF');
     triangle(x1, y1, x2, y2, x3, y3); 
   }
 }
  // loop for opposite blue triangles 2
 for (let x1=20; x1<=100; x1 += 40){
   for (let y1=210; y1<=300; y1+=20){
     let x2=x1+20;
     let y2= y1+10;
     let x3=x1+20;
     let y3= y1-10;
     
     triangle(x1,y1,x2,y2,x3,y3);
   }
 }
 
   rect(0,300,120,100);
 
  // loop for orange triangles 2
 for (let x1=0;x1 <= 100; x1 += 40) {
   for (let y1 = 300; y1 <= 400; y1 += 20) {
     let x2 = x1;
     let y2 = y1 + 20;
     let x3 = x1 + 20;
     let y3 = y1 + 10;
     
     fill('#FF783D');
     triangle(x1, y1, x2, y2, x3, y3); 
   }
 }
  // loop for opposite orange triangles 2
 for (let x1=20; x1<=100; x1 += 40){
   for (let y1=310; y1<=390; y1+=20){
     let x2=x1+20;
     let y2= y1+10;
     let x3=x1+20;
     let y3= y1-10;
     
     triangle(x1,y1,x2,y2,x3,y3);
   }
 }

The part of the code I’m most proud of is the one that changes the artwork’s colors when the mouse is pressed. Although it’s just a portion of the entire code, I’m particularly proud of it because the colors didn’t overlap, and the pattern turned out exactly as I had envisioned. I’m also proud of the overall coding process, as it was challenging to get the dimensions right, and I had to repeat it several times before figuring it out.

Sketch:

Future Improvements:

For the future I wish to incorporate some movement in the shapes and for example if I hover the mouse on the artwork it changes according to the placement of the mouse on it.

Concept:

The concept of my first assignment is to use JavaScript (p5) to code 2D primitive shapes to create a self-portrait. This involves carefully selecting the correct shapes and inputs (x-axis, y-axis, etc.), as well as determining how to fill shapes with color, and choosing the color and size of the shape strokes to achieve the final look.

In my self-portrait, I included two elements that are important to me. The first element is the night sky and the moon, as my favorite time of day is nighttime. The second element is the eyes, which hold significance because I have a twin (we are not biologically identical), but people often confuse us. To help others distinguish between us, I always suggest looking at our eye colors—I have greenish-grey eyes, while my twin has brown eyes.

Highlighted code:

I am proud of the final outcome I achieved, but I am especially proud of the eyes. I successfully layered different sizes of circles with various colors, perfectly centering them on top of each other. I am also proud of the eyelashes, as I was able to align them symmetrically opposite each other with the same length and size.

//eyes
fill(255);
circle(165,175,37);
circle(235,175,37);
fill('rgb(87,107,136)');
circle(165,175,27);
circle(235,175,27);
fill(0);
circle(165,175,15);
circle(235,175,15);
stroke(0);
strokeWeight(2);
line(147,170,140,165);
line(150,165,143,160);
line(153,160,146,155);
line(253,170,260,165);
line(250,165,257,160);
line(247,160,254,155);

Sketch:

Future Improvements:

In the future I would like to animate my work (example: make the eyes move), and I would like to learn how to draw curved lines (for example to learn how to draw the eyebrows).