commit 323269ae36be0498645a842e288c6e29ae828fda Author: bernadette Date: Tue Jan 16 14:33:45 2024 +0100 add initial userpage bernabereit diff --git a/assets/css/fonts.css b/assets/css/fonts.css new file mode 100644 index 0000000..52be92d --- /dev/null +++ b/assets/css/fonts.css @@ -0,0 +1 @@ + @import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital@0;1&display=swap'); diff --git a/assets/css/stylesheet.css b/assets/css/stylesheet.css new file mode 100644 index 0000000..a90458d --- /dev/null +++ b/assets/css/stylesheet.css @@ -0,0 +1,32 @@ +html, body, canvas { + width: 100%; + height: 100%; + background: #E5D0F2; +} + +html, body { + display: flex; +} + +h1 { + font-family: 'Libre Baskerville', serif; + font-size: 1.2vw; + font-weight: 600; + color: #396873; +} + +h2 { + font-family: 'Libre Baskerville', serif; + font-style: italic; + font-weight: 200; + font-size: 1.2vw; + color: #396873; + } + + .info-container { + display: flex; + width: 10vw; + padding-top: 1.5vw; + padding-left: 1.5vw; + padding-bottom: 1.5vw; + } \ No newline at end of file diff --git a/assets/js/rotating-square.js b/assets/js/rotating-square.js new file mode 100644 index 0000000..8a1e6d4 --- /dev/null +++ b/assets/js/rotating-square.js @@ -0,0 +1,76 @@ +const canvas = document.querySelector("canvas"), + cx = canvas.getContext("2d"); + +const INCREMENT = 12345, + MULTIPLIER = 1103515245, + MODULUS = Math.pow(2, 31); + +// Todo esto son inputs del nodo generador +const stepX = 16, + stepY = 16, + sizeX = 1, + sizeY = 1, + marginTop = 32, + marginBottom = 32, + marginLeft = 32, + marginRight = 32; + +let frameID; + +function lcg(x, c = INCREMENT, a = MULTIPLIER, m = MODULUS) { + return (a * x + c) % m; +} + +function createRandom(initialSeed = 0) { + let seed = initialSeed; + return { + get currentSeed() { + return seed; + }, + reset(newSeed) { + seed = newSeed; + }, + get() { + seed = lcg(seed); + return seed / MODULUS; + } + }; +} + +const random = createRandom(); + +function frame(frameTime) { + // First element + cx.clearRect(0, 0, cx.canvas.width, cx.canvas.height); + for (let y = marginTop; y < cx.canvas.height - marginBottom; y += stepY) { + random.reset(y); + for (let x = marginLeft; x < cx.canvas.width - marginRight; x += stepX) { + const randomValue = random.get(); + const distX = randomValue * 16; + const distY = randomValue * 16; + const phase = randomValue * Math.PI * 2; + cx.fillStyle = "#396873"; + cx.fillRect( + x, + y, + sizeX + Math.sin(phase + frameTime / 1000) * distX, + sizeY + Math.cos(phase + frameTime / 1000) * distY + ); + } + } + frameID = window.requestAnimationFrame(frame); +} + +function resize() { + canvas.width = canvas.clientWidth; + canvas.height = canvas.clientHeight; +} + +function start() { + window.addEventListener("resize", resize); + window.dispatchEvent(new Event("resize")); + + frameID = window.requestAnimationFrame(frame); +} + +start(); diff --git a/index.html b/index.html new file mode 100644 index 0000000..b60a7a8 --- /dev/null +++ b/index.html @@ -0,0 +1,23 @@ + + + + + + + + + +

berna bereit

special issue 23

+ + + + + + + \ No newline at end of file