Midterm Progress 2

From last post, I have changed many things, either accidentally or intentionally. I am still going with the initial concept of space, but I eliminated a lot of the elements from the original design, such as the hand images, rotating shooting stars, etc. Now, I have four main elements in my code to create the image that I currently have now:

• class PerlinShape — expanding circular waves; the patterns that a black hole generates
• class particle — perlin noise flow field particles; symbolizes the small stars/shooting stars that we see passing by in the universe
• class particle1 — explosion of particles; signifies big stars exploding/being generated in space
• ellipse — has perlin noise pattern inside; the “moon”

The ellipse and the perlin noise flow field has mainly stayed the same for the most part since the last progress post, but the two things that I newly  developed since then are the exploding particles and the perlin shape waves.

Progress:

At first, my goal was to create a simple singular circle loop that’s moving using perlin noise, as shown in this tutorial. However, once I implemented the code after modifications, I got a really cool result that looked like one of the images that I originally wanted to create, which were waves like these:

I had some trouble trying to position the ellipse back into the center of the canvas after adding the PerlinShape class into my code, but I realized that once I modified the following snippet below, I was able to get it back to the center:

//circle
let centerX = 20;
let centerY = 20;
let radius = 100;

At this point, I had reached this image in my code:

Then, I had to move the explosion of the particles class into the center as well so that they will spring from within the ellipse in the center, for it was positioned at the bottom right corner of the canvas at this point like how it’s shown above.

To do this, I tried adjusting the following part of the code’s x and y positions, but then I ended up with this image:

  // Check if the particle has exceeded the expansion limit
  if (dist(this.position.x*0.8, this.position.y*0.8, width/2, height/2) >= this.expansionLimit) {
    this.lifespan = 0;
  }
}

display() {
  fill(255, this.lifespan);
  ellipse(this.position.x/2, this.position.y/2, 10, 10);
}

Then I realized that if the value that is multipled to this.position.x and this.position.y are the same throughout in the above code snippet, the particles explode from the center of the ellipse limit that I wanted the particles to expand till, which gave me this image:

Now the only thing I had to do was move this explosion into the center, which I realized was supposed to be controlled from the sketch.js file.

These are the three elements of the code that I made adjustments to in order to control the location of the exploding particles:

let particle1 = new Particle1(width/2, height/2); // Set initial position of the explosion WITHIN the circle boundary

// Check if the particle has exceeded the expansion limit; controlling this elongates the ellipse boundary limit of the particles 
if (dist(this.position.x*1, this.position.y*1, width/2, height/2) >= this.expansionLimit) {
  this.lifespan = 0;
}

display() {
  fill(255, this.lifespan);
  ellipse(this.position.x*1, this.position.y*1, 10, 10); // the position of the ellipse limit itself
}

Finally, I kept the this.position.x and this.position.y values consistent so that the particles would expand in a perfect ellipse shape rather than an oval.

Then I adjusted the expansionLimit value so that it’ll expand in a smaller size, and at this point I had this:

I was pretty happy with what I had by this point, and although a lot of the code ended up being very random and unexpected, I had a lot of fun reaching till this point. A particular feature that I want to highlight is the redrawing of all the elements (perlin noise flow field, perlin noise circle loops, particle explosion, perlin noise pattern of the ellipse) that are on my canvas whenever I click the screen; this helped me generate a lot of interesting and different variations playing with colors, different-shaped lines and waves, directions, etc.

Here are a few different variations that I got:

I might add a few new elements such as stars that will appear in the background or bring back the hand images, etc. Or I might keep it simple like this, haha. But I’d say I’m 90% done with my project!