wip wtf

Cargo.toml

@@ -13,6 +13,7 @@ crate-type = ["cdylib"]
 [dependencies]
 base64 = "^0.12.3"
 bitsy-parser = "^0.72.5"
+dither = "^1.3.9"
 image = "^0.23.7"
 json = "^0.12.4"
 lazy_static = "^1.4.0"

README.md

@@ -1,3 +1,57 @@
 # pixsy
 
-convert images to rooms for use in Bitsy
+a tool for [Bitsy Game Maker](http://bitsy.org). 
+upload any image and convert it into a room.
+
+## credits
+
+made by [Max Bradbury](http://tinybird.info/). 
+makes use of my own [bitsy parser](https://crates.io/crates/bitsy-parser) library.
+
+uses the [Croppie](https://foliotek.github.io/Croppie/) image crop plugin 
+by [Foliotek](https://www.foliotek.com/)
+
+uses [wasm-bindgen](https://crates.io/crates/wasm-bindgen) to automate WebAssembly bindings.
+
+## thanks
+
+to [Adam Le Doux](http://ledoux.io/) for creating the wonderful and inspiring Bitsy
+
+to [Mark Wonnacott](https://kool.tools/) for their support, encouragement and inspiration
+
+and to everyone in the bitsy community!
+
+## contributing
+
+forks and pull requests welcome!
+
+### development prerequisites
+
+* [rust/cargo](https://rustup.rs/)
+* [pug](https://pugjs.org/)
+* [less](http://lesscss.org/)
+* a bash shell for the build script
+
+## bugs
+
+when importing images, some pixels have errors. 
+it seems to only happen for pixels surrounded at the top and left:
+```
+111    111
+100 => 110
+100    100
+```
+
+pixsy does not work in the Itch desktop program 
+because their bundled version of Chromium does not support WebAssembly.
+
+## to do
+
+* add alternative dithering options (Atkinson, Bayer 8×8)
+* add a 'smoothing' (noise reduction?) stage to remove errant pixels
+
+## could do
+
+* reimplement tile reuse option
+* add camera support so users can take a pic instead of uploading an image
+* allow user to draw to canvas

TODO.md

@@ -1,6 +0,0 @@
-# todo
-
-* tile reuse
-* noise reduction (remove lonely pixels)
-* implement Atkinson and Bayer dithering options
-* fix weird problem with pixels flipping (see test::example)

index.pug

@@ -14,7 +14,7 @@ html(lang="en-gb")
             p.
                 convert images to Bitsy rooms
                 |
-                #[a(href="./old/") old version]
+                #[a(href="http://tinybird.info/image-to-bitsy/old/" target="_blank") old version]
                 |
                 #[a(href="mailto:max@tinybird.info") email]
                 |
@@ -74,9 +74,12 @@ html(lang="en-gb")
                                         input#colour-foreground(type="color" value="#ffffff")
 
                                 label
-                                    input#dither(type="checkbox" checked=true)
                                     | dither
-                                br
+                                    select#dither
+                                    option None
+                                    option(value="Atkinson" selected=true) Atkinson
+                                    option(value="Bayer4x4") Bayer 4×4
+                                    option(value="FloydSteinberg") Floyd-Steinberg
 
                 button.pagination.prev#back-to-image previous
                 button.pagination.next#room-next add room

script.js

@@ -12,10 +12,6 @@ import init, {
     set_room_name,
 } from './pkg/pixsy.js';
 
-if (typeof WebAssembly !== "object") {
-    window.location = "./old/"
-}
-
 // stolen from https://ourcodeworld.com/articles/read/189/how-to-create-a-file-and-generate-a-download-with-javascript-in-the-browser-without-a-server
 function download(filename, text) {
     let element = document.createElement('a');
@@ -60,6 +56,10 @@ function readFile(input, callback, type = "text") {
 }
 
 async function run() {
+    if (typeof WebAssembly !== "object") {
+        window.location = "http://tinybird.info/image-to-bitsy/old/"
+    }
+
     await init();
 
     const buttonAddImage         = el("add");

src/lib.rs

@@ -3,6 +3,7 @@
 use bitsy_parser::game::Game;
 use bitsy_parser::image::Image;
 use bitsy_parser::tile::Tile;
+use dither::prelude::Dither;
 use image::{GenericImageView, Pixel, DynamicImage};
 use image::imageops::ColorMap;
 use image::imageops::FilterType::CatmullRom;
@@ -27,12 +28,18 @@ enum SelectedPalette {
     }
 }
 
+enum DitherAlgorithm {
+    Atkinson,
+    Bayer4x4,
+    FloydSteinberg,
+}
+
 struct State {
     game:       Option<Game>,
     image:      Option<DynamicImage>,
     room_name:  Option<String>,
     palette:    SelectedPalette,
-    dither:     bool,
+    dither:     Option<DitherAlgorithm>,
     brightness: i32,
 }
 
@@ -43,7 +50,7 @@ lazy_static! {
             image:      None,
             room_name:  None,
             palette:    SelectedPalette::None,
-            dither:     true,
+            dither:     Some(DitherAlgorithm::Atkinson),
             brightness: 0,
         }
     );
@@ -126,9 +133,15 @@ pub fn load_image(image_base64: String) -> String {
 }
 
 #[wasm_bindgen]
-pub fn set_dither(dither: bool) {
+pub fn set_dither(dither: &str) {
     let mut state = STATE.lock().unwrap();
-    state.dither = dither;
+
+    state.dither = match dither {
+        "Atkinson"       => Some(DitherAlgorithm::Atkinson),
+        "Bayer4x4"       => Some(DitherAlgorithm::Bayer4x4),
+        "FloydSteinberg" => Some(DitherAlgorithm::FloydSteinberg),
+        _                => None,
+    }
 }
 
 #[wasm_bindgen]
@@ -204,25 +217,55 @@ fn render_preview(state: &State) -> DynamicImage {
     let mut buffer = state.image.as_ref().unwrap().clone().into_rgba();
 
     let palette = match &state.palette {
-        SelectedPalette::None => bitsy_parser::mock::game_default().palettes[0].clone(),
+        SelectedPalette::None => {
-        SelectedPalette::Existing { id } => state.game.as_ref().unwrap().get_palette(id).unwrap().clone(),
+            bitsy_parser::mock::game_default().palettes[0].clone()
-        SelectedPalette::New { background, foreground } => palette_from(background, foreground),
+        },
+        SelectedPalette::Existing { id } => {
+            state.game.as_ref().unwrap().get_palette(id).unwrap().clone()
+        },
+        SelectedPalette::New { background, foreground } => {
+            palette_from(background, foreground)
+        },
     };
 
     let colour_map = crate::ColourMap::from(&palette);
 
     // adjust brightness
-    let mut buffer = image::imageops::brighten(&mut buffer, state.brightness);
+    let mut buffer = image::imageops::brighten(
+        &mut buffer,
+        state.brightness
+    );
 
-    if state.dither {
+    if state.dither.is_some() {
-        image::imageops::dither(&mut buffer, &colour_map);
+        // image::imageops::dither(&mut buffer, &colour_map);
+
+        // so, what needs doing?
+        // convert the buffer to the format required by the dither crate
+
+        let dither_img = dither::prelude::Img::new(buffer.iter(), 128).unwrap();
+
+        // run the dither according to user preference
+
+        // todo what is the quantise function supposed to be like?
+        // dither::ditherer::ATKINSON.dither(dither_img, colour_map);
+
+        // convert the dither format back to an ImageBuffer
+        // buffer = image::ImageBuffer::new(128, 128); //from_vec(128, 128, pixels).unwrap();
+        //
+        // for pixel in dither_img.iter() {
+        //     // todo enumerate?
+        //     buffer.put_pixel(0,0, image::Rgba::from([0,0,0,0]));
+        // }
     } else {
         // just do colour indexing
-        let indices = image::imageops::colorops::index_colors(&mut buffer, &colour_map);
+        let colour_indices = image::imageops::colorops::index_colors(
+            &mut buffer,
+            &colour_map
+        );
 
         // todo get rid of magic numbers! what about Bitsy HD?
         buffer = image::ImageBuffer::from_fn(128, 128, |x, y| -> image::Rgba<u8> {
-            let p = indices.get_pixel(x, y);
+            let p = colour_indices.get_pixel(x, y);
 
             colour_map
                 .lookup(p.0[0] as usize)