Hacking The Browser

Hacking the Browser - Week 1: Create a responsive web site

Find a boundary-pushing website:

https://htdt.github.io/digital_trip/

 

Create a responsive website:

http://138.197.66.182:8080/index.html

Inspired by http://hooooooooo.com and heeeeeeeey.com, I created a mobile interactive version of it. It uses the Gamma value of device motion to control playing whether hoo or hey.

res.gif

I used bootstrap to make my website responsive.

 

The most difficult part is to make p5 canvas responsive as well. I create this function to get the value of the div where the canvas nested.

function getContainerWidth(container) {
    var containerStyle = window.getComputedStyle(container);
    var containerWidth = containerStyle.width;
    containerWidth = containerWidth.substr(0, containerWidth.length - 2);
    return containerWidth;
}

Then use it to created canvas:

function setup() {
    canvasWidth = getContainerWidth(container);
    var mycanvas = createCanvas(canvasWidth, windowHeight);
    mycanvas.parent("container");
    background(255);
}

To make it responsive, we need to call windowResized().

function windowResized() {
    resizeCanvas(canvasWidth, windowHeight);
}