For my nature of code final, I want to make pliable flow fields that a user can manipulate with their hands. My inspiration for this project comes from memories of building castles, moats and other structures out of sand at the beach. The ability to impose a directionality to water by shaping it’s surrounding path is something i’d like to replicate.

The tools I plan on using for this project are Processing, the Kinect, a projector and twenty-five pounds of white play sand. The idea is that the user will be able to manipulate the positioning of the desired velocity of a continuous flow of water by digging into a box of sand, moving the sand around and playfully seeing how the stream responds to their input. Ideally, the kinect will calculate the depth of the sand and wherever the user digs, the vector stream will elongate, broaden or change direction based on their choices. In essence, the vehicles comprising the stream  will perpetually impose a consistant flow from one edge of the sand to the other.

Dan’s flow field following examples are the foundation for this piece. While building my code around this, I casually browsed a few YouTube videos to see what kind of work had been done relevant to my idea. Turns out, I am not the first person to have connected these dots. Nevertheless, I intend to emphasize my own interpretation of these elements in my final project.

Amongst my various logistical concerns, one particular technical/conceptual challenge I am having is figuring out a way to transform the vehicles into something that actually resembles a flowing stream of water. Any insights for how to make this work would be most helpful!

Nature of Code, Flow Field-Final Project Initial Ideas from Colin Narver on Vimeo.

I am using dan’s flow field example (6_4) to test the progression of triangles moving around a flow field with two obstacles, determined by brightness, dictating their path. I am interested in potentially combining this with projection mapping/kinect onto an external texture or surface where the user could dictate the flow of vectors by the way they physically move, shape or build up the environment with their hands.

// Colin Narver (Flow Field Experiments)
// Flow Field Following
// Via Reynolds: http://www.red3d.com/cwr/steer/FlowFollow.html

//Maybe do projection mapping onto a box of sand?

// Using this variable to decide whether to draw all the stuff
boolean debug = true;

// Flowfield object
FlowField flowfield;
// An ArrayList of vehicles
ArrayList<Vehicle> vehicles;
PImage background;

void setup() {
  size(600, 450, P2D);
  background = loadImage("Nature_of_code_shapes.jpg");
  // Make a new flow field with "resolution" of 16

  flowfield = new FlowField(7);  //adjust this to affect resolution

  vehicles = new ArrayList<Vehicle>();
  // Make a whole bunch of vehicles with random maxspeed and maxforce values
  //for (int i = 0; i < 120; i++) {
    //vehicles.add(new Vehicle(new PVector(random(width), random(height)), random(2, 5), random(0.1, 0.5)));
  //}
}

void draw() {
  background(255);
  imageMode (CORNER);  
  image(background, 0, 0);
  // Display the flowfield in "debug" mode
  if (debug) flowfield.display();

  // flowfield.update(); for live data later (kinect)

  // Tell all the vehicles to follow the flow field
  for (Vehicle v : vehicles) {
    v.follow(flowfield);
    v.run();
  }

  // Instructions
  fill(0);
  //text("Click the mouse to generate a new flow field.",10,height-20);
}

void keyPressed() {
  if (key == ' ') {
    debug = !debug;
  }
}

// Make a new flowfield
void mousePressed() {
  //flowfield.init();

   vehicles.add(new Vehicle(new PVector(mouseX,mouseY), random(2, 5), random(0.1, 0.5)));
}

void mouseDragged() {
  //flowfield.init();

   vehicles.add(new Vehicle(new PVector(mouseX,mouseY), random(2, 5), random(0.1, 0.5)));
}

// The Nature of Code
// Daniel Shiffman
// http://natureofcode.com

// Flow Field Following

//what is the vehicle's desired velocity??
//arrow below triangle in flow field indicates vehicle's desired velocity  

class Vehicle {

  // The usual stuff
  PVector location;
  PVector velocity;
  PVector acceleration;
  float r;
  float maxforce;    // Maximum steering force
  float maxspeed;    // Maximum speed

    Vehicle(PVector l, float ms, float mf) {
    location = l.get();
    r = 3.0;
    maxspeed = ms;
    maxforce = mf;
    acceleration = new PVector(0,0);
    velocity = new PVector(0,0);
  }

  public void run() {
    update();
    borders();
    display();
  }

  // Implementing Reynolds' flow field following algorithm
  // http://www.red3d.com/cwr/steer/FlowFollow.html
  void follow(FlowField flow) {
    // What is the vector at that spot in the flow field?
    PVector desired = flow.lookup(location);
    // Scale it up by maxspeed
    desired.mult(maxspeed);
    // Steering is desired minus velocity
    PVector steer = PVector.sub(desired, velocity);
    steer.limit(maxforce);  // Limit to maximum steering force
    applyForce(steer);
  }

