Author: Wesley Sarbah

Concept

This work  acts an oracle by generating wise sayings. Predefined times, elements, actions and destinations are stored in the program and they are randomly paired up to create the oracle. This work employs the concept of lists to store the times, elements, actions and destinations. Text in p5js concept was explored in this work by employing textAlign, textSize and textFont to create the desired output for the work.

A background animation was created for the program by creating translucent circle that randomly move around on the screening. This was done using class and arrays. To keep the design visually appealing, when a ball goes off the screen, it appears on the opposite side of the screen and and continues moving the same trajectory.

An oracles fades and a new one appears and this is done by changing the transparency of the text each frame. When the text becomes fully transparent, it is deleted and a new one is formed and displayed. When you click on the screen, the program can also change between light and dark mode using the callback function mouseClicked and an if statement

Code I’m proud of

for (let i=0; i<currentLines.length; i++) {
    text(currentLines[i], width/2, startY + (i*spacing));
  }
  
  // Fading 
  textAlpha += fadeSpeed;
  
  if (textAlpha < 0) {
    currentLines.length = 0;
    generateNewPoem();
    fadeSpeed = 2;
  }
  
  if (textAlpha > 400) {
    fadeSpeed = -2;
  }

This is the code that generates the oracle and causes the fading effect. A for loop is used to print out randomly generated text in a vertical format and the if statements gradually increase the opaqueness of the the text and then makes it transparent eventually disappear.

Embedded Sketch

How it was made

The texts in the various arrays that are randomly selected where generated with Chat GPT with the goal of creating a more natural and consistent text

Reflection

This was a good exercise to make use of my knowledge in text manipulation, arrays, classes and other concepts learnt in other lectures. This work can be improved by building on the background animations and changing the colors the text are printed in to create a more visually pleasing effect.

The reading shifted my perspective on designing from focusing more on the functionality of the product, which is the norm, to focusing on the user of the product or what we are designing. I realized that designing an  object or tool for the public requires you to have some consultations with other parties and we should invest more effort into how the user interacts with the product rather than the product design itself. The reading creates a concern though. Can this approach to focusing on the user’s interactions lead to a compromise in the quality  or functionality of the work produced and how do we find the right balance between functionality and interactivity.

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