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. According to NASA, sea level rise is mainly due to two factors related to global warming: from “melting ice sheets and glaciers, and the expansion of seawater as it warms.” The rise in sea levels is at an unprecedented scale. According to Climate.org, the average sea level has risen 8–9 inches since 1880, and it has more than doubled from 0.06 inches  per year throughout the previous century to 0.14 inches per year only from 2006–2015. Rising sea levels can damage important local structures like roads, bridges, and power plants.  Almost everything, from transportation to waste management, is at risk due to higher sea levels.

SATELLITE DATA: 1993-PRESENT
Data source: Satellite sea level observations.
Credit: NASA’s Goddard Space Flight Center

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 utilizes oscillations and creates a chaotic motion, representing the uncertain reality of climate change. Each time the sketch runs, the radius and the number of waves change. This variability represents the unpredictable and changing nature of our environment, highlighting that the state of our climate constantly evolves and adapts. I’ve also added a drag force to the wave to create a realistic undercurrent force.

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

Link to Sketch

Pen Plotter

Highlight of Code

function setup() {
 ....
  // Define the start and end colors for the waves.
  let colorStart = color("#38A7DD");
  let colorEnd = color("#745807");

  // Loop to create individual wave objects and push them to the waves array.
  for (let i = 0; i < numWaves; i++) {
    // Get a value between 0 and 1, mapping the current wave number i
    let lerpAmt = map(i, 0, numWaves, 0, 1);

    // Interpolate between the start and end colors based on the mapped value.
    let waveColor = lerpColor(colorStart, colorEnd, lerpAmt);

    waves.push(new Wave(i,centerRadius + i * 5, i % 2 === 0 ? 0.01 : -0.01, i / 10, waveColor));
  }
}

I like how I used the lerpColor function to create a nice gradient between the colors of the waves. At first I defined a starting color and an ending color, then mapped the value of i (number of wave in the iteration which maps between 0 and total number of waves) to map between 0 and 1 and used that value in the lerpColor function.

I’m also proud of how I used the parameters of the wave function, especially the second and third parameters:

– centerRadius + i * 5: this sets the radius of the wave being slightly bigger than the previous one by an increment of 5 units.

– i % 2 === 0 ? 0.01 : -0.01: this is equivalent to the statement (if i %2===0, return 0.01, if not return -0.01). It checks if i is even or odd. Even values result in a direction of 0.01 and odd values give -0.01, ensuring alternating directions for waves.

Progress, Mess-Ups, and Challenges

In the first iterations of this project, the waves had a more uniform, predictable and smoother motion, with no sense of randomness. Since then, I’ve introduced an element of randomness and a more chaotic movement and a drag force, all to mimic the reality of climate change. Below is how it looked before.

I tried to make the sun and waves shrink id the mouse is released but it didn’t work out. I tried different versions but they all seemed to fail and I’m not sure how to fix it. The sketch below demonstrates the issue.

Manipulating and keeping track of all the different parameters in order to make the sketch’s animation flow seamlessly was one of the most challenging and confusing parts of this project.

Future Ideas

• It could be cool if the waves and sun had a breathing effect
• Introduce aquatic creatures as random walkers
• I wanted 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.
• Emphasize the desert more by creating sand particles being blown off the dunes, maybe through the emitters we learned in Particle Systems

References

NASA article: https://climate.nasa.gov/vital-signs/sea-level/#:~:text=Global%20sea%20levels%20are%20rising,of%20seawater%20as%20it%20warms.

Climate.org: https://www.climate.gov/news-features/understanding-climate/climate-change-global-sea-level#:~:text=Global%20average%20sea%20level%20has,4%20inches)%20above%201993%20levels.

Concept:

My midterm project consists of a landscape NFT collection as a combination of my interest in cryptography and generative art. It uses different mathematical and artistic concepts to produce unique nature-related artwork. Through a GUI, the user can specify the style (acrylic, japanese, animated…) and generate their own NFT. As for choosing nature as a theme, I was inspired by the course’s name “decoding nature”.

Librairies/Algorithms:

TweakPane
Perlin Noise
Sin-Wave
Particle System
Recursion
Granulation
Linear Interpolation

Code: https://editor.p5js.org/bdr/sketches/qhH_1I3FP

Progress:

View post on imgur.com

View post on imgur.com

