add initial userpage bernabereit
bernadette
11 months ago
commit
323269ae36
@ -0,0 +1 @@
|
|||||||
|
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital@0;1&display=swap');
|
||||||
@ -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;
|
||||||
|
}
|
||||||
@ -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();
|
||||||
@ -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>
|
||||||
Loading…
Reference in New Issue