Author: Layla Ja'run

Concept

I got inspired by another interactive work that was designed as a cozy coffee shop, where the user could walk in and interact with a few things. I thought, why not do something similar using my own artwork? This is how I came up with the idea of creating an interactive art gallery. There would be multiple drawings and paintings of mine, each with its own interaction and movement controlled by the mouse. It’s like stepping into the story of each painting and showing how a simple interaction can change its mood. I also think this concept could draw more people toward art, especially on a larger scale, because it offers a more engaging experience than simply looking at static artwork.

A part of the project I’m really proud of is the flower and teddy bear paintings because I really like how the animations turned out, and they were also the most fun to work on! I wanted to add animations to the other paintings as well, but I realized that some ideas would be too time-consuming, so I settled for simpler methods. There were also some ideas I had to scrap because they didn’t work as I expected, even after multiple adjustments. I just couldn’t achieve the natural and realistic feeling I was aiming for.

To make the gallery feel less empty, I added paintings as decorations on the side walls (credits to my sister for one of the paintings). However, I couldn’t figure out how to tilt them to match the perspective of the walls, so I decided to edit them using another tool and turn the entire gallery into an image. I also chose to make the paintings look pixelated from a distance as an artistic choice. Since the background still felt a bit empty, I added a decorative pattern, using YouTube videos as references to help me create it.

To make the code more efficient, I created a class for the four paintings and gave each one its own coordinates and dimensions. This made it easier to detect where the mouse was clicked and change the game state to display the corresponding painting. Therefore, I didn’t have to repeat the if statement in mousePressed function.

