Physarum Polycephalum Pt.2

How do single cell organisms coordinate sophisticated behaviors?


Plan

 

p5 - Nutrient

//user can use mouse-click to place blue dots.
//yellow dot will build the optimized network connecting all blue dots

//define Slime array & network array
var nutrients = [];
function setup() {
  createCanvas(800, 800);
}

//place Nutrient when user press mouse
function mousePressed() {
 var n = new Nutrient(mouseX,mouseY,5);
  nutrients.push(n);
}

function draw() {
    background(220);
  
    // nutrients
    for (i=0; i<nutrients.length; i++) {
    nutrients[i].display();
    }
}

//Nutrient
function Nutrient (x,y,m) {
  
  //pos,vel,acc,mass (Just in case for later use)
  this.pos = createVector(x,y);
  this.vel = createVector(0,0);
  this.acc = createVector(0,0);
  this.mass = m;
  
  // color,shape of Nutrient
  this.display = function() {
  fill(0,0,255); 
  ellipse(this.pos.x,this.pos.y,this.mass,this.mass); 
  }
}
 
 

p5 - Mold (Random Walker)

//create Array of slimes
var slimes = []

function setup() {
  createCanvas(800, 800);

  background(220);
  for (let i = 0; i < 36; i++) {
    slimes[i] = new Slime(width / 2, height / 2, 0.5);
  }
  
  //make slimes to leave the trail
  for (let i = 0; i < 36; i++) {
    slimes[i].display();
  }
}

function draw() {
  for (let i = 0; i < 36; i++) {
    slimes[i].display();
    slimes[i].update();
  }
}

function Slime(x, y, m) {
  //set up pos,vel,acc,mass
  this.pos = createVector(x, y);
  this.vel = createVector(0, 0);
  this.acc = createVector(0, 0);
  this.mass = m;

  //display (color, ellipse)
  this.display = function() {
    noStroke();
    fill(0);
    ellipse(this.pos.x, this.pos.y, this.mass);
  }

  this.update = function() {
    this.vel.add(this.acc);
    this.pos.add(this.vel);
    this.acc.set(0, 0);

    //Movement of Slimes
    var movement = p5.Vector.random2D();
    movement.mult(1.2);
    this.pos.add(movement);
  }
}
 

Simulation project

The Starry Night

Painting by Vincent van Gogh

Painting by Vincent van Gogh

 
6137D565-E4F7-438E-8FD4-14894C5EB698-8201-00001259C0B8E3E0.JPG

SIMULATION PROJECT

HOW WOULD I EXPRESS WIND FORCE COLLISION?

p5 editor

To begin with, I searched about Aerodynamic Force and Fluid Dynamics. But there were too many equations and laws involved.

Instead of using equations and laws of physics that I never knew and don’t understand to express nature ,

I decided to experiment and simulate it with my knowledge first.

Flow around a wing.gif
By Thierry Dugnolle - Own work, CC0, Link

 

Idea sketch

IMG_0337.PNG

Simulation Room

In order to simulate aerodynamics, I designed this room.

 
Screen Shot 2020-03-24 at 3.52.16 AM 2.JPG

WIND

Trying to draw out wind Vector

IMG_0344.PNG
 

Random walk & Vector

We learned about random walks for the first class of the Nature of Code. I wanted to create a 3D animatic nature scene using Random Walk. I wanted to depict the movement of the insects (ants, bees).

In order to do that, I created a 3D perspective scene using photoshop and PNG images. so that I can move insects into and out of the screen. However, I couldn’t find how to move my object in and out of the screen so I just focused on the 2D plane for today. Since I started programming with laying out images, movement and dynamics were not strong enough. I will limit my visual presentation next time and focus on movement and interesting shapes and patterns that movement makes.

https://editor.p5js.org/kevinhb92/sketches/M8WL3StC

Final proposal

Project Idea: A.I. eyeball (VIDEO about eyeball)

 

Idea Sketch (Inspiration VIDEO)

Screen Shot 2019-12-04 at 3.24.04 PM.png

Parts of the Eye

The human eye is like a camera:

Iris- like the diaphragm of a camera it controls the amount of light entering. It is the coloured part of the eye and opens and closes around a central hole to control the light entering the eye.

Pupil- this is the hole in the iris. It is like the aperture in a camera which is where the light enters.

