add docs/index.html to redirect to docs/html/index.html

docs/Cell.js

@@ -0,0 +1,46 @@
+class Cell {
+	constructor(p5, i, j, size) {
+		this.p5 = p5;
+		this.printed = false;
+		this.gridPos = this.p5.createVector(i, j);
+		this.realPos = this.p5.createVector(i * size, j * size);
+		this.n = 0.0;
+		this.size = size;
+		this.group = 0;; 
+	}
+
+	putChar(color) {
+		let p = this.p5;
+		let chars = ['.', ':', '-', '=', '+', '*', '#', '%', '@'];
+		let index;
+		if (this.printed)
+			index = p.floor((1 - this.n) * chars.length);
+		else
+			index = p.floor(this.n * chars.length);
+		p.textSize(this.size);
+		if (this.printed)
+			color = 255 - color;
+		p.fill(color);
+		p.text(chars[index], this.realPos.x, this.realPos.y);
+	}
+
+	draw(color, alpha) {
+		let p = this.p5;
+		if (this.printed)
+			color = 255 - color;
+		p.fill(color, 20, 89, alpha);
+		p.rect(this.realPos.x, this.realPos.y, this.size);
+	}
+
+	contains(px, py) {
+		if (px >= this.realPos.x && px <= this.realPos.x + this.size &&
+			py >= this.realPos.y && py <= this.realPos.y + this.size ) {
+			return true;
+		}
+		return false;
+	}
+
+	changeColor() {
+		this.draw(34, 89, 244);
+	}
+}

docs/Grid.js

@@ -0,0 +1,144 @@
+// Created by Ilia:Ilia@hazardous.net
+
+// parent: is id of html element
+// Hold a buffer
+class Grid {
+	constructor (p5, width, height, cellsize, parent) {
+		this.p5	= p5;
+      	this.buffer;
+		this.ctx;
+		this.cells;
+		this.noise = {x:1, y:5000, z:0};
+		this.cellSize;
+		this.blur;
+		this.saturation;
+		this.tones;
+		this.init(width, height, cellsize, parent);
+	}
+
+	init(width, height, size, parent) {
+		let p = this.p5;
+		this.noise = {x:1, y:5000, z:0};
+		if(width > max_width){
+			this.ctx = p.resizeCanvas(max_width , height);
+		} else if (width <= max_width) {
+			this.ctx = p.resizeCanvas(width, height);
+		}
+		this.cellSize = size;
+		this.buffer = p.createGraphics(width, height);
+		this.cells = [];
+		this.res = {x:this.p5.floor(width / size) + 1,
+					y:this.p5.floor(height / size) + 1};
+		for (let i = 0; i < this.res.x; i++) {
+			for (let j = 0; j < this.res.y; j++) {
+				let index = i + j * this.res.y;
+				this.cells.push(new Cell(p, i, j, size, 0));
+			}
+		}
+	}
+
+	// Print text on buffer
+	text_to_buffer(str, align, x, y, textSize) {
+		let buffer = this.buffer;
+		let p = this.p5;
+		let xOff, yOff;
+		buffer.fill(0);
+		buffer.textSize(textSize);
+		buffer.textFont("Ubuntu");
+		buffer.textLeading(2);
+		buffer.textStyle(p.BOLDITALIC);
+		let textWidth = buffer.textWidth(str);
+		let textHeight = (p.textAscent() + p.textDescent()); // * (lines.lenght + 1);
+		if (align == "justify") {
+			xOff = (p.width - textWidth) / 2;
+			yOff = 0;
+		} else if (align == "center") {
+			xOff = (p.width - textWidth) / 2
+			yOff = (p.height - textHeight) / 2;
+		}
+		buffer.text(str, xOff + x, yOff + y);
+	}
+
+	img_to_buffer(img, x, y) { 
+		this.buffer.background(255);
+		this.buffer.image(img, x, y, 3 * img.width, 3 * img.height);
+	}
+	// calc average color of the buffer on each cell
+	average_color(buffer, cell) {
+		let total = 0;
+		let cellSize = cell.size;
+		for (let x = cell.realPos.x; x < cell.realPos.x + cellSize; x++) {
+			for (let y = cell.realPos.y; y < cell.realPos.y + cellSize; y++) {
+				let pixelIndex = (x + y * buffer.width) * 4;
+				let greyShade = (	buffer.pixels[pixelIndex] +
+									buffer.pixels[pixelIndex + 1] +
+									buffer.pixels[pixelIndex + 2]) / 3;
+				total += greyShade;
+			}
+		}
+		return (total / (cellSize * cellSize));
+	}
+
+	// Print buffer on cells of grid
+	buffer_to_grid(threshold, group) {
+		let buffer = this.buffer;
+
+		buffer.loadPixels();
+		let cellSize = this.cellSize;
+		for (let cell of this.cells) {
+			let average = this.average_color(buffer, cell);
+			if (average <= threshold) {
+				cell.printed = true;
+				cell.group = group;
+			}
+		}
+		buffer.clear();
+    buffer.background(255); // optional: make opaque
+	}
+
+	run_noise(amount) {
+		let p = this.p5;
+		let index, n;
+
+		this.noise.x = 1;
+		for (let i = 0; i < this.res.x; i++) {
+			this.noise.y = 99;
+			for (let j = 0 ; j < this.res.y; j++) {
+				n = p.noise(this.noise.x, this.noise.y, this.noise.z)
+				index = j + i * this.res.y;
+				this.cells[index].n = n;
+				this.noise.y += amount;
+			}
+			this.noise.x += amount;
+		}
+	}
+
+	display(option, alpha) {
+		let p = this.p5;
+		let blr = this.blur;
+		let sat = this.saturation;
+		let ton = this.tones;
+		for (let cell of this.cells) {
+			let color = p.floor(p.map(cell.n, 0, 1, -sat, ton + sat)) * (255 / ton);
+			cell.n += p.random(-blr, blr);
+			if (option == "noise") {
+				cell.draw(color, alpha);
+			} else if (option == "char") {
+				cell.putChar();
+			}
+		};
+	}
+
+	shadeFrom(x,y){
+		let p = this.p5;
+		let center = p.createVector(this.res / 2, this.res/2)
+		let radius = 50
+		for (let i = 0; i < this.res.x; i++) {
+			for (let j = 0; j < this.res.y; j++) {
+				let pos = p.createVector(i,j)
+				let dist = pos.dist(center)
+				if(dist>radius) this.cells[i+j*this.res.y].alpha = 255;
+			}
+		}
+	}
+}

