Midterm Project Progress

Concept:

As I was brainstorming what kind of generative art I wanted to portray, I thought of these few images/visuals that gave a more futuristic vibe while also playing around with the lines, waves, etc.:

 

link 1link 2, link 3, link 4, link 5

I have always been a space fan, so I decided that I wanted my concept to be futuristic, bright pop of colors, etc., but I also wanted to portray the space in a more creative way. However, I wanted to incorporate some creativity into my project rather than simply recreating the space, so I wanted to add a person/person’s body part so that it shows our connection to the universe. This led me to think of two hands controlling the galaxy/planets inside the palms of the person’s hands, so I came up with the following sketch:

But as for the coding aspect, I decided to use the following skills we learned in class, such as:

  1. using perlin noise to create the surface of the planets as well as the background
  2. particle systems to make “ripples” of stars that are placed around the planets/hands that will scatter into the universe in a ripple pattern
  3. oscillation for the smaller stars/planets that will rotate around the set of hands as well as “shooting stars”

As much as it took for me to decide on a concept, once I had a vision of what I wanted to code, I was ready to move forward as quick as possible.

Design/Progress of my Code:

<Flow Field>

First, I created the flow field background so that it’ll signify the movement of the river/water, which I did so after reviewing how to create flow fields with perlin noise by watching this video.

A specific aspect that I am proud of was the “const num = ” part, because as simple as this is, I couldn’t figure out how to reduce the number of particle strokes in the background.

let particles = [];
const num = 150;
const noiseScale = 0.01 / 2;

Another part that I adjusted a lot was the following code, because for some reason the code kept glitching and wasn’t showing me a consistent transparency of the strokes when they were cleared and redrawn on canvas.

stroke(255, 60); // adjust the last number for the transparency of the strokes
strokeWeight(7); // adjust the thickness of the strokes
clear();

As for the main code that draws the flow field, I used the following code:

