Initial commit

This pixel editor is a sort of 'proof of concept' for a Javascript app. It has support for three primary colors (black, white, custom), a darken and lighten tool, a rainbow tool, and you can right click to capture a color in the custom color box. Quite handy for simple little doodles. Future work will be done mostly in the CSS for the UI layout.
author: zlg <zlg@zlg.space> 2023-08-29 06:28:04 -0700
committer: zlg <zlg@zlg.space> 2023-08-29 06:28:04 -0700
commit: e113ad82ea880ddc8c2e196755e9d9e236ef95b8 (patch)
tree: ea071345512f7dced8e2f16b377e21fb7af2a1c9
download: pixeled-js-e113ad82ea880ddc8c2e196755e9d9e236ef95b8.tar.gz
pixeled-js-e113ad82ea880ddc8c2e196755e9d9e236ef95b8.tar.bz2
pixeled-js-e113ad82ea880ddc8c2e196755e9d9e236ef95b8.tar.xz
pixeled-js-e113ad82ea880ddc8c2e196755e9d9e236ef95b8.zip
5 files changed, 590 insertions, 0 deletions
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..45d62d8
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+*.sw?
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..916aa02
--- /dev/null
+++ b/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<title>PixelED: make simple graphics in your browser!</title>
+		<link rel="stylesheet" type="text/css" href="./pixeled.css">
+		<meta http-equiv="Content-Type" content="text/html; charset=utf8">
+	</head>
+	<body onload="handler();">
+		<section id="app_area"></section>
+		<script type="text/javascript" src="./pixeled.js"></script>
+	</body>
+</html>
diff --git a/mockup.xcf b/mockup.xcf
new file mode 100644
index 0000000..ede66a2
--- /dev/null
+++ b/mockup.xcf
diff --git a/pixeled.css b/pixeled.css
new file mode 100644
index 0000000..6e2da15
--- /dev/null
+++ b/pixeled.css
@@ -0,0 +1,147 @@
+html, body {
+	margin: 0;
+	padding: 0;
+	user-select: none;
+	font-size: 1vmin;
+	color: #fff;
+}
+
+button {
+	border: 0;
+	font-size: inherit;
+	font-family: inherit;
+	color: inherit;
+	font-size: 3rem;
+	margin-collapse: collapse;
+	text-shadow: 0 0 3px #000;
+}
+
+#app_area {
+	display: grid;
+	grid-template-areas:
+		"bar editor";
+	grid-template-columns: minmax(50rem,30vw) auto;
+	height: 100vh;
+	width: 100vw;
+}
+
+/* The area behind the grid */
+#workspace {
+	background: #1e3526 linear-gradient(to right, #000000 -7%, transparent 8%);
+	grid-area: editor;
+	display: grid;
+	overflow: scroll;
+	grid-template-rows: calc(100% - 7rem) 1fr;
+}
+
+/* the canvas we're drawing on in the app */
+#grid_container {
+	display: grid;
+	grid-template-columns: repeat(16, 1fr);
+	border: 6px solid #000;
+	/* gap: 1px; */
+	background: #888;
+	aspect-ratio: 1;
+	box-shadow: 0 0 3.2rem #000;
+	z-index: 1;
+	height: 75vmin;
+	align-self: center;
+	justify-self: center;
+}
+
+/* 'pixels' on the canvas itself */
+#grid_container > div {
+	background: white;
+	aspect-ratio: 1;
+	border-bottom: 1px solid #888;
+	border-right: 1px solid #888;
+	border-collapse: collapse;
+}
+
+#grid_caption {
+	align-self: center;
+	justify-self: center;
+	font-size: 4rem;
+}
+
+#toolbox {
+	grid-area: bar;
+	background: #00762a;
+	border-right: 3px solid #0b3a1d;
+	display: grid;
+	box-sizing: border-box;
+	padding: 0 1em 1em 1em;
+	font-size: 3rem;
+	font-family: "PT Mono", "Envy Code R", "Liberation Mono", "DejaVu Sans", monospace;
+	font-weight: bold;
+	z-index: 2;
+	gap: 2rem;
+	grid-template-rows: 10vh 15vh 20vh 1fr 1fr 1fr 1fr
+}
+
+#toolbox > header {
+	margin: 0;
+	padding: 0;
+	font-size: 3em;
+	text-align: center;
+	text-shadow: 0 0 3px #000;
+	align-self: center;
+	justify-self: center;
+}
+
+#color_picker {
+	display: grid;
+	grid-template-columns: 1fr 1fr 1fr;
+}
+
+#color_picker > div {
+	display: grid;
+	grid-template-rows: 70% 30%;
+	text-align: center;
+	font-weight: bold;
+	font-size: 1.3em;
+}
+
+#color_picker > div.selected {
+	background: rgba(255,255,255, 0.4);
+}
+
+#color_picker > div > .swatch {
+	aspect-ratio: 1;
+	margin: 0.4em auto 0.2em auto;
+	display: block;
+	height: 4rem;
+}
+
+#black_pick > .swatch {
+	background: #000;
+}
+
+#white_pick > .swatch {
+	background: #fff;
+}
+
+#custom_pick > .swatch {
+}
+
+#canvas_opts {
+	display: grid;
+	grid-template-rows: 2.5rem 1fr 1fr;
+}
+
+#rainbow {
+	background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
+	border: 2px solid rgba(0,0,0,0.4);
+}
+
+#darken {
+	background: #0b3a1d;
+}
+
+#lighten {
+	background: #20964a;
+}
+
+button.selected {
+	border: 4px solid #fff !important;
+}
diff --git a/pixeled.js b/pixeled.js
new file mode 100644
index 0000000..731f2e0
--- /dev/null
+++ b/pixeled.js
@@ -0,0 +1,430 @@
+/*
+ * PixelED.js - simple pixel-like editor for the browser
+ *
+ * This project is primarily just practice for The Odin Project's curriculum.
+ * (Found at https://theodinproject.com/) It claims this project is difficult,
+ * but the requirements are quite well-defined, so it doesn't strike me as
+ * difficult. Just tedious.
+ *
+ * This project was a good fit for TOP because it shows the student the
+ * difficulties in building intuitive and effective interfaces in the Web
+ * environment.
+ *
+ * Scope:
+ * [x] Erase button (sets all canvas pixels to white)
+ * [x] Black button, sets current color to black
+ * [x] White button, sets current color to white
+ * [x] 'Current color' indicator, clicking color box brings up dialog.
+ * [-] Reset button (sets canvas to 16x16, current color to black)
+ *	'-> Refreshing the page does the same damn thing. YAGNI
+ * [x] Range slider for canvas size, with numeric indicator
+ * [x] Rainbow drawing mode that randomizes the color on every draw
+ * [x] Darken drawing mode that darkens the color by 10% on every draw
+ *  '-> BONUS: Added a Lighten mode based on the reverse of Darken
+ * [x] 'Clear' button, to make the entire canvas white
+ */
+
+/* GOALS
+ *
+ * [*] discrete drawing states
+ * [*] click-and-drag to draw, not hover
+ * [ ] right click to copy color under cursor (and switch to it)
+ *
+ * STRETCH GOAL
+ *
+ * [ ] better UI layout
+ * [ ] possible export to PNG or GIF format (!!! :D)
+ */
+
+/* disable right click's default behavior */
+document.body.addEventListener("contextmenu",
+	(e) => {
+		e.preventDefault();
+	}
+);
+/* Target element for the application */
+const root = document.getElementById('app_area');
+const dstates = Object.freeze({
+	BLACK: 0,
+	WHITE: 1,
+	CUSTOM: 2,
+	RAINBOW: 3,
+	DARKEN: 4,
+	LIGHTEN: 5
+});
+current_color = "#000000";
+custom_color = "#2564b8";
+draw_state = dstates["BLACK"];
+do_draw = false;
+
+function clean_element(node) {
+	while (node.firstChild) {
+		node.removeChild(node.firstChild);
+	}
+}
+
+function resetCanvas(size) {
+	clean_element(grid);
+	grid.style.gridTemplateColumns = `repeat(${size}, 1fr)`;
+	rebuildCanvas(size);
+}
+
+function rebuildCanvas(size) {
+	size = lintCanvasSize(size);
+	for (i=0; i<(size*size); i++) {
+		box = grid.appendChild(document.createElement("div"));
+		box.addEventListener("mouseover", function(e) {
+			if (do_draw) {
+				drawColor(e.target, current_color);
+			}
+		});
+		box.addEventListener("mousedown", function(e) {
+			console.log(e);
+			if (e.which == 3 || e.button == 2) {
+				console.log(e);
+				setCustom();
+				custom_color = rgb_to_hex(e.target.style.backgroundColor);
+				document.querySelector("#custom_color").value = custom_color;
+				current_color = custom_color;
+			} else {
+				do_draw = true;
+				drawColor(e.target, current_color);
+			}
+		}, { "passive": false, "capture": true } );
+		box.addEventListener("mouseup", function(e) {
+			do_draw = false;
+		}, { "passive": false } );
+	}
+}
+
+function clearCanvas() {
+	pixels = document.querySelectorAll("#grid_container div");
+	pixels.forEach(function(i) {
+		i.removeAttribute("style");
+	});
+}
+
+function handler() {
+	initialSetup();
+}
+
+function initialSetup() {
+	workspace = document.createElement("div");
+	workspace.id = ["workspace"];
+
+	/* generate a 16x16 grid of divs */
+	grid = document.createElement("div");
+	grid.id = ["grid_container"];
+	/* turn the pen off when you leave the canvas */
+	grid.addEventListener("mouseleave",
+		(e) => {
+			do_draw = false;
+		}, { "passive": false }
+	);
+
+	grid_caption = document.createElement("div");
+	grid_caption.id = ["grid_caption"];
+	grid_caption.textContent = 'an app by ZLG';
+
+	resetCanvas(16);
+	/* we should have 256 divs appended to the grid. */
+
+	toolbox = document.createElement("div");
+	toolbox.id = ["toolbox"];
+	/* This is somewhat hackish, but takes up fewer lines of code than accomplishing
+	 * the same thing in pure JS. It's all scaffolding anyway. */
+	toolbox.innerHTML = `
+	<header>pixelED</header>
+	<section id="color_picker">
+		<div id="black_pick">
+			<span class="swatch"></span>
+			<span class="sw_label">black</span>
+		</div>
+		<div id="white_pick">
+			<span class="swatch"></span>
+			<span class="sw_label">white</span>
+		</div>
+		<div id="custom_pick">
+			<input class="swatch" type="color" value="" name="custom_color" id="custom_color"></input>
+			<span class="sw_label">custom</span>
+		</div>
+	</section>
+	<section id="canvas_opts">
+		<label>canvas size</label>
+		<input type="range" min="8" max="100" value="16" name="canvas_size" id="canvas_size" list="sizes"></input>
+		<input type="text" value="16"></input>
+	</section>
+	<button id="rainbow">rainbow</button>
+	<button id="darken">darken</button>
+	<button id="lighten">lighten</button>
+	<button id="erase">erase</button>
+	<datalist id="sizes">
+		<option value="16"></option>
+		<option value="32"></option>
+		<option value="48"></option>
+		<option value="64"></option>
+		<option value="80"></option>
+	</datalist>
+	`;
+
+	/* elements must be added to the page in order to be queried */
+	root.appendChild(toolbox);
+	root.appendChild(workspace);
+	workspace.appendChild(grid);
+	workspace.appendChild(grid_caption);
+
+	/* initial settings */
+	setBlack();
+	document.querySelector("#custom_color").value = custom_color;
+
+	/* add events, AFTER added to DOM above */
+	document.getElementById("rainbow").addEventListener("click", setRainbow);
+	document.getElementById("darken").addEventListener("click", setDarken);
+	document.getElementById("lighten").addEventListener("click", setLighten);
+	document.getElementById("erase").addEventListener("click", clearCanvas);
+
+	/* The canvas slider */
+	document.querySelector("#canvas_size").addEventListener(
+		"input",
+		(e) => {
+			let size = lintCanvasSize(e.target.value);
+			document.querySelector('#canvas_opts input[type="text"]').value = size;
+			e.target.value = size;
+			resetCanvas(size);
+		}
+	);
+
+	document.querySelector('#canvas_opts > input[type="text"]').addEventListener(
+		"change",
+		(e) => {
+			let size = lintCanvasSize(e.target.value);
+			document.querySelector("#canvas_size").value = size;
+			e.target.value = size;
+			resetCanvas(size);
+		}
+	);
+	document.querySelector('#canvas_opts > input[type="text"]').addEventListener(
+		"keydown",
+		(e) => {
+			let size = lintCanvasSize(e.target.value);
+			/* todo switch case */
+			if (e.key == "ArrowDown") {
+				if (size > 8) {
+					size -= 1;
+					e.target.value = size;
+					document.querySelector("#canvas_size").value = size;
+					resetCanvas(size);
+				}
+				// parseInt(e.target.value) -= 1;
+			} else if (e.key == "ArrowUp") {
+				if (size < 100) {
+					size += 1;
+					e.target.value = size;
+					document.querySelector("#canvas_size").value = size;
+					resetCanvas(size);
+				}
+				// parseInt(e.target.value) += 1;
+			}
+		}
+	);
+
+	/* The Black color option */
+	document.querySelectorAll('#black_pick > span').forEach(
+		(i) => {
+			i.addEventListener("click", setBlack);
+		}
+	);
+	document.querySelector('#black_pick').addEventListener("click", setBlack);
+
+	/* The White color option */
+	document.querySelectorAll('#white_pick > span').forEach(
+		(i) => {
+			i.addEventListener("click", setWhite);
+		}
+	);
+	document.querySelector('#white_pick').addEventListener("click", setWhite);
+
+	/* The Custom color option */
+	document.querySelector('#custom_color').addEventListener("input", setCustom);
+	document.querySelector('#custom_pick > span').addEventListener("click", setCustom);
+	document.querySelector('#custom_pick').addEventListener("click", setCustom);
+}
+
+function drawColor(e, c) {
+	switch (draw_state) {
+		case dstates["BLACK"]:
+			e.style.backgroundColor = "#000000";
+			break;
+		case dstates["WHITE"]:
+			e.style.backgroundColor = "#ffffff";
+			break;
+		case dstates["CUSTOM"]:
+			current_color = document.querySelector("#custom_color").value;
+			e.style.backgroundColor = current_color;
+			break;
+		case dstates["RAINBOW"]:
+			e.style.backgroundColor = gen_rainbow();
+			break;
+		case dstates["DARKEN"]:
+			e.style.backgroundColor = gen_darken(e.style.backgroundColor);
+			break;
+		case dstates["LIGHTEN"]:
+			e.style.backgroundColor = gen_lighten(e.style.backgroundColor);
+			break;
+	}
+}
+
+function setRainbow() {
+	draw_state = dstates["RAINBOW"];
+	clearSelected();
+	document.querySelector("#rainbow").classList.toggle("selected");
+}
+
+function setDarken() {
+	draw_state = dstates["DARKEN"];
+	clearSelected();
+	document.querySelector("#darken").classList.toggle("selected");
+}
+
+function setLighten() {
+	draw_state = dstates["LIGHTEN"];
+	clearSelected();
+	document.querySelector("#lighten").classList.toggle("selected");
+}
+
+function lintCanvasSize(s) {
+	s = parseInt(s);
+	if (s < 8) {
+		s = 8;
+	} else if(s > 100) {
+		s = 100;
+	}
+	return s;
+}
+
+function clearSelected() {
+	document.querySelectorAll(".selected").forEach(
+		(i) => {
+			i.classList.toggle("selected");
+		}
+	);
+}
+
+function getRGBTriplet(str) {
+	if (str[0] == "#") {
+		return hex_to_rgb(str);
+	}
+	return str.match(new RegExp("rgb\\((.*)\\)"))[1].split(", ");
+}
+
+/* transform a hex color into rgb(x, y, z) format */
+function hex_to_rgb(str) {
+	/* there are two main formats I want to support, though the third would be best, too:
+	 *
+	 * - "#abcdef": the typical hex color
+	 * - "#ade"   : shorthand for "#aaddee"
+	 * - "#abcdef99": an alpha-aware hexcode, whose fourth set represents opacity
+	 */
+	if (str[0] == "#") {
+		str = str.substr(1);
+		console.log(str);
+	}
+	switch (str.length) {
+		case 3:
+			/* shorthand hex */
+			break;
+		case 6:
+			/* standard hex */
+			let red = parseInt(str.substr(0,2),16);
+			let grn = parseInt(str.substr(2,2),16);
+			let blu = parseInt(str.substr(4,2),16);
+			return [red, grn, blu];
+			break;
+		case 8:
+			/* 32-bit hex color */
+			break;
+	}
+}
+
+function rgb_to_hex(str) {
+	if (str.length == 0) {
+		return "#ffffff";
+	}
+	let trp = getRGBTriplet(str);
+	let red = parseInt(trp[0],10).toString(16).padStart(2, '0');
+	let grn = parseInt(trp[1],10).toString(16).padStart(2, '0');
+	let blu = parseInt(trp[2],10).toString(16).padStart(2, '0');
+	return `#${red}${grn}${blu}`;
+}
+
+function setBlack() {
+	clearSelected();
+	document.querySelector("#black_pick").classList.toggle("selected");
+	draw_state = dstates["BLACK"];
+}
+
+function setWhite() {
+	clearSelected();
+	document.querySelector("#white_pick").classList.toggle("selected");
+	draw_state = dstates["WHITE"];
+}
+
+/* You have to click the <input> itself to change the color. */
+function setCustom() {
+	clearSelected();
+	document.querySelector("#custom_pick").classList.toggle("selected");
+	draw_state = dstates["CUSTOM"];
+}
+
+/* generate a random color and return its six digit hex code, with octothorpe (#) */
+function gen_rainbow() {
+	let r = Math.floor(Math.random()*255);
+	let g = Math.floor(Math.random()*255);
+	let b = Math.floor(Math.random()*255);
+	let hr = r.toString(16).padStart(2, '0');
+	let hg = g.toString(16).padStart(2, '0');
+	let hb = b.toString(16).padStart(2, '0');
+	current_color = `#${hr}${hg}${hb}`;
+	document.querySelector("#custom_color").value = current_color;
+	return current_color;
+}
+
+/* accept a given 'rgb(r, g, b)' sequence, darken each color channel by 26, and return it */
+function gen_darken(c) {
+	/* this happens on un-touched pixels, generally white by convention */
+	if (!c) {
+		return "rgb(224, 224, 224)";
+	}
+	let nc_array = [];
+	let c_array = getRGBTriplet(c);
+	c_array.forEach((i) => {
+		let num = parseInt(i);
+		num -= 26;
+		if (num < 0) {
+			num = 0;
+		}
+		nc_array.push(num);
+	});
+	let is = nc_array.join(", ");
+	return `rgb(${is})`;
+}
+
+/* accept a given 'rgb(r, g, b)' sequence, lighten each color channel by 26, and return it */
+function gen_lighten(c) {
+	/* this happens on un-touched pixels, generally white by convention */
+	if (!c) {
+		return "rgb(255, 255, 255)";
+	}
+	let nc_array = [];
+	let c_array = getRGBTriplet(c);
+	c_array.forEach((i) => {
+		let num = parseInt(i);
+		num += 26;
+		if (num > 255) {
+			num = 255;
+		}
+		nc_array.push(num);
+	});
+	let is = nc_array.join(", ");
+	return `rgb(${is})`;
+}
author	zlg <zlg@zlg.space>	2023-08-29 06:28:04 -0700
committer	zlg <zlg@zlg.space>	2023-08-29 06:28:04 -0700
commit	e113ad82ea880ddc8c2e196755e9d9e236ef95b8 (patch)
tree	ea071345512f7dced8e2f16b377e21fb7af2a1c9
download	pixeled-js-e113ad82ea880ddc8c2e196755e9d9e236ef95b8.tar.gz pixeled-js-e113ad82ea880ddc8c2e196755e9d9e236ef95b8.tar.bz2 pixeled-js-e113ad82ea880ddc8c2e196755e9d9e236ef95b8.tar.xz pixeled-js-e113ad82ea880ddc8c2e196755e9d9e236ef95b8.zip