mstropka-Looking Outwards-07

This is one project from a data visualization firm called Variable. Nike hired the designers at Variable to create a data visualization for the data collected from one of their products, Nike Fuel. The video explains the process of moving from the raw data that the team received from these devices to these plant like organic forms. I think that this approach to data visualization is very interesting because the visualizations themselves don’t necessarily make the data readable in any useful way like a graph or a chart would. Instead, they create a sort of artistic expression of the data. My favorite part of this project is that each visualization was created with data from one person, and the colors and shape of the virtual strands are personalized to the athletes. This makes these visualizations sort of like self portraits of the athletes who’s data was collected.



//Max Stropkay
//Section E

var nPoints = 1000;
function setup() {
  createCanvas(480, 480);

function drawEpicycloid(){
  // x = (R+r)cos theta - r cos((R+r)/r)theta)
  // y = (R + r)sin theta - rsin(((R+r)/r)theta)

  var R = 100 //radius of large circle
  var r = 10 //radius of small circle
  var a = mouseX //take values of mouse x
  var b = mouseY //take values of mouse y

  //draw curve in center of screen
  translate(240, 240)

  //draw curve
  for(var i = 0; i < nPoints; i++){

    var t = map(i, 0, nPoints, 0, TWO_PI);

    var x = (a + r)*cos(t) - (r)*cos(((a + b)/r)*(t))
    var y = (b + r)*sin(t) - (r)*sin(((a + b)/r)*(t))

    //points of curve will be drawn at somewhere within 50 pixels of (x,y)
    vertex(x + random(-50, 50),y + random(50, - 50));

function draw(){
//redraw background if the mouse is pressed
function mousePressed(){

For this assignment, I used the equation for an epicycloid with the mouse’s location driving certain variables to change the shape as the mouse moves. I can’t say I understand the equation for this type of curve that well so I just started substituting the mouseX and mouse Y value for random variables in the equation until I got something that looked cool. I also added a random value to the x and y coordinates of the points that the program draws.

Here is a screenshot from before I added the random values to the x and y coordinates.



water clock


var red1 = 0
var green1 = 0
var blue1 = 0

var red2 = 0
var green2 = 0
var blue2 = 0

var wid = 5

function setup() {
    createCanvas(300, 300);


function draw() {
    //get time
    var hr = hour();
    if(hr > 12){
        hr = hr - 12}
    var min = minute();
    var sec = second(); 


    //color of tube 1
    if(sec == 59){
        red1 = 52
        green1 = 198
        blue1 = 244
        red1 = 80
        green1 = 80
        blue1 = 80

    //collor of tube 2
    if(sec == 59 & min == 59){
        red2 = 52
        green2 = 198
        blue2 = 244
        red2 = 80
        green2 = 80
        blue2 = 80

    //bowls of water
    //extention of background to hide lid (not visible)

    //compute the height of the water
    var secfull = map(sec, 0, 60, 77, 7);
    var minfull = map(min, 0, 60, 77, 7);
    var hrfull = map(hr, 0, 12, 77, 7);

    //display the water

    //water marks
    dist1 = 0
        //ticks for vessle 1 and 2
    for(var i = 0; i < 13; i++){
        dist1 += 5.9
            if((i + 1) % 3 == 0){
                wid = 10
                wid = 5

        //ticks for vessle 3
    dist3 = 0
    for(var k = 0; k < 13; k++){
        dist3 +=5.9

    //digital time
    text(nf(hr,2,0) + ':' + nf(min,2,0) + ':' + nf(sec,2,0),10,290);


For this project, I got a lot of inspiration from the water clock that was discussed in the video. I had a lot of trouble coming up with an idea to show time that was creative without being overdone. I knew that a lot of people were planning on doing interesting circular clocks but I wanted to do something a little different.

Basically the premise of this machine is that when the water in the seconds cup overfills, it empties into the minute and so on into the hours. My favorite part of this is that when you look at it (besides the fact that there is a digital time keeper in the corner) you should have no idea it is a clock, just interacting water vessels.


Image result for water clock



//Max Stropkay
//Section E

function setup() {
    createCanvas(400, 300);

function draw() {
  //draw ten lines from upper left corner
  //line spacing controled by mouseX and mouseY
  for(var i = 0; i < 10; i ++){
    line(0, 0, i*mouseX, mouseY);
  //draw ten lines from upper right
  for(var i = 0; i < 10; i ++){
    line(400, 300 , i*mouseX, mouseY);
  //draw ten lines from lower right
  for(var i = 0; i < 10; i ++){
    line(400, 0, i*mouseX, mouseY);
  //draw ten lines from lower right
  for(var i = 0; i < 10; i ++){
    line(0, 300 , i*mouseX, mouseY);


For this project, I tried doing something simple because I am still not 100% comfortable with loops. So I made a couple loops that generate lines that touch at the x and y values of the mouse.

mstropka-Looking Outwards-04

This chair is part of a series of chairs called Nóize chairs by Estudio Guto Requena. The Brazilian designers recorded ambient noise in the streets of São Paulo then used the information from the sound recordings to distort the surfaces of 3D modeled chairs. They distorted three classic Brazilian chair designs. The goal for the designers was to create a chair that represented the culture and ambiance of brazil. By taking an already iconic chair design and distorting it with the sounds of the area, the designers created a very interesting object that is symbolic of their native country.

I find this project very interesting because it is an example of designers building off of the ideas that older designers had with the new technology that is available today. However, I think that the way they distorted the models of the chairs is a pretty generic algorithm for distortion. I think that this concept could be better executed if the designers edited the distortion algorithms to generate geometry that was symbolic of some other aspect of Brazil culture or reminiscent of the original design of the chair.



When I was home over Winter break last year a friend of mine was working on this project for kickstarter:


Specdrums is a drum machine and synthesizer that you wear like a ring on your finger. Depending on what color you tap with the device, a different drum sound will be produced. Your cell phone can synthesize different sounds and the device works on any surface. It can pick up the colors of your clothes so you can play body music.

What I admire about this project is how playful it is. A lot of new technology like this is very intimidating to use but this seems almost childish and fun.

I was lucky enough to see these guys working on this project and see the mechanisms on the inside of the test product.

Specdrums packaging