for (let i = 0; i < num; i++) {
  let p = particles[i];
  point(p.x, p.y);
  let n = noise(
    p.x * noiseScale,
    p.y * noiseScale,
    frameCount * noiseScale * noiseScale
  );
  let a = TAU * n;
  p.x += cos(a);
  p.y += sin(a);
  if (!onScreen(p)) {
    p.x = random(width);
    p.y = random(height);
  }

First, I made a loop for the particles array that runs for ‘num’ times, and I also set the position and how I want to draw the particle points so that it creates a visible trail on canvas. Then I calculated the angle a for each particle’s movement using perlin noise, as well as setting the particles so that if they go off screen, they will be reset at a random location.

<Circle with Perlin Noise>

A highlight of my circle was the following code, which basically enabled me to draw the perlin noise pattern just INSIDE the circle only by checking if the pixel is inside the circle. I also adjusted the values inside the let gray = map(); part of the code to make it into my desired shade of gray.

// check if the pixel = inside the circle
if (d < radius) {
  // calculate Perlin noise value based on pixel's position
  let noiseValue = noise(x * 0.01, y * 0.01);

  // map the noise value to control the grayscale color
  let gray = map(noiseValue, 0, 0.2, 50, 120);

  stroke(gray); // stroke color
  point(x, y); // draw a pixel at calculated position
}

Finally, for both the circle and the background flow field, I used the following code to make it so that every time the user presses the screen with the mouse, the direction of the particles AND the perlin noise pattern in the circle will be randomly redirected/refreshed.

function mouseReleased() {
  noiseSeed(millis());
}

Here are a few different screenshots of my canvas so far:

And this is what I have so far:

Uncertain Element:

For the ripples, I watched this link 1 to see what kind of ripple effect I wanted to create, and decided that small particles expanding in circles will be suitable, for I really liked the examples we did with the particles system chapter. I haven’t had the time to work on the ripples yet, though, and it’s still yet to be decided.

I’d also like to experiment with the audio and how it can affect different elements in my canvas, which is a rather scary area because I’ve never tried anything like that before.

Future Directions:

I think I will continue experimenting with different skills such as oscillation, particles system, etc. that I wanted to initially add and see if I like any accidental steps that I discover along the way. I need to create more of the perlin noise patterned planets, and also adjust their sizes and the canvas first as well as importing the hands before moving onto the other elements.

Midterm Progress

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.

Midterm Project Concept – Nature

Concept:

For my midterm project, I will be producing NFT generative nature-related artwork. This involves acrylic-paint tinted landscapes, (potentially 3D) recursive components, sin-waves, and particles, with the user being able to customize them. Through a GUI, the user will be prompted to choose the season, the weather, the time, and the components. I was mainly inspired by the course’s name “decoding nature”, and instead of having infinitely running animations, static artwork would be more convenient.

Libraires and Algorithms:

For now, I’ll be using the following:
Acrylic paint
Perlin noise
Sin-wave
Three.js
Recursion
Particle system (attraction, repulsion)

Progress:
// Noise wave
beginShape();
for (let i = 0; i < width; i += 2) {
  vertex(i, baseline + offset + amplitude * noise(i * 0.01));
}
endShape();

View post on imgur.com

View post on imgur.com

View post on imgur.com

GUI:

The page will be divided into two sections divided as the following (75%-25%). The larger area will showcase the artwork whereas the smaller one will allow the user to play around with the settings (weather, time, recursive components, particles, perlin noise, waves, …)

Potential challenges:

Potential challenges could involve setting the right parameters for recursion to avoid a high computational power need. Finding the most optimal values for noise and particles could be tricky as well, but that could be solved through a trial-and-error process. As for adding a third dimension, it would be time-consuming for the short amount of time we have, but I’ll definitely try to implement a simpler version.

Midterm Progress #1 by Abdelrahman Mallasi

Concept and Design:

Through my midterm project, I aim to illustrate the catastrophic impacts of global warming and climate change visually, emphasizing the immediate need to address this challenge. My project aims to shows the contrast between a world where we act on climate change and one where we don’t. I envision a canvas split into two parts:

  1. The Tree: This side represents the vibrant life we’re accustomed to. As time progresses, the tree’s leaves gradually fade, losing their color. This change is symbolic of the gradual death of nature due to the neglect of environmental well-being.
  2. The Rising Tide: Here, a sea will be portrayed. As time passes, the water level subtly rises, reflecting the real threat of rising sea levels due to melting ice caps.

Designing the Code:

  1. Functions: Key functions will handle the color transitions of the tree leaves and the water’s incremental rise. The “lifetime” feature in p5.js will be used in simulating these changes over time, giving viewers a tangible sense of progression.
  2. Classes: I envision there to be at least two classes: ‘Tree’ and ‘Sea’ classes, which will encapsulate their properties and behaviors.
  3. Interactivity: To engage the viewers more deeply, I’m considering having the users press down the mouse in order for the changes to the Tree and Sea to occur – this would reflect the impact and responsibility humans hold when it comes to the crisis of climate change and global warming.

Challenges and Mitigating Risks:

Making the water rise in a way that looks realistic, rather than just moving a flat blue rectangle upward, can be tricky. I’m thinking of Investigating how using the noise() function in p5.js can give the water a more natural appearance.

Also, creating a seamless transition in the color of the tree leaves as they fade might be challenging. I started looking into p5.js’s lerpColor() function, which interpolates between two colors. I want to explore this function to find the most visually appealing transition.

Xiaozao #Midterm Project Proposal

Project Title: Moving Paintings

1. Inspiration

I was attracted by this image when reading the article “Particle animation and rendering using data parallel computation” by Karl Sims:

This vortex field (or swirling pattern) reminds me of Starry Night by Vincent van Gogh. He created a strong sense of motion, energy, and flux through the use of brushwork and colors.

Conveying Movement in Art: A Comprehensive Guide

There are many other examples that the static 2D paintings are trying to convey a sense of movement. I think it would be great if I could enhance this message to the audience by animating these drawings. Therefore, I decided to create a “moving” version of Starry Night for my midterm project using the flow field and the particle system.

2. Plan of Implementation

The vortex field is one of the sub-types of the flow field. All the flow fields have the same base logic, which is creating a grid of vectors that decides the velocity of the particles moving inside it. However, there are perlin noise flow fields, vortex flow fields, magnetic flow fields, and so on. I searched the Internet and found a simple way of creating this swirling effect.

Basically, you create a background image showing the distribution of the centers of vortices based on a 2D Perlin noise space. And then you calculate the “pressure differential” around every cell in the grid. That differential vector will point to the center of the vortex, creating an attraction effect to the particles. However, if you rotate every vector by 90 degrees, they will suddenly be turned to some force similar to the “tangential force”. This will magically turn the movement of the particles into a swirling pattern.

* The centripetal force and the tangential force

It is a brilliant idea and not hard to implement. And the challenge may be adding some aesthetic and creative aspects to my project.

Some ideas are:

    • Create the dying and respawn effect of the particles to make the moving painting more dynamic.
    • Explore other possible patterns of flow field. For example, how to achieve the effect of a river flow?
    • Allow user interaction. Users can create more “stars” and flowing directions in the painting through mouse interaction.

 

Sources of Inspiration and References:

 

Midterm progress – week 5

This week I spend most of my time looking for inspiration. I wasn’t particularly set on anything specific to work on or build. And in searching for unque projects online, regardless of whether they were made on p5.js or not, I felt they either, fell short of what I wanted, or where too ambitious to pursue in the timeframe we have.

Out of exhaustion, I reeled back to things from my childhood I vividly remember. Cartoons, parks, toys, video games. That was it. I want to recreate something from my childhood, specifally minecraft terrain. While I didn’t play it much myself, I used to watch countless hours of ‘Let’s plays’ content on youtube. I’d get completely invested in the world, stories and people.

Minecraft's world generation and monster spawns are changing completely |  PCGamesN

In p5.js I want to recreate the minecraft terrain that evolves with time. Like the everchanging world in real time, my world will also grow and shrink as the code keeps running. I want the user to be able to control the speed at which the terrain changes (by controlling time in this world). I also want to make different, worlds that the user can choose to run and control.

To make the terrain trasnformation as natural as possible, I will have to study erosion in the real world, and find out how to implement it in p5.js using perlin noise. If I have enough time, I also want to learn to make the transformations audio reaactive. I will need to familarize myself the sound libraries in order to do this.

I will learn terrain generation form the below video.

Week #4 Coding Assignment – Oscillation

(I couldn’t post this on time because I couldn’t log in to WordPress, thanks for understanding).

https://editor.p5js.org/oae233/sketches/dF00ekRNz

Concept / Idea

So for my original concept, I wanted to draw a circle with the beginShape() function, which I knew how to do, but then I wanted each point on the circle to oscillate between being at the center of the circle and being at the edge, and I wanted each point to be on a different phase/period. I also planned to introduce some random movement to the vertex separately so that the shape can transform and morph.

What I ended up with is basically a collection of semi-failed attempts at what i just described. Every time I would encounter something I found visually interesting, I’d play around with it until I was satisfied with it, then give the original plan another go.

Ultimately I wasn’t able to achieve what I wanted but I ended up with something that I felt was quite rewarding, a record of the process that continuously created appealing visuals.

Some Code:

beginShape();

  for (let x = 0; x <= TWO_PI; x += PI / 30) {

    vertex(R * cos(x), R * sin(x));

  }

  endShape();

 

This is the base code for every shape in my sketch. This code draws a circle with the radius of “R”. Using the “t” variable in a sine/cosine function [eg: sin(t/50], I am able to vary different attributes of the circle.

Future work:

For the future of this project, I’d like to add to a successful implementation of my original idea of the morphing shape. I also think it would be great to make a class out of the code block above, and just feed different values to different instances of that class to create all the varying shapes.

Coding Assignment Week #5 – Midterm Project Preperation

Inspiration:

Music Notes Photos, Download The BEST Free Music Notes Stock Photos & HD ImagesCrosley Cruiser Deluxe Vinyl Record Player - Audio Turntables - Walmart.comHow to use Enhance Recording in iOS 14 Voice Memos | AppleInsider

 

 

 

 

 

 

 

 

Music and musical notes have always been an interest of mine, and I am specifically intrigued by how different instruments, amplitudes, and volumes work together to make music. I started to think of how these ideas can be visualized through a program, and that when I thought of the audio-generated record player!

 

Concept:

The main idea of my code is using user’s audio input to instantiate objects these orbiting circles. 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. Ideally I plan to also allow the program to play different music/change colors and speeds based on the volume of the user’s audio. For instance: associating higher volumes to brighter colors (oranges, yellows, reds), more high pitched music(guitar, bass, drums), and increasing the speed of the particles, while associating lower volumes to more dull colors (blue, purple, green), more low pitched music(piano, violin, harp), and decreasing the speed of the particles,

Color Psychology: Does It Affect How You Feel?

Sketch:

Clap your hands, or make any noise to start the program.

Note: Make sure to allow access to mic when the pop-up appears

Challenges I may encounter:

Trying to integrate the microphone, and get volume is still really out of my comfort zone, but since the weight of this project is on creativity I am more eager to take the challenge. I feel like I may struggle to identify what volume exactly should be considered high/low pitch in order to make the program’s colors/speeds/audios transition. I think it might help for me to watch videos on youtube, I already began watching a few from the coding train which is how I made progress to the code above. I plan to watch more, and continue to keep making sample sketches.

javascript - Creating a Sound Wave using P5.js - Stack Overflow

 

Coding Assignment 4 – Network

Concept:

For this week’s assignment, I was inspired by the mystique of celestial bodies and quantum mechanics to create a network of dynamically connected particles gravitating around the mouse coordinates. It involves particle interaction, attraction, acceleration, and velocity. The number of particles starts low and gradually increases to reach 350, alongside their opacity and size. Upon mouse movement, the particles follow slowly the coordinates with some noise introduced implicitly.

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

Code Walkthrough:

Particle Class:

Constructor: each particle is initialized with a random position, velocity, and an initial distance vector.

Update(): It is responsible for updating the particle’s position based on its velocity and applying boundaries to ensure particles stay within the canvas. It also calculates the acceleration pointing towards the mouse cursor and adds it to the particle’s velocity, creating an attraction effect.

update() {
        if (this.position.x > width / 2 || this.position.x < -width / 2 || this.position.y > height / 2 || this.position.y < -height / 2) {
            this.position = createVector(random(-150, 150), random(-150, 150));
            this.velocity = createVector(random(-0.5, 1), random(-0.5, 1));
        }
        let m = createVector(mouseX - width/2, mouseY - height/2);
        let acceleration = p5.Vector.sub(m, this.position);

        acceleration.setMag(0.5);
        this.velocity.add(acceleration);
        this.position.add(this.velocity);
}

Display(): Mainly to display the particles. It calculates the distance vector to track proximity to other particles to later draw the connecting line.

As the network grows bigger, the transparency of the connecting line decreases. The particles – filled circles – are replaced with larger non-filled ellipses.

stroke(255, 0, 0, this.distance.x + this.distance.y);

Draw Function:

Translate(): translates the coordinate system to the center of the canvas to make it easier to work with particle positions.

To gradually create multiple instances of particles, I’m adding one particle at every iteration.

The line is drawn using the following:

for (i=0; i<particles.length; i++) {
        particles[i].display();
        for (j=0; j<particles.length; j++) {
            if (i!=j){
                if (particles[i].position.x <= particles[j].position.x + 28 && particles[i].position.x >= particles[j].position.x - 28) {
                    if (particles[i].position.y <= particles[j].position.y + 28 && particles[i].position.y >= particles[j].position.y - 28) {
                        stroke(255, 0, 0, particles[i].distance.x + particles[i].distance.y);
                        line(particles[i].position.x, particles[i].position.y, particles[j].position.x, particles[j].position.y);
                    }
                }
            }
        }
    }
Challenges:

One of the challenges that I have faced is certainly the computational power.  Having ore particles means needing more power and therefore sacrificing speed. Hence keeping the max to 350.

Improvements:

Repulsion force: Add repulsion forces alongside attraction
Wind force using mouse movement/click: Upon using the mouse, the particles will move away following the wind movement and power.