Code Walkthrough (Special Functions):

Vintage effect:
In order to get an ancient style, I’m using noise as a primary way to simulate the imperfections and irregularities alongside the random function. To generate the dots in the corner, I’m using the following:

function displayNoise(){
    strokeWeight(0.5);
    for(let dx = 0; dx < width; dx += random(1, 3)) {
        for(let dy = 0; dy < height; dy += random(1, 3)) {
        	let pointX = dx * noise(dy/10);
            let pointY = dy * noise(dx/10);
            if (get(pointX, pointY)[0]==241) {
                stroke(darkColor);
            } else {
                stroke(lightColor);
            }
        	point(pointX, pointY);
        }
    }
}

Mountains:
To create hand-drawn mountain contours, I’m using sin-waves relying on vertices, noise, and random functions. To get varying amplitudes I’m using the following:

let a = random(-width/2, width/2);
let b = random(-width/2, width/2);
let c = random(2, 4);
let d = random(40, 50);
let e = random(-width/2, width/2);

for (let x = 0; x < width; x ++){          
  	let y = currY[j];
  	y += 10*j*sin(2*dx/j + a);
  	y += c*j*sin(5*dx/j + b);
  	y += d*j*noise(1.2*dx/j +e);
  	y += 1.7*j*noise(10*dx);
    dx+=0.02;
    mountains.push({x,y})
}

As for the vertices and to be able to close the shape in order to be able to fill it later on, I’m using:

beginShape();
vertex(0, height);
for (let i = 0; i < mountains.length; i++) {
    stroke(darkColor);
    vertex(mountains[i].x, mountains[i].y);
}
vertex(width, height);
endShape(CLOSE);

Matrix Japanese Text:
The Japanese text represents different nature and life related quotes that are displayed vertically in a Matrix style. I’m thinking of animating it later.

["風流韻事" // Appreciating nature through elegant pursuits such as poetry, calligraphy and painting
,"柳は緑花は紅" // Willows are green, flowers are crimson; natural state, unspoiled by human touch, nature is beautiful, all things have different natures or characteristics.
,"花鳥風月" // The beauties of nature. 
,"旅はまだ途中だぞ" // Our adventure is not done yet
,"前向きにね" // Stay positive
,"雨降って地固まる" // After rain, comes fair weather
,"苦あれば楽あり" // There are hardships and also there are pleasures
,"初心忘るべからず" // Should not forget our original intention
,"浮世憂き世" // Floating world
,"自分の生きる人生を愛せ" // Love the life you are living
,"行雲流水" // Flow as the clouds and water
,"人生は夢だらけ" // Life is full of dreams
,"春になると森は青々としてくるです" // In spring, the forest becomes lush
,"今日の夕焼けはとてもきれいです" // Today's sky is nice and red
,"生き甲斐" // Realisation of what one expects and hopes for in life
];

Gradient:
To get a smooth gradient, I’m using the mathematical concept: linear interpolation. It constructs new data points within the range of a given discrete set data points which are in our case colors.

function applyGradient(x, y, w, h, color1, color2) {
   noFill();
   for (let i = y; i <= y + h; i++) {
      let mid = map(i, y, y + h, 0, 1);
      let clr = lerpColor(color1, color2, mid);
      stroke(clr);
      line(x, i, x + w, i);
   }
}

Granulation and Blur:
To do that, I looped over the canvas pixels and shifted some of them randomly. To further fuzzify the artwork, I rounded the pixels after moving them as well and getting their density.

function granulateFuzzify(amount) {
    loadPixels();
    let d = pixelDensity();
    let fuzzyPixels = 2;
    let modC = 4 * fuzzyPixels;
    let modW = 4 * width * d;
    let pixelsCount = modW * (height * d);
    for (let i = 0; i < pixelsCount; i += 4) {
        let f = modC + modW;
    		if (pixels[i+f]) {
            pixels[i] = round((pixels[i] + pixels[i+f])/2);
    			  pixels[i+1] = round((pixels[i+1] + pixels[i+f+1])/2);
    			  pixels[i+2] = round((pixels[i+2] + pixels[i+f+2])/2);
    		}
        pixels[i] = pixels[i] + random(-amount, amount);
        pixels[i+1] = pixels[i+1] + random(-amount, amount);
        pixels[i+2] = pixels[i+2] + random(-amount, amount);
    }
    updatePixels();
}