docs/PerlinFog.js

@@ -0,0 +1,83 @@
+// made by Hazardous.editorial -- Ilia
+
+function PerlinFog(p, option = {}) {
+    let		grid 
+	let		mouse;
+    let		cell_size = option.cellSize || 5;			// size of cells in px
+	const	noise_precision = 16;	// Nois Precisions [1 - 32]
+	const	cursor_size = 80;		// size of Halo effect around the cursor
+	let		parent;
+	let w, h; 
+	p.setup = function () {
+		parent = p._userNode;
+		w = window.innerWidth;
+		h = window.innerHeight;
+		p.createCanvas(w, h).parent(parent);
+		p.noCursor();
+		p.frameRate(10);
+		p.noiseDetail(noise_precision);
+		p.noStroke();
+		p.pixelDensity(1);
+		grid = new Grid(p, w, h, cell_size, parent)
+		grid.init(w, h, cell_size, parent);
+		grid.saturation = 1;	// [0 - 100]
+		grid.blur = 0.08;		//noisy blur effect (randomness)
+		grid.tones = 10;		// shades of grey
+		p.printText(grid, 60);
+		grid.run_noise(0.01);
+		grid.display("noise", 255);
+	};
+
+	p.draw = function() {
+		//p.background(0).clear();
+		mouse = p.createVector(p.mouseX, p.mouseY)
+		grid.run_noise(0.01);
+		for (let cell of grid.cells) {
+			let dist = mouse.dist(cell.realPos);
+			if (dist < cursor_size) {
+				cell.n += p.map(dist, 0, cursor_size, 0.25, 0);
+			}
+		}
+		grid.display("noise", 50);
+		grid.noise.z += 0.008; 
+	};
+
+	p.windowResized = function () {
+    if (!grid) return; // prevent crash
+		w = window.innerWidth;
+		h = window.innerHeight;
+		p.resizeCanvas(w, h); // 🔧 resize canvas!
+		// cell_size = Math.floor(w * 0.01);
+		grid.init(w, h, cell_size, parent);
+		grid.run_noise(0.01);
+		grid.display("noise", 255);
+		p.printText(grid, 30);
+	};
+
+	p.printInfos = function(x, y) {
+		p.fill(255)
+		p.textSize(14);
+		p.text("size: ", 30 + x, 30 + y);
+		p.text(cell_size, 70 + x, 30 + y);
+		p.text("frame Rate: " + Math.round(p.frameRate()), 30 + x, 44 + y);
+	}
+
+	p.printText = function(grid, size) {
+		grid.buffer.background(255);
+		let fontSize = p.floor(0.0833 * window.innerWidth - 1.65);
+		if (window.innerWidth > 600)
+			grid.text_to_buffer("HAZARDOUS  ÉDiTORiAL","justify", 0, 160, fontSize);
+		else
+			grid.text_to_buffer("HAZARDOUS  ÉDiTORiAL","justify", 0, 100, fontSize);
+		grid.buffer_to_grid(180, "title");
+	}
+
+	p.handleClick = function(grid, mouse) {
+		console.log("mouse has been clicked");
+	}
+
+	p.mouseClicked = function() {
+		p.handleClick(grid, mouse);
+	}
+};
+

