glazenbol/noise-fields
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init commit

Browse Source
This commit is contained in:
glazenbol
2026-03-18 05:49:16 +01:00
commit d89da60e2d
11 changed files with 322 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.gitignore
+31
View File
@@ -0,0 +1,31 @@
# Dependencies
node_modules/
npm-debug.log
yarn-error.log
package-lock.json
yarn.lock
# Environment variables
.env
.env.local
.env.*.local
# IDE
.vscode/
.idea/
*.swp
*.swo
*~
.DS_Store
# Build output
dist/
build/
out/
# Logs
logs/
*.log
# OS
Thumbs.db
README.md
+25
View File
@@ -0,0 +1,25 @@
# noise fields
## Getting Started
Open `index.html` in your web browser and start editing `sketch.js`.
## Running Locally
For projects with media files, use a local server:
```bash
# Using Python
python -m http.server 8000
# Using Node.js
npx http-server
# Using VS Code Live Server extension
# Right-click index.html -> "Open with Live Server"
```
## Resources
- [p5.js 2.0](https://beta.p5js.org/)
- [p5.js Reference](https://p5js.org/reference/)
frontend/.gitignore
+31
View File
@@ -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/
frontend/control.html
+12
View File
@@ -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>
frontend/css/style.css
+13
View File
@@ -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;
}
frontend/index.html
+12
View File
@@ -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>
frontend/js/control.js
+27
View File
@@ -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 });
});
frontend/js/sketch.js
+105
View File
@@ -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);
frontend/package.json
+16
View File
@@ -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"
}
}
package.json
+21
View File
@@ -0,0 +1,21 @@
{
"name": "noise-fields",
"version": "1.0.0",
"main": "server.js",
"type": "module",
"scripts": {
"dev": "concurrently \"npm:dev:vite\" \"npm run dev:server\"",
"dev:vite": "cd frontend && npx vite",
"dev:server": "node server.js",
"build": "cd frontend && npx vite build",
"start": "node server.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"concurrently": "^9.2.1",
"express": "^5.2.1",
"socket.io": "^4.8.3"
}
}
server.js
+29
View File
@@ -0,0 +1,29 @@
import express from 'express';
import http from 'http';
import { Server } from 'socket.io';
const app = express();
const server = http.createServer(app);
const io = new Server(server, {
cors: {
origin: "http://localhost:5173", // allow Vite frontend
methods: ["GET", "POST"]
}
});
// Socket.IO events
io.on("connection", (socket) => {
console.log("Client connected:", socket.id);
socket.on("paramUpdate", (data) => {
socket.broadcast.emit("paramUpdate", data);
});
socket.on("disconnect", () => {
console.log("Client disconnected:", socket.id);
});
});
app.use(express.static('frontend/dist'));
server.listen(3000, () => console.log('Server running on http://localhost'));