Midterm progress 2 – week 6

I began working on creating a dynamic, 3D terrain that continuously morphs over time. I used WebGL for 3D rendering.

let terrain;
let cols, rows;
let w = 20;
let flying = 0;

function setup() {
  createCanvas(windowWidth, windowHeight, WEBGL);
  cols = floor(width / w);
  rows = floor(height / w);
  terrain = new Terrain(cols, rows);

  // Set the camera position and orientation
  let camX = width / 2;
  let camY = height / 2; // Adjust this value for the desired side view
  let camZ = (height / 2) / tan(PI / 6); // Adjust this value for the desired zoom
  camera(camX, camY, camZ, 0, 0, 0, 0, 1, 0);
}

function draw() {
  background(0);

  // Center the sketch on the canvas
  translate(-width / 2, -height / 2);

  terrain.update();
  terrain.display();
  flying -= 0.05;
}

class Terrain {
  constructor(cols, rows) {
    this.cols = cols;
    this.rows = rows;
    this.w = w;
    this.terrain = [];
  }

  update() {
    let yoff = flying;
    for (let y = 0; y < this.rows; y++) {
      let xoff = 0;
      this.terrain[y] = [];
      for (let x = 0; x < this.cols; x++) {
        this.terrain[y][x] = map(noise(xoff, yoff), 0, 1, -100, 100);
        xoff += 0.2;
      }
      yoff += 0.2;
    }
  }

  display() {
    stroke(255);
    noFill();

    for (let y = 0; y < this.rows - 1; y++) {
      beginShape(TRIANGLE_STRIP);
      for (let x = 0; x < this.cols; x++) {
        vertex(x * this.w, y * this.w, this.terrain[y][x]);
        vertex(x * this.w, (y + 1) * this.w, this.terrain[y + 1][x]);
      }
      endShape();
    }
  }
}

 

The Terrain class is the core of our terrain generation. It contains methods for updating and displaying the terrain. I want to work on making it aesthetic itself more blocky, since my inspiration for this project is minecraft and I want to replicate its look. I also want to change the colors of the lines depending on their depth, so I can represent land and water.

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!

Midterm – Weather Forecast

Proposal

For my midterm project, I want to try and imitate the weather forecast patterns that I would see as a child whenever I watched the news. I was raised in the UK so I primarily saw the weather in the UK but for my midterm, I want to include the countries that mean a lot to me and are different geographically compared to the UK which is an Island. I want to include the UAE as I study there and it is a coastal country, and Afghanistan as it is my home country but also a landlocked country. I think it would be nice to see how different environmental factors looks in these 3 countries as they are geographically different.

Underneath are some images of the news I would see for the UK and I have included some videos to show the kind of image I want to imitate.

Examples:

 

UAE  / Gulf Afghanistan / Central Asia UK

https://earth.nullschool.net/#2023/10/07/0500Z/wind/surface/level/orthographic=52.96,24.02,4583/loc=8.186,48.160

Concerns

Some aspects of this code that I am worried about it working with real life data and having the code perform for a certain amount of time to show the real-time wind. I think it will also be hard to locate my invisible attractors and with the outline of the countries, know where to locate these invisible attractors.

Line animation

I want to work on having the lines go towards invisible attractors or repel against them. I started off with having a blue background and the lines to imitate the wind to come out of the origin and have the lines be longer. This was just my starting point and I want to add a lifespan for these lines and have them concentrated next to each other. I also wanted to make sure the lines were using the Vector subclass from p5 so I used inheritance.

Now I want to add another attribute that will count as the lines lifetime so that they disappear over time and get popped from the array using splice. I have temporarily made the background black so I can see the white line disappear into the background.

I was looking at different ways to have the white lines be blended into the blue background and found the lerpColour function that did the job for me. I now want to add a single attractor so that my lines can move towards the attractor. Note: I am temporarily having all the code in the sketch.js file to makes it easier for me to create multiple copies of my code for documentation purposes.

I also wanted to add a single attractor for now just so that I can see what the repel/ attraction would look like. I used the class Attractor from class and modified my Particle class for them to work well together whilst also extending on the p5.js folder. After playing around with the coordinates of the attractor, I ended up with the following effect which I really liked. I also made my canvas size 600 by 600 to see the effect better.

Screen Recording 2023-10-07 at 15.51.39

I moved the attractor around and played with the G values and positioning of the lines to be off the canvas so it seems more naturual when it comes and I got this effect.

