This post has been translated from it's original markdown format, if it seems busted it might appear better over HTTP:

=> https://mediocregopher.com/posts/viz-5

# 👻 Visualization 5

> Seeing double.

       

                       

This visualization combines two distinct layers, each of them borrowing their behavior from Visualization 4. Neither layer has any effect on the other, one is merely super-imposed on top of the other in the top canvas. You can see each layer individually in the two lower canvases.

=> /posts/viz-4.gmi Visualization 4

Despite their not affecting each other, the code is set up so that each layer *could* be affected by the other. This will likely be explored more in a future post.



const canvasesByClass = {}; [...document.getElementsByTagName("canvas")].forEach((canvasDOM) => {

const canvas = new Canvas(canvasDOM);   canvasDOM.classList.forEach((name) => {

```
if (!canvasesByClass[name]) canvasesByClass[name] = [];
canvasesByClass[name].push(canvas);
```

}) });

const universe = new Universe(canvasesByClass, {   "layer1": new Layer(mkNewEl("90%")),   "layer2": new Layer(mkNewEl("50%")), });

const requestAnimationFrame =   window.requestAnimationFrame ||   window.mozRequestAnimationFrame ||   window.webkitRequestAnimationFrame ||   window.msRequestAnimationFrame;

function doTick() {   universe.update();   universe.draw();   requestAnimationFrame(doTick); }

doTick();


========================================

Published 2021-05-28 by mediocregopher

This post is part of a series!

=> /posts/viz-6.gmi Next in the series: Visualization 6
=> /posts/viz-4.gmi Prevous in the series: Visualization 4

=> /posts/ Browse all posts

=> /feed.xml RSS feed

========================================

=> / Home

=> https://dev.mediocregopher.com/mediocre-blog/ Source

=> /wtfpl.txt License for all content, if you must have one