Author: Daria Lobanova

Concept

Once again, I was searching for inspiration in tech-aesthetic. I came across this photo on Pinterest, when the idea for my work sparked in my head:

I thought that it would be nice to create something that looks like keyboard but is less predictable (and less functional, apparently). Therefore, I created a small piece where keyboard tiles of random color appear all over the screen and stay for random time between 1 and 4 seconds, and, if being clicked, display a random emoji face from the list I provided.

 

 

Highlight code

Due to the lack of time, my code is pretty simple this time, but the part of implementing color scheme into the piece is something I struggled with for some time.

class Tile {
  constructor(x, y, size) {
    this.keyHue = random(0, 360);
    ...
  draw_tile() {
      ...
  
      // Lower tile
      fill(this.keyHue, 90, 80); 
      square(this.x, this.y, this.keySize, this.cornerRadius);

      // Upper tile
      let innerSize = this.keySize * 0.8;
      let offset = (this.keySize - innerSize) / 2;
      
      fill(this.keyHue, 60, 100);
      square(this.x + offset, this.y + offset - 3, innerSize, 8);

I switched to colorMode(HSB) which decodes as Hue, Saturation, Brightness. Basically, the computer randomly chooses only hue, and saturation and brightness settings persist in all tiles. This way, the lightness and the intensity of the color pigment stays the same, but the actual color changes depending on the value the computer chose. It made all the tiles look the same stylistically while being different color.

Overall, for this piece I created one class for each Tile, which had methods for activating it based on timer and then resetting it; checking if the mouse is in borders when it’s clicked, so it can display a random title; drawing the tile itself. I used for loops, and some built-in p5.js functions like mouseClicked() in this sketch. I also preloaded a pixel-like font from Google Fonts for text to match with the overall aesthetic.

Reflection

I find the way the sketch looks to be very colorful and have some tetris vibe, which I really like. I didn’t really have much time for this piece, otherwise I would like to come up with a unified color scheme to create something less colorful but more of one style.

Also, after the reading for today, I thought that it might be great to implement various ways of interaction. For instance, having a text line which will display the user’s entry and give some response to it, like emoji-reactions or some simple replies like “Yay!” and “Oh no”. I think this way the piece would turn out to be much more fun and way more interactive.

What do you consider to be the characteristics of a strongly interactive system?

After reading, I feel like the main and most important part of a strongly interactive system is thinking. As explained, there’re three steps of interaction, and while many objects can listen (register the action, like fridge opening) and speak (performing an action, like book telling a story), very few can actually think – analyze the action and then perform in response in accordance with it. Like in conversation, answer to one’s words can’t always be the same whatever someone says, the answer of a strongly interactive system should differ depending on the interaction made with it.

I stress the value of thinking in an interactive system because, as it was said in the writing, participation and reaction are not considered to be the same as interaction. Yes, the lamp turns on when you press the button – it reacts to the action, and yes, you participate in a dance with some music, but you don’t interact with them because 1) the interaction with them doesn’t consider any thinking, 2) no matter how you press the button or dance, music and lamp always will be the same and have the same response to your actions.

 

What ideas do you have for improving the degree of user interaction in your p5 sketches?

I understood that right now my sketches are not really interactive since they also don’t really consider thinking of the user. Clicks and mouse movement are probably not the best interactions since it’s very low-level interaction with really poor user action amalysis. I understood that in order to come up with something more interactive I have to consider what the user might think about doing with my sketches. For instance, if they see some object on the screen, what possibly they might do with it? If I come up with various answers, I would be able to make different responses of my system in accordance with user’s actions. This way, the system will adapt “thinking” that is so important when thinking about interactivity.

Casey Reas says that instead of directly painting a picture or sculpting an object, the artist becomes a builder of systems. The final art is just the result of the system the artist built. I strongly agree with this claim. I believe that having direct control over every single detail kills the magic of digital art. Straightforward instructions that create totally predictable, controlled pieces feel useless to me.

However, the same applies to pure randomness. While we might find some meaning in things that are fully random, it’s hard to feel an emotional connection to something that has zero structure. Casey Reas mentions that he finds “white noise” or total randomness boring because it has no intent, and I can really relate to that.

I believe the perfect balance happens when the artist creates a structure that allows for randomness, resulting in art that is controlled yet creative. The artist writes the instructions, but the outcome still has some natural variation. Reas talks about algorithms like Perlin noise as a way to do this: it has randomness, but it creates smooth, “alive” motion within a set of rules, rather than just chaotic jittering.

For me, the beauty of computer art is in the power of this controlled randomness. Sometimes the best part is knowing exactly what algorithms you are using, but being surprised by the result every time you run it. Computers are much better than humans at creating something that is random but still follows a system. This reminds me of Reas’ “Process” series shown in the talk, where simple elements react to each other to create complex, organic forms.

I really want to use this kind of randomness in my work. For example, in my assignment for this week, the code is the same every time I run it, but the shape of the figures, the connections between them, and their speed are different. I can never get the exact same picture twice. I find it extremely cool to create something that looks super “mathematical” but, at the same time, never turns out to be the same thing twice.

Concept

Generative art seems very modern and new to me: creating art using your computer and element of randomness sounds like something that has no association with older times.

I wanted to create a minimalistic piece that will carry the atmosphere of the age when a laptop at home was a rare find, and when old Windows 7 and DVD players were considered super cool.

I found my inspiration in Klim Type Foundry art-piece and wanted to recreate something similiar.

I decided to make my art minimalistic and more “mathematical”: I have only two colors, blue and white, strokes and lines, shapes, and a lot of numbers which display the coordinates of the figures.

The computer randomly chooses the type and the coordinates of the figure and draws it, then randomly connecting it with other figures by making it either the endpoint of the bezier curve, or the endpoint of its control line. The figures and lines appear slowly, and move around, displaying their coordinates on top.

Code

Implementing the animation of line drawing was the most difficult part for me, so I want to highlight it:

//draw connections between objects
for (let c of connections) {
  // animate t from 0 to 1 
  // existing lines stay at 1 (fully drawn)
  c.t = min(c.t + 0.02, 1); 

  noFill();
  stroke(255);
  strokeWeight(1);

  beginShape();
  // draw the curve based on the current value of t
  //the loop will increment t, therefore moving (x,y) to the second enpoint, allowing a smooth animation
  for (let t = 0; t <= c.t; t += 0.02) {
    let x = bezierPoint(c.a0.x, c.p0.x, c.p1.x, c.a1.x, t); 
    let y = bezierPoint(c.a0.y, c.p0.y, c.p1.y, c.a1.y, t); //save coordinates of a segment of the curve being drawn
    vertex(x, y); //add x,y up to which the curve will be drawn
  }
  endShape();
  
  //do the same for the control lines: it also will be drawn slowly based on t
  let h1x = lerp(c.a0.x, c.p0.x, c.t);
  let h1y = lerp(c.a0.y, c.p0.y, c.t);
  line(c.a0.x, c.a0.y, h1x, h1y);

  let h2x = lerp(c.a1.x, c.p1.x, c.t);
  let h2y = lerp(c.a1.y, c.p1.y, c.t);
  line(c.a1.x, c.a1.y, h2x, h2y);
}

To animate the connections smoothly, I used a normalized time variable, t. Here, t = 0 is the start of the path, and t = 1 is the end. Every frame, value of t of every connection is being incremented by 0.02, revealing 2% more of the path.

For the straight lines I used method lerp(), and for the curves I used bezierPoints(). In the loop coordinates of the current endpoint are slowly increasing from 0 to 1, in the end connecting the first point with the last one, as the coordinates of incremented moving point become the same as the endpoint’s. This creates the illusion of the curve being drawn over time.

Beside that, the structure of the code is pretty simple. I created a class for the figures with methods to create, draw, and move the figures around. After that I connected the figures with lines, and stored all the objects and connections between them in arrays. There’s a lot of randomness in the code: the choice of the velocity of the figure, its shape and which figures it will be connected with lies on the computer, not the user.

Reflection

I find this minimalistic and simple art piece very hypnotizing and interesting. Even though it’s super simple, I can feel the emotions and atmosphere I wanted it to have.

However, I think that improving connection between figures and making it more smooth and less crunchy would be great. Also, finding an algorithm that would allow these figures to move around without overlapping would make the art less messy.

For further improvement, I think that adding sound effects and gravitating the points and lines in a certain pattern that creates some clear shapes of animals/objects would be extremely cool.

Concept

When I think about portraits, I believe personal characteristics should always be included to reveal who the person really is. When it comes to me, my favorite hobby— sports —immediately came to mind. Now I play for the NYUAD Volleyball team and I really love being there and doing my best at practice.

When I study, I usually feel sleepy and I don’t enjoy doing boring homework, but I always have energy for volleyball. So, I decided to make an interactive self-portrait that reflects this contrast. In the sketch, an item (either a book or a ball) is tied to the mouse’s position. When the user double-clicks, my facial expression, clothes, the item itself, and the background all change.

Highlight Code

One part of the code that I particulary liked is integration of double-click:

function doubleClicked() {
  if (thing.chosen_type == 'book' && bg.type == 'library' && character.type == 'sad') {

    thing.chosen_type  = 'ball';
    bg.type = 'volleyball';
    character.type = 'happy';
  } else {
    thing.chosen_type = 'book';
    bg.type = 'library';
    character.type = 'sad';
  }
}

Since I have some prior coding experience, I used OOP principles to make the object move with the mouse and change states with a double-click. Even though the code itself is quite simple and straightforward, these interactive elements make a big difference to the overall picture. In this code snippet, double-click changes the attributes of the background, character, and item. It changes their type to another one, so in the next frame they will change and the code will display the picture with changed characteristics.

While creating the self-portrait, I relied on the p5.js reference page and Googled RGB codes for specific colors. I also had to look up the syntax for class and function creation, since I know how to do this in Python, but not JavaScript.

I used simple shapes in my portrait, but the most difficult ones were the arcs. It was hard to find the exact angles to make the arcs look the way I wanted while maintaining the right shape. I had to experiment with different angle values and ellipse diameters to create bangs that looked correct. I also spent time figuring out the angles for the main hair so it would look like a short haircut and not just a squished circle.

Reflection

Reflecting on my work, I definitely want to improve the overall design. I want to add more specific details so the portrait becomes less simplistic. In terms of interaction, I think adding more complex animations, such as the eyes tracking the movement of the ball or book as they moce with a mouse, would be great. Finally, making it a 3D version where the character is a detailed 3D model with depth, shades and textures, and the object actually rotates in 3D space would be awesome.