I also need repelling points so I will create an identical class but with a negative G value and I tried to see what it would look like and I really liked the look.  I am likely to put these around the borders of the countries.

I will now try to find an image of the UK which is just the outline and have the waves be repelled against the borders. I found an image and tried to have some grids placed 20 pixels away from each other to try and see where I would want these attractors and repellers.

let spacing = 20;

  // Draw vertical grid lines
  for (let x = 0; x <= width; x += spacing) {
    line(x, 0, x, height);
  }

  // Draw horizontal grid lines
  for (let y = 0; y <= height; y += spacing) {
    line(0, y, width, y);}

I get the following image so now it is easier for me to see where I need to place my attractors and repellers. I am also going to duplicate my attractor class to create my repeller class. I also need to change the back ground colour or the ocean parts to be green to show a smooth distinction between the mainland and sea – this also includes any major lakes or bodies of water on the mainland.

To do list

  • have the colour of the water be green/blue – different
  • figure out the location of the attractors/ repellers
  • have the wind waves be generated throughout the screen
  • have the waves through the land go slower

With one attractor and repeller, this is what it currently looks like.

The pink is for the repeller and the green for the attractor.

Some sketches

 

Second Major Update

So after discussing other methods that I could use to try and create the effect I want,  a classmate Xiaozao recommended at looking a force field approach to show a slower, curved and more natural effect. The video underneath is the video that helped me understand how vector fields worked in p5.js and how I can use them effectively to give the effect I wanted.

I firstly needed to find a way to create the vector field and luckily the video Xiaozao recommended was a great place to start.  From what I had learnt, I know that I needed to have a second ‘background’ and have my centres of attraction generated randomly. We can use Perlin noise to have these randomly generated and also the curl value can really make a difference.

If this value is 1 or above, we will get the following images.

And of its less than 1 and significantly small, we get the following which is a strong attraction and the effect I wanted.

function curl(x, y) {
  const EPSILON = 0.0000001;
  let n1 = noise(x + EPSILON, y);
  let n2 = noise(x - EPSILON, y);
  let cx = (n1 - n2) / (0.9 * EPSILON);

  n1 = noise(x, y + EPSILON);
  n2 = noise(x, y - EPSILON);
  let cy = (n1 - n2) / (0.9 * EPSILON);

  return { x: cy, y: -cx };
}

Next thing I decided was to have some image or outline of the UK but trying to get these particular pixels was far too much of a hassle and would end up overcomplicating my code. Instead I decided to have the UK outline drawn out myself into 2 regions and used an image of the UK outline and a grid system to navigate myself to have these points placed.

I also made sure these 2 shapes were saved so I can reference to thew pixels inside those regions.

let region1 = [];
let region2 = [];
function createShape1() {
  // Define the first region shape using curveVertex points
  region1.push({ x: 60, y: 380 });
  region1.push({ x: 200, y: 300 });
  region1.push({ x: 260, y: 360 });
  region1.push({ x: 220, y: 540 });
  region1.push({ x: 80, y: 580 });
  region1.push({ x: 40, y: 540 });
  region1.push({ x: 20, y: 520 });
  region1.push({ x: 100, y: 460 });
}

function createShape2() {
  // Define the second region shape using curveVertex points
  region2.push({ x: 300, y: 80 });
  region2.push({ x: 380, y: 70 });
  region2.push({ x: 320, y: 140 });
  region2.push({ x: 440, y: 160 });
  region2.push({ x: 360, y: 260 });
  region2.push({ x: 550, y: 480 });
  region2.push({ x: 540, y: 640 });
  region2.push({ x: 220, y: 700 });
  region2.push({ x: 360, y: 600 });
  region2.push({ x: 260, y: 560 });
  region2.push({ x: 300, y: 460 });
  region2.push({ x: 380, y: 400 });
  region2.push({ x: 280, y: 300 });
  region2.push({ x: 220, y: 160 });
}

I wanted to find a way to locate the pixels in these regions as I know I will need to make use of them in the future but as of now, this was my sketch.

INSERT

Plotting

So the next step I took was the plotting and I know I needed to simplify my code to make sure a plot was possible so I implemented a transparent background so that the particles paths were opaque and visible. I also made the background white and had the particles change colour instead, blue if in water and green for land.

I firstly used the following function to check whetehr to not the particle was in the land regions.

