ITP Blog

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

Find a boundary-pushing website:


Create a responsive website:

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


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);

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

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