Author: Wesley Sarbah

In the text I found a new meaning to the term interactive. I understood what will make a work interactive and how I can possibly apply it to my work. The author focused a lot on using feedback from the user to change the work. In other words, the work should be able to react to the user. When it comes to computers, how can we tell if computer is using our feedback to do some work or just following a set of instructions.

Concept

This work creates art from outward spirals employing the concept of classes and arrays. The spirals are created at the position of the mouse when it is clicked. The spiral get assigned a random color and it has a translucent effect to help blend colors and create a more visually pleasing effect. The blur function was also used to make the work more fluid.

Code I’m proud of

function mouseClicked() {
  let newBall = new Ball(mouseX, mouseY, random(20, 100), random(-5,5), random(-10,10));
  balls.push(newBall);
  
  // Prevents program from slowing down
  if (balls.length > 25) {
    balls.shift();
  }
}

This is the code that creates the spirals. It makes a new spiral when the mouse is clicked and then adds it to an array. I noticed that the program was glitching as the number of spirals increased. I then added a code to remove the oldest spiral created when the number of spirals reached 25. This kept the code running smoothly.

Code

Click to start
Press the space bar to clear the screen

Reflection

This exercise helped me put to practice my knowledge in classes and arrays while also using previous knowledge acquired throughout the course. It was really fun creating this work. This program can be improved by adding more features to the spirals through the class to create more visual effects.

The video was based on the use of randomness or disorder to create art. The classical way is that art should be ordered, create patterns or should be in a certain way to represent or express something. The video taught us that controlled randomness can also be art and illustrated this with intricate examples. The randomness could be in the form of using a set of numbers, a dice roll or even biological systems. The video also drew my attention to the evolution of “random art” with the improvements in computing capabilities. As computers got better, more control and dimensions could be added to this form of art.

This video raised an interesting question. Is there true randomness? In the artworks, if the software was allowed to run long enough, there was evident convergence and patterns forming. Order could be created from the chaos of randomness and this somewhat contradicts with the message or creating disordered art as a form of expression.  Another concern is the determining the line between art created by an artist and a computer. All the examples required an artist to write some code (or give instructions) and rely on the computer to generate the art. With the onset of AI, where will this line be drawn and at what point does the artist become alien to their own work and relinquish the title of artist to the computer.

 

Concept

This work was inspired by painting of famous Dutch painter Vincent van Hogh’s painting, The Starry Night. The Starry Night painting is the background image of this program. Using curves and colors, an illusion of the blurriness is created. For and while loops where used to create the curves. The mouse can be pressed to switch between two modes: Random mode and Controlled mode. In the natural state, the work in the a random state where translucent curves are randomly placed on the painting to create the illusion effect. When the mouse is pressed, the image changes into controlled state where the user can control the parts of the painting to blur by moving the mouse.

 

Code I’m proud of

This is the function used to create the controlled and random translucent curves. In the controlled curves, the mouse input is used to control the movement of the curves and in the random curves, random numbers are generated to shape the curve.

// Controlled curves in the y axis
function create_curves_y(startx) {
  let a = mouseX;
  let b = mouseY;
  noFill()
  strokeWeight(20)
  stroke(c)
  bezier(startx, 0, a, b, (a + startx), (b + startx), startx, 400);
}

// Curves in the x axis
function create_curves_x(startx) {
  let a = mouseX;
  let b = mouseY;
  noFill()
  strokeWeight(20)
  stroke(c)
  bezier(0, startx, a, b, (a + startx), (b + startx), 600, startx);
}

// Random curves in the y axis
function r_create_curves_y(startx) {
  let a = random(600);
  let b = random(400);
  noFill()
  strokeWeight(20)
  stroke(c)
  bezier(startx, 0, a, b, (a + startx), (b + startx), startx, 400);
}

// Random curves in the x axis
function r_create_curves_x(startx) {
  let a = random(600);
  let b = random(400);
  noFill()
  strokeWeight(20)
  stroke(c)
  bezier(0, startx, a, b, (a + startx), (b + startx), 600, startx);
}

 

Code

Here is the work of art I created:

Reflection

The code can be improved by mapping colors to the curves to make the translucent effect stand out more. More shapes and curves can be added to enhance the effect. This can method can also be transferred to other images.

Concept

In this assignment, I created a cartoon style portrait of myself. I practiced how to create basic shapes such as ellipses and circles, points, curves and lines. I also practiced using colors and changing the thickness of lines and shapes.

I made the portrait interactive by changing the portrait into night mode when the mouse is clicked, changing the background colors into darker colors and adding stars to represent night time.

Code I’m proud of

The part of the code I am most proud is how I change settings from day time to night time by using if condition. When the mouse is pressed, the background colors of the portrait is changed and stars are added to create the effect of change of time

// Declaration of colors
  let a, b, c;

// Change colors when mouse is pressed
    if (mouseIsPressed) {
      a = color(200, 200, 200);
      b = color(0, 100, 0);
      c = color(0, 0, 139);
  } else {
    a = color(243, 243, 25);
    b = color(0, 128, 0);   
    c = color(173, 216, 230);
  }

  // Use background color
  background(c);
  
  // Stars
  if (mouseIsPressed) {
    textSize(90);
    text("✨", 200, 90)
  }

Here is my portrait

Reflection

This was a very fun exercise where I got to explore using p5 to create images. While this is my first time doing something like this, I really enjoyed and opened to exploring it more. I can improve this project by making it more interactive, making the more shapes and customizations and adding more elements to the portraits