function pointInShape(point, shape) {
  // Check if a point is inside a shape defined by an array of vertices
  let oddNodes = false;
  let x = point.x;
  let y = point.y;

  for (let i = 0, j = shape.length - 1; i < shape.length; j = i++) {
    let xi = shape[i].x;
    let yi = shape[i].y;
    let xj = shape[j].x;
    let yj = shape[j].y;

    if ((yi < y && yj >= y) || (yj < y && yi >= y)) {
      if (xi + ((y - yi) / (yj - yi)) * (xj - xi) < x) {
        oddNodes = !oddNodes;
      }
    }
  }

  return oddNodes;
}

This way each individual pixel is checked and can change colour depending on the region. This is what my sketck ended up looking like for my SGV.

While plotting, I realised how much more dimension I wanted and I was able to edit by my SGV on Inkspace and have certain particles removed and have the colour changed. For example, some particles on the green region, I wanted white strokes to represent wind and on the ocean, pastel blue strokes to represent wind and waves.

These are some images and videos of my final plot.

GH010650

Aftermath of Plotting

After seeing the additional dimension given in my plot, I wanted to add the same into my final sketch and I made use of the check in region function again and altered the sketch colour accordingly.

// Check if the particle is inside either of the regions
    let inRegion1 = pointInShape(p.pos, region1);
    let inRegion2 = pointInShape(p.pos, region2);
    
    if (inRegion1 || inRegion2) {
      // stroke(255); // White line
      stroke(110, 245, 137);
    } else {
      stroke(8, 196, 252);
      // stroke(139, 222, 247); // Pastel blue color
    }
    
    point(p.pos.x, p.pos.y);
  }

A final touch I added was some sound representing the wind and I though it went nicely with the movement of the particles and gave it that final missing touch.

Future Changes

Next time, I would like to have my other countries included. I realised through my project that I would not be able to show the other countries as well as they are not islands. I would also like to make this model in 3D so it is like the website example I was provided with. I also realised after time, the particles would almost disappear, I liked it initially but I wish they would regain speed after some time.

Midterm Progress #2: The Rising Tide of Change by Abdelrahman Mallasi

Concept:

In today’s age, climate change remains one of our most pressing concerns, and our role as humans in this issue is undeniable. This generative art project aims to convey this message, highlighting our influence on our environment.

The dynamic waves in the visualization, expanding outwards when the mouse is pressed, are symbolic of the rising sea levels. At the heart of the piece lies a yellow circle – the sun, representing hope and the promise of a new day. Placing the sun in the center implies that despite the dangers and challenges, there’s a core of hope and a chance for a new beginning. This balances the alarming nature of the design with optimism.

The colors of the waves transition from blue to green to brown, encompassing the elements of water, vegetation, and the desert, paying homage to the UAE’s natural landscapes as it hosts the 2023 COP convention. COP – or Conference of Parties- is an annual global conference under the United Nations that brings together nations to discuss and advance international responses to climate change.

The waves do not move in a smooth, organized, calm manner. Instead, they are overlapping, some have bigger amplitudes than others and their speed increases over time. This creates a chaotic motion, representing the uncertain and messy reality of climate change.

In my opinion, the most important aspect of this piece is its interactivity. The fact that the user, through their control of the mouse, directly influences the expansion of the waves and the size of the sun highlights the significant role humans play in the climate crisis. Whether we’re causing the sea levels to rise or projecting more hope for the future, the power is quite literally in our hands. This concept is further reinforced with the text embedded within the sketch “The future is in your hands”, emphasizing that every action counts.

The design of this project was partly inspired by this animation by @mr_praline on Instagram.

Embedded Code

 

Future Direction:

1) I want to enhance the immersive experience by integrating sound – maybe a gentle lapping of waves or the whistles of wind.
2) I want the piece to reinforce its homage to the UAE. An idea is to outline UAE landmarks at the bottom of the sketch, perhaps the Burj Khalifa.
3) Emphasize the desert more by creating sand particles being blown off the dunes, maybe through the emitters we learned in Particle Systems
4) Add a drag force to the waves to represent water undercurrents
5) Maybe introduce aquatic creatures as random walkers

Midterm project Progress: Image generative art

