Skip to content

add example images #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
milaflops wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

add example images #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
/source_images
4 changes: 3 additions & 1 deletion drawings.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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 *
Expand Down Expand Up @@ -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) => {
Expand Down
Binary file added images/dither_checkerboard.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/dither_floyd_steinberg.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/dither_input.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/dither_mazing.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/dither_random_noise.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/input_diagonal_gradient.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/input_random_noise.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/input_solid_black.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/input_solid_white.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
328 changes: 209 additions & 119 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
<script src="./drawings.js"></script>
<title>dithered pixel bonanza</title>
<style>
* {
body {
background-color: #AAAAAA;
}

Expand All @@ -18,6 +18,63 @@
margin-right: 2vh;
margin-left: 2vh;
}

div.slider {
display: flex;
flex-direction: column;
max-width: 300px;
background-size: cover;
/* border: 1px solid black; */
border-radius: 15px;
padding: 2px 10px 4px 10px;
margin: 5px 0 5px 0;
}

div.slider-label {
/* font-family: Arial, Helvetica, sans-serif; */
font-weight: bold;
color: black;
}

div.slider-label .number {
float: right;
}

div.slider.randomNoise {
background-image: url('./images/input_random_noise.png');
}

div.slider.diagonalGradient {
background-image: url('./images/input_diagonal_gradient.png');
}

div.slider.solidWhite {
background-image: url('./images/input_solid_white.png');
}

div.slider.solidBlack {
background-image: url('./images/input_solid_black.png');
}

div.slider.ditherInputImage {
background-image: url('./images/dither_input.png');
}

div.slider.ditherRandomNoise {
background-image: url('./images/dither_random_noise.png');
}

div.slider.ditherMazing {
background-image: url('./images/dither_mazing.png');
}

div.slider.ditherFloydSteinberg {
background-image: url('./images/dither_floyd_steinberg.png');
}

div.slider.ditherCheckerboard {
background-image: url('./images/dither_checkerboard.png');
}
</style>
</head>
<body>
Expand All @@ -30,128 +87,161 @@ <h1>dither pattern maker</h1>
></canvas>

<h2>Display settings</h2>
<span>Size</span>
<input
type="range"
min="2"
max="100"
value="25"
class="weight"
id="baseResolution"
/><span id="baseResolutionDisp">
25
</span>
<br/>

<div class="slider">
<div class="slider-label">
<span>Size</span>
<span class="number" id="baseResolutionDisp">
25x25
</span>
</div>
<input
type="range"
min="2"
max="100"
value="25"
class="weight"
id="baseResolution"
/>
</div>

<h2>Image Generation</h2>
<span>Random Noise</span>
<input
type="range"
min="0"
max="100"
value="25"
class="weight"
id="imageNoise"
/>
<span id="imageNoiseDisp"></span>
<br/>

<span>Diagonal Gradient</span>
<input
type="range"
min="0"
max="100"
value="75"
class="weight"
id="imageGradient"
/>
<span id="imageGradientDisp"></span>
<br/>

<span>Solid White</span>
<input
type="range"
min="0"
max="100"
value="0"
class="weight"
id="imageSolidWhite"
/>
<span id="imageSolidWhiteDisp"></span>
<br/>

<span>Solid Black</span>
<input
type="range"
min="0"
max="100"
value="0"
class="weight"
id="imageSolidBlack"
/>
<span id="imageSolidBlackDisp"></span>
<br/>

<div class="slider randomNoise">
<div class="slider-label">
<span>Random Noise</span>
<span class="number" id="imageNoiseDisp"></span>
</div>
<input
type="range"
min="0"
max="100"
value="25"
class="weight"
id="imageNoise"
/>
</div>

<div class="slider diagonalGradient">
<div class="slider-label">
<span>Diagonal Gradient</span>
<span class="number" id="imageGradientDisp"></span>
</div>
<input
type="range"
min="0"
max="100"
value="75"
class="weight"
id="imageGradient"
/>
</div>

<div class="slider solidWhite">
<div class="slider-label">
<span>Solid White</span>
<span class="number" id="imageSolidWhiteDisp"></span>
</div>
<input
type="range"
min="0"
max="100"
value="0"
class="weight"
id="imageSolidWhite"
/>
</div>

<div class="slider solidBlack">
<div class="slider-label">
<span>Solid Black</span>
<span class="number" id="imageSolidBlackDisp"></span>
</div>
<input
type="range"
min="0"
max="100"
value="0"
class="weight"
id="imageSolidBlack"
/>
</div>

<h2>Dithering Blend</h2>
<span>Input Image:</span>
<input
type="range"
min="0"
max="100"
value="100"
class="weight"
id="ditherImage"
/>
<span id="ditherImageDisp"></span>
<br/>

<span>Random Noise:</span>
<input
type="range"
min="0"
max="100"
value="25"
class="weight"
id="ditherNoise"
/>
<span id="ditherNoiseDisp"></span>
<br/>

<span>Mazing:</span>
<input
type="range"
min="0"
max="100"
value="50"
class="weight"
id="ditherMaze"
/>
<span id="ditherMazeDisp"></span>
<br/>

<span>Floyd-Steinberg:</span>
<input
type="range"
min="0"
max="100"
value="0"
class="weight"
id="ditherFloydSteinberg"
/>
<span id="ditherFloydSteinbergDisp"></span>
<br/>

<span>Checkerboard:</span>
<input
type="range"
min="0"
max="100"
value="0"
class="weight"
id="ditherCheckerboard"
/>
<span id="ditherCheckerboardDisp"></span>
<br/>
<div class="slider ditherInputImage">
<div class="slider-label">
<span>Input Image:</span>
<span class="number" id="ditherImageDisp"></span>
</div>
<input
type="range"
min="0"
max="100"
value="100"
class="weight"
id="ditherImage"
/>
</div>

<div class="slider ditherRandomNoise">
<div class="slider-label">
<span>Random Noise:</span>
<span class="number" id="ditherNoiseDisp"></span>
</div>
<input
type="range"
min="0"
max="100"
value="25"
class="weight"
id="ditherNoise"
/>
</div>

<div class="slider ditherMazing">
<div class="slider-label">
<span>Mazing:</span>
<span class="number" id="ditherMazeDisp"></span>
</div>
<input
type="range"
min="0"
max="100"
value="50"
class="weight"
id="ditherMaze"
/>
</div>

<div class="slider ditherFloydSteinberg">
<div class="slider-label">
<span>Floyd-Steinberg:</span>
<span class="number" id="ditherFloydSteinbergDisp"></span>
</div>
<input
type="range"
min="0"
max="100"
value="0"
class="weight"
id="ditherFloydSteinberg"
/>
</div>

<div class="slider ditherCheckerboard">
<div class="slider-label">
<span>Checkerboard:</span>
<span class="number" id="ditherCheckerboardDisp"></span>
</div>
<input
type="range"
min="0"
max="100"
value="0"
class="weight"
id="ditherCheckerboard"
/>
</div>

<span>Re-generate random noise:</span>
<input
Expand Down