Author: Amna AlHosani

After reading the article “The Art of Interactive Designs,” I kept thinking about what makes something truly interactive. The author does point out that a good interactive system feels almost like a conversation, like there’s this back-and-forth where the system responds to what you’re doing in real time. It made me realize that a lot of systems or designs we think are “interactive” really aren’t, especially when they don’t actually engage with the user in a meaningful way. If something just sits there and doesn’t respond, it’s basically dead weight, no matter how fancy it looks.

 

In my opinion, it was interesting how the writer claims that interaction isn’t just about cool or flashy videos. its about making the user feel like there in control and that their input to that piece is important. Sometimes, I would see designs that look amazing but don’t actually respond well to the user. This means that I most likely overlooked my previous artwork I created in p5.js.  Yes, I’m proud that I was able to create art that looks cool, but if it’s not responsive or doesn’t react to what the user does, it’s not really interactive in the way it should be.

 

This article really pushed me into thinking about how I could improve my p5.js sketches to make them more interactive. Right now, for the assignment I’m doing this week, I feel like its a little bit flat, but they respond, but not in a way that feels satisfying. For instance, you can click a cube and it pops out, but that’s about it. I want to bring in smoother transitions, add more control options, and maybe even layer multiple interactions on top of each other. For example, what if clicking a cube changed its color, or if dragging across the screen triggered more than one animation? That’s the kind of engaging interaction the article talks about, and it’s the direction I want to head in. I really believe that real interaction should be immersive, and I think the article agrees on that too . I mean, from what I understood, its not about one thing happening at a time; its about creating a system that is consistently reacting to the user. In the future, I want my own projects to feel like they are alive and responding, not just a list of functions that don’t change.

CONCEPT:

For this art work, I’m going with a concept similar to my previous one and continuing the Velnor Molnar grid art. I was on the lookout for art pieces made with artists who used P5.js, and I found myself inspired by two standout visuals. I was really drawn to this vibrant 3D cube grid. It has so much depth and layers that it just stands out.

The next source of inspiration is a straightforward yet powerful idea known as the “Fading Grid.” The color changes are truly captivating, producing a gentle fading effect that evolves within the user interaction.

I’m thinking of combining both concepts. I’ll incorporate the 3D cube design and introduce some interactive color fading, drawing from both sources of inspiration. When you click on the mouse, the cubes shift, with the color changing within the user interaction to create movement in a way that feels interactive.I’m really looking forward to seeing how blending these two concepts will influence my final piece of art.

EMBEDDED SKETCH:

Click on the cubes!

HIGHLIGHT OF THE CODE:

One part of my piece where I’m really proud is how I changed the lighting of the cubes based on how the user moved their mouse. As the mouse moves toward a cube, it gets brighter. As the mouse moves away, it gets darker. This makes the background look smooth, which makes the cubes seem to be reacting to the user being there.

Continue reading “Assignment #3”

CONCEPT:

Two artists have caught my eye for my concept: Vera Molnár and Dr. Bill. Vera Molnár’s use of grids and squares with small touches of randomness was something I thought of as cool and want to bring to my own piece, especially after watching Casey Reas and learning how randomness can create unique art pieces. Her piece “(Dés)Ordres” shows an example of balance between order and chaos by introducing little changes in color and shape within a structured grid (Molnár, 1974). I want to do something similar by using a grid of squares and making each square unique, creating a sense of predictability within the order. The second artist’s art, Dr. Bill’s, has inspired me to incorporate interactive elements into my artwork (Kolomyjec, n.d.). I plan to incorporate an interactive element where the colors of the squares shift as the viewer moves their mouse across the screen, making it engaging.

To be more specific about my design, I will use the loop function to add squares all over the canvas. However, like Molnár’s designs, I’ll also add squares within the squares, but I’ll be using randomness to change either how the square moves or how big it is inside the square, or the colors of the square. Also, I wanted to make it more interesting by picking one color on one side of the canvas that changes with the user and the mouse interaction with it. In addition to that, I wanted to make it a vibrant piece by adding random colors, but as I said, I’ll be choosing one specific color that changes within the interaction of the viewer and the mouse. Hopefully, by combining Molnár’s structured randomness with Dr. Bill’s generative interaction, I am aiming to create a dynamic and engaging piece, by working with order and unpredictability, to make something that evolves with each viewer’s interaction.

The images below are Vera Molnár and Dr. Bill’s work that inspired my piece:

SKETCH:

HIGHLIGHT:

One part I’m really proud of is figuring out how to make the cubes “shake.” I used the “random()” function to add small random movements to the X and Y coordinates of each square. By setting “randomShakeX” and “randomShakeY to values between -3 and 3, the squares move slightly, creating a subtle shaking effect.