Table of Contents

  1. Introduction
    • 1.1 Project Overview
    • 1.2 Objective
    • 1.3 Creative Approach
  2. Getting Started
    • 2.1 Setting Up p5.js
    • 2.2 Importing the Image
    • 2.3 Initializing the Random Walkers
  3. The Generative Process
    • 3.1 Pixel Color Averaging
    • 3.2 Random Walkers
    • 3.3 Real-time Drawing Effect
  4. Enhancing Creativity
    • 4.1 Adjusting Walker Behavior
    • 4.2 Modifying Averaging Techniques
    • 4.3 Experimenting with Color
  5. Conclusion
    • 5.1 Final Artwork
    • 5.2 Future Improvements
    • 5.3 Acknowledgments

1. Introduction

1.1 Project Overview

This documentation explores a creative generative art project developed using p5.js. The project involves generating unique and visually appealing artwork based on a given input image. The art is created by employing a combination of random walkers that traverse the canvas, averaging pixel colors, and providing a real-time drawing effect.

1.2 Objective

The primary objective of this project is to harness the potential of generative algorithms to transform an input image into a distinctive and visually intriguing artwork. By utilizing random walkers and pixel color averaging, this project aims to offer a creative and dynamic approach to image interpretation.

1.3 Creative Approach

The project’s creativity lies in its unique amalgamation of pixel color manipulation and random walker behavior. Instead of a straightforward one-to-one mapping of image pixels, the art is generated by iteratively averaging the colors of neighboring pixels. Additionally, the art’s dynamism is achieved through the use of random walkers that contribute to the image in real-time, giving it a captivating and evolving appearance.

2. Getting Started

2.1 Setting Up p5.js

