Hark Labs Site


Author:  | March 21

When I came to Hark in January my first project was to work on a Hark Labs site: a website where we could show off interesting ideas and demonstrations that fell outside of the normal scope of work done here at Hark. The site consists of two main pieces: the homepage created using the Foundation framework, and the demos written in the Processing language.

Foundation is a responsive framework that makes responsive websites easy to set up. It uses a grid system that automatically adjust to different screen sizes, and has simple templates to hit the ground running. So I put together a basic homepage for the Hark Labs site, and then got started on the demos.

For the demonstrations I created, I used the Processing language. However, since they are being viewed in a web browser I made use of Processing.js which allows Processing code to be run in any HTML5 compatible web browser. You just include the processing.js script in your HTML, and then create a Canvas that uses a .pde file as the source. This file is where you include the Processing code.

The first demo has a simple gray background with “Hark” written in orange letters in the center of the screen. If you click or drag on the screen then “Hark” will follow your mouse around. The processing code has two main functions: setup() and draw().

// Setup the Processing Canvas
void setup(){
  size($(window).width(), $(window).height());

  frameRate( 20 );
  X = width / 2.6;
  Y = height / 2;
  nX = X;
  nY = Y;  
}

The size() function determines the size of the processing canvas, in this case it is being set to the size of the browser window. The framerate determines the speed at which the canvas is refreshed, and the X, Y, nX and nY are used to determine the position of the “Hark” being displayed.

// Main draw loop
void draw(){

  // Track Hark to new destination
  X+=(nX-X)/delay;
  Y+=(nY-Y)/delay;

  // Fill canvas grey
  background( 50 );

  textSize(20);
  text("Click or drag to move...", 0, 18);

  // Set fill-color to orange
  fill(255, 71, 26);

  // Set stroke-color orange
  stroke(255, 71, 26);

  textSize(100);
  text("Hark", X, Y);
}

The draw() function is a loop that is called at the framerate set in the setup() function. In this case draw() is called 20 times per second. As the X and Y variables are updated, “Hark” is displayed at different points on the canvas. Updating the X and Y position is simple, and done with two functions for the case of clicking the mouse or dragging it.

void mouseClicked() {
     nX = mouseX;
     nY = mouseY;
}

void mouseDragged() {
     nX = mouseX;
     nY = mouseY;
}

The last piece is maintaining the size of the canvas. When it is initialized, the canvas is set to the size of the window, but if the window is expanded then the space is filled with a blank white background that is not accessible from the canvas. So, whenever the windows is resized the canvas is also resized. The resize.js script which is included in the HTML will call resizeSketch() whenever the browser windows is changed.

void resizeSketch()
{
    size($(window).width(), $(window).height());
}

The second demo is also controlled by mouse movement, though there is no need to click or drag; it has particles that move around the screen and change color as you move your mouse. The Particle class was used and adapted from a Processing sketch found online, which is linked to in the source code. It uses a similar setup as the previous demo and the particles are placed randomly within the canvas whenever the demo is started. The draw() function loops through each particle and updates it as the mouse is moving.

Demo 3 shows a Koch snowflake, which is a type of fractal. Every time that you click, it iterates once. As this continues, the perimeter of the snowflake approaches infinite length. This demo takes an ArrayList of lines, and each time the mouse is clicked, it iterates through them and changes the line from this:

To this:

When starting with a triangle and applying this transformation repeatedly, it gives the exhibited effect.

The last demo I created utilized the openweathermap.org API in order to display the current weather in a processing sketch. The HTML is similar to the previous demos, except an additional script called weather.js is also utilized. Weather.js is a simple script that makes an API call and stores the returned JSON data in var result so that it can be accessed from the Processing sketch. The API url used returns data specifically for Burlington, VT and in imperial units.

var API = "http://api.openweathermap.org/data/2.5/weather?id=5234372&appid=b06aae39e55470b06ed23208fc360bcf&units=imperial"

var result;

$.getJSON(API, function(json){
    result = json;

}); 

The draw() function extracts the relevant data from the JSON data received, sets the background color based on temperature, and then draws the weather.

The if (result != null) statement is to account for the time it takes for the API results to return. Otherwise an error occurs if the Processing sketch tries to process data that is not yet received. Then the temperature and weather description are taken from the JSON data. The ctemp is the color based on the given temperature, which is found using a pre-determined 20-color scale. The background is set to this temperature. Then there are four basic weather animations: cloudy, sunny, raining and snowing.

void draw() {   
  int textX = 10;
  int textY = 300;

  if (result != null){
    if (gotResult == false) { //Stores the results the first time
      temp = (int) result.main.temp;
      desc = result.weather[0].main;
      ctemp = getColor(temp);
      frameRate(1);

      gotResult = true;
    }

    background(ctemp);

    if (desc == "Clouds"){
      drawClouds(255);
    } else if (desc == "Clear") {
      drawSun();
    } else if (desc == "Rain" || desc == "Drizzle") {
      drawRain();
    } else if (desc == "Thunderstorm") {
      drawThunderstorm();
    } else if (desc == "Snow") {
      drawSnow();
    } else {  //Simple pulsing text
      frameRate(10);
      textX = $(window).width() / 2.0;
      textY = $(window).height() / 2.0;
      textSz = textSz + sin( frameCount / 4 );
      textSize(textSz);
    }

    fill(0); //Black shapes
    text(temp+" f", textX, textY);
    text(desc, textX, textY+40);
  }

}

Want to learn more about how Hark can help?