Author: Ayush Pandey

Black Holes are fun. The fact that they are so dense that even light can’t escape from their gravitational pull is itself intriguing. In this project, I present you a chance to become a black hole, at least an imaginary one.

Ambition

1. I started with an unrefined generative art idea and experimented with a few things that went terribly wrong and couldn’t scale on a giant screen.
2. For me, the most important part of this project was collaborative interaction that I wanted to achieve. And trust me on this, it’s not that simple as I imagined it would be.

I started with an idea of combining screens to generate an art piece. Based on the movement of the screen, the art would change and scale.

But this posed a lot of issues.

1. First, not all screens are of same width and height.
2. Resolution difference of each device also affects the generated browser viewport.
3. Finding exact position is not impossible but is hard to achieve given the timeframe of this project.

With numerous failed attempts to perfect device positioning and motion, I realized I can still use device movements for the project to be interactive. Why? While mouse and keyboard are fun, there are only one each for one machine. How would multiple users participate?

This led to the idea of using devices to detect movement and affecting the generated art.

Pivot

I wanted to use Cellular Automata, Flocking, or Fractals but the idea of movement was quite difficult to visualize (at least I wasn’t able to).

But hey! We have Autonomous Agents!

Based on what we had studied in class about autonomous agents and their behavior, I came up with the black hole idea. Why not give everyone an opportunity to control a black hole and attract things towards it? And with the trail paths, we generate a vibrant collaborative art piece.

Falling into a Black Hole

The concept of Arrival in autonomous agents is quite similar to how things fall into a black hole. When objects are near to the event horizon, time beyond the black hole moves fast for the objects falling in, but for an observer observing the falling object, it appears to fall quite slow.

Einstein’s theory of General Relativity!

This led to the following initial paper sketch:

And the final art piece to be the following:

In this piece, there are multiple targets (black holes) and many particles falling in (vehicles).

Interactivity

Here’s how interactivity occurs:

A screenshot of how the client device looks like:

Codebase

I can’t put the code as an online p5 sketch because it will interfere with the communication. That’s because every time it loads up it will send messages to the server.

Here’s a GitHub Repository of the codebase: https://github.com/ayushpandeynp/decoding-nature-final-project

IM Showcase

Here’s a picture from the IM Showcase:

For my final project, I want to create a flocking/cellular automata based generative art similar to the following inspirations:

Interactivity

For interactivity, I want the users to be mostly involved in the generative art. I have a superficial idea of what I want to do, which might fail, but I will give it a try.

My initial idea is to have two devices to participate in generating the art, but what influences the art is the gravity and position difference taken from the device’s movements. Ideally the devices would be mobile phones.

For measurements, I will rely on device motion listeners that are supported on most browsers today, but, of course, will do my experiment and see how doable it is.

Here’s a page that describes device motions and gives examples:

https://whatwebcando.today/device-motion.html

Idea Sketch

On this assignment, my main goal is to explore cellular automata that we learned in class. However, there are a few parameters changed namely color, initial condition, and size of the cell.

Here’s the sketch:

Initially the board is constructed with vertices instead of squares and these vertices when rendered on board, they shift their position with a random offset of [-3, 3).

This helps us create a special noise like variation as shown below:

Implementation of this offset is shown below:

For interactivity, there is a slider that changes the resolution/width of the cells ranging from [5, 20].

 

This project is more of an exploration on what we can do using Matter.js Physics library. My inspiration comes from the popular game “Angry Birds” where you need to slingshot a bird so that it destroys blocks placed on the other end of the screen.

I wanted to see if we could re-create the physics using Matter.js and have found that it’s pretty convenient and easy.

Here’s my sketch:

On mouse click, it ejects a bird (circle) to the right in a projectile motion and lets it hit the cubes. The cubes fade away when the bird hits the cube. After multiple hits, it eventually gets removed from the world.

Here’s how the mouseClick event is captured:

function mouseClicked() {
  // reset bird position and apply force
  Body.setPosition(bird, { x: mouseX, y: mouseY });
  Body.setVelocity(bird, { x: 0, y: 0 }); // reset velocity
  let force = createVector(0.06, -0.04);
  Body.applyForce(bird, bird.position, force);
}

