This generative art piece draws its design from the interplay of geometry and motion. This week my main goal was to incorporate depth into my sketch, something I had never done before.

In the setup() function, I created a WebGL canvas. I also established an orthographic projection, so objects don’t appear smaller when they move away from the viewer.

The core of this artwork lies in the nested loops that traverse the canvas in both the X and Z dimensions (representing a 2D grid). Inside these loops, each iteration represents the creation of a box structure.

The height of each box (h) is determined by mapping the sine of the X-axis rotation angle. This mapping ensures that the boxes smoothly transition between different heights, adding to the calming effect. The stroke color (s) is derived from the sine of the Y-axis rotation angle, which results in a gentle shift in color shades across the artwork. Using the push() and pop() functions, we save and restore the transformation matrix to isolate the properties of each box.

Lastly, the angleX and angle Y values are incremented to create a continuous, slow rotation, producing a meditative motion within the artwork.

Code snipper

let h = floor(map(sin(aX), -1, 1, 50, 300)); // Map sine of X-angle to box height
let s = map(sin(aY), -1, 1, 100, 255); // Map sine of Y-angle to stroke color

Here, sin(aX )and sin(aY) are used to create a smooth oscillation as the boxes rotate. By mapping these values, I ensure that the height and color transitions remain serene. The mapping function allows to control the range of these transitions, resulting in varying box heights (h) and stroke colors (s) that contribute to the overall atmosphere of the artwork.

Challenges

I tried to incorporate more complex, unpredictable rotations that were user interactive, but I did not have enough time to flesh out the idea. Nevertheless, I am happy with the final sketch. I hope to make improvements in the future.

For this assignment I focused on making changes and tweaking the last sketch you showed us in class; the one with many white translucent movers orbiting aroung a pink attractor. I also had an image in mind I wanted to recreate. I wanted to make a retro serene generative art screensaver, that progressively get more complex. Below is my inspirations.

 

The first things I did was change the design of the movers. I found myself experimenting will all sorts of shapes and dimensions, but finally settled on lines connecting the movers to attractor. I really liked the simplistic, yet instrictate designs being formed over time. I also continuously played around with constants and variables to emulate the calm atmosphere I desired.

After settling on an aesthetic I was happy with I moved on to applying turbulence to the attractor. I wanted to do this since any force applied to the attractor will in turn affect the movers as well because of the way they are coded. This way, the turbulence would make a profound effect on the whole sketch. I coded the turbulence to be random vectors that would affect the attractor at all times, hence making the attractor similar to the walkers we made in earlier classes.

let turbulence = p5.Vector.random2D();
  turbulence.mult(0.15);
  attractor.applyForce(turbulence);
  attractor.update();
  attractor.checkEdges();

The above code is what creates the turbulence for the attractor.

I also wanted to add a level of interactivity to the sketch. To achieve this, I made sure the attractor would teleport to the mouse coordinates with every mouse click.

Lastly, I added check controls to make sure the attractor remains in the canvas.

Below is my final design

 

I also made a more color version below

 

Challenges:

I wanted to create a design that incorporated more depth, to give it a 3D look. But I wasn’t make increase the complexity of the sketch in time.

FireFlies

For this assignment I wanted to mimic the movements of organisms that live in groups. My first idea was to center it around a school or fish or a flock of birds. But after some experimentation I realized coding a swarm of fireflies would work well with the simplistic design I was going for, since we normally see them as bright points anyway in real life. The video below is what I based my movement code on.

Fireflies are known for their enchanting flashing behavior, and in this project, I tried to mimic their signature glow and also added an interactive element by controlling their movement using the mouse pointer. This combination results in a visually engaging and interactive experience.

How It Works:

• Flashing Behavior: I use trigonometric functions to generate the rhythmic flashing of fireflies. The phase, frequency, and amplitude of the flash are randomized to add variety.
• Movement Control: Fireflies’ movement is controlled by acceleration vectors. We apply forces to simulate attraction or repulsion from the mouse pointer and Perlin noise for random motion.
• Interactive Mouse Control: When the mouse is nearby, fireflies either move away from it (repulsion), creating dynamic patterns.
• Canvas Wrapping: To prevent fireflies from leaving the canvas, we use conditional statements to wrap them around when they reach the canvas boundaries.

