A concept that I’ve been thinking of is experimenting with fractals. An immediate idea that came into my mind was creating Korean traditional pattern designs using the concept of fractals, such as these:

This idea was specifically inspired by the professor’s demonstration of “building” or “growing” a tree with a mouse click during our latest lecture, and I thought I could implement the same logic using these patterns. I’ve always had a deep interest in the Korean traditional art and promoting about it, so this topic in particular intrigued me.

I was thinking of ways to make this more interactive and “complicated,” and I thought of using music as an additional element to do so — by having the screen show a person playing the gayageum, which is a Korean traditional instrument, the user can interact with the screen by pressing keys on the keyboard, which will generate different sounds as well as different patterns at the click.

For example, I’d have the key “ENTER” set as a key that plays the note “re” and builds/completes a pattern once it is pressed a certain number of times.

As the final result, I’m imagining something like this, where patterns will be drawn at different parts of the canvas with different keys playing notes:

This is a rough concept I have for now, but I’m sure it’s subjected to change as I brainstorm over the break!

First Choice: Chaos in nature
Inspiration:


https://www.google.com/search?q=chaos+behaviour+in+nature&sca_esv=586549689&tbm=vid&source=lnms&sa=X&ved=2ahUKEwiwudv_kOuCAxWDaUEAHUlFDYsQ_AUoAnoECAEQBA&biw=1440&bih=737&dpr=2#fpstate=ive&vld=cid:b7cc7a50,vid:r_5shyQGIeA,st:0
Implementation plan:
1.Uncover the plan for chaos behavior
2.Try to make variance on chaotic behavior.

Concept:
Chaos behavior refers to the phenomenon observed in certain deterministic systems where even small variations in initial conditions can lead to vastly different outcomes over time. It emerges from non-linear dynamical systems, often characterized by simple rules or equations but exhibiting highly complex and seemingly random behavior. Within chaotic systems, there is a sensitive dependence on initial conditions, known as the “butterfly effect,” where a small change in the starting parameters can result in significant differences in the system’s evolution. Despite being deterministic and governed by precise mathematical rules, chaotic systems appear unpredictable and exhibit a lack of long-term predictability due to their extreme sensitivity to initial states. Chaotic behavior is often visualized through patterns like strange attractors, bifurcation diagrams, or fractals, showcasing intricate structures arising from deterministic chaos. This concept has applications across various fields, including physics, biology, economics, and even the behavior of complex systems like weather patterns or financial markets.

Second Choice: Supermassive black hole
Concept:
The motion of objects around a black hole can be described mathematically using Einstein’s theory of General Relativity. One of the key concepts related to black hole motion is the behavior of objects in the vicinity of the black hole within what is known as the event horizon.

The mathematics behind black hole motion involves understanding the geometry of spacetime as described by Einstein’s field equations. These equations relate the curvature of spacetime to the distribution of matter and energy within it.
The motion of objects around a black hole can involve various phenomena, such as orbits around the black hole, accretion disks formed by matter spiraling into the black hole, and gravitational lensing effects caused by the bending of light around the black hole.

Describing the precise mathematical motion of objects near a black hole requires solving Einstein’s equations, which can be complex and involve differential geometry. Numerical simulations and mathematical models based on these equations are used to understand and predict the behavior of objects around black holes.
Inspiration:
https://www.google.com/search?q=super+massive+black+hole+coding&sca_esv=586549689&tbm=vid&source=lnms&sa=X&ved=2ahUKEwigv-jfk-uCAxW_lP0HHegQDj4Q_AUoAnoECAEQBA#fpstate=ive&vld=cid:26179adf,vid:Iaz9TqYWUmA,st:0
Concept:
Implementation plan:
1.Uncover the simulation of blackhole
2.try to multiply the black hole and sea the variation in patterns
3.Make a painting using the code and touch interation made by player.
4.Do music interaction on the work.
5. Try to interpret the logic behind to viewers