Horizontal and vertical forces are applied to the bird to create the projectile motion. Matter.js handles the rest.

Here’s how the collision event is captured:

// collision event
Events.on(engine, "collisionStart", function (event) {
  let pairs = event.pairs;
  pairs.forEach(function (pair) {
    if (
      (pair.bodyA === bird && cubes.find((c) => c.body === pair.bodyB)) ||
      (pair.bodyB === bird && cubes.find((c) => c.body === pair.bodyA))
    ) {
      // Reduce opacity of the cube on collision
      let cube = cubes.find(
        (c) => c.body === pair.bodyA || c.body === pair.bodyB
      );
      if (cube) {
        cube.opacity = Math.max(0, cube.opacity - 100);
      }
    }
  });
});

 

Neils’s lecture was highly informative for someone who has little to no experience in AI. However, for people who have spent much time working in this field, it was more of a general overview, and in other words – a bit boring.

There are a few things I loved about the lecture though.

He explained the difference between how people perceive AI and what it actually is – a software heavily trained to find answers in a clever way compared to humans, but a “software” not a “conscious” entity. And it’s definitely not just a humanoid robot. He was quite articulate in demonstrating this difference, and I think it’s really necessary to understand it before looking at the threats of AI.

I also found it interesting how he connected many concepts about AI safety and governance with analogies such as of Yin and Yang, and of a Kitchen Knife. He articulately demonstrated the duality inherent in technology (like how a knife can be good if used correctly, but will be bad in hands of the evil), and connected it to the concepts of safety in AI, which are very valid points.

Inspiration

My inspiration for this project arises from both my profound fascination with astronomy and another course I am enrolled in this semester, titled “Astronomy and Cosmology: From Big Bang to the Multiverse.” While studying the Sun in this class, including its composition, origin, magnetic fields, and the nuclear reactions that fuel its ability to emit enough energy essential for life on Earth, I decided to base my midterm project on the most important source of energy for humanity, the Sun.

During my research, I found a captivating visualization video from NASA’s Goddard Space Flight Center.

This video provides various visualizations of the Sun from different angles, as observed from the Earth. While the visuals are striking, there are several intriguing phenomena at play. What we witness in the video is the Sun’s Photosphere, often referred to as its surface. Here, something remarkable happens. The Sun, primarily composed of Hydrogen (H) and Helium (He), has a complex and large magnetic field. Sometimes, these magnetic fields breach the surface, giving rise to what we know as sunspots. These sunspots are regions on the Sun’s surface, usually dark spots, caused by exceptionally strong magnetic fields. They appear darker than their surroundings due to their lower temperature, a result of the magnetic field hindering the flow of heat.

Furthermore, due to the Sun’s absence of a solid structure and its composition of gaseous matter, different regions of the Sun rotate at varying speeds. For instance, the equatorial areas of the Sun complete a full rotation in approximately 24 days, whereas the polar regions take more than 30 days to complete a full rotation. Consequently, these variations in rotation make it appear like clouds composed of various gases are moving at different speeds. Also, the presence of solar flares and solar prominences adds to the spectacle. They create ring-like structures on the Sun’s surface, further enhancing its mesmerizing beauty and complexity.

There are many things to consider, but I decided on taking a few important things for my version of the visualization for a generative art project.

1. The illusion of the movement of gases on the Surface
2. Energy flowing along the magnetic fields of the Sun
3. The ring-shaped Solar Prominence

Note: Although it is an injustice to the Sun to visualize it in 2D, I would like to point out the complexities of being able to encompass everything about the Sun in a relatively shorter time frame compared to hundreds of years of Astronomic research.

Results

Here’s a plotter version of the Sketch. I like this one better, although more work went into building the version above.

https://editor.p5js.org/ap6178/sketches/TrC9XCiJk

Steps

1. At first I did some research on how I could visualize the phenomenas described above. I found a helpful video by Daniel Shiffman from The Coding Train. This video describes Perlin Noise and Flow Fields, which is quite useful in creating the movements of the particles along the Sun’s complex magnetic fields.
2. Here are a few screenshots of the development process:

