Month: February 2023

Concept:

For this assignment, I did some research on generative artworks in p5js. After browsing some of the published work on the blogs found here, I got inspired to create an artwork which will pay homage to old computers, or, more specifically the green letters on black background found in retro devices. This way I was able to connect two different levels of the computer evolution which itself is evidence of our progress.

Code and realization: 

As a person with little experience in coding, this assignment was a great challenge, especially trying to avoid getting stuck into infinite loops as in my case I used an if loop inside of the for loop. The past classes on loops and basic shapes helped me create the grid of lines which are then altered as the mouse cursor moves over them.

Here’s a segment of the code I am especially proud of as it took me several trials and a lot of debugging to get it working:

for (let y = spacing/2; y < height; y += spacing) {
    let offset = map(mouseY, 0, height, -spacing/4, spacing/4);
    if (abs(y - mouseY) < spacing/2) {
      offset = offset * 2;
    }

This part of my program controls how the lines react to the mouse movement, especially if the y coordinate of the line is less than the y coordinate of the mouse.

Final Product: 

Reflection: 

This assignment was a great way to express our creativity and thought process. While I managed to get the program to work and be interactive, I feel like I can improve its interactivity and add more elements in the future.

Concept:

Upon watching the video: Casey Rears – Chance Operations, I was quite inspired by the idea of programming fractals. The idea of fractal art has always piqued my interest as it always jelled in between states of chaos and order and it just always looked so mesmerizing. Hence, I decided to go along my assignment by creating a fractal piece of art.

Code and Thought Processes:

When I thought of fractals, my mind instantly went towards shapes such as diamonds, stars and multi-polygon shapes. Hence, after several testing, I decided to create some star like shapes. Upon exploring, p5js does not have a shape for stars, hence, I created a function that would generate a star for me:

function star(x, y, radius1, radius2, npoints) {
  let angle = TWO_PI / npoints;
  let halfAngle = angle / 2.0;
  
  beginShape();
  for (let a = 0; a < TWO_PI; a += angle) {
    let sx = x + cos(a) * radius2;
    let sy = y + sin(a) * radius2;
    vertex(sx, sy);
    
    sx = x + cos(a + halfAngle) * radius1;
    sy = y + sin(a + halfAngle) * radius1;
    vertex(sx, sy);
  }
  endShape(CLOSE);
}

I used this function from https://p5js.org/examples/form-star.html, where it essentially constructs a star shape. The arguments are the x and y coordinates of the shape (which is at the center), and I would have two radius, one for the horizontal shape of the star and one for the vertical shape of the star. I would also have the number of points the star can be. I essentially map the points together to create a star using the unit circle from trigonometry and connecting them together using the vector function.

I knew I was going to overlap my crystals over each other, however I wanted them to have some movement, hence I made them rotate at different speeds. This way it gives this really cool effect where they each sometimes align or sometimes are completely chaotic. It fits well with that chaos/order theme I was going for so it was a great addition. To do this, I created another function called drawCrystals(spin) which would draw a bunch of crystals over each other where spin is just the number of crystals spinning.

function drawCrystal(spin) {  
  for(let i=0; i<spin; i++) {
    rotate(frameCount/-1000);
    
    if (fade<0) fadeAmount=0.005;
    if (fade>255) fadeAmount=-0.005; 
    fade += fadeAmount; 
    fill(0, 0, blue_shades[i], fade);
    
    star(0, 0, ((10*spin + 70) - 10 *i)/2.333, ((10*spin + 70) - 10*i), 4);
  }
}

The size of the shape (determined by the radii) is simply calculated through a series of incremented sizes so that they all look congruent rather than weird shapes and sizes.

I decided to also add a cool fade effect. It’s really awesome because the background is black so it looks like they disappear momentarily and then appear back to life. This fade effect was inspired from another sketch which is linked here: https://editor.p5js.org/remarkability/sketches/rtM08miUD however I tweaked the values so it would fit with my code.

I also filled them with different shades of blue to fill that diamond-ish colouring, plus blue looks cool and is one of my favourite colours.

Finally, in the draw function, I simply just pushed, translated to a random coordinate on the canvas and drew the fractal shape with a random number of fractals and then popped. I repeated this process several times until all the fractals kind of covered the screen. With this, I was happy with my finished product.

Final Sketch:

Overall Thoughts and Improvements:

Overall, I think i’m happy with how it turned out, it was essence I was looking for when I wanted to create my artwork. Although some improvements I could have added are:

• Perhaps some sort of glistening effect on the fractals.
• Perhaps a 3D rendering of the fractals.
• A cool idea would be where the fractals could grow and shrink at random sizes and intervals.
• Maybe it would be cool is the fractals could move about the canvas to give it some nice lively effect to the art.

Using For loops and some back and forth with shapes and values, I was able to produce this piece of art:

Below is the code for this project:

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

function draw() {
   
      if (mouseIsPressed) {
        background(0);
        for(i=0;i<600;i+=10+mouseX/20){
          for(j=0;j<600;j+=10+mouseY/20) {
          fill(i/2,j/2,50)
          rect(i,j,15)
      
          stroke(i,mouseX,j)
          line(i,j,mouseX,mouseY)
          }
        }
      }
      else {
        background(0);
        for(i=0;i<600;i+=10+mouseX/20){
          for(j=0;j<600;j+=10+mouseY/20) {
          fill(i/2,mouseY,mouseX)
          rect(i,j,15)
      
      }
    }
  }
}

I decided to start with the For loop as that is the fundamental concept around which we were to build our program. After which, I decided on squares as my shapes due to their uniformity just being pleasant to look at for me. Once I had my rows and columns of squares, I started messing around with my values and variables, essentially experimenting what different effects I can achieve. I wanted to incorporate some sort of interactivity and decided to utilize the mouseIsPressed function in order to create some effect by clicking and holding the mouse. This led to me adding lines point to the cursor to give a sort of background light rays effect.

 

I am specifically impressed by how little lines of code it took me to create such a piece. I would initially think such an artwork would require many more lines of code but with some experimenting and utilization of functions, it took only around 30 lines.

There is definitely a lot more that can be done in order to improve this piece. I can definitely utilize different kinds of shapes and add more forms of interactivity. I look forward to seeing how I improve with time and what more I’ll be able to add in the future.

Concept:

For this assignment, my concept was to create a dynamic generative art by using just a one shape – ellipse. I was interested in how ellipse can be manipulated to create an outline of various figures such as circles, triangles, blobs, etc.

As I started to play around with the ellipses, I was stuck on the problem of how I can make the ellipses follow the outline of a circle. After using some math, I eventually succeeded in forming the half-circle with ellipses, and then I applied the similar logic with x-axis reflection to form the other half.

I tried to utilize the concepts that we learned during the previous classes (translation, rotation, randomization, etc.) as much as possible, so I ended up creating an interesting form of generative art composed of 4 large and 1 small vibrating circles. The frame rate can be manipulated to change the speed of vibrations, in my case it is set to 5. The vibrations are achieved by manipulating the gaps between the ellipses and their width as well.

As for the color choice, I wanted to match the dynamic concept and the “wavy” vibe it gave, so I chose a black color for the background and a gradient color for the ellipses forming circles, which is achieved by manipulating the RGB values.

Code:

A code that I’m particularly proud of is the one where I draw circle by forming it from ellipses.  I used the Pythagorean theory (x^2+y^2=z^2) to get the length of a line that connects  two points in the circle which lie on the same line, and which is parallel to the diameter of the circle.  I used the for loop to gradually increment the width of the ellipse, and used x-axis reflection to form the other half of the circle.

//function to draw the circles
function drawCircle(radius,gap,upperCircleI){

  for(i=0; i<91; i+=gap){
    let circleWidth = 5;
    
    //upper part of the circle
    fill(255,150,2*i);
    ellipse(width/4, 10+i, 2*(sqrt(radius*radius -   upperCircleI*upperCircleI)), circleWidth);
    upperCircleI-=gap;
    
    
    //lower part of the circle
    fill(2*i,150,255);
    ellipse(width/4, 100+i, 2*(sqrt(radius*radius - i*i)), circleWidth);
    
  } 
}

 

Reflection and future improvement:

One of the ways this artwork could be improved is by increasing the size of the circles (i.e. making it 8×8) and applying a rotation effect that will make the circles rotate about the origin point. Another possible improvement would be randomizing the size and locations of the circles to create a more dispersed and random images.

 

 

Concept

This code creates a canvas and displays a rainy scene with clouds and raindrops. The position of the x coordinate of the ellipse is set to 10 and the position of the y coordinate of the ellipse is set to 70. The sound of rain is preloaded and the setup function creates the canvas and sets the frame rate to 20. The function “raindrops” takes in two arguments, xPosition and ySpeed, and implements gravity by increasing the ySpeed by 0.05 and adding it to the yPosition. The ellipse is drawn at the updated x and y positions. The for loop in the draw function displays three clouds using multiple ellipses and creates falling raindrops using the raindrops function with random x positions and speeds. The code also plays the sound of rain every 15 frames.

Code

let xPosition = 10; // Position of x coordinate of ellipse
let yPosition =70; // Position of y coordinate of ellipse
let gravityAcceleration = 0.05; // gravity acc set to 0.05
function setup() {
  createCanvas(400, 400);
  rainSound.play(); // playing sound
frameRate(20); // to control the speed of rain
}

function preload() { // preloading sound of rain
    soundFormats('mp3');
 	rainSound = loadSound('heavy-rain-nature-sounds-8186.mp3');
 }
function raindrops(xPosition,ySpeed){
  fill('#C4D3DF ');
  ySpeed = ySpeed + gravityAcceleration; // implementing gravity
  yPosition = yPosition + ySpeed;
   ellipse(xPosition,yPosition,6,10);
  if(yPosition > 450) // to make the rain drops fall again when the rain drops go past 450 in the canvas
{
 yPosition =70;
  ySpeed = 0;
}

}

function draw() {
  
  background("#9099a1");
  if (frameCount % 15 == 0)
  {
    rainSound.play(); //sound of rain plays
  }
  
  fill(255, 255, 255, 200); // opacity set to 200 and color is white
  noStroke();
  
  for (let i = 0; i < 3; i++) { //making three clouds with ellipses
    let x = 70 + i * 130;
    let y = 70;
    
    ellipse(x, y, 80, 80);
    ellipse(x - 30, y, 80, 80);
    ellipse(x + 30, y, 80, 80);
    ellipse(x - 15, y - 20, 80, 80);
    ellipse(x + 15, y - 20, 80, 80);
  }


for (let i = 10; i < 400; i+=10) //rain drops looped with different x position and  different speeds
{
  raindrops(random(0,400),random(0,10)); 
}

}

 

Reflection and Future Improvements

Overall, it was a very fun project to work on as I tried to implement a Rain Storm. I tried to make it using what we have studied so far but learned the use of gravity to make the rain fall. Implementing gravity was the best part of the project. There are several areas where improvements could be made to enhance the realism and overall quality of the code. For instance, the raindrops could be made more random in both their appearance and speed to create a more realistic simulation. Instead of hardcoding the raindrops and clouds, the code could be optimized by using arrays and loops to create them, making the code more efficient and scalable. Furthermore, the code could be extended to include other elements such as lightning or wind, adding to the overall atmosphere of the rainy scene. Another area for improvement is adding user interactivity, such as the ability for the user to control the volume of the sound or the size of the raindrops. The code provides a basic foundation for creating a rainy scene, but there is still room for development and improvement to create an even more immersive and engaging experience.

Concept

For this assignment, I wanted to make an art that is hectic, colorful, and mesmerizing which is what comes to my mind when I think of media art. First, I read through the old computer arts magazine for inspiration and one piece of art got stuck in my head which was:

I really liked this piece because the shapes looked like it was spiraling towards the center which feels infinitely faraway. Thus, I decided to implement some spiraling component in my art piece with motion and color. At first, I wanted to have a bezier curve squiggling towards the center from all directions, making a huge squiggling circle. But manipulating with multiple bezier curves turned out to be very difficult so ended up with two bezier curves moving across the canvas, squiggling using the random function which I decided to keep. The shape I wanted to spiral was a circle simply because the shapes were going to orbit around the center in a circle. The color of the background and the circle shapes were randomly set using a random function and were randomly changed as well by calling the random color function which added/subtracted each RGB value randomly.

Code

* IF YOU CLICK THE CENTER CIRCLE, YOU CAN SEE THE PAUSE MENU

in the pause menu, you can control the toggleLeft and toggleRight variable which determines the distance between each circle’s orbit and has a default value of 10. You can also control the sin factor which is the constant multiplied to the sin component that determines the orbit and has a default value of 1/2.

The code has several sections. First, there is the initial section of establishing the global variables and setup function that sets up a random color for the background. Second, the draw function has a two conditional branches based on the boolean variable onOff where if this is true the drawTrue function will be called and thus drawn, and if it is false, drawPaused function will be called and the art will be paused.

function draw() {
  if(onOff > 0)
    drawTrue();
  else{
    drawPaused();
  }
  button = circle(300,300,10);
}

onOff variable can be switched true and false by clicking the button circle in the center. Third, the functions mouseClicked and drawPaused are functions that deal with pausing gimmick and changing the sin factor variable and toggle variables. Lastly, the drawTrue function which is the code that runs the art has also two compartments: one that deals with the squiggling bezier curves and one that draws the circles. The bezier curve gimmick really caused me a headache because initially I didn’t understand how it worked so after trial and error, I made a two separate bezier drawing functions: one going from top left corner to lower right and one vice versa. Both of these functions take a direction parameter and an array of parameter which have four elements for the four parameters of bezier shape which are randomly added/subtracted to make the bezier curve squiggle. The other component that deals with the orbiting circles use the for loop to draw 200 circles orbiting around using the sin() cos() function to constantly move the circle around the orbit. To diversify the speed between each 0rbit, I created an array of angles where each element is the speed of the orbit.

for(let i = 0; i < 100; i++){
    let x1 = 0;
    let y1 = 0;
    strokeWeight(1);
    if(i % 2 == 0){
      x1 = 300 + toggleLeft * i * sin(angle[i]);
      y1 = 300 + toggleLeft * i * cos(angle[i]);
    }
    else{
      x1 = 300 + toggleRight * i  * cos(angle[i]);
      y1 = 300 + toggleRight * i * factor * sin(angle[i]);
    }
    randomColor(colorsCircle);
    fill(colorsCircle[0], colorsCircle[1], colorsCircle[2])
    circle(x1, y1, i * 1);
    circle(y1, x1, i * 1);
  }
  
  for(let j = 0; j < 100; j++){
    angle[j] += 0.0314 + (j * 0.001);
  }

And this is my full code:

let onOff = 1;
let xMotion = 0;
let yMotion = 0;
let colors = [0,0,0];
let colorsCircle = [0,0,0];
let paramsA = [0,0,0,0];
let paramsB = [0,0,0,0];
let counter = 0;
let toggleLeft = 10;
let toggleRight = 10;
let factor = 1/2;

let angle = [];

function setup() {
  createCanvas(600, 600);
  for(let i = 0; i < 3; i++){
    colors[i] = random(0,255);
  }
  for(let j = 0; j < 100; j++){
    angle.push(j);
  }
}

function draw() {
  if(onOff > 0)
    drawTrue();
  else{
    drawPaused();
  }
  button = circle(300,300,10);
}

function mouseClicked(){
  if(dist(mouseX, mouseY, 300, 300) <= 10)
    onOff *= -1;
  else if(dist(mouseX, mouseY, 110,400) <= 20 && toggleLeft > 1){
    toggleLeft--;
    console.log(toggleLeft);
  }
  else if(dist(mouseX, mouseY, 160,400) <= 20 && toggleLeft < 10){
    toggleLeft++;
    console.log(toggleLeft);
  }
  else if(dist(mouseX, mouseY, 420,400) <= 20 && toggleRight > 1){
    toggleRight--;
    console.log(toggleRight);
  }
  else if(dist(mouseX, mouseY, 510,400) <= 20 && toggleRight < 10){
    toggleRight++;
    console.log(toggleRight);
  }
  else if(dist(mouseX, mouseY, 100,525) <= 25){
    factor = 1/2;
  }
  else if(dist(mouseX, mouseY, 300,525) <= 25){
    factor = 1;
  }
  else if(dist(mouseX, mouseY, 500,525) <= 25){
    factor = 2;
  }
}

function drawPaused(){
  background(255);
  textSize(100);
  fill(0);
  
  text('Paused', 150, 200);
  triangle(100, 400, 120, 380, 120, 420);
  triangle(170, 400, 150, 380, 150, 420);
  triangle(430, 400, 450, 380, 450, 420);
  triangle(500, 400, 480, 380, 480, 420);
  
  fill(255);
  rect(75, 500, 50,50);
  rect(275, 500, 50,50);
  rect(475, 500, 50,50);
  
  
  textSize(25);
  fill(0);
  text('1/2', 80, 525);
  text('1', 290, 525);
  text('2', 480, 525);
  
  text("Toggle Left", 75, 350);
  text("Toggle Right", 400, 350);
  text("Sin Factor", 250, 470);
  
}

function drawTrue(){
  background(colors[0], colors[1], colors[2]);
  fill(colors[0],colors[1],colors[2])
  stroke(colors[0]);
  strokeWeight(10);
  
  if(xMotion < 610 && yMotion > -10){
    xMotion ++;
    yMotion --;
  }
  else{
    xMotion = -10;
    yMotion = 610;
    paramsA = [0,0,0,0];
    paramsB = [0,0,0,0];
  }
  
  if(counter == 10){
    randomColor(colors);
    counter = 0;
    randomParam(paramsA);
    randomParam(paramsB);
  }
  drawBezierX(xMotion, paramsA);
  drawBezierY(yMotion, paramsB);
  counter++;
  
  for(let i = 0; i < 100; i++){
    let x1 = 0;
    let y1 = 0;
    strokeWeight(1);
    if(i % 2 == 0){
      x1 = 300 + toggleLeft * i * sin(angle[i]);
      y1 = 300 + toggleLeft * i * cos(angle[i]);
    }
    else{
      x1 = 300 + toggleRight * i  * cos(angle[i]);
      y1 = 300 + toggleRight * i * factor * sin(angle[i]);
    }
    randomColor(colorsCircle);
    fill(colorsCircle[0], colorsCircle[1], colorsCircle[2])
    circle(x1, y1, i * 1);
    circle(y1, x1, i * 1);
  }
  
  for(let j = 0; j < 100; j++){
    angle[j] += 0.0314 + (j * 0.001);
  }
}

function randomColor(colorsArr){
  for(let i = 0; i < 3; i++){
    colorsArr[i] += random(-15,15);
  }
}

function drawBezierX(dirX, param){
  bezier(dirX + param[0], dirX + param[0], dirX + 10, dirX + 10 + param[1], dirX + 20, dirX + 20 + param[2], dirX + 30,dirX + 30 + param[3]);
}
function drawBezierY(dirY, param){
  bezier(dirY + param[0], dirY + param[0], dirY + 10, dirY + 10 + param[1], dirY + 20, dirY + 20 + param[2], dirY + 30, dirY + 30 + param[3]);
}

function randomParam(param){
  for(let i = 0; i < 4; i++){
    param[i] += random(-30,30);
  }
}

Reflection

Like the last assignment, for this assignment, I didn’t have a concrete plan on what I wanted to create through p5js but rather I did a lot of exploring, meddling, and experimenting with the code and stumbling upon many gimmicks that I didn’t intend but looked cool. After two practices, I found myself getting more and more used to this language and how to create and use functions and the draw function to achieve what I want. I also learned and got used to the interactive part of the p5js with mouseClicked function and how to have a panel with set of buttons on the canvas using this function.