Initial commit

1.js

@@ -0,0 +1,50 @@
+const black = '#1a181a';
+const white = '#e5c463';
+let xScale = 0.015;
+let yScale = 0.02;
+
+let xOffset = 0;
+let yOffset = 0;
+
+let gridsize = 6;
+let width = window.innerWidth;
+let height = window.innerHeight;
+
+function setup() {
+	createCanvas(width, height);
+	drawGrid();
+}
+
+function draw() {
+	yOffset += 0.2;
+	xOffset += 0.1;
+	drawGrid();
+}
+
+function drawGrid() {
+  background(black);
+  noStroke();
+	fill(white);
+
+  for (let x = 1; x < width; x += gridsize) {
+    for (let y = 1; y < height; y += gridsize) {
+			let adjustedY = + yOffset;
+			let noiseValue = noise((x + xOffset) * xScale, (adjustedY + yOffset) * yScale);
+
+			if (noiseValue >= 0.55) {
+				square(x, y, gridsize);
+			}
+    }
+  }
+
+	fill(black);
+  for (let x = 1; x < width; x += gridsize) {
+    for (let y = 1; y < height; y += gridsize) {
+			let noiseValue = noise((x + 2 * xOffset) * 2 * xScale, (y + 2 * yOffset) * 2 * yScale);
+
+			if (noiseValue >= 0.5) {
+				square(x, y, gridsize);
+			}
+    }
+  }
+}

2.js

@@ -0,0 +1,54 @@
+const black = '#1a181a';
+const white = '#e5c463';
+let xScale = 0.015;
+let yScale = 0.02;
+
+let xOffset = 0;
+let yOffset = 0;
+
+let gridsize = 6;
+let width = window.innerWidth;
+let height = window.innerHeight;
+
+let t = 0;
+let tdir = 1;
+
+function setup() {
+	createCanvas(width, height);
+	drawGrid();
+}
+
+function draw() {
+	yOffset += 0.2;
+	xOffset += 0.1;
+	t += tdir;
+	if (t > width / gridsize) {
+		tdir = -1;
+	} else if (t <= 0) {
+		tdir = 1;
+	}
+
+	drawGrid();
+}
+
+function drawGrid() {
+  background(white);
+  noStroke();
+	fill(black);
+
+  for (let x = 0; x < width; x += gridsize) {
+		if (x % t < t * gridsize) {
+			rect(x, 0, gridsize, height);
+		}
+	}
+
+  for (let x = 0; x < width; x += gridsize) {
+    for (let y = 0; y < height; y += gridsize) {
+			let noiseValue = noise((x + 2 * xOffset) * 2 * xScale, (y + 2 * yOffset) * 2 * yScale);
+
+			if (noiseValue >= 0.5) {
+				square(x, y, gridsize);
+			}
+    }
+  }
+}

3.js

@@ -0,0 +1,38 @@
+const black = '#1a181a';
+const white = '#e5c463';
+let width = window.innerWidth;
+let height = window.innerHeight;
+
+let video;
+let playing = false;
+
+function setup() {
+	createCanvas(width, height, WEBGL);
+  video = createVideo(['sun.webm']);
+  video.hide();
+	noFill();
+	noStroke();
+}
+
+function draw() {
+	background(0);
+	if (!playing) {
+		return;
+	}
+  // Draw the first instance of the video in the canvas.
+  push();
+  rotateWithFrameCount();
+  texture(video);
+  sphere(400);
+  pop();
+}
+
+function mousePressed() {
+	video.loop();
+	playing = true;
+}
+
+// Rotate 1 degree per frame along all three axes
+function rotateWithFrameCount() {
+  rotateY(frameCount / 1000);
+}

4.js