Coding

The most important part for me in the beginning was to be able to create the 3 phenomenas mentioned above: the surface, flowing particles, and the rings.

I have created two classes: Mover and Rings, and rest of the logic remains on the sketch file. Each item that creates a trailing line is a Mover. 6000 movers are put into the sketch first then a vector field is created. These movers move on the vector field (also called flow field). Whenever a mover is near to a vector in the vector field, which, by the way, are rotating continuously using Perlin Noise to change directions, it gets ejected using the direction and magnitude of the vector it comes across. And adding an illusion of trailing using alpha values in the colors, as well as adding blur and shadows, make it feel like hot gases are flowing in the vector field.

For the surface, I am getting pixel values of the whole sketch using loadPixels() and for each pixel, I am setting an alternating yellow and orange colors along with randomized alpha values. This makes it appear like hot gas clouds are moving on the surface.

What was challenging?

The rings. I tried and scraped so many ideas on creating the rings, but eventually agreed on doing what’s seen on the sketch. The rings are arcs, placed elegantly using ellipse properties, but also containing blur, shadows, and alpha values.

Here’s what I wrote after quite a lot of experimentation:

display() {
    // draw the ring if frameCount is greater than 240
    if (frameCount > 240) {
      // set ring properties: no fill, shadow color, and shadow blur
      noFill();
      drawingContext.shadowColor = color(254, 231, 4, 2);
      drawingContext.shadowBlur = 20;

      // choose a random stroke color from the colors array
      stroke(random(10) > 5 ? this.colors[0] : this.colors[1]);

      // draw an arc with varying parameters
      arc(
        this.pos.x + this.offsetX,
        this.pos.y + this.offsetY,
        -this.a * 1.5,
        -this.b * 1.5,
        (PI / noise(this.pos.x)) * 10,
        PI - 10 * (frameCount % 100)
      );
    }
 }

Pen Plotting

To be able to plot using the Plotter, I had to remove all opacity related variations from the code. As the plotter would plot everything in full opacity, there was no point of adding them on the sketch. Therefore, I made many changes.

1. Removed opacity-related code.
2. Removed the background (the Surface of the Sun as it was mainly playing with alpha values for the cloud-like behavior)
3. To create an optimized SVG file, I updated the code so that the trails are created using lines, not vertices. This is because the plotter would only draw lines from one point to the other.
4. Made it such that the color for each trail changes in between. Each trail would be composed of two colors based on random decisions in between the trail.

Pen Plotted Photo

Timelapse Video of Pen Plotting

Concepts taken from the Course

1. Randomness
2. Noise
3. Vectors
4. Velocity
5. Acceleration
6. Force

Future Work

1. I would love to work more on the rings. I think it has a lot of potential if executed correctly.
2. I would also like to use this sketch as a texture for a sphere drawn in 3D space. This would make it look actually like the Sun.
3. Luminosity is also something that can look really good if done correctly.

Thank you for reading the post!

To recap, here’s a picture of an inspiration of what I wanted do for my midterm.

This is the mighty Sun. It’s a star in our solar system that is about 4.5 billion years of age. It’s mostly made up of Hydrogen (H), and Helium (He).

What we see on this picture is the surface of the star, up to the Photosphere. The two gases are interacting with each other and generating energy that sometimes, due to Sun’s strange magnetic fields, creates gaseous eruptions called the Solar Prominence.

I am using these concepts on my generative art revolving around the movements of gases, and creating eruptions. At first I was planning on using shaders, but then after a couple of articles and videos, I realized that it would take some time and expertise to learn GLSL. Therefore, I decided on using Perlin Noise along with Flow Fields, explained on a video by Daniel Shiffman.

I have utilized concepts learned in class such as Vectors, Forces, Oscillation, Sine Waves, and so on. This is how the sketch looks at the moment.

TODOs:

1. Create the ring-shaped gaseous eruptions. (I’m very close)
2. Clip the art onto a circle, to make it appear like a star.
3. Add distant stars in the background. A for loop with vertices will do the trick.