To begin, ensure you have p5.js set up in your development environment. You can download the p5.js library from the official website (https://p5js.org/). Follow the installation instructions provided on the website.

2.2 Importing the Image

Start by importing the image you wish to transform creatively into your p5.js sketch. You can use the loadImage() function to load the image and display it on the canvas.

2.3 Initializing the Random Walkers

Create random walkers that will move across the canvas. Each walker’s behavior and appearance can be customized according to your creative vision. Initialize these walkers with random starting positions and directions.

3. The Generative Process

3.1 Pixel Color Averaging

The core of this project’s creativity lies in pixel color averaging. Instead of mapping image pixel colors one-to-one, calculate the average color of a pixel’s neighborhood (e.g., a 3×3 or 5×5 grid of surrounding pixels). This technique introduces a smoothing effect and adds uniqueness to the generated artwork.

3.2 Random Walkers

The random walkers contribute to the creative process by traversing the canvas and drawing pixel colors. Customize the walker’s step size, direction changes, and color selection. The random nature of the walkers ensures that each run generates a distinct artwork.

3.3 Real-time Drawing Effect

The magic happens when the walkers contribute to the drawing of the image in real-time. As walkers move across the canvas, they apply the averaged colors to the corresponding pixel locations. This real-time interaction creates an intriguing and dynamic visual effect as if the image is being drawn before your eyes.

4. Enhancing Creativity

4.1 Adjusting Walker Behavior

Experiment with different walker behaviors to achieve a variety of artistic effects. You can control parameters such as step size, direction changes, and the duration of each walker’s journey.

4.2 Modifying Averaging Techniques

Tweak the pixel color averaging technique by adjusting the size and shape of the pixel neighborhood used for averaging. Experimenting with different neighborhood sizes and shapes can yield diverse visual outcomes.

4.3 Experimenting with Color

Explore the creative potential of color by experimenting with different color schemes, blending modes, or even introducing random variations in color selection for each walker. This allows for further artistic expression.

5. Conclusion

5.1 Final Artwork

Upon completing your generative art project, you will have a unique and visually captivating piece of artwork that creatively transforms the input image.

5.2 Future Improvements

Consider future enhancements, such as optimizing performance, adding interactivity, or integrating additional creative elements into your project.

5.3 Acknowledgments

Give credit to any resources, libraries, or individuals who have inspired or contributed to your project. Acknowledging your sources is essential in the world of creative coding.

In summary, this documentation provides a comprehensive overview of the generative art project created using p5.js. By creatively combining random walkers, pixel color averaging, and real-time drawing, you can produce dynamic and visually appealing artworks that showcase the power of generative algorithms in the world of art and creativity.

 

Coding Assignment Week #4 – Hypnosis

INSPIRATION & CONCEPT

My inspiration for this week’s assignment was the artist we looked at in class last week – Memo Akten. His work, The Awesome Machinery of Nature, was quite fascinating. I wanted to create a similar effect to that with circles coming out of a circle and colliding and creating a ripple effect. Since the motion was periodic (with some variation) I thought of modelling it with functions of sin and cosine for this week’s SHM project. Let’s see how that went.

MY PROCESS

I started with first trying to align all dots in a circles and alter their individual movements by changing their radius in a periodic motion modelled by sin and cosine. There are the first few attempts looked like this:

By playing around with the period, phase difference, and timeOffset parameters, I saw interesting patterns:

Half a wave with so much as corners:

2 breathing circle and semicircle patterns with only one wave! Not two!!

In the above one, It looks like the semicircles are in a relay race, passing the baton.

Playing around with the parameters of this, I got something more interesting:

More intricate:

Yes, I kind of branched out way too much here and lost focus of what I started with. But before I redirected my focus into creating something similar to Memo Akten’s work, I wanted to try one more thing. Trying to create a standing wave. What we practiced in class, looked like a sin wave going sideways, I did not want that, but rather the particles to oscillate in the same place – I kind of said the same thing didn’t I? Yes, but visually it looks different. For example:

Here is a bouncing sin wave appearing to move towards the left:

But now, below is the same sin wave but bouncing in its position (notice the leftmost point does not move / stays in its place – called a node in physics):

Now combining all of this, I set out to create an SHM hypnosis like artwork for this week’s coding assignment. Below are the various iterations and versions of it:

By playing around with the wavelength and phase difference, I got this illusion of the full disk/plate moving.

By employing prime numbers like 23, 41, 43 (in order for below sketches), I got this breathing kind of illusion – but fragmented, instead of a full circle.

By adding multiple sin waves (superposition of waves), I was able to make this amoeba style effect.

TECHNICAL DESIGN AND CODE

So the main piece of code that influences all of this is the following:

let y1 = (map(sin(angle+phaseDiff*i*wave2_offeset), -1, 1, radius-50, radius+50));
let y2 = (map(sin(angle+phaseDiff*i*wave2_offeset), -1, 1, radius-50, radius+50));

let y = (y1 + y2)/2; // to not have the amplitude v high - scaling it down
    
let x = map(i, 0, num, 0, TWO_PI);
    
stroke(255);
line(0, 0, y*cos(x*offset), y*sin(x*offset)); // draw the circles in circlular fashion instead of linear
    
fill(red, g, b);
circle(x*offset, y, radius*2); // draw the actual circles
    
let r = map(sin(angle+phaseDiff*i), -1, 1, 5, 15); // radius of outer circle varies slightly each loop -> to create breathing effect

// update angle

I have 2 sin waves superimposed which gives this jelly-like effect of the moving circles (in contrast to the first example which was achieved solely by one sin wave). Then the key is the wave_offset and the particle offset which create the phase difference and the periodic motion between the particles. changing the position of the offset in the equation also changes the appearance from bring a standing wave to a moving wave.

The various parameters used above are initialised are such:

let offset = 4; // try n = 21, 23, 41, 43, 27, 10, 2, 1
let angle = 0;
let num, period, phaseDiff;
let radius = 100, t= 0;
let wave2_offeset;

function setup() {
  createCanvas(400, 400);
  num = width/offset;
  // radius = offset/2;
  period = num/2;
  phaseDiff = TWO_PI/period;
  wave2_offeset = PI; // try option PI/2, 2, 5 etc.
}

By playing around with the above parameter values, we get varied results as shown above.

FURTHER DEVELOPMENTS

I believe this design and idea has a lot of potential. I could make a couple of such circles to look like fireworks. Or develop it sequentially to do tasks one after the other. Or make it oscillate based on sound. Many aesthetic and conceptual things might be achieve with this preliminary idea.

Midterm Project Progress 1 – Week 5

Creating an Underwater Immersive Experience

Concept:

For my midterm project I plan on creating a design that reflects life under water and produces abstract shapes that mimic the possible look and movement nature of unknown species. I aim to create a visually pleasing design that combines gradients of color with constantly evolving floating shapes to showcase the beauty while also sparking curiosity about what lies under the surface of the ocean. To further amplify the experience I plan on adding sound effects or music tracks that would allow for the design to be more immersive.

Process:

I began researching and attempting certain approaches to achieve my intended goal:

My first step was to look into how I could create the shapes that look like underwater species. For that I had to put in mind the gravity force that affects the species underwater, and the need to achieve a floating/ undulating movement effect on the shapes. Similar to what I had done in my last assignment, I could possibly create that through using Perlin noise to affect the position of the shapes over time. Perlin noise could also be introduced when creating the lines that formulate my shape. In doing so, I will be able to achieve a smooth moving surface for the creatures. Another thing I am looking into is introducing noise into the RGB values to have a smooth change of color over time.

However, I am still unsure of how I could be creating shapes that are constantly evolving while still looking like underwater creatures. I thought of starting off with a circle of lines. These line could be randomized in amount and position using noise. From there I’ll be able to create a floating circle-like shape. But when it comes to having this shape change I will have to introduce some mathematics into the structure of the circle itself. I looked through some tutorials, and one that inspired is below. It shows how to create a constantly looping circle that is in the shape of a mathematical cardioid shape.

I am still learning more about how to apply this to my shapes, perhaps by creating different anchor points to the lines other than just the center of the circle I could get somewhere. Once I am able to create these evolving shapes I plan on putting them into a class to play with the frequency and number of which they appear on screen. I also am hoping to include forces of attraction/ repulsion between the shapes and add introduce acceleration like we did with the movers to make an even more realistic underwater environment.

One other thing I hope to apply is have the background look like its a water rather than just blank. When searching into that I found that patterned surfaces like rough floors could be achieved through what is called Worley noise, similar in its use but different in its outcome than Perlin noise. Below is the video I began exploring and hopefully relying on that and other tutorials ill be able to achieve the desired effect.

Midterm Progress

 

Concept:

The design of this dynamic artpiece stems from a mixture of blackholes, and mandalas. Mandalas are intricate geometric designs that radiate out from a central point. In many cultures, they’re used for spiritual symbols, meditation aids, or just as beautiful artworks. With multiple layers composed of points connected in circular patterns, they echo the repetitive yet diverse nature of the universe. The simulation employs a rotational dynamic, making the mandalas rotate around their center. This movement, combined with the random trajectories of the particles, offers a visually entrancing experience.

 

Sketch:

Code:

  calculateLayerRadius(layerIndex) {
    return this.radius * ((layerIndex + 1) / this.numLayers);
  }

  calculateNumPoints(layerIndex) {
    return int(map(layerIndex, 0, this.numLayers - 1, 2, 12));
  }

  calculateLayerSpacing() {
    return map(sin(frameCount/10) * 0.05, -1, 1, 5, 30);
  }

  calculateLayerColor(layerIndex) {
    return map(layerIndex, 0, this.numLayers - 1, 100, 255);
  }
}
  1. calculateLayerRadius(layerIndex):
    Gives the size for each layer. Inner layers are smaller, and it grows as we move out.
  2. calculateNumPoints(layerIndex):
    Decides the number of points for each layer. Inner layers have fewer points, and outer layers have more.
  3. calculateLayerSpacing():
    Sets the space between layers. It changes over time to make the mandala look animated.
  4. calculateLayerColor(layerIndex):
    Assigns a color to each layer. Inner layers are a bit darker, and it gets lighter as we go out.

