diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..a8f8477 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +/source_images diff --git a/drawings.js b/drawings.js index 48f87df..388e969 100644 --- a/drawings.js +++ b/drawings.js @@ -80,6 +80,7 @@ const floydSteinberg = grid => { else if (col_idx > grid[0].length - 1) return true } + // getter and setter that doesn't break when OOB const getGrid = (row_idx,col_idx) => { if (outOfBounds(row_idx,col_idx)) return 0 @@ -127,7 +128,7 @@ const ditherPrePass = (grid,{dither}) => { ) ) + ( dither.checkerboard * ( - ( row_idx + col_idx ) % 2 == 0 ? 0.25 : 0.75 + ( row_idx + col_idx ) % 2 == 0 ? 0 : 1 ) ) + ( dither.floydSteinberg * @@ -182,6 +183,7 @@ const posturize = (grid,{base}) => { // compose base image, dither prepass, and posturization const fullGenerate = params => posturize(ditherPrePass(makeBaseImage(params),params),params) + // ditherPrePass(makeBaseImage(params),params) // plant the rectangles onto the grid based on input grid and params const drawScaledImage = (canvas,grid,params) => { diff --git a/images/dither_checkerboard.png b/images/dither_checkerboard.png new file mode 100644 index 0000000..e929259 Binary files /dev/null and b/images/dither_checkerboard.png differ diff --git a/images/dither_floyd_steinberg.png b/images/dither_floyd_steinberg.png new file mode 100644 index 0000000..94de528 Binary files /dev/null and b/images/dither_floyd_steinberg.png differ diff --git a/images/dither_input.png b/images/dither_input.png new file mode 100644 index 0000000..1476f90 Binary files /dev/null and b/images/dither_input.png differ diff --git a/images/dither_mazing.png b/images/dither_mazing.png new file mode 100644 index 0000000..e0d67c3 Binary files /dev/null and b/images/dither_mazing.png differ diff --git a/images/dither_random_noise.png b/images/dither_random_noise.png new file mode 100644 index 0000000..0748538 Binary files /dev/null and b/images/dither_random_noise.png differ diff --git a/images/input_diagonal_gradient.png b/images/input_diagonal_gradient.png new file mode 100644 index 0000000..eb2573e Binary files /dev/null and b/images/input_diagonal_gradient.png differ diff --git a/images/input_random_noise.png b/images/input_random_noise.png new file mode 100644 index 0000000..10c1252 Binary files /dev/null and b/images/input_random_noise.png differ diff --git a/images/input_solid_black.png b/images/input_solid_black.png new file mode 100644 index 0000000..bfddeba Binary files /dev/null and b/images/input_solid_black.png differ diff --git a/images/input_solid_white.png b/images/input_solid_white.png new file mode 100644 index 0000000..5173385 Binary files /dev/null and b/images/input_solid_white.png differ diff --git a/index.html b/index.html index 1c7dab0..6261f3c 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,7 @@ dithered pixel bonanza @@ -30,128 +87,161 @@

dither pattern maker

>

Display settings

- Size - - 25 - -
+ +
+
+ Size + + 25x25 + +
+ +

Image Generation

- Random Noise - - -
- - Diagonal Gradient - - -
- - Solid White - - -
- - Solid Black - - -
+ +
+
+ Random Noise + +
+ +
+ +
+
+ Diagonal Gradient + +
+ +
+ +
+
+ Solid White + +
+ +
+ +
+
+ Solid Black + +
+ +

Dithering Blend

- Input Image: - - -
- - Random Noise: - - -
- - Mazing: - - -
- - Floyd-Steinberg: - - -
- - Checkerboard: - - -
+
+
+ Input Image: + +
+ +
+ +
+
+ Random Noise: + +
+ +
+ +
+
+ Mazing: + +
+ +
+ +
+
+ Floyd-Steinberg: + +
+ +
+ +
+
+ Checkerboard: + +
+ +
Re-generate random noise: