Category: Spring 2023 – Shiloh

Sketch

Concept

“The Satanic Donut” is a donut that tries to, but can never completely finish creating itself. One way to interpret it is as a display of never-ending conflict, due to its rapidly-moving and constantly-at-odds components of red and black colour.

As classes allow us to create objects where each object can have its own unique behaviour, I got the idea to create an art piece where the entities inside the art piece are the ones creating the art. Therefore, I conceptualised two groups of entities inside my art: ‘leaders’ and ‘followers’. The leaders move around, while the followers follow the leaders. All entities leave a trail of colour as they move around, as if there are many small brushes simultaneously creating the art piece.

The catch is, the leaders never stop moving towards their cryptic destination, while the followers never stop going after them. Thus, the art piece can never truly finish drawing itself.

Code highlight

A particularly interesting part of the code is the logic that enables each follower to ‘steer’ towards a leader. The followers don’t instantly turn in the direction of their target, but instead perform a smooth turn.

steerTowardsTarget() {
  // Update velocity to point towards the target.
  // However, use a 'steering' effect so the follower does not instantly turn
  // towards the target, but instead gradually turns.
  if (this.target == null) {
    return;
  }
  
  // v here is a vector pointing towards the target, with its magnitude being
  // how far we have to move.
  let v = this.target.pos.copy();
  v.sub(this.pos);
  
  if (v.mag() <= this.speed) {
    // We have reached the target.
    this.velocity = v.copy();
  } else {
    // Make v have a magnitude of our speed.
    // It is still pointing towards the target.
    v.normalize();
    v.mult(this.speed);
    // Make v be the vector from the tip of our current velocity
    // to the tip of the vector pointing towards the target.
    v.sub(this.velocity);
    // Multiply v by a constant to make its effect less pronounced.
    v.mult(STEERING_CONSTANT);
    // Add v to our velocity, to partially change velocity towards our target.
    this.velocity.add(v);
  }
}

The explanation for how this works requires a bit of math knowledge, but this video explains it very well, starting from 50:27. This is where I found out about this concept.

Reflection

The concept of an art piece drawing itself using several small brushes is very interesting and is worth exploring more deeply. Namely, one could devise many different classes of entities, each of which moves in its own unique way or pattern. With every small modification, just running the simulation could create something you never expect.

The Concept

This artwork is meant to symbolize the empty connections in our lives. The colors all represent the uniqueness of these connections, but the nodes of the connection itself are empty.  If you keep clicking, the connections become more and more erratic, as they collide with each other and  increase in speed. Eventually, they all disappear. But, if you keep clicking long enough, the screen refreshes and shows a new array of particles

The Sketch

Link to the sketch: https://editor.p5js.org/mhh410/full/wTNviGHab

The nodes in the network are objects of the Particle class, with the following attributes. The connection between them is formed when the distance between the X and Y coordinates is less than 100. After that, the color of the line is determined through the Lerpcolor function, which gets the color associated with each particle, and draws the line that is a combination of the two colors.

The particles can also collide with each other, and this changes the direction they move in. If the initial randomized speed assigned to a particle is too low, and it is too far from other particles, then it may be stationary. The collide function will essentially switch the velocity of the two particles colliding.

There is a mousePressed function, that is responsible for doubling the speed for each particle whenever the mouse is pressed. There is also a mousePressCount variable. As the particles eventually escape the canvas, there needs to be a reset. The reset occurs after 20 presses, which I estimate that is sufficient for all the particles to disappear.

After 20 mouse presses, the canvas resets : all the particles from the particle array are popped, 40 new particles are formed, and the background is reset.

 

Improvements

I would like to use this as a template to be able to create images of some form, but currently I have no idea how to do that. Perhaps some way to transpose the outline of an image and represent the image as nodes from this piece to form complex artistic designs.

Concept

Initially, I thought of making something with lines and creating some sort of an illusion. Then I remembered something I saw in Brooklyn’s Botanic Garden during my study away. It was a series of lights in lines converging into one single point. It looked amazing in the dark and I was really inspired by its pattern, so I thought of recreating it.

I feel like the pattern came out exactly as I wanted it to be, maybe even better because it changes color based on the position of the mouse. Once I was done with the lines, I made triangles to give a 3D effect so it seems like the pattern is inside a cube.

Implementation

I had to think quite a lot about where to place the lines and where to converge them to give the illusion effect. Especially since we had to implement the pattern using for loops, I had to think about where I had to place the “i” to change the position of the lines in the way I wanted.

The two main sections of my code are where I implemented the for loops for the changing-color lines and for the top and bottom triangle patterns.

The first one for the changing-color lines is below:

// creating a for loop for the changing line patterns on the left and right
// loops till the width in steps of 5, the steps define the spacing between the lines
for (let i = 0; i < width; i = i + 5) {
  
  // changing color patterns, increase mouseX for more red and increase mouseY for more green
  stroke(mouseX - random(255), mouseY - random(255), random(255));
  
  // dividing pattern into two halves (left side and right side) and making separate lines for each
  
  // left half
  line(0, i, mouseX, mouseY);
  
  // right half
  line(width, height - i, mouseX, mouseY);
}

I played around with the color-changing part until I was satisfied with the color combinations I achieved. The lines were made in two parts, the left half and the right half. This gave a triangle effect (two triangles on the left and right changing colors) without actually creating triangles. The starting points for the lines were changed using the for loop and the ending points were always the mouse position.

The second one for the top and bottom triangle patterns was done using the following for loop:

// making a for loop for white triangle patterns on top and bottom
for (let i = 0; i < width / 2; i = i + 10) {
  noFill()
  stroke(100)
  
  // one point on the top left half of the canvas, one point on the mouse position, and another one
  // on the top right half of the canvas
  triangle(i, 0, mouseX, mouseY, width - i, 0)
  
  // repeating procedure for triangles on the bottom half
  triangle(i, height, mouseX, mouseY, width - i, height)
}

I achieved this pattern by dividing the width into two halves (left and right sections) and then looping to make triangles from left to right. The converse was done from the right-to-left half as well. This gave me the white triangles that move based on the mouse position.
 

Reflection

I feel like I achieved exactly what I was going for in this assignment and the pattern turned out to look quite visually pleasing. I had the chance of showing it to my friends as well and getting their feedback and I subsequently added the triangle patterns on the top and bottom right after. Next time, I would like to use the mouseClicked() and keyPressed() functions to add even more user interactions.

 

For this assignment, our task was to create a simple artwork using for loops and our knowledge from previous classes.

Initially I filled the canvas with a grid of rectangles and circles in a static manner. To make this pattern, I used a double for loop to draw the shapes over the y-axis and then the x-axis.

Then to increase interactivity, I changed the width of the squares and the circles to change dynamically based on the position of my mouse. To do this. I used the dist function to compute the distance from the position of the mouse. I had to spend a lot of time on how should the function be linked to the shapes. I realized the solution was actually much simpler that what I was trying to do initially.

My solution in the start was only plain white shapes so the most challenging part of the pattern was adding color. I had to do a lot of research and trial and error to understand how could I change the color of where I am hovering on the canvas. For this purpose, I eventually reached at the solution of using a map function within the fill function to change the color of where I am hovering only.

I further wanted the canvas to change color continuously on its own as well alongside the hover, for which I added the hue variable after setting the colorMode from RGB to HSB. Integrating this feature, was a challenge to achieve because I was not working with the ‘mod %’ function in the start so kept running into errors.

Below is the canvas for my artwork:

Reflections:

The assignment was an exciting one to work with. I really wanted to work with interactivity and in particular the draw function after my assignment 1. I got to work very creatively to create this piece using different functions within the draw function which allowed me to add dynamically changing shapes and colors. As I had never before used some of these functions, most of my time was spent on understanding their use correctly and debugging them. In the future, I think it would be interesting to try changing the number of shapes on the screen dynamically as well.

 