These functions help design and animate the mandala’s layers.

 

Expected Challenges:

Performance Balancing:

Merging mandalas and a particle system presented optimization challenges. Ensuring smooth animations while maintaining rich details required thoughtful code structuring.

Adding particles:

Add some sort of particle system to enhance the viewing experience.

 

Future Improvements:

Interactivity:

Incorporating possible interactive elements can elevate user engagement. Such 

Incorporate Sound:

Add a soundtrack to enhance the experience

 

 

 

 

 

 

Midterm preparation

Concept:

For my midterm project I want to create an artificial particle life simulation. I want to create a system that functions on its own, has different components that interact and react to each other, kind of like in a cell. Each category of particles would have different features and functions within the system. I would attempt to make it appear as organic and as “alive” as possible. I want to design the artificial life based on some rules, however, I would prefer to prioritize aesthetics and the feeling that the system portrays in my design. Here is the inspiration:

Code:

For the code, I want to utilize the different functions inside the mover class to create the different particle groups. The sketch illustrates what I am starting with.  I will want to assign different behaviors (such as breathing of the bigger particles) and movement to different categories. I am also using the different forces we learned to make the movement more natural.

Complex parts:

The more challenging parts will be the different behaviours. For instance, I want to simulate emergence and create grouping behavior between the small particles. I would also like to explore the idea of creating some kind of structure from those groups and simulate an organism that develops new behaviors.