docs/index.html

@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<html lang="Eng">
+
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+	<title>// HAZARDOUS - IRC server//</title>
+	<!-- STYLES --> 
+	<link href="style.css" rel="stylesheet">
+	<!-- <link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet"> -->
+
+	<!-- JAVASCRIPT -->
+	<!-- <script src="p5/includes/p5.min.js"></script> -->
+    <script src="https://cdn.jsdelivr.net/npm/p5@1.11.11/lib/p5.min.js"></script>
+	<script src="Cell.js"></script>
+	<script src="Grid.js"></script>
+	<script src="PerlinFog.js" id="sketch"></script>
+	<script>
+		let max_width = 9999;
+    let img;
+		const options = {cellSize: 5};
+
+		function p5_start(sketch) {
+			if (p5_sketch) {
+				p5_sketch.remove(); // Remove old sketch
+			}
+			p5_sketch = new p5(sketch, options);
+		}
+
+		//customize PerlinFog sketch
+		// const options = { cellSize: Math.floor(window.innerWidth * 0.01) };
+
+		function PerlinFog_index(p, options) {
+
+      p.preload = function() {
+      img = p.loadImage(
+        'hazardousirc.png',
+        // success callback
+        () => console.log("✅ Image loaded successfully"),
+        // error callback
+        (err) => {
+          console.warn("⚠️ Could not load image:", err);
+          img = null; // fallback so the rest of the sketch keeps working
+        }
+      );
+    };
+			// Call the original function to set up everything
+			const original = PerlinFog(p, options);
+			// Override the printText function
+			p.printText = function(grid) {
+				grid.buffer.background(255);
+				let fontSize = p.floor(0.093 * window.innerWidth - 1.65);
+				let imgPosH = p.floor(0.093 * window.innerHeight - 1.65);
+				let heightDiff = fontSize - (fontSize / 2);
+        if (img) {
+          grid.img_to_buffer(img, window.innerWidth / 2 - (3 * img.width)  / 2, imgPosH - fontSize + 20);
+          grid.buffer_to_grid(110, "title");
+        }
+				grid.text_to_buffer("HAZARDOUS","center", 0, -heightDiff + 160, fontSize);
+				grid.text_to_buffer("- IRC server -","center", 0, heightDiff + 160, fontSize * 0.8);
+				grid.buffer_to_grid(180, "title");
+			};
+
+			p.handleClick = function(grid, mouse) {
+				for (let cell of grid.cells) {
+					if (mouse.dist(cell.realPos) < 190 && cell.group == "title") {
+						window.location.href = "html/index.html";
+						break ;
+					}
+				}
+			}
+			p.touchEnded = function () {
+				p.handleClick(grid, mouse);
+				return false; // Prevent default iOS behavior like double-tap zoom
+			};
+
+			return original;
+		}
+
+		window.onload = function () {
+			new p5(PerlinFog_index, 'background'); 
+		};
+	</script>
+
+</head>
+
+<body>
+		<div id="background" style="pointer-events: auto; touch-action: auto; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;"></div>
+</body>
+
+</html>