binfobeamer/main.js at main · CTreffOS/binfobeamer · GitHub

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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
import * as dvd from "./scenes/dvd.js";
import * as starfield from "./scenes/starfield.js";
import * as photo from "./scenes/photo.js";
import * as progress from "./scenes/progress.js";
import * as diwo from "./scenes/diwo.js";
import * as cyber from "./scenes/cyber.js";
import * as logo from "./scenes/logo.js";
import * as stolpersteine from "./scenes/stolpersteine.js";
import * as walk from "./scenes/walk.js";

// commented out scenes use assets that are not included in the repository
// the last scene gets shown first
const scenes = [
  {
    setup: starfield.setup,
    draw: starfield.draw,
  },
  {
    setup: photo.make("long-exposure.jpg"),
    draw: photo.draw,
  },
  {
    setup: dvd.setup,
    draw: dvd.draw,
  },
  {
    setup: photo.make("spacelights-banner.jpg", false, true),
    draw: photo.draw,
  },

  {
    setup: photo.make("diday-neutral-mastodon.png"),
    draw: photo.draw,
  },
  {
    setup: cyber.setup,
    draw: cyber.draw,
  },
  {
    setup: photo.make("osna.social_preview.webp"),
    draw: photo.draw,
  },
  {
    setup: progress.setup,
    draw: progress.draw,
  },
  {
    setup: photo.make(
      "diwo2025-pixelflut.jpg",
      "© Lucas Günzel, Drehteam GmbH",
    ),
    draw: photo.draw,
  },
  {
    setup: logo.setup,
    draw: logo.draw,
  },
  {
    setup: diwo.setup,
    draw: diwo.draw,
  },
  {
    setup: walk.setup,
    draw: walk.draw,
  },
  {
    setup: stolpersteine.setup,
    draw: stolpersteine.draw,
  },
];

let sceneChange = true;
let anim = 0;
let sceneIndex = scenes.length - 2;
p5.disableFriendlyErrors = true;

window.setup = async function () {
  createCanvas(windowWidth, windowHeight);
  frameRate(60);
};

window.draw = function () {
  if (anim > 1400) {
    sceneChange = true;
    anim = 0;
  }
  if (sceneChange) {
    sceneIndex++;
    sceneIndex %= scenes.length;
    resetSettings();
    scenes[sceneIndex].setup();
    sceneChange = false;
  }
  push();
  scenes[sceneIndex].draw();
  pop();
  anim++;
  //drawFPS();
};

function drawFPS() {
  const fontSize = 32;
  noStroke();
  fill(0);
  rect(50, 50, 2 * fontSize, fontSize);
  fill(255);
  textSize(fontSize);
  text(frameRate()?.toFixed(2) || "unavailable", 50, 50 + fontSize);
}

function resetSettings() {
  rectMode(CORNER);
  colorMode(RGB);
  strokeWeight(1);
  fill(255);
  stroke(0);
  noStroke();
  textAlign(LEFT, BASELINE);
  textWeight(600);
  document.querySelector("canvas").classList.remove("hue-rotate");
}

window.mousePressed = function () {
  sceneChange = true;
};

window.windowResized = function () {
  resizeCanvas(windowWidth, windowHeight);
  scenes[sceneIndex].setup();
};