function mousePressed() {
  // CHANGE STATE BASED ON WHERE THE MOUSE IS CLICKED //
  if (gameState == 'gallery') {
    for (let p of paintings) {
      if (mouseX > p.x && mouseX < p.x + p.w &&
          mouseY > p.y && mouseY < p.y + p.h) {
        gameState = p.name;
        break;
      }
    }

 

For the interactions, I settled on using the mouse. Some paintings respond to the mouse’s Y-axis, while others require the user to click on them. I chose clicking for certain interactions because I feel like people instinctively click on things to see if they do anything. I wanted the interactions to feel simple, so users could discover them without needing complicated instructions.

References and AI Usage

I mainly used references provided on the course website and the p5.js reference page to understand how to implement different features. I also used AI for some of the trickier parts of the project that I couldn’t find a solution to on my own, such as creating the flickering flame effect for the candle painting. AI helped me understand how to approach the perlin noise effect and implement it in my code, it suggested methods to use and explained each of them. It also helped me in the color transition in the sunset painting. Other than that, I relied on the knowledge I gained from previous assignments.

let darkness = map(sunY, 150, 450, 0, 80);
  let transition = map(sunY, 250, 450, 0, 1);
  
 // TRANSITION THE COLOR FROM ORANGE TO PURPLE DEPENDING ON THE SUN Y AXIS //
  let skyColor = lerpColor(orange, purple, transition);
  skyColor.setAlpha(darkness);
  fill(skyColor);
  rect(250, 25, 500, 650);

Reflection

I’m really proud of this project, especially because I got to showcase my own art. I think the idea has a lot of potential and could be executed in various ways. Perhaps I dreamed bigger than my current skills allowed, but I see that as an opportunity to learn. If I had more time, I would have put more effort into developing the interactions and refining the artwork. In the future, as I gain more coding experience, I’d like to explore this concept on a larger scale and make the gallery more detailed.

 

Concept

For the concept, I was inspired by the coffee shop example and got the idea to make an interactive art gallery using my own drawings to make it feel more personalized. I also want it to be a chill experience where you click on one of the paintings and interact with it as if it was alive. It’s like having people step into the story of each painting, and showing how a simple interaction can change the mood.

This is the concept that I am going for. Four main interactive pieces, and other drawings for decoration. I chose four to focus on the quality of the interaction.

Progress

Before beginning to work on the code, I first chose four different paintings that I want to make interactive and decided on how they will be interacted with. One of the things I felt was complex is putting multiple and different interaction styles in the same artwork, so I started by working on each painting separately, so it will be easier to add them all together at the end. Having each interaction as separate code will keep everything more organized and easier to modify later.

To maintain the painting feeling and style, I decided to do animations for some parts of the drawings when necessary. I did a few tests to make sure the placements were correct and the animations were running smoothly.

This is the first lineart of the animation frames.

Human vision is one of the most mysterious things about the human brain. We don’t completely understand how the brain takes information from light reflecting off objects and turns it into something we can understand. Humans can look at what is in front of them and distinguish between different things in split seconds. However, computer vision is different because it works with digital images as pixels and uses specific rules and algorithms to understand what it is seeing. Because of this, computer vision is more restricted in what it can distinguish and is more dependent on the conditions of the environment.

As mentioned in the article, there are multiple techniques that can be used to track things, and I think the most important thing to take into consideration is the contrast of colors, light, etc. If there is a noticeable difference in these values, then the computer will be able to tell things apart more easily. The second most important thing is to tailor the rules and “physics” to the purpose of the program. For example, the frame differencing technique detects movement by comparing each frame to the previous one and looking for differences in the pixels, so to detect these changes a high contrast would be better.

I think computer vision has a huge capacity as long as you have lots of cameras and processing power, which is good when an interactive work requires lots of detail. For example, in virtual reality, to be able to detect your body movements, you may need multiple angles. Also having a big capacity can make the outcome more accurate and sensitive to small movements. But it also has its cons, because to some people it may be a breach of privacy. Doesn’t it make you uncomfortable to know that a computer has all the data of your body movements? That’s one of the reasons I liked the use of silhouettes in some of the interactive art examples. I think it’s a better way to give the same interactive experience but in a more comfortable way.

Concept

As a big movie lover, I decided to visualize the popularity of movies released this year by creating a movie theater. I used worldwide box-office gross as a measure of popularity, with each audience member representing a fixed amount of revenue. Therefore, the higher the movie’s gross, the larger the audience in the theater.

Progress

I started by splitting the data into the movie name and its gross revenue, then adding them to the movies array I created. After that, I began working on the visuals, such as the seats and projector. I also added yellow light coming from the projector to make it more cinematic. I then created the circles that represent the audience and had them spawn on random seats. I did not want the audience to look too messy, so I used specific Y-coordinates that are chosen randomly, which keeps the circles organized while still making their positions feel random.

To make it easier to distinguish the large number of audience members, I also changed the color range of the circles instead of having them all be the same color. Finally, I calculated the number of circles based on each movie’s gross revenue by dividing it by 10 million. I felt that this was a reasonable scale because it allowed the differences in revenue to be visible without creating an overwhelming number of circles.

My Code Highlight

What I am most proud of is the interactive part of the project. It was a bit tricky, especially figuring out the calculations and making the number of audience circles change depending on which movie is selected. I used conditions based on where the mouse was clicked to determine which movie was selected. To make the interaction more obvious, I also changed the button color when it was clicked so it is clear which movie is currently selected.

One cool thing I learned was how to add my own font. I had to add the font link to the index.html file, and then I was able to use the font in my p5.js project.

//////CHANGE NUMBER OF AUDIENCE WHEN CLICKING ON A MOVIE//////
function mouseClicked() {
  for (let i = 0; i < movies.length; i++) {
    let x;
    let y;

    if (i < 3) {
      x = 45 + i * 185;
      y = 40;
    } else {
      x = 140 + (i - 3) * 185;
      y = 140;
    }
    if (mouseX > x && mouseX < x + 140 && mouseY > y && mouseY < y + 70) {
      selectedMovie = i;
/////RESET CIRCLES AND DRAW NEW ONES WHEN CLICKING ON A MOVIE//////
audience = [];
drawAudience();
    }
  }
}

Reflection

I’m really proud of this project, and I think I utilized the things I learned in a good way. If I were to improve it in the future, I would spend more time making the visuals more detailed, such as adding more realistic theater elements and improving the layout and typography. I would also like to give the user more options, such as adding more movies to choose from or allowing them to interact with the audience in different ways.

 

While reading The Design of Everyday Things, I found the author’s principles of good design agreeable, but I felt that he was a bit biased. He mainly put the blame on the machine and the design, including the engineers and designers, but said little about the user. I think everyone contributes to a product’s efficiency because there are many people who can be oblivious to simple instructions and fail to utilize the product properly. However, some of his examples were exaggerated. For instance, he made the door example seem like a bigger problem than it actually is. On top of that, he kept repeating many of the same points, which felt distracting to me.

One of the design failures that drives me crazy is oversimplification. The author touched on it, but I want to dive deeper into it. I think minimalism is one of the reasons for this. It has become a new aesthetic to avoid having many labels and other visual elements, which can lead to little to no signifiers. You can barely find symbols on some devices, let alone clear instructions. Because of this, I think simple designs do not necessarily equal effective designs. We need to move away from prioritizing the minimalist aesthetic and instead include understandable signifiers. It may not result in the simplest-looking design, but it would make the design more understandable.

I think the principles mentioned in the reading are incorporated directly into interactive media because having good design means creating a better interactive experience, as long as those principles are applied correctly. Feedback, for example, directly relates to interactivity because it makes the system seem like it is responding to the user’s input. It can be applied through audio, or through a visual change, which enhances the overall experience and satisfaction. But to me, discoverability is the most important one because if this principle is not applied correctly, then everything that comes after loses importance. If you never understand how the device is supposed to work, then why would you give attention to the other principles? This is especially important in interactive design, where mutual understanding is an important factor to consider.

After reading the chapter, I kind of agree with the author’s definition of interactivity, and I liked how he used conversation as an example. I also think the author put into consideration the different perspectives on what interactivity means. I understand why some definitions may seem subjective because people find it easier to relate one meaning to another word, but by doing that, the meaning can become more vague and less accurate. This can cause people to misunderstand or misuse the word in different contexts.

One of the things that grabbed my attention was the difference between reaction and interaction. A reaction is more of one action responding to another action, while there is no real ongoing exchange between the two. For instance, the branch-breaking example in the chapter, something happens, you do another action in response, and then it ends. Interactivity, on the other hand, is a give-and-take relationship where influence is an important part of the process. The user influences the computer, but the computer also influences what the user does next.

I think to build a successful interactive system, you need to have clear guidelines so both the user and the computer can understand one another. What are they communicating? How is the computer listening to the user, and how is it responding? With all of that comes the idea of influence: how is the user influencing the computer’s behavior, and how does the computer influence the user in return? You cannot just add a random interaction and call it a day. There needs to be a purpose behind it. Are you trying to get across a message? Is the program dependent on the user’s choices? For my p5 sketches, I think I could make the interaction more meaningful by letting the user’s actions actually influence how the artwork develops, and also give the user more control over what they can influence.

Concept

The main inspiration for this project came from a certain artwork in Casey Reas’ Eyeo talk on chance operations. I really liked the idea of shapes emerging from within other shapes, so I wanted to explore that idea through something more natural. What better example of something emerging than a flower blooming? I sketched a couple of different flower shapes first so I could have them as references while coding.

Progress

I started by creating a class for the flowers and defining their properties. Then I drew the flower and its petals, and used a for loop to add multiple flowers to an array. After that, I experimented with adding inner petals to each flower, which made the blooming process more visible.

But one problem I ran into was figuring out how to make the inner petals appear after the outer petals instead of growing at the same time. I wanted the flowers to feel like they were actually blooming. I solved this by making the inner petals start growing only after the outer flower reached a certain size. This created a delay between the two layers and made the blooming process feel more realistic. I then added different colors to the outer and inner petals and made sure they were not the same color.

 

While looking at the result, I noticed that all the flowers had the exact same angle of rotation, which made them feel too repetitive. I changed the rotation to be random for each flower, giving them more variation and a more natural feeling.

Finally, I wanted to add an interactive element. I imagined the mouse cursor as a kind of magical sensor: when it gets close to a flower, it makes the flower bloom faster. This makes the viewer feel like they are affecting the growth of the flowers just by moving through the artwork.

//INCREASE GROWTH SPEED WHEN MOUSE IS NEAR FOR OUTER PETALS//
   let distance = dist(mouseX, mouseY, this.posX, this.posY);
   if (distance < 80) {
     this.size += 0.7;
   } else {
     this.size += random(0.05, 0.5);
   }
   //DELAY THE INNER PETAL SIZE INCREASE//
   //INCREASE GROWTH SPEED WHEN MOUSE IS NEAR FOR INNER PETALS//
   if (this.size > 12) {
     if (distance < 80) {
       this.innerSize += 0.6;
     } else {
       this.innerSize += random(0.2, 0.4);
     }
   }

Reflection

I am really proud of this project because I explored many different ideas and developed a deeper understanding of the concepts I was working with. If I were to alter anything, I would experiment with adding more variations to the flower shapes. However, I chose not to include this in the final piece because I felt that too much variation could make the artwork feel messy and take away from the blooming effect.

Concept

After browsing tons of references and inspiration, I decided to make something with dimensions that feels deep and interesting to look at. So I decided to work with triangles because I think they create cool shapes when overlapped. I wanted to keep it simple, but with a deeper feeling.

Progress

I started by creating triangles with random coordinates, but to give them a more unified and organized look, I kept one end of the triangles unified at a certain point. I then gave them random shades of grey with transparency to create a deeper feeling. After watching YouTube videos, I learned the crosshatching technique, so I decided to add it to give the piece more texture. Then, I decided to add color to experiment, so I created a colour palette and added it. The references I used were mostly YouTube videos and the examples attached to the course website.

My Code Highlight

Although it’s not complex, I really like the crosshatching part of my code. I think it can be used in a lot of artworks to give them nice texture and feeling, especially because of how easy it is to code.

for (i = 0; i < 1000; i++) {
      stroke(0, 20);
      rect(random(width), random(height), 50);
      circle(random(width), random(height), random(20, 80));
    }

Reflection

After this project, I think I’m better at handling the basics, so I want to experiment more. I am hoping to incorporate more animations and try out more complex shapes, as well as, use symmetry and grids. But most of all, I want to create more 3D-like art pieces and experiment with making my work feel more dimensional.

After watching the video, I realized that I tend to focus on precise lines and shapes in my drawings. You could say I’m a perfectionist. When you’re holding a brush, you’re the one controlling its movement. Every stroke is intentional, and every move is calculated. I think that’s how I’ve always understood order in art: everything is controlled and deliberately placed.

But what fascinated me was his take on order and chaos, and how they coexist in every art piece. It actually changed my perspective on what order is in art. It’s not necessarily about perfection, but about control. You can “guide” the lines in a certain way to shape a meaning without having to control every single detail. For example, when mixing a colour palette using acrylic, you might not always get the exact colour you wished to achieve, and that’s the beauty of it.

I agree with his view on control, and how you decide how far you push it and how far you constrain it. I think it all comes down to knowing and choosing which elements to alter and which to keep unpredictable. And just like he also mentioned, you might get a little inspiration from things you never would have thought of.

Concept

For this assignment, I decided to approach the project from a more artistic perspective. My vision was to create an abstract artwork using a variety of shapes and colors. Therefore, I focused more on the visual composition and construction of the shapes rather than on interactivity.

Progress

Before beginning to work on the code, I sketched what I had in mind in a sketchbook. This made it easier to plan and determine where each part would be placed. I then went on YouTube to look for tutorials on how to code curves, which are a major part of my assignment. After finishing the line art, I began working on the colors and adding different shapes. I also decided to create some of my own shapes, such as the flower, which was fun to experiment and try out. Lastly, I wanted to add something more to the background, so I looked up different pattern examples for inspiration.

My code highlight

A part I am proud of is the pattern I created for the background. It was something new and interesting for me to learn, and I enjoyed seeing how a simple pattern could make the overall artwork feel more complete. I wanted to experiment with different types of patterns and explore how they could change the mood of the artwork, but unfortunately, I did not have enough time to try them out.

background(80,150,70, 150)
  fill(80,150,0);
  strokeWeight(3);
  rectMode(CENTER);
  let space = 50;
  for (x=0;x<width+50;x+=space){
    for (y=0;y<height+50;y+=space){
       line(x,y,x+space,y);
       line(x,y,x,y+space);
      circle(x,y,5)
      stroke(200,100,150,150)
      circle(x,y,15)
    }
  }

Reflection

There were many things I was hoping to add to my project. One of them was an interactive element, which unfortunately was not working for some reason. I also wanted to add more details and elements to make the artwork feel even more abstract and visually interesting. For my future projects, I hope to learn more about animation and explore different ways to make my projects more interactive. I also want to learn more tips and techniques that can help me code more efficiently and speed up my workflow.