@@ -0,0 +1,45 @@
+const black = '#1a181a';
+const white = '#e5c463';
+let width = window.innerWidth;
+let height = window.innerHeight;
+
+let xScale = 0.015;
+let yScale = 0.02;
+
+let gridsize = 10;
+
+let canvas;
+let frameBuffer;
+
+function setup(){
+	canvas = createCanvas(width, height, WEBGL);
+	frameBuffer = createFramebuffer({ width: 800, height: 800 });
+	noFill();
+	noStroke();
+	rotateY(45);
+}
+
+function draw() {
+	if (frameCount % 60 === 0) {
+		frameBuffer.begin();
+		background(black);
+		fill(white);
+		const count = frameCount / 100;
+		for (let x = -0.5 * width; x < 0.5 * width; x += gridsize) {
+			for (let y = -0.5 * height; y < 0.5 * height; y += gridsize) {
+				let noiseValue = noise(x * xScale, y * yScale, count);
+
+				square(x, y, noiseValue * gridsize);
+			}
+		}
+		frameBuffer.end();
+	}
+
+	background(black);
+	push();
+	rotateY(frameCount / 1000);
+  textureWrap(MIRROR);
+	texture(frameBuffer);
+	sphere(200);
+	pop();
+}

flake.lock

@@ -0,0 +1,58 @@
+{
+  "nodes": {
+    "flake-parts": {
+      "inputs": {
+        "nixpkgs-lib": "nixpkgs-lib"
+      },
+      "locked": {
+        "lastModified": 1722555600,
+        "narHash": "sha256-XOQkdLafnb/p9ij77byFQjDf5m5QYl9b2REiVClC+x4=",
+        "owner": "hercules-ci",
+        "repo": "flake-parts",
+        "rev": "8471fe90ad337a8074e957b69ca4d0089218391d",
+        "type": "github"
+      },
+      "original": {
+        "owner": "hercules-ci",
+        "repo": "flake-parts",
+        "type": "github"
+      }
+    },
+    "nixpkgs": {
+      "locked": {
+        "lastModified": 1723688146,
+        "narHash": "sha256-sqLwJcHYeWLOeP/XoLwAtYjr01TISlkOfz+NG82pbdg=",
+        "owner": "nixos",
+        "repo": "nixpkgs",
+        "rev": "c3d4ac725177c030b1e289015989da2ad9d56af0",
+        "type": "github"
+      },
+      "original": {
+        "owner": "nixos",
+        "ref": "nixos-24.05",
+        "repo": "nixpkgs",
+        "type": "github"
+      }
+    },
+    "nixpkgs-lib": {
+      "locked": {
+        "lastModified": 1722555339,
+        "narHash": "sha256-uFf2QeW7eAHlYXuDktm9c25OxOyCoUOQmh5SZ9amE5Q=",
+        "type": "tarball",
+        "url": "https://github.com/NixOS/nixpkgs/archive/a5d394176e64ab29c852d03346c1fc9b0b7d33eb.tar.gz"
+      },
+      "original": {
+        "type": "tarball",
+        "url": "https://github.com/NixOS/nixpkgs/archive/a5d394176e64ab29c852d03346c1fc9b0b7d33eb.tar.gz"
+      }
+    },
+    "root": {
+      "inputs": {
+        "flake-parts": "flake-parts",
+        "nixpkgs": "nixpkgs"
+      }
+    }
+  },
+  "root": "root",
+  "version": 7
+}

flake.nix

@@ -0,0 +1,32 @@
+{
+  description = "evoke";
+
+  inputs = {
+    nixpkgs.url = "github:nixos/nixpkgs/nixos-24.05";
+    flake-parts.url = "github:hercules-ci/flake-parts";
+  };
+
+  outputs = inputs@{ self, ... }:
+    inputs.flake-parts.lib.mkFlake { inherit inputs; } {
+      imports = [
+        inputs.flake-parts.flakeModules.easyOverlay
+      ];
+
+      systems = [ "x86_64-linux" ];
+
+			perSystem = {
+				system,
+				pkgs,
+				config,
+				...
+			}:
+			{
+				devShells.default = pkgs.mkShell {
+					buildInputs = with pkgs; [
+						nodejs
+						nodePackages.serve
+					];
+				};
+			};
+    };
+}

index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charSet="utf-8"/>
+		<title>pub.solar</title>
+		<style>
+			body {
+				margin: 0;
+			}
+		</style>
+	</head>
+	<body>
+		<script type="application/javascript" src="./p5.min.js"></script>
+		<script type="application/javascript" src="./4.js"></script>
+	</body>
+</html>