ICM Final Documentation : M I N D M A P demo : Proto 1.0

This sketch includes some demo'd functionality of using the mouse to add both User-representative circles as well as Topical Categories.  The color gradient is a simple example of how intuitive connections would be made between categories and user projects.  The user-representative circles fluctuate in size to reflect Users or projects with multiple collaborators.  

First next steps are to transpose it to p5.js so that it can be user play-tested online for interface design feedback.  I am mainly curious to know where the priority should lie in terms of customizability, proliferation, and delineation between user projects, ideas, interests and then the outer 'super class' of overarching category.  Estimating a good balance will be key to understanding what functionality will be most useful moving forward. 

Functionality left to be implemented: 

Lines between the user objects would should cross collaborations. 

mouseHover() will reveal user name, contact, and specific project information.  

Dynamically repositioned users and categories would reflect increased affinity between clusters. 

Potentially draggable handle controls will allow people to custom "mix" or weight their own projects and topics. 

M I N D M A P : project proposal

Mind Map is a dynamic quadrant continuum designed as a tool to connect minds at ITP or in any diverse, collaborative environment.

Users input areas of skill, interest, or project topics via a form or mouse click and can gauge proximity to clusters of other users. You can hover over each point to get user contact or project info. Ultimately I'd like to it be a point of first contact if users wish. 

At ITP one often chances upon classmates' interests haphazardly over the PBJ table or at the equipment room counter while looking for the same sensor.  Before coming to ITP my biggest unanswered question was: How to best tap the well of shared and divergent interests to find useful collaborations or share-points? 

On a basic level it is similar to the intuitively logical yet flexible New York Magazine Approval Matrix: 

And somewhat superficially may resemble Abe Rubenstein's Foosion ITP foosball scorekeeping site in form and spirit. 

Questions for ITP students/users:

WOULD YOU LIKE TO USE THIS TOOL? 

WOULD YOU LIKE TO USE A WEIGHTED SURVEY FORM TO CALCULATE GRAPH POINTS? 

or

WOULD YOU RATHER USE A MOUSE CLICK TO PLACE IT YOURSELF? 

DOES ADDING A CATEGORY SUGGESTION FIELD MAKE SENSE? 

Computational Media Data Project

My idea was to create a data graphic using the Enigma.io's curation of the Federal government's tracking of endangered species in national parks and other areas. 

https://api.enigma.io/v2/data/a061071e73862a6e21d60d37a31dca60/us.gov.doi.fws.endangered-species?conjunction=and

I had issues with uploading my JSON data.  I tried using an NYTimes example which seemed similar to my goal, then I used a file which used a .txt file.  Neither were good templates. 

I need to work on my facility with strings, arrays, and classes further, as well as API requests. 

Pixelstix

Octopus Arm Array

I modified this example code by Keith Peters in part by adding an array of arms. 

Midterm - Updated Processing Code

import processing.serial.*;
Serial myPort;

//DECLARE
Arm[] arrayArm=new Arm[8];
Arm myArm;

int numSegments = 50;

float[] x = new float[numSegments];
float[] y = new float[numSegments];
float[] angle = new float[numSegments];

float segLength = 12;
float targetX, targetY;

float xpos;
float ypos;
float xa;
float ya;

float armpos;
float armA;

void setup() {

  println(Serial.list());
  String portName = Serial.list()[0];
  myPort = new Serial(this, "/dev/tty.usbmodem1411", 9600);
  myPort.bufferUntil('\n');

  //noCursor(); 
  size(1000, 800);

  //INITIALIZE
  myArm = new Arm();

  for (int t=0; t<arrayArm.length; t++) {
    arrayArm[t]=new Arm();
  }
}

void draw() {
  background(0, 180, 195);

  fill(255, 120, 90);
  //ellipse(width*3/5, height*2/5, 220 + 10*sin(millis()/100), 220 + 10*cos(millis()/100));

  for (int t=0; t<arrayArm.length; t++) {
    pushMatrix();
    translate(width*4/6, height*2/5);
    ellipse(width-width, height-height, 100 + 10*sin(millis()/50), 100 + 10*cos(millis()/50));
    rotate (PI*t/13);
    arrayArm[t].display();
    for (int i=0; i<x.length; i++) {
      arrayArm[t].segment(x[i], y[i], angle[i], (i+1)*2);
    }
    popMatrix();
  }

  myArm.reachSegment(0, xpos, ypos);

  for (int i=1; i<numSegments; i++) {
    myArm.reachSegment(i, targetX, targetY);
  }
  for (int i=x.length-1; i>=1; i--) {
    myArm.positionSegment(i, i-1);
  }
}

void serialEvent(Serial myPort) {
  String myString = myPort.readStringUntil('\n');
  if (myString != null) {

    myString = trim(myString);
    int sensors[] = int(split(myString, ','));
    
    println();

    if (sensors.length >1 ) {
     
      xpos = map(sensors[0], 100, 118, PI, PI/10);
      ypos = map(sensors[1], 90, 200, 120, 1500 );
      //armA = map(sensors[0], 115, 142, 0, height); 
        
      }
    
    for (int sensorNum = 0; sensorNum < sensors.length; sensorNum++) {
      print("Sensor " + sensorNum + ": " + sensors[sensorNum] + "\t");
    }

    }
  }

class Arm {
  
//int sensorVal;
//int getSensorVal(){ return this.sensorVal; }
//int setSensorVal(int sensorVal){ 
//this.sensorVal = sensorVal; }
//
//for (int i = 0; i < mySensors.length; i++){
//         myArmArray[i].setSensorVal(mySensors[i]);
//}

  //CONSTRUCTOR
  Arm() {
 
  }
  
  //FUNCTIONS
  
  void pulseBody(){ 
    fill(255, 120, 90);
    
    //need to add accelerometer sensor values to body pulsing
   
  }
 
      void display(){
        
        strokeWeight(20.0);
        stroke(255, 120, 90);
        
       //set (x,y) to zero to perform transform and then rotate 
      x[x.length-1] = width-width;   // Set base x-coordinate
      y[x.length-1] = height-height;  // Set base y-coordinate
     
      
 // x[x.length-1] = width/3;   // Set base x-coordinate
 // y[x.length-1] = height/2;  // Set base y-coordinate
    
  }
  
  void positionSegment(int a, int b) {
  x[b] = x[a] + cos(angle[a]) * segLength+xpos/2.0;
  y[b] = y[a] + sin(angle[a]) * segLength - xpos/4.0;
}

void reachSegment(int i, float xin, float yin) {
  float dx = xin - x[i];
  float dy = yin - y[i];
  angle[i] = atan2(dy, dx);  
  targetX = xin - cos(angle[i]) * segLength;
  targetY = yin - sin(angle[i]) * segLength;
}

void segment(float x, float y, float a, float sw) {
  strokeWeight(sw);
  pushMatrix();
  translate(x, y);
  rotate(a);
  line(0, 0, segLength, 0);
  popMatrix();
}
  
}

Physical Computing Midterm [first prototype]

We want to allow the user to delight in the mental experience of being a free-swimming octopus for him/herself using the hand. 

Sergio & I tested our Processing Octopus animation using an accelerometer ADXL 335' x & y outputs as well as a single flex sensor.  We are still tweaking our mapping values and the rest of the code to make sure we have the expressive octopus-like swimming movement we initially had in mind.