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.
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: jennjkim.com/parallax-always