  void applyForce(PVector force) {
    // We could add mass here if we want A = F / M
    acceleration.add(force);
  }

  // Method to update location
  void update() {
    // Update velocity
    velocity.add(acceleration);
    // Limit speed
    velocity.limit(maxspeed);
    location.add(velocity);
    // Reset accelertion to 0 each cycle
    acceleration.mult(0);
  }

  void display() {
    // Draw a triangle rotated in the direction of velocity
    float theta = velocity.heading2D() + radians(90);
    fill(175);
    stroke(0);
    pushMatrix();
    translate(location.x,location.y);
    rotate(theta);
    beginShape(TRIANGLES);
    vertex(0, -r*2);
    vertex(-r, r*2);
    vertex(r, r*2);
    endShape();
    popMatrix();
  }

  // Wraparound
  void borders() {
    if (location.x < -r) location.x = width+r;
    if (location.y < -r) location.y = height+r;
    if (location.x > width+r) location.x = -r;
    if (location.y > height+r) location.y = -r;
  }
}

// Flow Field Following

class FlowField {

  // A flow field is a two dimensional array of PVectors
  PVector[][] field;
  int cols, rows; // Columns and Rows
  int resolution; // How large is each "cell" of the flow field

  FlowField(int r) {
    resolution = r;
    // Determine the number of columns and rows based on sketch's width and height
    cols = width/resolution;
    rows = height/resolution;
    println(cols + " " + rows);
    field = new PVector[cols][rows];
    init();
  }

  //This is the section to get to understand best***
  void init() {
    // Reseed noise so we get a new flow field every time
    //    noiseSeed((int)random(10000));
    for (int i = 0; i < cols; i++) {
      for (int j = 0; j < rows; j++) {

        int x = i*resolution;
        int y = j*resolution;
        int index = x + y * background.width;
        color c = background.pixels[index]; 
        float b = brightness(c);
        if (b == 255) {
          field[i][j] = new PVector(2, 1);
        } 
        else {
          float theta = map(b, 0, 255, 0, TWO_PI);
          field[i][j] = new PVector(cos(theta), sin(theta));
        }
      }
    }
  }

  // eventually you might need to look at a pixel and its neighbors

  //float theta = map(noise(xoff,yoff),0,1,0,TWO_PI);
  // Polar to cartesian coordinate transformation to get x and y components of the vector

  // Draw every vector
  void display() {
    for (int i = 0; i < cols; i++) {
      for (int j = 0; j < rows; j++) {
        drawVector(field[i][j], i*resolution, j*resolution, resolution-2);
      }
    }
  }
  //
  //  // Renders a vector object 'v' as an arrow and a location 'x,y'
  void drawVector(PVector v, float x, float y, float scayl) {
    pushMatrix();
    float arrowsize = 4;
    //    // Translate to location to render vector
    translate(x, y);
    stroke(0, 100);
    //    // Call vector heading function to get direction (note that pointing up is a heading of 0) and rotate
    rotate(v.heading2D());
    //    // Calculate length of vector & scale it to be bigger or smaller if necessary
    float len = v.mag()*scayl;
    //    // Draw three lines to make an arrow (draw pointing up since we've rotate to the proper direction)
    line(0, 0, len, 0);
    line(len, 0, len-arrowsize, +arrowsize/2);
    line(len, 0, len-arrowsize, -arrowsize/2);
    popMatrix();
  }

  PVector lookup(PVector lookup) {
    int column = int(constrain(lookup.x/resolution, 0, cols-1));
    int row = int(constrain(lookup.y/resolution, 0, rows-1));
    return field[column][row].get();
  }
}

Nature of Code Mid Term Documentation from Colin Narver on Vimeo.

For my midterm, I was inspired by Andy Warhol’s “Floating Silver Pillows” from the “Regarding Warhol: Sixty Artists, Fifty Years” show at the Met. Using the Toxiclibs library, I created an array list of silver ballon like shapes that I made in illustrator as well as a hand object to hit them. I wanted to recreate the joy children have in knocking around balloons in a small room.

I then incorporated an attraction behavior to the elements and used a system of checking if a balloon has been hit and then marking it with a number. This was based on the ability to determine the distance between my hand object and the ballons. Then, If the marked number exceeds my pre-determined threshold for hits, a negative force is imposed upon the balloon and it appears to loose helium or it’s ability to float.

I was inspired and enabled by the Nature of Code examples on attract/repel as well as the mechanics of the simple spring (both utilizing the toxiclibs library).

