h34tnet/kleinesbuero
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improves wiggler and adds padding

Browse source
This commit is contained in:
Stefan Schallerl 2024-12-17 13:33:08 +01:00
parent 4879cb268f
commit eb1e44f533
4 changed files with 31 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
htdocs/impressum.html
View file

@ -13,7 +13,7 @@
<body>
<div style="background-color: var(--contrast);">
<div class="content">
<canvas id="header" width="400" height="100" alt="Kleines Büro"></canvas>
<canvas id="banner" width="800" height="200" alt="Kleines Büro"></canvas>
<nav>
<a href="/index.html">Zurück zur Hauptseite</a>
</nav>

7
htdocs/index.html
View file

@ -15,8 +15,7 @@
<body>
<div style="background-color: var(--contrast);">
<div class="content">
<canvas id="header" width="400" height="100" alt="Kleines Büro"></canvas>
<canvas id="banner" width="800" height="200" alt="Kleines Büro"></canvas>
<nav>
<a href="#waszaehltbistdu">Was zählt, bist du</a> | <a href="#werwirsind">Wer wir sind</a>
</nav>
@ -60,9 +59,9 @@
<p>Erzähl-/Musik-/Tanz-Theater für alle ab 3 Jahren</p>
<p>nach dem gleichnamigen Bilderbuch von Magda Hassan und Raffaela Schöbitz</p>
<p>Spür mal, hinter den Bäumen, zwischen den Blättern wartet ein Tier. Es ist groß und stark und
ungeheuerlich – ich glaube: Es ist wie ich. Schau mal, ich möchte dir von uns erzählen. Von tanzenden
ungeheuerlich &ndash; ich glaube: Es ist wie ich. Schau mal, ich möchte dir von uns erzählen. Von tanzenden
Tatzen. Vom Ausruhen in weichem Fell. Von springenden Punkten. Von dem, wie ich zähle. Und wie ich 1, 2,
3, 249 selbst groß und stark und alles sein kann – und du auch.</p>
3, 249 selbst groß und stark und alles sein kann &ndash; und du auch.</p>
<p>Ein Kind, eine Tänzerin und ein Musiker begegnen auf einer Bühne einem Gepard. Spielerisch, musikalisch,
in poetischen Bildern und Sprachen und immer mit Unterstützung der (jungen) Zuschauer:innen erwecken sie
Punkt für Punkt das einfühlsame und kunstvoll illustrierte Bilderbuch WAS ZÄHLT, BIST DU von Magda

4
htdocs/kleinesbuero.css
View file

@ -49,7 +49,7 @@ FOOTER H2 {
color: var(--primary-color);
}
#header {
#banner {
margin: 0 auto;
display: block;
}
@ -57,7 +57,7 @@ FOOTER H2 {
.content {
margin: 0 auto;
max-width: 1024px;
padding: 4px;
padding: 4px 32px;
}
NAV {

47
htdocs/kleinesbuero.js
View file

@ -4,15 +4,21 @@ class Wiggler {
this.canvas = canvas;
this.ctx = canvas.getContext("2d");
this.target = target;
this.width = this.canvas.width;
this.height = this.canvas.height;
let maxx = Math.max(...target.flatMap(l => l.map(k => k[0])));
let maxy = Math.max(...target.flatMap(l => l.map(k => k[1])))
let offsx = (this.width - maxx) / 2
let offsy = (this.height - maxy) / 2
this.target = target.map(c => c.map(l => [l[0] + offsx, l[1] + offsy]));
// this.initRandom();
// this.initCorners();
this.current = this.initEdges();
this.current = this.initEdges(maxx, maxy);
}
initRandom() {
@ -140,18 +146,23 @@ class Wiggler {
}
mash() {
// randomize completely
// this.current = this.current.map(l => l.map(p => [p[0] + Math.random() * 300 - 150, p[1] + Math.random() * 300 - 150]));
// replace target lines randomly
for (let i = 0; i < this.target.length; i++) {
let c0, c1;
do {
c0 = i
c1 = Math.floor(Math.random() * this.target.length)
} while (c0 == c1);
this.current = this.current.map(l => {
const px = l[0][0] + this.mv(this.width / 5);
const py = l[0][1] + this.mv(this.height / 5);
const r = Math.PI * 2;
const tx = px + Math.cos(r) * 10;
const ty = py + Math.sin(r) * 10;
let l0 = this.target[c0][0]
let l1 = this.target[c0][1]
return [[px, py], [px, py]];
});
this.target[c0][0] = this.target[c1][0]
this.target[c0][1] = this.target[c1][1]
this.target[c1][0] = l0
this.target[c1][1] = l1
}
if (!this.running) {
this.running = true;
@ -180,21 +191,13 @@ const textToCoords = (text, scale, alphabet) => {
});
return output;
/*
for (var i = 0; i < text.length; i++) {
const char = text[i];
const co = alphabet[char];
co.forEach(l => output.push(l.map(p => p.map())));
}
*/
};
document.addEventListener('DOMContentLoaded', () => {
console.log("kleines büro ready ...");
const canvas = document.getElementById("header");
const target = textToCoords("KLEINES BÜRO", 10, alphabet);
const canvas = document.getElementById("banner");
const target = textToCoords("KLEINES BÜRO", 20, alphabet);
const wiggler = new Wiggler(canvas, target);
wiggler.start();