Parallax canvas

Parallax canvas

The website is a short performance and experiment on the interplay of canvas and simulation within a browser. I based the layerson a css-based parallax structure, that sets layers vertically to groups, based on 3 basic attributes: background, base, and deep base.

Screen Shot 2014-12-14 at 6.26.07 PM

Screen Shot 2014-12-14 at 6.24.34 PM

I used the following to create a very basic form of parallax and visual layering and decided to reframe interactions as iframes in p5 to align with images and canvas —

group 1 : base layer 1, initial image, graphic 1, iframe – p5
group 2 : base layer 2, color 2 over group 1 color
group 3: transition png
group 4: overlay
group 5: slide transition over 3 & 5
group 6: color 3
group 7: iframe 2 – p5

I used graphics and colors that would clash or camouflage, and placed a looping video on a canvas as a base to provide a “soundtrack”

This site serves as an exercise for further experiments with spacial interactions within a browser using p5.

best viewed in firefox:

JK | Design + Technology MFA 2016

Leave a reply

Skip to toolbar