Stars Particle System:
To get a stars system, I had a separate class named Star and created new instances using a for loop.

class Star {
  constructor(x, y) {
    this.xPos = x;
    this.yPos = y;
  }

  draw() {
    let randSize = random(3);
    fill(255, 255, 255, random(0, 200));
    ellipse(this.xPos, this.yPos, randSize, randSize);
  }
}

function makeStars(numStars) {
  if (starCount < numStars) {
    let s = new Star(int(random(width)), int(random(height / 1.8)));
    s.draw();
  }
  starCount++;
}

Challenges:

One of the challenges I have faced is certainly setting the right parameters for the waves to get a somewhat hand-drawn but still realistic set of mountains. It took a lot of experimentation, trial and errors to finally find the right combination. Similarly, for the gradient to be smooth and match all the components of the artwork, I had to find the right settings for the linear interpolation.

Next Steps:

Animation: animate the canvas/artwork, most probably a 3D effect.

To begin working on my project I started off with a plan of what creatures I want to include in my underwater simulation. I decided on four creatures that belong to relatively different species: Starfish, Seahorses, Jellyfish, and Octopi.

My approach was to begin first by sketching out the shapes on the p5js canvas using the beginShape() and endShape() functions. I started off with the starfish which I sketched initially using polar coordinates of a circle. I introduced an inner radius, and outer radius, then had the ‘cos’ and ‘sin’ waves impact the angles of the coordinates of the curves that are drawn based on the two different radii. Putting all this in a loop that ran for a full circle ’TWO_PI’, and incremented its loops at a rate ‘PI/2.5’ I was able to achieve a star looking shape with 5 points.

  for (let angle = 0; angle <= TWO_PI; angle += PI/2.5) 
{
  let x = centerX + radius * cos(angle);
  let y = centerY + radius * sin(angle);
  curveVertex(x, y);
  let x2 = (centerX) + radius2 * cos(angle + HALF_PI / 2.5);
  let y2 = (centerY) + radius2 * sin(angle + HALF_PI / 2.5);
  curveVertex(x2, y2);
}
   endShape(CLOSE);
}

Moving on from there I began introducing noise to all the elements of the star, from its colors to its coordinates. I then also added the incremented I value at the beginning of the draw function to create the animated effect on the star.

let i = 0;
function draw()
{
  i++;
  let radius = 200 * noise(i / 300) + 100;
  let radius2 = 100 * noise(i / 150) + 50;
  let centerX = width / 2;
  let centerY = height / 2;
  translate(0, -40);
  for (let angle = 0; angle <= TWO_PI; angle += 100) 
  {
    background(0, 1);
    let noiseStrokeR = noise(angle);
    let noiseStrokeG = noise(i / 2);
    let noiseStrokeB = noise(angle, i / 2);
    stroke(
      Math.round(255 * noiseStrokeR + 10),
      Math.round(120 * noiseStrokeB + 40),
      Math.round(255 * noiseStrokeG),60
      );
      beginShape();
      fill(0,10)
      let noiseY = noise(radius / 1000) * 100;
      let noiseX = 20 - noise(angle, i / 2000) * 200;
    for (let angle = 0; angle <= TWO_PI; angle += PI/2.5) 
  {
    let x = centerX + radius * cos(angle);
    let y = centerY + radius * sin(angle) + (3.5 - noise((angle), i / 15) * 7);
    curveVertex(x + noiseX, y + noiseY);
    let x2 = (centerX) + radius2 * cos(angle + HALF_PI / 2.5);
    let y2 = (centerY) + radius2 * sin(angle + HALF_PI / 2.5);
    curveVertex(x2 + noiseX, y2 + noiseY);
  }
     endShape(CLOSE);
  }
}

For the trails left behind the star I worked with the alpha value of the stroke, and of the background that is drawn constantly through the draw() function.

Once I was somewhat satisfied with the look of the star I added it to a class so that I’d be able to introduce it at randomized amounts and positions on the canvas moving forward.

One thing I am also still working on as a development on the starFish class is introducing elements of motion to the object, so far I have added velocity, similar to how we’ve been doing so far with the movers, however I am yet to introduce an anti collision function to prevent my starfish from colliding.