In this assignment we had to use our previous knowledge gained in class along with for() and while() loops to create a simple work of art. I decided to go with the for() loop and create some type of symmetrical work of art with some additional features as ability to change the background color by clicking the mouse and moving animation. This artwork is composed of a grid of black dots connected by white lines, which move with an oscillating animation and are framed by a changing background color.

Concept

This artwork explores the concept of symmetry and movement. The grid of black dots represents order and stability, while the moving white lines create an element of motion and energy. The constantly changing background color further emphasizes the sense of dynamism and highlights the symmetry of the artwork.

My initial in-class work was static and did not contain any kind of additional features as background change and movement of lines.

Draft 1

Highlight of some code

To create the basis if the artwork I first used for loop to create some symmetrical grid using small rectangles. The below code depicts the code:

for (x = m; x <= width - m; x += m) {
    for (y = m; y <= height - m; y += m) {
      noStroke();
      rect(x - 1, y - 1, 3, 3);
      stroke(255, 100);

After creating the basis, I started to draw the lines connecting the rectangles from different coordinates. The lines move in a circular, oscillating pattern around the grid of black dots, creating an interesting visual effect. A highlight of some code that I am particularly proud of is this circular movement of lines in oscillating pattern utilizing  sin(frameCount / 20) * 20 and  cos(frameCount / 20) * 20.

// Symmetrical lines with animation
   line(x, y, width / 2 + sin(frameCount / 20) * 20, height / 2 + cos(frameCount / 20) * 20);
   line(x, y, width / 2 + sin(frameCount / 20) * 20, 0 + cos(frameCount / 20) * 20);
   line(x, y, 0 + sin(frameCount / 20) * 20, height / 2 + cos(frameCount / 20) * 20);
   line(x, y, width / 2 + sin(frameCount / 20) * 20, height + cos(frameCount / 20) * 20);
   line(x, y, width + sin(frameCount / 20) * 20, height / 2 + cos(frameCount / 20) * 20);

Reflection

After some reflection on my project I identified couple of ideas for future improvement. Future improvements to this artwork could involve adding more elements to the grid of black dots, such as circles and other shapes, as well as introducing more colors to the background and adjusting the speed and intensity of the lines‘ animation. Additionally, it could be interesting to experiment with different musical styles and incorporate sound into the artwork to further emphasize the sense of motion.

Motivation

The motivation behind this project was to create a simple generative artwork using the p5.js library. The goal was to combine elements of randomization, user interaction, and geometric shapes to create a unique and visually interesting piece.

Concept

The concept behind the artwork is a grid pattern of randomly colored rectangles and ellipses. The user can interact with the artwork by moving the mouse, causing the size of the shapes and the stroke weight of the outlines to change dynamically. This adds a layer of unpredictability to the artwork, making each viewing experience unique. Moving the mouse across the x axis changes the size of the shapes, while moving the mouse across the y axis, changes the strokewidth.

Process of Implementation

The process of implementing the generative art can be broken down into two primary steps:

Generating the grid pattern of shapes in the draw() function:

function draw() {
  // nested for loops to create a grid pattern
  for (let i = 0; i < width; i += s) { 
    for (let j = 0; j < height; j += s) {
      // randomize the color and shape of each square
      fill(random(255), random(255), random(255)); // randomly generate a color for each shape
      if (random(1) > 0.5) { // randomly choose between a rectangle or an ellipse
        rect(i, j, s, s); // draw a rectangle
      } else {
        ellipse(i + s / 2, j + s / 2, s, s); // draw an ellipse
      }
    }
  }
}

Implement the mouseMoved() function to add user interaction:

// function to change the size and stroke weight of the squares on mouse movement
function mouseMoved() {
  s = map(mouseX, 0, width, 10, 50); // map the size of the shapes to the x position of the mouse
  strokeW = map(mouseY, 0, height, 1, 10); // map the stroke weight to the y position of the mouse
  strokeWeight(strokeW); // update the stroke weight with the new mapped value
}

Challenges

One challenge in this project was understanding the map() function and how it works to map one range of values to another. It was important to understand the arguments passed to the map() function and how it affected the output.

Another challenge was getting the grid pattern of shapes to line up correctly, as the size of each shape needed to be adjusted to create a seamless grid.

Reflections

This project was a great opportunity to learn about generative art and how p5.js can be used to create unique and visually interesting pieces by using loops. By implementing randomization, user interaction, and geometric shapes, I was able to create a simple but impactful generative art piece.

Link to p5 sketch: https://editor.p5js.org/swostikpati/full/3W7yvJ3yo

function setup() {
  createCanvas(500, 400, WEBGL);

  
}

function draw() {
  background(0);
  
  
  //for rotation
  rotateX(frameCount * 0.01);
  rotateY(frameCount * 0.01);

  noFill();
  stroke(255);
  
  //draw series of boxies that follows mouse
  for (let i = 0; i < 100; i++) {
    for (let j = 0; j < 150; j += 10) {
      box(mouseX, mouseY, 150);
    }
  }

  box(mouseX, mouseY, 100);
  box(mouseY, mouseX, 200);

  for (let i = 5; i < 100; i += 10) {
    for (let j = 10; j < 150; j += 50) {
      box(i, j, i + j);
    }
  }

  rotateX(frameCount * 0.01);
  rotateZ(frameCount * 0.01);
  //draw circle at center
  fill(0)
  stroke(0)
  circle(0,0,20)
}

Concept

I have started my implementation of the art work from one of the works from Programm-Information21 suggested by Professor Shiloh. It is shown below.
At first, I  replicated  it  trying  to copy  the  idea  of squares populating my  canva  with  various  density. It turned out to not be so exciting, so I have decided to play around with shapes and then I sticked to the idea to use ellipses. My final sketch uses only ellipses.

Different parameters for ellipses gave different visuals, and for my primary part of sketch I attempted to replicate ongoing flames. Background color is set to orange and a number of black ellipses with different parameters moving in a random fashion are responsible for the final effect.

Code for the Fire Imitation

background(249, 94, 4);
fill(0);
for (let x = 0; x < width; x = x + 5) {
  for (let y = 0; y < height; y = y + 5) {
    if (y < height / 4 + 10) {
      ellipse(x + random(width / 20, -width / 20), y, 8, 10);
    } else if (y < height / 2 - 30) {
      ellipse(x + random(width / 20, -width / 20), y, 6, 10);
    } else if (y < (3 * height) / 4) {
      ellipse(x + random(width / 20, -width / 20), y, 4, 10);
    } else {
      ellipse(x + random(width / 20, -width / 20), y, 3, 10);
    }
  }
}

As I mostly implemented the fire animation in class and just changed it a bit at home, I have decided to add something using key controls as well. So, to introduce a bit of contrast to fire, I coded falling rain drops to imitate rain to some extent. I did some quick research on p5js to use Classes and functions to code behavior for each rain drop as an object. It is again ellipses.

Code for Rain using OOP

class Rain {
  constructor() {
    this.x = random(0, width);
    this.y = random(0, -height);
  }
  create() {
    noStroke();
    fill(140, 223, 232);
    ellipse(this.x, this.y, random(3, 6), random(3, 10));
  }
  fall() {
    this.y += random(10, 30);
    if (this.y > height) {
      this.x = random(0, width);
      this.y = random(0, -height);
    }
  }
}

“Rain” activates when a user presses the mouse and stops upon its release. You can check the full sketch below.

Reflection

My final sketch is nowhere near close to the work I got inspiration from. For me, it shows that we may start at one point and end up deviating from our designed path yet enjoy the process. It is certainly exciting that such simple code may produce interesting results.

Future Improvements

I am quite satisfied with the flame animation, yet for the rain part I feel it can be improved further and there it may make sense to add ground, sky, and other attributes to give it a look of something more real, rather than completely artificial.