//ballons svg files with a bit of rotation 
//checking to see if another particle is hit would be built in the main program

import toxi.geom.*;
import toxi.physics2d.*;
import toxi.physics2d.behaviors.*;

ArrayList<Particle> particles;

VerletPhysics2D physics;

Particle p1;
Particle p2;

PImage balloon;
PImage background;
PImage hand;

void setup () {
  size (850, 700, P2D);

  balloon = loadImage("silver_pillows.png");
  background = loadImage("warhol_cow.jpeg");
  hand =loadImage("hand.png");
  smooth();

  physics = new VerletPhysics2D ();
  physics.setDrag (0.01);

  particles = new ArrayList<Particle>();
  for (int i = 0; i < 80; i++) {
    particles.add(new Particle(balloon, new Vec2D(random(width), random(height)), -32, -1, 120, 80));
  }

  //physics.addBehavior(new GravityBehavior(new Vec2D(0, -0.05)));
  physics.setWorldBounds(new Rect(0, 0, width, height));

  // Make two particles
  p1 = new Particle(hand, new Vec2D(width/2, height/2.5), 32, -1, 20, 30);
  p2 = new Particle(hand, new Vec2D(width, 180), 32, -10, 70, 100);
  // Lock one in place
  p1.lock();

  // Make a spring connecting both Particles
  VerletSpring2D spring=new VerletSpring2D(p1, p2, 100, 0.005);

  // Anything we make, we have to add into the physics world
  physics.addParticle(p1);
  physics.addParticle(p2);
  physics.addSpring(spring);
}

void draw () {
  background (255); 
  tint (255); 
  imageMode (CORNER);  
  image(background, 0, 0);

  physics.update ();

  // Draw a line between the particles
  stroke(0);
  strokeWeight(2);
  line(p1.x, p1.y, p2.x, p2.y);

  // Display the particles
  p1.display();
  p2.display();

  // Move the second one according to the mouse
  if (mousePressed) {
    p2.lock();
    p2.x = mouseX;
    p2.y = mouseY;
    p2.unlock();
  } 

  for (Particle p: particles) {
    p.display();
    p.checkEdges();
    //p.checkIfHit (p1.x, p1.y, 30); 
    p.checkIfHit (p2.x, p2.y, 35);
//    p.oscillate();
    p.markHits(); 

    }
  }

//spring or sin wave---give it a slight force from being applied by 
//call it in the par

// class Spore extends the class "VerletParticle2D"
class Particle extends VerletParticle2D {

  // variable for helium level, affect the brightness
  //need to apply a force to each on pushing them down
  //checking the hitter particle against the others 

  float theta = 0.0;
  PImage balloon;
  int howManyTimesHit = 0; 
  int widthS;
  int heightS;
  int angle;

  boolean isHit = false;

  Particle (PImage _balloon, Vec2D loc, float len, float strength, int _widthS, int _heightS) {
    super(loc);    //has to be first in order
    balloon = _balloon;
    widthS= _widthS;
    heightS = _heightS;
    physics.addParticle(this);
    physics.addBehavior(new AttractionBehavior(this, len, strength));  //variables for behavior elements
  }

  void display () {
    stroke (0);
    strokeWeight(2);

    imageMode (CENTER); 
    tint (255); 
    image(balloon, x, y, widthS, heightS);
  }

  void checkEdges() {
    if (x> width) {
      x=0;
    } 
    else if (x< 0) {
      x=width;
    }

    if (y> height) {
      y=0;
    } 
    else if (y<0) {
      y=height;
    }
  }

//incorporate oscillation here:
//  void oscillate() {
//    
// float a = map(cos(theta), -1.0, 1.0, -.05,.001);
//// float z = map(sin(theta), -1.0, 1.0, 0,-1.1);
//     theta += 0.002;
//     Vec2D osc = new Vec2D(a,random(-.01,.01));
//      addForce(osc); 
//    
//  }

  void checkIfHit (float handX, float handY, int handRad) {
    float d =  dist (x, y, handX, handY);
//    println(d + " " + isHit);
    float threshold = 30 + handRad;
    if (!isHit &&  d < threshold ) { 
      howManyTimesHit++;
      isHit = true;
    } 
    else if (d > threshold) {
      isHit = false;
    }
  }

  void markHits () {

    fill(255, 244, 0);
    textSize(30);
    text(howManyTimesHit, x, y); 

    float helium = map(howManyTimesHit,0,20,-0.05,0.05);

      Vec2D down = new Vec2D(0,helium);
      addForce(down);

  }
}