class StarFish {
  constructor(x, y, dimensions, velocity) {
    this.i = 0;
    this.centerX = x;
    this.centerY = y;
    this.radius = dimensions;
    this.radius2 = dimensions / 2;
    this.velocity = velocity;
  }

  update(starFishes) {
    this.i++;
    this.radius = 200 * noise(this.i / 300) + 100;
    this.radius2 = 100 * noise(this.i / 150) + 50;
    this.centerX += this.velocity.x;
    this.centerY += this.velocity.y;

Another thing I want to develop on this class is have the movement appear a lot more organic, and perhaps have the stars rotate and not remain stable in angle to bring them to life. When noise was the only element effecting their animation they looked quite organic but they only seemed to vibrate in one position, that is why I felt the need to include motion, which, while allowing the star to move it seemed to give it a more unrealistic feel.

I believe that these issues could be resolved by adding forces working with acceleration and velocity at extremely low rates to mimic the movement of starfish.

My plan is to continue developing this class and then hopefully introducing its elements to the classes of the different creatures.

With the other three creatures, I have a plan on how I will execute them, in terms of sketching them, but so far, I only have the seahorse drawn using the beginShape() function. I have some concerns regarding how the seahorse is gonna come out, as well as the other creatures, mainly because I am not sure how much noise and to which parts of the drawing exactly could I include it. However, this of course will only be figured out with trial and error and trying different methods of approach just like I did with the starfish.

One other element I am hoping to be able to achieve but I am still unsure of how to execute is having the creatures morph or transform into one another. I don’t really have a plan of how to execute that but I am still looking into it.

During this process, I faced two main difficulties, first with the SVG file, which unfortunately I could not get no matter that different sketches I tried it with. I am not sure of whether the issue is in my methodology or my sketches themselves.

The second difficulty was in terms of the trail and the overall look of the star, I was hoping to draw it as a series of lines but I ended up with one continuous line. The reason I thought a series of line stemming from the center would work better is because I imagined a more organic look to appear through introducing noise to every single line. I wasn’t able to achieve that, unfortunately, however, I think what I have so far, for the star, looks relatively good.

Project title: Flowing Painting

The goal of my project is to create an animated version of the famous painting Starry Sky by Vincent van Gogh. These are the core logic of how I plan to achieve that:

As I mentioned last week, I found a way of creating the vortex movement pattern based on a 2D Perlin noise field. The logic is to generate a base image of the noise field, put it at the bottom of the canvas, and calculate the driving force using the “difference of pressure” around any pixel.

I tried with the vortex field and generated some images:

And then I tried with the 3d Perlin noise:

Eventually, I want to achieve two things:

The first one is to convert the painting Starry Sky into this kind of alpha terrain. The second is to allow users to build their own terrain (base image). I plan to work on this the next week! Here’s the plan:

Another thing that is important to animating the painting is to create “strokes” that look real, instead of the particles.

Here’s how I generate the strokes to make them more like the strokes in the painting:

Finalized Concept:

The main idea of my code is using user’s audio input to instantiate objects , which are these orbiting circles. Noise made by the user will instantiate objects of the particle class.  The more noise the user makes, the mic.getlevel function will record that volume, and objects of the particle class will be instantiated. Besides the particle system concept, I decided to also integrate the sin and cosine function that take in the angle as an input, which creates that curved path. The program to play different music/change colors and speeds based on the volume of the user’s audio. For instance: associating higher volumes, that is when mic.getlevel exceeds a certain threshold,  to brighter colors (oranges, yellows, reds), more high pitched music(guitar, bass, drums), and increasing the speed of the particles, while associating lower volumes ,that is when mic.getlevel is below a certain threshold,  to more dull colors (blue, purple, green), more low pitched music(piano, violin, harp), and decreasing the speed of the particles.

Progress from Last Week:

• Implemented the getVolume and Threshold
• Implemented the increase/descrease speed based on volume using map function
• Associated certain colors to volumes by restricting the randomness in RGB values
• Clearing/splicing elements from the particle system list when list gets too long
• Implemented a list that stores radii that have already been used so particles instantiated dont overlap

 

SVG files:

I am currently having trouble downloading the zip files on my laptop, I booked office hours and will try to get help from my peers to hopefully resolve this issue. I was facing issues with the download which is also why I was not able to submit this on time, sorry for the inconvenience.

Program:

 

 

 

Concept:

I decided to alter my initial idea due to some issues. In order to achieve the desired effect, I needed to have hundreds of particles, and because they had to be aware of each other and interact among themselves, that required a lot of iterations which turned out to be too heavy on p5js and resulted in a lot of lagging. Thus, I decided that I still want to explore particles, and have a theme of emergence but not in an artificial life way, but more in a creating a pattern way.

To achieve this concept, I wanted to allow the particles to move independently and only be attracted or repelled in random areas. For this reason, I decided to create magnet objects, that would have a power coefficient of either 1 or -1 and would thus either attract or repel the particles respectively.  With such design, I have a lot of opportunities for generative art and customization, since a lot of components can be either randomized or granted control over for the user.

Here is my current sketch:

Next steps:

This version looks optimal for the pen plotter, however I still need to fix my SVG files. Since my lines are a bunch of dots, I need to convert them into curves or otherwise this will take forever for the pen plotter to draw. Regarding my sketch, I need to implement the different modes. I am thinking of introducing simple UI to allow the user to adjust the number of magnets, particles and colors of the sketch. This way I would have a high number of combinations a user can achieve with only 5 sliders(one for magnets, one for particles and 3 for color: red, green and blue). Below are a few versions of my sketch I was able to achieve by altering these components.

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.

Taking feedback from the presentation in class last time, I worked on 2 ideas this week to develop my midterm project.

IDEA #1

So, Inspired by the logarithmic spiral I discussed in the last post, I sketched a design I wanted to try implementing with p5. The design (sort of inspired by hena designs and sort of by fountains) can be found below:

I wanted each of these spirals to emerge from the center in sequencial order to create a performance of sorts – like in fountain or light shows.

I started by implementing just one spiral. The equation for a logarithmic spiral in polar coordinates is given by (where theta varies over time):

r = a * e ^ (theta * sin(b))

It took some playing around with the values of a, b, e to get results that matched my design. This is how it looked:

Then I started adding more than one spiral. I ran into problems here because I was trying to use the same a, e, b values for both while each updated separately, so it gave runtime errors. I then switched to creating classes for each of the spirals so it could have its own data members which could be updated independent of others.

After iterating through many intermediate process designs, I finally reached the desired output, yayy!

Version 1:

Version 2:

Version 3:

All thought I love this pattern, it is not really generative art. The full design of the performance is clearly thought out and coded to pan out like this only always. So, I will have to see what to do with this further and where to take it.

It did try to give it a bit of autonomy by randomising the direction change:

IDEA #2

Besides the above logarithmic pattern idea, I also used the last week to further build on my other idea of spirographs and somehow fuse all the designs together. Inspired by the feedback I got in class, I thought of implementing user interactivity to change parameters of the formula which are rendering such varied designs as shows last time. My idea was that each time user clicks on the screen, the values are randomly generated, to give me new design, with a new color, drawn on top of the previous one, hoping to create even more unique and wonderful patterns.

However, unfortunately, it turned out to be a #completefail :(( These idea and the patterns thus generated look so bad. It completely takes away from the aesthetics of the design and just looks like chaos. It does not seemingly fuse the designs at all as I had imagined. I will have to think of something else to do with this or a more unique and interesting way to get all of this together.

Here are a few pictures of the output:

Here is the sketch:

GOING FORWARD

So, the first idea has to be rejected because even though I am using randomness, I do not think it qualifies as generative art. Though I had a lot of fun experimenting with it! 🙂

I will work on the second idea but will not combine different shapes to be generated over each other. I am thinking of having one design itself and experiment with the parameters in it and give the user the choice of clicking on the screen to generate a new design (after wiping out the previous one). I just have to work further on the code to generate designs that really resonate with me. The idea and works are still developing and I would like feedback on this in class to work further.

UPDATE

Yay! So, while working further on our midterms in class, I discovered / generated this design! I absolutely love it and want to go ahead with this / finalize this as my midterm submission and the pen plotter design.

I love ghe above design, the dots have a sort of mystical effect to it. However, we cannot plot a million dots on the plotter so I will be changing the dots to lines using the concept of storing the previous position (x, y) of the dot and drawing a line between the previous and the current position each frame. It’s interesting how just changing from dots to lines, the feel of the design changes – this one is not mystical, rather bolder, more architectural and defined. I love this too! 😀

I also got feedback from the professor on the idea of the mouse click, though not needed, but is good to implement to show variation and the different designs that can be created. So, I will be working further on that. I am not sure how to apply a function (say sin, or cos, or tan) randomly to a value without hardcoding it. That is what I am currently trying to figure out and let’s see how it goes!

Generative Artistry: Unveiling Creativity through Chaos

Concept

The project, “Generative Artistry,” aims to captivate and engage users by seamlessly transitioning from an interactive Pac-Man-inspired game to a mesmerizing display of generative art. This transition serves as a metaphor for the creative process itself, highlighting the unpredictable and varied approaches artists take to contribute to a shared vision.

Description

Part 1: The Pac-Man Game

Interactive Start

• The project begins with a red ball that can be controlled using arrow keys (up, down, left, and right).
• The player’s objective is to navigate the red ball to “eat” all the yellow balls, reminiscent of the classic Pac-Man game.

Chaos in Motion

• While the player maneuvers the red ball, a couple of yellow balls move randomly, adding an element of unpredictability and challenge to the game.
• The dynamic movement and contrasting colors draw players into the experience, encouraging them to participate.

Symbolic Disappearance

• Once the red ball successfully consumes all the yellow balls, the Pac-Man game vanishes from the screen.

Part 2: The Generative Art

The Unveiling

• After the Pac-Man game disappears, the screen transitions to a canvas where a multitude of small circle balls appear randomly.
• These circle balls move unpredictably across the canvas, creating a chaotic yet visually captivating display.

Divergent Colors and Movement

• As the circle balls move, they leave a trail behind them in various colors, producing an abstract and seemingly random composition.
• Each circle ball represents an “artist,” and their choice of colors and movements is distinct, mirroring the unique perspectives of real-world artists.

Emergence of Shared Art

• Over time, as the circle balls continue their movements and mark the canvas with diverse colors, the big picture gradually emerges.
• The seemingly disorganized chaos transforms into a cohesive and shared artwork.

Metaphor for Creativity

• The project symbolizes the creative process by showcasing how multiple “artists” (represented by the circle balls) contribute their individual perspectives to create a shared artistic vision.
• Just as in real life, each artist’s interpretation of the final artwork differs, resulting in a unique and collaborative piece that deviates from the original but retains its essence.

Unexpectedness and Revelation

• The project utilizes the element of surprise and gradual revelation, as players initially engage in a game without knowing its deeper artistic significance.
• Users only comprehend the full narrative and purpose when the big picture of the generative artwork becomes evident.

Techniques Used

• Randomness: Random movement patterns and colors are employed to simulate the unpredictable nature of artistic creativity.
• Metaphor: The transition from the game to generative art serves as a metaphor for the creative process, emphasizing the diversity of artistic approaches and outcomes.
• Progressive Revelation: Users gradually discover the project’s artistic depth as the generative artwork takes shape over time.
• Interactive Elements: User control of the red ball via arrow keys adds an interactive element, making the project engaging and inviting.

Visual Progress

Now finally the “artists” can draw something more realistic and creative as following:

Conclusion

“Generative Artistry” is not just a visually captivating project but also a thought-provoking exploration of the creative process. By seamlessly blending a playful game with generative art, it encourages users to reflect on the nature of art, collaboration, and the beauty that arises from chaos and diversity.

Concept:

I had decided to switch from my previous sketch as I felt having predefined shapes was too constraining and would not make it generative enough. However, I have still managed to keep it within the same topic as Mandalas. Instead of using predefined shapes, I decided to combine Perlin noise for the randomness and axes of symmetry to create interesting and unique patterns. By lowering the axes of symmetry to 6 or lower, the mandalas begin looking like flowers.

This gave me an idea for the final sketch of the project. I will be making flower objects the same as the below sketch, but spawning them on generated branches, which are also made using Perlin noise.

Sketch:

The current sketch is designed specifically for the pen plotter.

SVGs:

 

Pen plot:

Next Steps:

I still need to implement the different modes. I’m thinking of offering a simple UI for adjusting the number of axes of symmetry, offsets, and colors of the sketch. This way I would have a high number of combinations a user can achieve with a few sliders. 

• Develop the random branches that will hold the flowers
• Figure out which points the flowers will spawn on
• Add audio