It took me a while to get this right and was the most time-consuming part about my code. I started out by testing  different ranges for the movement and tested the effect with various square sizes. After some trial and error, I found the perfect balance where the shaking felt noticeable but not too chaotic. This part of the code may seem little, but it makes the design feel more dynamic and playful, which is something I was excited to achieve. In the end, I was proud of how it turned out because it brought my art piece together, which proved Casey Reas’s message of how small random changes can make a big difference in how a design feels.

heres a code snippet on how to do it:

// Adding random movement to create an effect of shaking (inner squares)
      let randomShakeX = random(-3, 3); 
      let randomShakeY = random(-3, 3); 

// Draw three inner squares with the shaking effect, decreasing in size.
      rect(x + randomShakeX, y + randomShakeY, 30, 30); 
      rect(x + randomShakeX, y + randomShakeY, 20, 20); 
      rect(x + randomShakeX, y + randomShakeY, 10, 10); 
    }
  }
}

REFLECTION:

One thing I learned from this assignment is how randomness can play a big role in art. It adds variety and surprises that make the piece more engaging. One thing I want to improve is to add more interactions with the user in my piece. For example, I had an idea where pressing a key on the keyboard would change the shapes, and using the arrow keys could adjust the size of the shapes. Along those lines, I’d like to eventually turn the art into a game where people can play with the shapes and make their own patterns that fit their personalities. It would be more fun to do this with the art piece.I’m happy with how the code turned out, though. It makes me feel like the art piece fits with who I am by being colorful and unique.

References

Kolomyjec, B. (n.d.). Dr. Bill, Generative Art OG. https://www.drbillkolomyjec.com/

Molnár, V. (1974). Désordres. Digital Art Museum. https://dam.org/museum/artists_ui/artists/molnar-vera/des-ordres/

 

The first time watching Casey Reas speech, I had so many thoughts. But one main point I kept thinking about is how the author focuses on artists using randomness to create art that represents history, biology, or society, but none of these works seem to connect with deeper human emotions. So then I kept thinking about this, and I asked myself. Does randomness restrict personal expression?. For example, the artist said, “We used a little bit of randomness and a lot of sort of decision-making based on how we wanted things to feel.” From my point of view, this quote shows how randomness keeps art from being predictable, leading to unexpected results that might move the piece away from personal emotional expression. So, this makes me question whether relying too much on randomness prevents personal expression since the process seems more about handling the chaos of the system than about conveying intentional emotions. The reason I focused on this part of the video is because I always thought of art as a form of personal expression that reflects the artist’s emotions, thoughts, and experiences. So, when too much randomness is involved, it feels like the artist loses control over that emotional connection, letting the system or algorithm take over, which could overshadow the personal meaning and emotional depth behind the work.

However, watching the clip for the second time, I decided to think with an open mind. For example, does the unpredictability in art lead to more innovative pieces that lead to deeper stories?. Casey Reas mentioned a few artists who used randomness to create works with meaningful messages. For example, he talks about a project visualizing cancer cell communication. “Everything is structured and ordered, and randomness is used slightly to determine the position and the scale of these individual clusters.” In the example, randomness plays a role in producing a lifelike representation. The artist used randomness to decide where the protein clusters would go and how big they would be, which reflects the natural unpredictability of real biological processes. As a viewer of this artwork, I felt as though it captured the chaotic nature of cellular interactions. So, in this case, I think that the randomness added depth in the art piece, which in a way made me feel connected with the processes of life in a way that a pure structured system or algorithm might not be able to. Overall, while at first randomness may seem to get in the way of personal expression, it nevertheless lets artists make works that reveal deeper truths about nature, society, and the human experience in ways that pure intention or structured systems might not be able to just by using unpredictability in some part of the art.

REFRENCES:

Reas, C. (2012). Form+Code in Design, Art, and Architecture.

Retrieved from the weekly PowerPoints: https://vimeo.com/45851523

CONCEPT:

Creating this self portrait was a tough journey. My concept was to create a cartoonish version of myself whilst including specific features like my curly hair, and other basic features (eye lashes, rosy cheeks, lashes, lips, eyebrows etc) that would make the portrait come together. Anyways I wanted to also keep it simple since by focusing on implementing the basic shapes so I could get familiar with it, since I’m still new to this. Moving on, for the background I wanted to stick to a specific color that would match the aesthetic of my portrait which is bluish-purple. However, as you could tell I couldn’t decide on just one color, so I went with a rainbow background that changes as you move the mouse around the screen which I’ll explain more about below.

HIGHLIGHT:

