m/pbm-js
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: m:06056781bad8c8f37ba91ceb12ad6d554d165a0d
Branches Tags
m:main
..
compare: m:6f779d0c0452f838b30352845367edd5b1b76342
Branches Tags
m:main

2 Commits
06056781ba ... 6f779d0c04

Author SHA1 Message Date
Michael Smith
6f779d0c04 Add palette viewer and color cycling to proof of concept viewer 2023-05-14 22:38:12 +02:00
Michael Smith
940523f72f Parse CRNG chunk bit flags 
See https://en.wikipedia.org/wiki/ILBM#CRNG:_Colour_range
 2023-05-14 22:38:12 +02:00
5 changed files with 188 additions and 33 deletions
Show Stats Expand all files Collapse all files

2
README.md
View File

@ -14,7 +14,7 @@ This is the format used by the PC version of Deluxe Paint II and is different fr
### In the browser ### In the browser
_Also see `index.html` and `main.js` for a more elaborate example that renders the palletized image data to a html5 canvas._ _Also see `index.html` and `main.js` for a more elaborate example that renders the image and palette data to an html5 canvas and supports color cycling._
```javascript ```javascript
import PBM from "./src/pbm.js"; import PBM from "./src/pbm.js";

28
index.html
View File

@ -9,9 +9,33 @@
<title>IFF PBM image viewer</title> <title>IFF PBM image viewer</title>
</head> </head>
<body> <body>
<p>
<input type="file" id="imagefile" /> <input type="file" id="imagefile" />
</p>
<canvas id="thumbnail-canvas"></canvas> <p>
<button id="cycleColors">Cycle colors</button>
<input type="range" min="10" max="50" value="15" id="cyclingSpeedSlider">
<span id="cyclingSpeedLabel"></span>
</p>
<div class="container">
<div class="item">
<canvas id="image-canvas"></canvas> <canvas id="image-canvas"></canvas>
</div>
<div class="item">
<div class="sidebar">
<div class="item">
<canvas id="thumbnail-canvas"></canvas>
</div>
<div class="item">
<canvas id="palette-canvas"></canvas>
<div class="buttons">
<button id="paletteLeft"><-</button>
<span id="palettePageLabel">1</span>
<button id="paletteRight">-></button>
</div>
</div>
</div>
</div>
</div>
</body> </body>
</html> </html>

120
main.js
View File

