Interactive Name Design – Ross Jiang

For my project，I want to display my name and enable user to interact with the design. I watched a few videos on steering behaviours. Basically all “vehicles” behave independently and move towards a certain point on the text. I referenced Aaron’s textLine example on how to turn a text to points and I modified a Vehicle class from a Daniel Shiffman’s example.

If any “vehicle” is within a certain range of the cursor provided the cursor is moving, the target would change from a point on the text to the cursor and that is how user is able to interact and change the text.

the font and full code can be found on:

https://github.com/ross67/IntroToIm/tree/master/interactiveName

 

//Thanks to Daniel Shiffman for explanation on steering behaviors on his Youtube Channel:https://www.youtube.com/user/shiffman

// the vehicle class is modified from his coding example on https://www.youtube.com/watch?v=4zhJlkGQTvU

import geomerative.*;
String fontName = "IndieFlower.ttf";
String textTyped = "Ross Jiang";
RFont font;
RPoint[] pnts;
Vehicle[] vehicles = new Vehicle[600];

void setup(){
    //size(800, 600);
    size(1440,900);
    background(51);
    noFill();
    stroke(255);
   RG.init(this);
  font = new RFont(fontName, 230, RFont.LEFT);

  RCommand.setSegmentLength (10);
  RCommand.setSegmentator(RCommand.UNIFORMLENGTH);
  RGroup grp;
  grp = font.toGroup(textTyped);
  grp = grp.toPolygonGroup();
  pnts = grp.getPoints();
  
//define the vehicles

  for (int i=0; i<150; i++){ //left 
      Vehicle v = new Vehicle(0, i*9.6);
      vehicles[i] = v;   
  }
  
   for (int j=150; j<300; j++){ //right
      Vehicle v = new Vehicle(1440, (j-150)*9.6);
      vehicles[j] = v;   
  }
  
  for (int k=300; k<450; k++){ //top
      Vehicle v = new Vehicle((k-300)*6, 0);
      vehicles[k] = v;   
  }
  
  for (int l=450; l<600; l++){ //bot
     Vehicle v = new Vehicle((l-450)*6, 900);
     vehicles[l] = v;   
  }
      
}

void draw(){
  
     background(51);
    
  int index = 0;
  for (Vehicle v: vehicles){
    
  PVector p = new PVector(pnts[index].x+250,pnts[index].y+400);
  v.arrive(p);
  v.update();
  v.display(); 
  index++;
    
  }
  
}

class Vehicle{

PVector position;
PVector velocity;
PVector acceleration;

boolean mouseClose = false;
float maxForce; //max steering force (how fast it can turn around)
float maxSpeed; // max speed

  Vehicle(float x, float y){
    acceleration = new PVector(0,0);
    velocity = new PVector(0,-2);
    position = new PVector(x,y);
    maxSpeed = 4;
    maxForce = 0.1;
  }
 
    // Method to update position
  void update() {

    // Update velocity
    velocity.add(acceleration);
    // Limit speed
    velocity.limit(maxSpeed);
    position.add(velocity);
    // Reset accelerationelertion to 0 each cycle
    acceleration.mult(0);
   }
   
   void applyForce(PVector force) {
    // We could add mass here if we want A = F / M
    acceleration.add(force);
  }
  
  void arrive(PVector target){
        checkMouse();
        PVector desired = PVector.sub(target,position);  // A vector pointing from the position to the target
     if(mouseClose){
       PVector mouse = new PVector(mouseX,mouseY);
        desired = PVector.sub(mouse,position);  // A vector pointing from the position to the cursor
     }
     float d = desired.mag(); // distance b/w position and target
     
    if (d < 100) { 
      float m = map(d,0,100,0,maxSpeed); // if vehicle is close enough, slow down
      desired.setMag(m);
    } else {
      desired.setMag(maxSpeed); // or else set it to max speed
    }
     
       // Steering = Desired minus Velocity (could potential move backwards)
    PVector steer = PVector.sub(desired,velocity);
    steer.limit(maxForce);  // Limit to maximum steering force
    applyForce(steer);    
  }
  
    void display() {   
    ellipse(position.x, position.y, 6, 6);      
  }
  
    void checkMouse() {
      PVector mouse = new PVector(mouseX,mouseY);
      float d = PVector.sub(mouse,position).mag();
      
    if (d<333 && mouseX!=pmouseX && mouseY!=pmouseY) {
      mouseClose = true;
      println(d);
    }else{
      mouseClose = false;
    }
  }
}