For my midterm project, I want to draw inspiration from the following video by NASA’s Goddard Space Flight Center.

The video has many visualizations, but I want to focus on this phenomenon that happens on our Sun. The strange gaseous eruptions are called Solar Prominence.

To make these effects, I am thinking of doing something similar to this video using Perlin Noise and Flow Fields.

In this assignment, I wanted to see the power of sine waves in creating smooth and soothing effects. Therefore, I have built up my assignment on something we had experimented in class.

There are two waves in this sketch. One wave has a longer period of 2π, and another has a shorter period of π/2. I wanted to experiment a different approach on how the waves could be shown like they’re moving. Therefore, I added an offset variable that increments by 0.8 on every frame. In the draw function this offset is used to translate the positions.

Now, when the y position of the vertex (or ellipse in this sketch) gets updated, it feels like the waves are moving.

Then I tried adding traces of the waves using alpha  value in the background() function:

background('rgba(13, 39, 54, 0.025)')

This would keep adding faded layers of dark greenish background so it appears like the waves are leaving traces.

Here’s the code used to build the sketch:

let offset = 0;

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

function yVal(x, period, phase, amplitude) {
  return sin((TWO_PI * x) / period + phase) * amplitude;
}

function draw() {
  background("rgba(13, 39, 54, 0.025)");

  translate(width / 2 - offset, height / 2);
  offset += 0.8;

  for (let i = -width / 2 + offset; i <= width / 2 + offset; i += 10) {
    let x = map(i, -width / 2, width / 2, -PI, PI);

    stroke(0, 255, 255, 0.1);
    strokeWeight(10);
    ellipse(i, -yVal(x, TWO_PI, 0, height / 6), 4);

    strokeWeight(1);
    ellipse(i, yVal(x, PI / 2, 0, height / 3), 3);
  }
}

Future Considerations

I would love to add more waves and lines to show a few parts of the waves connected to each other. Also, I would like to create more complex wave patterns by introducing reversed sine waves with varying periods,  and amplitudes.

https://editor.p5js.org/ap6178/sketches/TCSSRFgfS

In this assignment, I wanted to experiment with mostly three kinds of phenomenons: gravitational attraction, turbulence and repulsion. To perform these experiments, I decided on auto-generating movers one at a time until it reaches a maximum threshold (then repeating this step), and placing a few attractors in place.

These attractors have a certain maximum displacement that they can move around with. This is to imitate how attractors in the universe also move by themselves. Movers are attracted to these attractors in place, which change the positions of each mover. But it is also important to remember that there is, in fact, a competition between these attractors. Movers move towards the one that can attract with more force.

When movers are near to each other, they are joined through a line. This resembles a communication channel between two movers in the universe. When they are very near to the attractors, they are sucked in.

This imitation of phenomenons creates a unique generative pattern as seen in the sketch.

Here are a few snippets that I’m particularly happy with:

Attractor.attract()

// gravitational attraction force to a mover
attract(mover) {
  let force = p5.Vector.sub(this.position, mover.position);

  let distance = force.mag();
  distance = constrain(distance, 5, 25); // constrain the distance

  let strength = 50 / (distance * distance); // attraction strength based on distance
  
  force.setMag(strength);
  mover.applyForce(force);
}

Turbulence and Repulsion

// apply forces to movers and display them
for (let mover of movers) {
  for (let attractor of attractors) {
    attractor.attract(mover);
  }
  
  // turbulence and repulsion forces
  let turbulence = createVector(random(-0.1, 0.1), random(-0.1, 0.1));
  mover.applyForce(turbulence);
  
  for (let otherMover of movers) {
    if (mover !== otherMover) {
      let repulsion = p5.Vector.sub(mover.position, otherMover.position);
      let distance = repulsion.mag();
      distance = constrain(distance, 5, 25);
      repulsion.setMag(-1 / (distance * distance));
      mover.applyForce(repulsion);
    }
  }
  
  mover.update();
  mover.display();
}

Future Improvements

I would love to add the drag force to imitate the asteroid belt. More like how certain things may hinder the movements in the universe.