add initial userpage bernabereit

5 months ago · 323269ae36
commit 323269ae36
4 changed files with 132 additions and 0 deletions
--- a/assets/css/fonts.css
+++ b/assets/css/fonts.css
@ -0,0 +1 @@
+  @import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital@0;1&display=swap');
--- a/assets/css/stylesheet.css
+++ 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;
+ }
--- a/assets/js/rotating-square.js
+++ 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();
--- a/index.html
+++ b/index.html
@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <link rel="stylesheet" href="assets/css/stylesheet.css">
+    <link rel="stylesheet" href="assets/css/fonts.css">
+    <link rel="stylesheet" type="text/css" href="https://issue.xpub.nl/23/quilt/quilt.css">
+</head>
+<body>
+
+<div class="info-container">
+    <div class="info-top">
+        <h1>berna bereit </h1>
+        <h2> special issue 23</h2>
+    </div>
+</div>
+<canvas></canvas>
+
+
+
+</body>
+<script src="assets/js/rotating-square.js"></script>
+<script src="https://issue.xpub.nl/23/quilt/quilt.js" data-cutFileName="false" data-cutFileName="false"></script>
+</html>
				`@ -0,0 +1 @@`
				`@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital@0;1&display=swap');`