i have two highlights in my  code. The first one is the background. The background was a bit of an accident. I wanted to do strips of different shades of blue but i kept being indecisive about the color and changing it. So then I went to look for inspirations in peoples blog and that’s when i stumbled on Noura alhosanis idea. However i changed it up by using different shapes, colors and sizes so it could go with my theme. Also, I looked into the class resources and came across a YouTube video, that helped me understand variables and the use of it. Here’s a snippet of the code:

let x, y, r, g, b;

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

function draw() {
    print(mouseX + "," + mouseY)
  
  //background
  background(mouseX,mouseY,100, 7)
  r = random (0,255)
  g = 0
  b = random(0,400)
  x = random(0,700)
  y = random(0,400)
  noStroke();
  fill(r,g,b,100)
  square(x,y,50)

The second thing I’m proud of is my hair. The reason for this is because it was so time consuming to perfect the curly hair look which includes the placing for it, the layers of circles to create volume, and different type of shades to add depth into it. I’m proud of how it turned out because it brought my portrait together.

REFLECTION:

However, as much as I’m proud of the hair, it was still a real challenge. First It was tricky figuring out the placements, but as I kept messing up , I figured out the print mouseX and mouseY function which helped. But with that function it was still really time consuming. So, for next time i would like to find an easier method that won’t make me want to pull my hair out. Now, does this portrait look exactly like me? Well…not quite. It’s my first attempt, so I focused more on capturing basic features by using the basic shapes we used in class. But that’s something I want to work on next time which is making the portrait more realistic. Overall, I had fun with this project, and I’m already thinking about how I can improve.

Here is the overall code:

let x, y, r, g, b;

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

function draw() {
    print(mouseX + "," + mouseY)
//background
  background(mouseX,mouseY,100, 7)
  r = random (0,255)
  g = 0
  b = random(0,400)
  x = random(0,700)
  y = random(0,400)
  noStroke();
  fill(r,g,b,100)
  square(x,y,50)
  
  
  //FACE SHAPE
  strokeWeight(0)
  fill(255,204,153)
  ellipse(200,200,105,150)
  
  //LEFT EYE 
  strokeWeight(1)
  fill(255)
  ellipse(180,180,14,10)
  
  //LEFT EYES LID
  strokeWeight(1)
  fill('#B98B7B')
  arc(180,180,15,25,PI,0)
  
  //LEFT PUPIL
  strokeWeight(1)
  fill('rgb(98,26,26)')
  circle(180,180,8)
  
  //RIGHT EYE
  strokeWeight(1)
  fill(255)
  ellipse(220,180,14,10)
  
  //RIGHT EYES LID
  strokeWeight(1)
  fill('#B98B7B')
  arc(220,180,15,25,PI,0)
  
    //LEFT PUPIL
  strokeWeight(1)
  fill('rgb(98,26,26)')
  circle(220,180,8)
  
  //left eye brows
  stroke('rgb(48,5,5)')
  strokeWeight(4)
  line(173,160,188,160)
  
  
  // Right Eyebrow
  stroke('rgb(48,5,5)')
  strokeWeight(4)
  line(210,160,225,160)
  
  //left eye lashes
  strokeWeight(1)
  stroke('black')
  line(174,178,174,172)
  line(176,177,176,172)
  line(181,176,181,172)
  line(186,178,186,172)
  line(179,177,179,172)
  line(184,177,184,172)
  
  //right eye lashes
  strokeWeight(1)
  stroke('black')
  line(213,178,213,172)
  line(216,177,216,172)
  line(221,176,221,172)
  line(218,176,218,172)
  line(224,176,224,172)
  line(226,176,226,172)
  
  
  //down lip 
  strokeWeight(1)
  fill("rgb(213,67,67)")
  arc(200, 240, 30, 15, 0, PI);
  
  //upper lip
  fill("rgb(195,42,42)")
  arc(200, 240, 30, 15, PI, 0)
  
  //LIP LINE
  arc(200, 240, 27, 1, 0 ,PI)
  
 //NOSE
  noFill()
    arc(200,210,13,10,0,PI)
  line(200,188,194,210)
  
  //body
  fill('rgb(39,39,133)')
  rect(150, 295, 100, 200,40)
  
  //left arm
  noStroke()
  fill(255,204,153)
 rect(140, 320, 20, 120, 40)
  
  //right arm
  noStroke()
  fill(255,204,153)
  rect(240, 320, 20, 120, 40)
  
  //left sleeves
  noStroke()
  fill('rgb(39,39,133)')
 rect(140, 320, 20, 50, 5)
  
  //right sleeves
  noStroke()
  fill('rgb(39,39,133)')
 rect(240, 320, 20, 50, 5)
  
  //neck coller
  noFill()
  strokeWeight(10)
  stroke('rgb(31,31,91)')
  arc(200, 295, 20, 30, 0 ,PI)
  
  //left sleeve coller
  noFill()
  strokeWeight(7)
  stroke('rgb(31,31,91)')
  line(140,370,160,370)
  
  //right sleeve coller
  noFill()
  strokeWeight(7)
  stroke('rgb(31,31,91)')
  line(240,370,258,370)
  
   //neck
  noStroke()
  fill(255,204,153)
  rect(190, 260, 20, 40,10)
  
  //V neck
  strokeWeight(7)
  arc(200, 270, 27, 78, 0 ,PI)
  
  //chin
  noFill()
  strokeWeight(1)
  stroke('black')
  arc(199,265,16,10,0,PI)
  
   //jaw
  strokeWeight(5)
  stroke('#461C0D')
  line(158,247,187,276)
  line(241,247,212,276)
  strokeWeight(3)
  line(188,277,212,277)
  
  //cheeks
  noStroke()
  fill(225,0,0,50)
  circle(169,219,15)
  circle(231,219,15)
  
  // HAIR (Left side)
  strokeWeight(4)
  stroke('rgb(54,7,7)')
  fill('rgb(54,7,7)')
   circle(140, 230, 20)
  circle(135, 225, 20)
  circle(130, 220, 20)
  circle(140, 225, 20)
  circle(140, 240, 20)
  circle(151, 243, 12)
  circle(153, 260, 20)
  circle(140, 260, 20)
  stroke('rgb(71,18,18)')
  fill('rgb(71,18,18)')
  circle(143, 250, 20)
  circle(134, 173, 20)
  circle(135, 135, 20)
  circle(130,130,20)
  circle(136,140,20)
  circle(139,143,20)
  circle(146,149,20)
  circle(146,139,20)
  circle(131,157,20)
  circle(143,162,20)
  circle(137,185,20)
  circle(136,201,20)
  circle(123,173,20)
  stroke('rgb(54,7,7)')
  fill('rgb(54,7,7)')
  circle(126,187,20)
  circle(119,203,20)
  circle(169,126,20)
  circle(161,135,20)
  circle(182,135,20)
  circle(159,149,20)
  circle(118,149,20)
  circle(150,174,20)
  circle(139,211,20)
  circle(142,193,20)
  circle(147,116,20)
  circle(164,273,20)
  circle(178,285,20)
  circle(143,300,20)
  circle(124,269,20)
  circle(137,274,20)
  circle(132,286,20)
  circle(221,289,20)
  circle(233,297,20)
  circle(248,298,20)
  circle(263,292,20)
  circle(268,275,20)
  circle(165,269,20)
  circle(174,301,20)
 stroke('rgb(71,18,18)')
  fill('rgb(71,18,18)')
  circle(153,127,20)
  circle(165,108,20)
  circle(187,120,20)
  circle(182,103,20)
  circle(177,114,20)
  circle(124,248,20)
  circle(121,228,20)
  circle(129,240,20)
  circle(146,279,20)
  circle(160,291,20)
  circle(241,283,20)
  circle(257,278,20)
  circle(233,273,20)
  circle(225,284,20)
  circle(175,276,15)
  circle(238,267,20)
  circle(243,275,25)
  circle(220,278,10)
  circle(158,305,15)

  
  
  
  //HAIR (RIGHT SIDE)
  stroke('rgb(73,24,24)')
  fill('rgb(73,24,24)')
  circle(260, 230, 20)
  circle(265, 225, 20)
  circle(270, 220, 20)
  circle(260, 225, 20) 
  circle(260, 240, 20)
  circle(250, 243, 12)
  circle(248, 260, 20)
  circle(260, 260, 20)
  circle(257, 250, 20)
  circle(272, 173, 20)
   stroke('rgb(67,9,9)')
  fill('rgb(67,9,9)')
  circle(270, 135, 20)
  circle(275, 150, 20)
  circle(280, 165, 20)
  circle(275, 205, 20)
  circle(260, 210, 20)
  circle(270, 210, 20)
  stroke('rgb(54,7,7)')
  fill('rgb(54,7,7)')
  circle(270, 175, 20)
  circle(255, 190, 20)
  circle(265, 205, 20)
  circle(252,263,20)
  circle(254,162,20)
  circle(254,173,20)
  circle(262,149,20)
  circle(246,134,20)
  circle(277,188,20)
  circle(269,259,20)
  circle(243,149,20)
  circle(268,162,20)
  circle(273,233,20)
  circle(275,246,20)
  circle(258,127,20)
  circle(201,127,20)
  circle(219,131,20)
  circle(230,138,20)
  circle(197,106,20)
  circle(208,110,20)
  circle(231,117,20)
  circle(217,119,20)
  circle(244,117,20)
  stroke('rgb(73,24,24)')
  fill('rgb(73,24,24)')
  circle(220,102,20)
  circle(236,102,20)
  circle(236,129,20)
  
}