1pixel 4bit color のimage のデータを文字列で出力するエディタをp5jsでつくった

Base64で読み込んだimageで.loadPixels()を呼ぶとエラーがでるので

（2022 11/20現在）自前のフォーマットでimageデータ文字列を作ることに

したのでそれ用の簡易エディタを残しておく

作った文字列は下記の関数でimageに変換できる

引数は独自フォーマットの16進数文字列と拡大したい倍率

戻り値はimage

let myimage=makeimage(hexstrings,

で動くはず

上部

左からcanvas,色選択用のrect,カラーピッカー,透過パレットチェックボックス

中部

”magnifi select”(倍率）これはエディタでのみでデータにはならない

”outputsize” 出力画像サイズこれで倍率を選ぶと下部のtextareaに

データが出力される

下部

”output hex” 16進数 画像データ文字列, これをコピペして使う

”canvas crear ”canvasをクリアする

”input hex hera” ここに再編集したい文字列データを貼り付け

hex read をクリックするとcanvasに読み込み

1pixel 3色（透過の有り）か４色が使える（透過なし）

もしかしたらtextarea とかcolorpickerの表示位置が

ずれてるかもしれないが致し方なし。

//makeimage from hex strings with magnifi (1,2,4,8,16)
	function makeimage(hexstrings, magni) {
		let ix = hexstrings;
		//read header  "transparent num","imagew","imageh" [0~6] (3byte)
		let tpc = parseInt(ix.slice(0, 2), 16);
		let imgw = parseInt(ix.slice(2, 4), 16);
		let imgh = parseInt(ix.slice(4, 6), 16);
		let imagemap = [];
		//read color palet "palet rgb(3yite)"x4 [6~30] (24 = 12byte = 4x3)
		let colorpalet = [];
		for (let i = 0; i < 4; i++) {
			let rgba = [];
			for (let j = 0; j < 3; j++) {
				rgba.push(parseInt(
					//head + rgb(3byte)+r(1byte)+g(1byte)+b(1byte) (1byte=2char)
					ix.slice(6 + i * 6 + j * 2, 8 + i * 6 + j * 2), 16));
			}
			if (tpc == i) {
				rgba.push(0);
			} else {
				rgba.push(255);
			}
			colorpalet.push(rgba);
		}
		//read pixels color one pixel 4 bit   [30~EOF] (4bit *2 =1byte=2pixels)
		for (let i = 30; i < ix.length; i++) {
			let onebyte = parseInt(ix[i], 16);
			let upper = parseInt(onebyte / 4);
			let lower = onebyte % 4;
			imagemap.push(upper);
			imagemap.push(lower);
		}
		let himg = createImage(imgw * magni, imgh * magni);
		himg.loadPixels();

		for (let y = 0; y < himg.height; y++) { ///magnifi; y++) {
			for (let x = 0; x < himg.width; x++) { ///magnifi; x++) {
				let index = (x + y * himg.width) * 4;
				let cnum = imagemap[
					parseInt(x / magni) +
					parseInt(y / magni) * imgw];

				himg.pixels[index] = colorpalet[cnum][0];
				himg.pixels[index + 1] = colorpalet[cnum][1];
				himg.pixels[index + 2] = colorpalet[cnum][2];
				himg.pixels[index + 3] = colorpalet[cnum][3];
			}
		}
		himg.updatePixels();
		return himg;
	}