A combination idea: paint your chaos with blackholes
Integrating chaos theory with the concept of black holes to create a visualization of chaos near black holes involves combining mathematical models representing chaotic behavior with the gravitational effects described by General Relativity. While creating a direct visualization of chaos near black holes might be challenging due to the complexity of both chaotic systems and black hole physics, you can develop a conceptual representation or simulation by following these steps:

Choose a Chaotic System: Select a simple chaotic system, like the logistic map or the Lorenz system, and simulate its behavior. Use mathematical equations representing chaos to generate data points or trajectories that showcase chaotic behavior.

Understand Black Hole Physics: Study the basic concepts of black holes in General Relativity, focusing on the Schwarzschild metric or other relevant metrics describing the geometry of spacetime around black holes. Understand how gravity affects the motion of objects and distorts spacetime.

Combine Models: Conceptually integrate the chaotic system’s behavior into the gravitational field of a black hole. You might represent this by considering trajectories or orbits influenced by both chaotic behavior and the gravitational pull of the black hole.

Develop a Visualization: Use a programming language or software that allows for 3D visualizations and simulations. You can use libraries like Three.js or WebGL for web-based visualizations or programming languages like Python with libraries such as Matplotlib or Mayavi for 3D visualizations.

Simulate and Render: Create a simulation where objects (representing the chaotic system) move or follow trajectories influenced by chaotic behavior while being affected by the gravitational field of the black hole. Visualize these trajectories, their interactions, and the distortion of space caused by the black hole’s gravity.

Add Contextual Elements: Include visual cues such as distortion of light paths, gravitational lensing effects, or the visualization of an accretion disk around the black hole to enhance the realism of the simulation.

Iterate and Refine: Adjust parameters, refine your simulation, and test different scenarios to create a compelling visualization that showcases chaotic behavior in the presence of a black hole’s gravitational field.

Concept:

I first wanted to do some research about the varying art pieces that I could generate using the cellular automata concept, and amongst the ones that popped up in my browser, I really liked how the pyramid ones were encompassing both creativity and simplicity; from a glance they seem like they are all similar, but once you take a closer look you realize that they are more different than you think. The general ones looked like these, which is from this link:

However, to me, these “cells” reminded me of the pixelated screens of the earlier televisions from the 1900s, like the one shown in the image below from this link:

Therefore, I decided to combine them so that I have a moving, colored pyramid pattern. I also referred to this video from the Coding Train before jumping into the assignment.

Process/Highlight: 

To make it interactive, I thought that it’d be fun if the user can actually modify the code sketch themselves by either subtracting/adding the colored cells onto the canvas with a mouse click.

To implement this function, I used the below snippet of code, which I consider as the highlight of my code:

function mousePressed() {
  // Toggle the state of the clicked cell
  let clickedCellX = floor(mouseX / cellSize);
  let clickedCellY = floor(mouseY / cellSize);

  if (clickedCellX >= 0 && clickedCellX < cells.length && clickedCellY >= 0 && clickedCellY < generations) {
    cells[clickedCellX][clickedCellY] = 1 - cells[clickedCellX][clickedCellY];
  }
}

I also experimented with different sizes of the cell and the canvas size, as attached below:

this was when cellSize = 3  this was when cellSize = 10

Although my initial vision was closest to the visuals of when the cellSize was set to 3, I wanted the users to interact with the cells by clicking on them to make them disappear/appear, and because I thought that might be harder to do when the cells were too tiny, I changed them to size 7 so that it’s still small enough to give that television’s pixelated screen effect but also big enough to be clicked on easily.

Final Sketch:

(Click on the canvas once and then you should be able to add/remove the cells from the canvas!)

Reflection:

It was really fun to use my own project to generate different patterns within the pyramid to give variations, and I attached a heart sketch I’ve made by clicking continuously on the canvas below:

This was a really fun project, and I think I might want to explore with this a bit more, whether it be my final project or on my own!

Embodying Nature

Concept:

Similar patterns have been found in animal bodies, plants, and even landscapes. This shows us that maybe things in nature share the same basic algorithm to form their body, including the humans. However, with the development of technology, we think that we have control over other beings and nature, and begin to forget that nature’s wisdom is inherent in our own bodies all the time.

I plan to visually explore patterns found in nature and overlay them to the viewer’s figure in the computer through their webcam. Through this project, I aim to promote awareness of our interconnectedness with nature and other living beings. While humans have developed great abilities, we remain part of the natural world that we evolved from. We should respect and learn from nature rather than try to exploit it.

Inspirations:

Implementation plan:

1. Uncover the logic under different animal/plant patterns.
2. Create unique patterns based on those logics.
3. Be able to capture the viewer’s silhouette through the webcam.
4. Overlay the patterns onto the viewer’s silhouette.

Key phrases:

• Turing’s patterns
• Voronoi cells
• Colonization
• Activator and Inhibitor

 

Inspiration

I wanted to do something based off the climate change crisis. I want to simulate an environment that has many natural movements, weather its the ocean, birds moving together, rainfall, or fires.

I want the user’s body and movements to be detectable and have certain actions be correlated with a certain natural movement. I can use ml5.js and Posenet to track body movements.

The following links show the videos or references I am going to use for my final.

https://editor.p5js.org/jgl/sketches/XMy0GHKDIS

 

Decay

Link to sketch: https://editor.p5js.org/Xiaozao/sketches/SZ2gVL7sW

How to interact: Press the mouse to refill. Press again to decay.

After learning 1D and 2D cellular automata, I decided to create a “3D” one. However, it isn’t the real 3D using webGL, but instead showing the 3D space through a 2D perspective. I created a 3D array with x,y, and z-axis. But the z-axis is shown as “layers” and each layer is translucent, meaning that the state of cells on every layer will be stacked together to affect the overall opacity of the cell.

