-
Notifications
You must be signed in to change notification settings - Fork 0
/
large.js
85 lines (72 loc) · 3.02 KB
/
large.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
import {psychedelia} from "./src/psychedelia.js";
import * as controls from "./src/controls.js";
let NUM_COLS = Math.floor(visualViewport.width*0.6);
let NUM_ROWS = Math.floor(visualViewport.height*0.7);
const SCALE_FACTOR = 1;
const DEMO_MODE = false;
const ARRAY_SIZE = 0xFFF;
const BUFFER_LENGTH = 0x780;
let currCanvas = null;
let psy = largePsychedelia();
controls.initializeControls(psy);
symmetry.textContent = psy.updateSymmetry();
pattern.textContent = psy.updatePattern();
delay.textContent = psy.updateSmoothingDelay();
buffer.textContent = psy.updateBufferLength();
demo.textContent = (psy.pausePlay()) ? "On" : "Off";
visualViewport.addEventListener("resize", (e) => {
// Wait until the new height and width are available.
setTimeout(() => {
if (window.innerHeight == screen.height) {
NUM_COLS = visualViewport.width - 50;
NUM_ROWS = visualViewport.height - 50;
Array.from(document.getElementsByClassName("blurb")).forEach(x=>x.style.visibility = "hidden");
} else {
NUM_COLS = Math.floor(visualViewport.width*0.6);
NUM_ROWS = Math.floor(visualViewport.height*0.7);
Array.from(document.getElementsByClassName("blurb")).forEach(x=>x.style.visibility = "visible");
}
// FIXME: Are we doing everything we need to here to junk the old canvas?
currCanvas = null;
document.getElementById("canvas").remove();
let c = createCanvas();
currCanvas = c.canvas;
container.appendChild(c.canvas);
psy.relaunch(NUM_COLS, NUM_ROWS, SCALE_FACTOR, c.updateCanvas, c.updateImage, c.clearCanvas);
}, 500);
});
function createCanvas() {
function updateImage(o, rgba) {
for (var i=0; i<4; i++) {
imageData.data[(o*4)+i] = rgba[i];
}
}
function updateCanvas() {
bufferCtx.putImageData(imageData,0,0);
ctx.drawImage(bufferCanvas,0,0);
}
function clearCanvas() {
ctx.clearRect(0,0, canvas.width, canvas.height);
imageData = bufferCtx.createImageData(NUM_COLS * SCALE_FACTOR, NUM_ROWS * SCALE_FACTOR);
}
const canvas = document.createElement("canvas");
canvas.id = "canvas";
const ctx = canvas.getContext("2d");
canvas.width = NUM_COLS * SCALE_FACTOR;
canvas.height = NUM_ROWS * SCALE_FACTOR;
const bufferCanvas = document.createElement("canvas");
const bufferCtx = bufferCanvas.getContext("2d");
bufferCanvas.width = NUM_COLS * SCALE_FACTOR;
bufferCanvas.height = NUM_ROWS * SCALE_FACTOR;
const imgData = new Uint8ClampedArray(new Array(NUM_COLS * SCALE_FACTOR * NUM_ROWS * SCALE_FACTOR)
.fill(0).map(x => [0,0,0,255]).flat());
let imageData = new ImageData(imgData, NUM_COLS * SCALE_FACTOR, NUM_ROWS * SCALE_FACTOR);
return {canvas: canvas, updateImage: updateImage, updateCanvas: updateCanvas, clearCanvas: clearCanvas};
}
function largePsychedelia() {
let c = createCanvas();
currCanvas = c.canvas;
container.appendChild(c.canvas);
return psychedelia(NUM_COLS, NUM_ROWS, SCALE_FACTOR, c.updateCanvas, c.updateImage, c.clearCanvas, controls.getGamepadMovements,
controls.getGamepadButtons, DEMO_MODE, ARRAY_SIZE, BUFFER_LENGTH);
}