What I like about it:

• • Realistic Behavior: The combination of flashing patterns, dynamic movement, and interactive control creates a realistic and captivating simulation of firefly behavior.
  • Interactivity: The ability to influence the fireflies’ behavior with the mouse adds an element of interactivity, making it both visually appealing and engaging for users.
  • Exploration: Users can experiment with different mouse movements and observe how the fireflies respond, making each interaction a unique experience.

Difficult code:

The most challenging part was trying to make the mouse pointer repel the fireflies within a specific range, but I managed to do it below by reversing the unit vector of the fireflies pointing towards the mouse pointer.

let desired = p5.Vector.sub(target, this.position);
    let d = desired.mag();
    if (d < 50) {
      desired.setMag(this.maxSpeed);
      desired.mult(-1);
      let steer = p5.Vector.sub(desired, this.velocity);
      steer.limit(this.maxForce);
      this.applyForce(steer);
    }

 

So for this week’s assignment I worked on 2 separate p5.js sketches. The first sketch is a progression on some of the generative code I created in class (sketch linked below).

https://editor.p5js.org/as13805/sketches/4bYDgmVvu

In the above sketch I built off of the randomness concepts we learnt in class to govern the movement of the walker’s in accordance to Perlin noise. In doing so, it provided smooth transitions between each new step the walker took. I also used the x and y coordinate values of the walker to control the dimensions of the walker (ellipse) and using the Perlin noise values of variable v to control the shade of the walker.

————————————————————

My second work (main assignment) is my attempt at creating a walker than follows Levy flight.

To my understanding, Levy Flight is a random walk where most often the walker takes many small steps in a small area but sometimes takes a much larger step of varying distance. Similar to how some animals forage for food, where they sniff continuously around one area and then suddenly move a long distance away to sniff a different area. They repeat this until satiated. Below are images of the phenomena from Wikipedia that I used to try to recreate.

In my p5.js sketch I also controlled the color of the walker using the randomness of the walker.

Below is the link to my p5.js sketch and the corresponding code.

https://editor.p5js.org/as13805/sketches/PVIa9w0zN

let chance = random(100);
  if (chance<2){
    direction.mult(random(25,100));
  }else{
    direction.setMag(4);
    stroke(this.pos.x,map(this.pos.y,0,600,0,255),chance);
  }

The code snippet above controls the randomness of the walker its erratic jumps. I believe this is the main part of my code.

Challenges:

I wanted to make a bigger spectacle using the perlin noise in this code but I did not know how to add it in time. Hopefully, if I start working on my next project earlier, I can take bigger creative decisions to make the code standout out more.

Inspiration:

I learnt a lot from this youtube video

The first chapter of “The Computational Beauty of Nature” serves as the cornerstone for delving into the realm of computational aesthetics. It lays down the fundamental concepts, highlighting the crucial role of mathematics in our comprehension of natural beauty. Additionally, it underscores the multidisciplinary character inherent in this field, where mathematics, computer science, and other disciplines converge.

In this chapter, the notion of algorithmic information theory is introduced as a powerful framework for grasping the patterns found in the natural world. It posits that these patterns can be succinctly encapsulated by algorithms, offering a means to measure their complexity. This concept, in turn, has profound implications for our perception and quantification of beauty within our surroundings.

However, it’s important to note that this approach has its own set of challenges. The computation of algorithmic complexity for extensive datasets or intricate systems can often become intractable, hampering its applicability in real-world scenarios that demand efficient and scalable methods. Furthermore, AIT has faced criticism for its limited empirical validation in practical situations.

Despite its theoretical elegance, AIT’s capacity to provide precise predictions and elucidate intricate natural phenomena remains a subject of ongoing exploration. Its interdisciplinary nature, while advantageous in its breadth, can also present difficulties in achieving deep specialization in specific domains.