for (let n = 0; n < layers; n++) {
    board = create2DArray(columns, rows);
    for (let i = 1; i < columns - 1; i++) {
      for (let j = 1; j < rows - 1; j++) {
        board[i][j] = new Cell(floor(random(2)), i * scale, j * scale, scale);
      }
    }
    // console.log(board)
    boards.push(board);

 

The principle of the 3D cellular automata is similar to the 1D and 2D one. Regarding the rules or algorithms, I drew inspiration from this article, which implemented lots of interesting rules in the 3D world. https://softologyblog.wordpress.com/2019/12/28/3d-cellular-automata-3/

I modified the rules a bit. Also, I added a mouse interaction that refills the cells with another rule.

for (let z = 1; z < layers - 1; z++) {
    for (let x = 1; x < columns - 1; x++) {
      for (let y = 1; y < rows - 1; y++) {
        let neighbors = 0;
        for (let k = -1; k <= 1; k++) {
          for (let i = -1; i <= 1; i++) {
            for (let j = -1; j <= 1; j++) {
              //Use the previous state when counting neighbors
              neighbors += boards[z + k][x + i][y + j].previous;
            }
          }
        }

        neighbors -= boards[z][x][y].previous;

        // desicion
        if (growing_state == -1) {
          if (neighbors >= 13 && neighbors <= 22) {
            boards[z][x][y].state = 1;
          } else {
            boards[z][x][y].state = 0;
          }
        } else {
          if (neighbors >= 6 && neighbors <= 7) {
            boards[z][x][y].state = 1;
          } else if (boards[z][x][y].state == 1) {
            boards[z][x][y].state = 1;
          } else {
            boards[z][x][y].state = 0;
          }
        }

 

For my final project, I want to further develop my flocking system project. I was very happy with the output of that project and want to take it another step forward. Below are some pictures from that sketch:

It would be interesting to see what other designs can be created with a similar concept. Currently, I have 2-25 circles of random sizes placed on the canvas. The flocking simulation tries to either avoid or get attracted to these circles. What I am thinking right now is that I will have the users place the objects, and they may not only be circles, but other shapes too like star, square, triangle, hexagon and so on. I will integrate matter.js for this. I will also give my users a slider to change the size of the object and also the option to either attract towards or repel away from these objects. My current design thinking is the following:

I will also provide a menu in the beginning explaining how the users can interact with the project. This is not fully developed of course, but is just an initial idea:

INSPIRATION

My inspiration for this week’s assignment came from the Coding Train example of the ripple effect and actual ripple patterns not only in nature, but mandala art, rangoli, symmetric designs, etc.

PROCESS & FAILED ATTEMPTS

Concept:

In order to define fire suppression tactics and design fire risk management policies, it is important to simulate the propagation of wildfires. In my final project, I’ll be using cellular automata to model the spread of wind-driven fire across a grid-based terrain, demonstrating the dynamics of wildfires and exploring different scenarios and factors affecting their spread.

Users will be able to set the initial conditions (i.e. density of vegetation, ignition point), adjust parameters (i.e. wind speed, humidity), pause, and reset the simulation.

Initial sketches:

View post on imgur.com

View post on imgur.com

Papers to be used:

https://www.fs.usda.gov/rm/pubs_int/int_rp115.pdf

Methodology:

• Research the propagation of fire: The case study will be the 2012 severe wildfire that took place in Algarve, Portugal, where 25 thousand hectares burned. It is interesting because it had an explosive stage between 25 and 30h after the onset.
• Define initial states of land: vegetation type and density.

Vegetation type propagation probability:
– No vegetation: -1
– Cultivated: -0.4
– Forests: 0.4
– Shrub: 0.4

Vegetation density propagation probability:
– No vegetation: -1
– Sparse: -0.3
– Normal: 0
– Dense: 0.3

• Implement rules governing the spread of fire: Fuel, topography, wind, and humidity.
  – R1: A cell that can’t be burned stays the same
  – R2: A cell that is burning down at present time will be completely burned in the next iteration.
  – R3: A burned cell can’t be burned again.
  – R4: If a cell is burned, and its neighbors contain vegetation fue, the fire can then propagate with a given probability (factors).

The probability will be defined as follows:

P_burn = P0(1+P_veg)(1+P_den)PwPs

P0: ignition point (user interaction)
P_veg: vegetation type
P_den: vegetation density
Ps: topography
Pw: wind speed and direction

The probability of the wind is:

Pw = exp[V(C1 + C2 (cos(o)-1))]

with C1 and C2 are adjustable coefficients
V is the wind speed
O is the angle between the wind direction and the fire propagation (if aligned, Pw increases)

The probability of the terrain is:

Ps = exp(a.o)

with a: adjustable coefficient
o: the slope angle of the terrain

Os = atan[(E1 – E2)/D]

with E: elevation of the cell
D: the size of the square cell if adjacent or sqrt(2*cellSize) if diagonal

Challenges:

Make it as realistic as possible.

Inspiration: 

For this weeks coding assignment, we had to work with the concept of cellular automata to develop dynamic and aesthetically interesting patterns. One thing I find interesting about most patterns developed by cellular automata is that the clusters of objects instantiated always somewhat resemble cells or bee hives or really just any cluster that occurs in a pattern that we see in nature . So for this program, I thought of how I can give this pattern movement, which is why I integrated randomness with color and also added perlin noise.

Progress: 

To better understand the concept I first went over the code demonstrations, and I took inspiration from the Nonrectangular Grids as they resemble a bee hive pattern.

First thing I experimented with is the trig functions, because I remember that with my midterm project that one component that made the most significant and drastic changed was trigonometery and switching around the functions and working with 1/trig functions and more. So that is what I had done above

Added color randomness

For final touches, I used the Perlin noise function to generate smooth variations in the positions.

Final Program:

Ideas for Final Project:

• Human Body Interaction
• Sensor tape (Borrow from art center)
• Seeking/fleeing from  Multiple Targets(Targets being the specific sensors on the sensor tape)

Fleeing/Seeking Objects with Fractal Patterns:

• Fractal patterns with integration of trig