@ -30,17 +30,51 @@ const thumbnailCanvas = document.getElementById("thumbnail-canvas");
const thumbnailContext = thumbnailCanvas.getContext("2d"); const thumbnailContext = thumbnailCanvas.getContext("2d");
const imageCanvas = document.getElementById("image-canvas"); const imageCanvas = document.getElementById("image-canvas");
const imageContext = imageCanvas.getContext("2d"); const imageContext = imageCanvas.getContext("2d");
const paletteCanvas = document.getElementById("palette-canvas");
const paletteContext = paletteCanvas.getContext("2d");
const inputElement = document.getElementById("imagefile"); const inputElement = document.getElementById("imagefile");
inputElement.addEventListener("change", handleFile, false); inputElement.addEventListener("change", handleFile, false);
document.getElementById("paletteLeft").addEventListener("click", paletteLeft);
document.getElementById("paletteRight").addEventListener("click", paletteRight);
document.getElementById("cycleColors").addEventListener("click", () => {
if (running) {
running = false;
} else {
running = true;
animate();
}
});
const palettePageLabelEl = document.getElementById("palettePageLabel");
const cyclingSpeedLabel = document.getElementById("cyclingSpeedLabel");
cyclingSpeedLabel.innerText = cyclingSpeedSlider.value;
let currentPalettePage = 0;
let image = null;
let running = false;
let cycleSpeed = 15.0;
document
.getElementById("cyclingSpeedSlider")
.addEventListener("input", (evt) => {
cycleSpeed = evt.target.value;
cyclingSpeedLabel.innerText = cycleSpeed;
});
fetch("/assets/TEST.LBM") fetch("/assets/TEST.LBM")
.then((response) => { .then((response) => {
return response.arrayBuffer(); return response.arrayBuffer();
}) })
.then((buffer) => { .then((buffer) => {
const image = loadImage(buffer); image = loadImage(buffer);
drawPalette(image.palette, currentPalettePage, paletteContext);
drawImage(image.thumbnail, thumbnailContext); drawImage(image.thumbnail, thumbnailContext);
drawImage(image, imageContext); drawImage(image, imageContext);
console.log(image.cyclingRanges);
}); });
function handleFile() { function handleFile() {
@ -48,7 +82,8 @@ function handleFile() {
const reader = new FileReader(); const reader = new FileReader();
reader.onload = (evt) => { reader.onload = (evt) => {
const image = loadImage(evt.target.result); image = loadImage(evt.target.result);
drawPalette(image.palette, currentPalettePage, paletteContext);
drawImage(image.thumbnail, thumbnailContext); drawImage(image.thumbnail, thumbnailContext);
drawImage(image, imageContext); drawImage(image, imageContext);
}; };
@ -57,7 +92,7 @@ function handleFile() {
} }
function loadImage(buffer) { function loadImage(buffer) {
const image = new PBM(buffer); image = new PBM(buffer);
thumbnailCanvas.width = image.thumbnail.width; thumbnailCanvas.width = image.thumbnail.width;
thumbnailCanvas.height = image.thumbnail.height; thumbnailCanvas.height = image.thumbnail.height;
imageCanvas.width = image.width; imageCanvas.width = image.width;
@ -66,9 +101,51 @@ function loadImage(buffer) {
return image; return image;
} }
function drawImage(image, context) { function paletteLeft(evt) {
context.clearRect(0, 0, image.width, image.height); if (currentPalettePage === 0) {
let pixels = context.createImageData(image.width, image.height); currentPalettePage = 3;
} else {
currentPalettePage--;
}
palettePageLabelEl.innerText = currentPalettePage + 1;
drawPalette();
}
function paletteRight(evt) {
if (currentPalettePage === 3) {
currentPalettePage = 0;
} else {
currentPalettePage++;
}
palettePageLabelEl.innerText = currentPalettePage + 1;
drawPalette();
}
function drawPalette() {
const colorSize = 20; // in pixels
const width = 4 * colorSize; // 4 columns
const height = 16 * colorSize; // 16 rows
paletteCanvas.width = width;
paletteCanvas.height = height;
paletteContext.clearRect(0, 0, width, height);
for (let y = 0; y < 16; y++) {
for (let x = 0; x < 4; x++) {
const index = currentPalettePage * 64 + (y * 4 + x);
const color = `rgb(${image.palette[index][0]}, ${image.palette[index][1]}, ${image.palette[index][2]})`;
paletteContext.fillStyle = color;
paletteContext.fillRect(x * colorSize, y * colorSize, width, height);
}
}
}
function drawImage(image, ctx) {
ctx.clearRect(0, 0, image.width, image.height);
let pixels = ctx.createImageData(image.width, image.height);
for (let x = 0; x < image.width; x++) { for (let x = 0; x < image.width; x++) {
for (let y = 0; y < image.height; y++) { for (let y = 0; y < image.height; y++) {
@ -87,5 +164,34 @@ function drawImage(image, context) {
} }
} }
context.putImageData(pixels, 0, 0); ctx.putImageData(pixels, 0, 0);
}
function cycleColors(now) {
image.cyclingRanges.forEach((range) => {
if (range.active) {
if (!range.lastTime) range.lastTime = now;
if (now - range.lastTime > range.rate / cycleSpeed) {
if (range.direction === "forward") {
// Move last color to first position
const lastColor = image.palette.splice(range.high, 1)[0];
image.palette.splice(range.low, 0, lastColor);
} else if (range.direction === "reverse") {
// Move first color to last position
const firstColor = image.palette.splice(range.low, 1)[0];
image.palette.splice(range.high, 0, firstColor);
}
range.lastTime = now;
}
}
});
}
function animate(now) {
cycleColors(now);
drawPalette();
drawImage(image, imageContext);
if (running) requestAnimationFrame(animate);
} }

31
src/pbm.js
View File

@ -170,14 +170,31 @@ class PBM {
// Parse Color range chunk // Parse Color range chunk
parseCRNG() { parseCRNG() {
this.binaryStream.jump(2); // 2 bytes padding according to https://en.wikipedia.org/wiki/ILBM#CRNG:_Colour_range this.binaryStream.jump(2); // 2 bytes padding according to https://en.wikipedia.org/wiki/ILBM#CRNG:_Colour_range
const cyclingRange = {
rate: this.binaryStream.readInt16BE(),
flags: this.binaryStream.readInt16BE(),
low: this.binaryStream.readUint8(),
hight: this.binaryStream.readUint8(),
};
this.cyclingRanges.push(cyclingRange); const rate = this.binaryStream.readInt16BE();
const flags = this.binaryStream.readInt16BE();
const low = this.binaryStream.readUint8();
const high = this.binaryStream.readUint8();
// Parse flags according to https://en.wikipedia.org/wiki/ILBM#CRNG:_Colour_range
// If bit 0 is 1, the color should cycle, otherwise this color register range is inactive
// and should have no effect.
//
// If bit 1 is 0, the colors cycle upwards (forward), i.e. each color moves into the next
// index position in the palette and the uppermost color in the range moves down to the
// lowest position.
// If bit 1 is 1, the colors cycle in the opposite direction (reverse).
// Only those colors between the low and high entries in the palette should cycle.
const activeBitMask = 1 << 0;
const directionBitMask = 1 << 1;
this.cyclingRanges.push({
rate: rate,
active: (flags & activeBitMask) !== 0,
direction: (flags & directionBitMask) !== 0 ? "reverse" : "forward",
low: low,
high: high,
});
} }
// Parse Thumbnail chunk // Parse Thumbnail chunk

36
style.css
View File

@ -1,17 +1,25 @@
#image-canvas { .container {
position: absolute; display: flex;
top: 50%; justify-content: space-evenly;
left: 50%;
transform: translate(-50%, -50%);
width: 640px;
height: 480px;
} }
#thumbnail-canvas { .sidebar {
position: absolute; height: 500px;
top: 50%; display: flex;
left: 15%; flex-direction: column;
transform: translate(-50%, -50%); justify-content: space-evenly;
width: 80px; align-items: center;
height: 60px; }
.buttons {
display: flex;
justify-content: space-around;
}
#palette-canvas {
border: 1px solid black;
}
#cyclingSpeedSlider {
width: 70%;
} }