Cornea and Lens- these cause light to converge creating a sharp image. The cornea is a transparent bulge on top of the pupil that focuses light. Light is refracted more through the cornea than the lens.

Light sensitive cells- these cells act like film in a camera, they “store” the image.

Retina- converts light signals into electrical signals that will travel to the brain.

Optic Nerve- used to transmit the signals from the retina to the brain.

IMG_1404.jpg

Sound

Launchpad with Javascript

I set out to create a practical and realistic musical launchpad that I could use effectively. My goal was to have a device that was not only functional but also labeled in a way that would make it easy to navigate and adjust the code and sound files as needed.

In order to demonstrate that the machine worked, I spent a considerable amount of time carefully selecting sounds that fit my personal style. I then played these sounds on a DJ mixer (XDJ-RX2) and adjusted the BPM to 125 before recording and exporting the final product. To create a seamless loop, I cut out two bars of music and used Javascript to loop the sound. For one-shot sounds like the Kick and Hi-hat, I manually adjusted the loop rate to match the BPM of the other sounds. Since each sound had a different length, I had to use my ears to make sure that everything matched up correctly.

I'm pleased with the final product and I hope you enjoy it as much as I do!

 

Load Sound

 

Buttons A1 - F6 (1~36)

 

Kick & Hi-Hat (Hand tuned and adjusted rate to match bpm)

 

Music

Screen Shot 2019-11-20 at 2.24.20 PM.png
 

Sample Video

Pixel

p5 editor: Interactive Visualizer


Recently, I became interested in exploring the capabilities of 'TouchDesigner'. I wanted to create a visualizer that featured geometric shapes and lines, and as I delved deeper into the software's capabilities, I became fascinated with the beauty of repetitive and reflected visuals. While playing around with the camera and pixel, I realized that the shape of the hand could evoke unique emotions. Conductors of symphony orchestras deliver their very detailed interpretation with their hand gestures, and this inspired me to create a visualizer that users can control with their hands.

HOW TO USE

  • Now, I invite you to become the conductor of my visualizer!

  • Adjust the brightness of the visualizer to your liking using the slider on the bottom.

  • Use your left hand to guide the visualizer according to the music. (Right-handed users can use the mouse to interact with the visualizer)

  • Click the mouse (left-click) in time with the beat of the music.

  • Try experimenting with different hand gestures, including rock, scissors, and paper.

  • Bring your hand closer to the camera during climactic moments in the music.

I intentionally designed the visualizer to react to the left hand (left side of the camera) so that users can use the mouse with their right hand. This allows for a more immersive experience as users can engage with the visualizer using both hands.

Music can enhance the visualizer, while the experience you get from the visualizer can enhance your engagement with the music, including its interpretation, rhythm, and emotion.

I hope you enjoy using my visualizer!

p5 editor: Interactive Visualizer

Computational Media to me

Week 1:

As someone trained in both art/design and computational media, I've learned to see the world from both macro and micro perspectives. Art and design have taught me to observe and break down the world from a larger scale (100 to 1), while computational media has taught me to build and create from the smallest units (1 to 100). In today's world, the fields of engineering, arts, design, and technology are all interconnected, and I am proud to contribute to the diverse range of human development that arises from these interrelationships.

Week 7:

As I sat down to eat dinner one day, I began to reflect on the nature of everyday activities. Eating, for example, involves many different variables such as seeing, smelling, moving our arms, chewing, tasting, and digesting. We often overlook the complexity of these everyday actions and take them for granted, which can cause us to miss out on important aspects of our lives such as our individuality, sense, emotion, and ability to discern and remember.

It's important to remember that computation is also a human creation, and that computers reflect the opinions, culture, customs, and ideas of those who programmed them. As coding becomes more prevalent in our lives, it is crucial that we acknowledge and appreciate the important role that coders and programmers play in shaping our future world.

As an artist

I believe that knowing how to code allows me to not only see the world from a smaller unit perspective but also to change the world in a fundamental way. Art is an integral part of our daily lives, and I am constantly amazed by its ubiquitous presence in everything from street signs to the design of doorknobs. As a designer and artist, I want to inspire people to appreciate and love the world around them and to take the time to see the beauty in even the smallest details.

For me, computation is a powerful tool that allows me to bring my artistic visions to life and create a world that is accessible to everyone, not just programmers and coders. I believe that the world can be great, but it is up to us to create that greatness.