init commit
This commit is contained in:
glazenbol
@@ -0,0 +1,31 @@
|
||||
# Dependencies
|
||||
node_modules/
|
||||
npm-debug.log*
|
||||
|
||||
# Build output
|
||||
dist/
|
||||
build/
|
||||
.next/
|
||||
out/
|
||||
|
||||
# Environment variables
|
||||
.env
|
||||
.env.local
|
||||
.env.*.local
|
||||
|
||||
# IDE
|
||||
.vscode/
|
||||
.idea/
|
||||
*.swp
|
||||
*.swo
|
||||
*~
|
||||
.DS_Store
|
||||
|
||||
# OS
|
||||
Thumbs.db
|
||||
|
||||
# Misc
|
||||
.cache/
|
||||
|
||||
# big assets
|
||||
assets/scans/
|
||||
@@ -0,0 +1,12 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<script src="https://unpkg.com/guify@0.15.1/lib/guify.min.js"></script>
|
||||
<title>nf control</title>
|
||||
</head>
|
||||
<body>
|
||||
<script type="module" src="js/control.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,13 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
background: #f0f0f0;
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>noise fields</title>
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<script type="module" src="js/sketch.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,27 @@
|
||||
import { GUI } from "lil-gui";
|
||||
import io from "socket.io-client";
|
||||
|
||||
const socket = io("http://localhost:3000");
|
||||
|
||||
const gui = new GUI();
|
||||
const params = {
|
||||
fps: 60,
|
||||
zoom: 0.01,
|
||||
backgroundTicks: 60,
|
||||
textSpread: 0,
|
||||
maxSpawns: 1,
|
||||
textAlpha: 0.0,
|
||||
textTicks: 1
|
||||
};
|
||||
gui.add(params, "fps", 0.1, 60);
|
||||
gui.add(params, "zoom", 0.001, 0.5);
|
||||
gui.add(params, "backgroundTicks", 1, 240).step(1);
|
||||
const textFolder = gui.addFolder("Text");
|
||||
textFolder.add(params, "textSpread", 0, 200);
|
||||
textFolder.add(params, "maxSpawns", 1, 20).step(1);
|
||||
textFolder.add(params, "textAlpha", 0, 255).step(1);
|
||||
textFolder.add(params, "textTicks", 1, 240).step(1);
|
||||
|
||||
gui.onChange((e) => {
|
||||
socket.emit("paramUpdate", { key: e.property, value: e.value });
|
||||
});
|
||||
@@ -0,0 +1,105 @@
|
||||
import p5 from "p5";
|
||||
import io from "socket.io-client";
|
||||
const socket = io("http://localhost:3000");
|
||||
|
||||
const params = {
|
||||
fps: 60,
|
||||
zoom: 0.01,
|
||||
backgroundTicks: 60,
|
||||
textSpread: 0,
|
||||
maxSpawns: 1,
|
||||
textAlpha: 0.0,
|
||||
textTicks: 1,
|
||||
};
|
||||
|
||||
socket.on("paramUpdate", ({ key, value }) => {
|
||||
params[key] = value;
|
||||
console.log(`Updated param ${key} to ${value}`);
|
||||
});
|
||||
|
||||
let bg;
|
||||
let cw = 1;
|
||||
let ch = 1;
|
||||
|
||||
const poem =
|
||||
"everybody is pretty ugly \
|
||||
lover \
|
||||
you are my mirror \
|
||||
I can't judge this \
|
||||
predicament \
|
||||
autism alienation and sitting beach \
|
||||
this depression's a symptom but it's disease too \
|
||||
spaces \
|
||||
interiors in berlin city reach peach intention lover drag sleepless depth fear dirt lone";
|
||||
const realText = poem.split(" ").filter((t) => t.length > 0);
|
||||
|
||||
const sketch = (p) => {
|
||||
p.setup = async () => {
|
||||
bg = await p.loadImage("assets/scans/1200dpi 16bit grayscale.png");
|
||||
console.log(bg);
|
||||
p.createCanvas(p.windowWidth, p.windowHeight);
|
||||
console.log("canvas created");
|
||||
// const stream = c.elt.captureStream(60);
|
||||
};
|
||||
|
||||
let bgTick = 0;
|
||||
let textTick = 0;
|
||||
let sx, sy;
|
||||
let word, bounds;
|
||||
|
||||
p.draw = () => {
|
||||
p.background(220);
|
||||
// update scale
|
||||
p.setFrameRate(params.fps);
|
||||
|
||||
if (++bgTick >= params.backgroundTicks) {
|
||||
cw = Math.floor(bg.width * params.zoom);
|
||||
ch = Math.floor(bg.height * params.zoom);
|
||||
|
||||
sx = Math.random(0) * (bg.width - cw);
|
||||
sy = Math.random(0) * (bg.height - ch);
|
||||
bgTick = 0;
|
||||
}
|
||||
if (++textTick >= params.textTicks) {
|
||||
word, bounds = nextText();
|
||||
textTick = 0;
|
||||
}
|
||||
|
||||
p.image(bg, 0, 0, p.windowWidth, p.windowHeight, sx, sy, cw, ch);
|
||||
drawText();
|
||||
};
|
||||
|
||||
function nextText() {
|
||||
for (let i = 0; i < Math.random() * params.maxSpawns; i++) {
|
||||
const word = realText[Math.floor(Math.random() * realText.length)];
|
||||
const wx =
|
||||
p.windowWidth / 2 -
|
||||
p.textWidth(word) / 2 +
|
||||
p.random(-params.textSpread, params.textSpread);
|
||||
const wy =
|
||||
p.windowHeight / 2 -
|
||||
p.textAscent() / 2 +
|
||||
p.random(-params.textSpread, params.textSpread);
|
||||
const bounds = p.textBounds(word, wx, wy);
|
||||
return { word, bounds };
|
||||
}
|
||||
}
|
||||
|
||||
function drawText() {
|
||||
const whitespace = 2;
|
||||
p.stroke(0, 0, 0, params.textAlpha);
|
||||
p.fill(255, 255, 255, params.textAlpha);
|
||||
p.rect(
|
||||
bounds.x - whitespace,
|
||||
bounds.y - whitespace,
|
||||
bounds.w + 2 * whitespace,
|
||||
bounds.h + 2 * whitespace,
|
||||
);
|
||||
|
||||
p.noStroke();
|
||||
p.fill(0, 0, 0, params.textAlpha);
|
||||
p.text(word, wx, wy);
|
||||
}
|
||||
};
|
||||
|
||||
new p5(sketch);
|
||||
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"name": "noise-fields-frontend",
|
||||
"version": "1.0.0",
|
||||
"main": "index.js",
|
||||
"keywords": [],
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"p5": "^2.2.2",
|
||||
"socket.io-client": "^4.8.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"lil-gui": "^0.21.0",
|
||||
"vite": "^8.0.0"
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user