Featured Posts

Visualizing My Personal Space (Part 1)

October 23, 2017

For PComp's mid-term, I pitched an idea about visualizing the amount of personal space I get throughout the day (disclaimer: most of the time I highly value my personal space).


Distance sensors I wear on my body will periodically measure the distance I have from things (aka my personal space). Then using Arduino, I will log these data and feed it into a visualizing program that I make on P5.


Here is how I made it, broken into few parts because, boy, it was such a headache making this.



Making the Visualization Program: Getting Started


I made a kaleidoscope few weeks back, and I was still not over the rotating dots and lines. So, I thought, how can I combine this with time and distance data that I will record?


I started with a line across the canvas, which indicates the timeline of the data. Then, I drew circles with radii corresponding to the amount of distance I have (the more space I have, the bigger the circle).




Next, for each "orbit" circle, I wanted a small dot to revolve around it, like how satellites revolve around a planet. To do this, I created two objects, one an Orbit, the other one a Satellite.


An Orbit has the following properties:

  • distance from 0,0

  • radius of the orbit (corresponds to the distance datum value)

  • timestamp (when was the distance datum taken)


A Satellite has the following properties:

  • x position, y position

  • rotation angle

  • color


I did this through writing a function that gets called every time interval:


function createOrbit(xCoord, radius, time) {
    xcenter: xCoord, 
    ycenter: height/2, 

function createSatellite(orbitOffset, angle, colorValue){
    rotAngle : angle,
    xDistance : 0,
    yDistance : 0,
    distance : orbitOffset,
    redValue: 255 - colorValue,
    blueValue: 155 + colorValue


Next came the part where I really struggled: calculating where the satellite would be in relation to the orbit, and keeping track of which variables belong to which object because they're both circles with very similar properties and attributes.


The satellite's x position is basically:

(Orbit's distance from 0,0) + cos (Satellite's rotation angle), and every frame the angle gets incremented.


Similarly, the y position of the satellite is:

Canvas' y middle point + sin (Satellite's rotation angle), and every frame the angle gets incremented.



This seemed pretty plain, so I wanted to show the relation between data points via drawing a line from one datum to the other. And it looked like these:



At this point, my draw() function was crowded with lines and lines of functions and variables that were really unreadable and not understandable. I read about Class constructor and method and re-arranged my code with this approach.


class Orbit {
  constructor (xcenter, radius, timestamp){
    this.xcenter = xcenter;
    this.ycenter = height/2;
    this.radius = radius;
    this.timestamp = timestamp;
    ellipse(this.xcenter-offset, this.ycenter, this.radius, this.radius);


class Satellite {
  constructor (orbit, angle){
    this.rotAngle = angle;
    this.xpos = 0;
    this.ypos = 0;
    this.distance = orbit.xcenter; //INITIAL DISTANCE OF SATELLITE FROM 0,0
    this.orbitRadius = orbit.radius;
    this.redValue = 255 - orbit.radius;
    this.blueValue = 155 + orbit.radius;
    this.xpos = this.distance - offset + (this.orbitRadius*cos(radians(this.rotAngle)));
    this.ypos = height/2 + (this.orbitRadius*sin(radians(this.rotAngle)));
    this.rotAngle +=(10-this.orbitRadius*0.1);
    ellipse(this.xpos, this.ypos, 2,2);


Since I have no dataset yet, I use mousePressed() and timer function using millis() to call the constructor functions.


Here are the source codes:

Draft 1: http://alpha.editor.p5js.org/hafiyyandi/sketches/SyeKr5La-

Draft 2 (with class constructors): http://alpha.editor.p5js.org/hafiyyandi/sketches/BkEfTqvpZ


!! Additional Notes : DOM Element




When I made this program, I noticed that it's helpful to be able to scale the x and speed of drawing the data. I coded this through the following:


  sliderWidth = createSlider (2, 50, 10);
  sliderWidth.position(90, 340);
  sliderWidth.style('width', '100px');
  sliderTime = createSlider (200, 2000, 1000);
  sliderTime.position(340, 340);
  sliderTime.style('width', '100px');


and in draw()


  var widthValue = sliderWidth.value()*0.1;
    coeff = widthValue;
  var stampValue = sliderTime.value();
    stampSpeed = stampValue;



Making the Visualization Program: Presenting Data Differently


Now that I had my first program done, I wanted to see if the visualization is meaningful and interesting.


I could see that the first program shows:

  • timeline -> position of orbits

  • distance / amount of personal space -> radii of orbits

  • how annoyed I get -> colors of satellites

  • correlation between current and previous data -> lines from one datum to another


But I could only see the data within a very small time frame because of canvas width restriction. To show a full 24 hour cycle, I would need to present the data in a different way. And I though, why not make it like a clock?


I rewrote some parts of Orbit's Class to do this.


class Orbit {
  constructor (distancefromcenter, angle, radius, timestamp){
    this.xcenter = width/2+(distancefromcenter*cos(radians(angle)));
    this.ycenter = height/2+(distancefromcenter*sin(radians(angle)));
    this.radius = radius;
    this.timestamp = timestamp;
    //this.rotAngle = angle;

    ellipse(this.xcenter, this.ycenter, this.radius, this.radius);


The beauty of this was I did not have to re-write my Satellite Class!


Few further modifications in the code and the program now gave this output:



Source code: http://alpha.editor.p5js.org/hafiyyandi/sketches/SyrN7Twa-


It looked prettier now, but unfortunately the visualization became less meaningful. Due to the lines drawn in between Satellites, the amount of personal space become less obvious. This form conveys my mood better, but not the personal space.


I rewrote parts of the code to show the data more meaningfully:

  • timeline -> position of data in the circle

  • distance / amount of personal space -> the distance of data from canvas' middle point

  • how annoyed I get -> colors of data, how much the data "vibrate"

  • correlation between current and previous data -> line from one datum to another

Here is the final result:



I'm pretty happy with this! I would probably write a code that allows user to view the exact data value of each point, but that's for another time.


Here are the source codes so far:


Draft 1 - Linear: http://alpha.editor.p5js.org/hafiyyandi/sketches/SyeKr5La-

Draft 2 - Linear with Class Constructors: http://alpha.editor.p5js.org/hafiyyandi/sketches/BkEfTqvpZ

Draft 3 - Circular: http://alpha.editor.p5js.org/hafiyyandi/sketches/SyrN7Twa-

Draft 4 - Circular version 2: http://alpha.editor.p5js.org/hafiyyandi/sketches/S13KTYi6Z


Getting Actual Data


There were few steps to actually collect data on my personal space:

  • Using ultrasonic distance sensor

  • Record & read data using EEProm

  • Feeding the data to P5 via duplex Serial Communication

  • Wearing the sensors and getting actual data


Part 2 of the post coming soon!

Share on Facebook
Share on Twitter
Please reload

Related Posts
Please reload

Generative Music | Latent Space Sequencer

December 13, 2018

Please reload

Recent Posts
Please reload

Search By Tags

Hafiyyandi | Creative Technologist

New York, New York | hafiyyandi@gmail.com