Visualizing My Personal Space (Part 1)

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) { orbitObjs.push({ xcenter: xCoord, ycenter: height/2, dotradius:radius, timestamp:time }); }

function createSatellite(orbitOffset, angle, colorValue){ satelliteObjs.push({ 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; } moveX(offset){ this.xcenter-=offset; } display(){ 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; } updatePosition(){ //MAKE SURE SATELLITE ORBITS AROUND ORBIT'S CENTER. TRIGONOMETRY STUFF. 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); } display(){ 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:

//SET UP SLIDERS// 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()

//UPDATE X-SCALE & TIME-STAMPING SPEED VIA SLIDERS' VALUE// var widthValue = sliderWidth.value()*0.1; coeff = widthValue; lineWidth+=coeff; 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; }

display(){ 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: