Skip to content

Commit e82ea54

Browse files
532910532910
committed
initial commit
1 parent 952064d commit e82ea54

4 files changed

Lines changed: 288 additions & 0 deletions

File tree

‎index.html‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<title>Dot for Dot</title>
6+
<link rel="stylesheet" type="text/css" href="main.css">
7+
<!--script src="tile.js"/></script-->
8+
<meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=no">
9+
<link rel="license" href="http://www.gnu.org/licenses/agpl-3.0.html">
10+
</head>
11+
12+
<body>
13+
<canvas id="canvas"/>
14+
<script type="module" src="tile.js"></script>
15+
</body>
16+
17+
</html>

‎main.css‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
border: 0;
5+
}
6+
*, *:before, *:after {
7+
box-sizing: border-box;
8+
}
9+
html, body {
10+
height: 100%;
11+
width: 100%;
12+
}
13+
body {
14+
display: grid;
15+
place-items: center;
16+
background: #000000;
17+
color: #77ffff;
18+
font-family: sans-serif;
19+
font-size: 4rem;
20+
font-weight: bold;
21+
background-image: var(--noise);
22+
}
23+
canvas {
24+
height: 100%;
25+
width: 100%;
26+
}

‎tile.js‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
'use strict';
2+
3+
import * as tiles from './tiles.js';
4+
const tileNames = Object.keys( tiles );
5+
let patternIndex = 0;
6+
7+
const colors = [
8+
[255,255,255], // White
9+
[255,0,0], [0,255,0], [0,0,255], // R G B
10+
[255,255,0], [255,0,255], [0,255,255], // C M Y
11+
[0,0,0] // Black
12+
];
13+
let colorIndex = 0;
14+
15+
function addOnLoad( f ){
16+
var p = window.onload;
17+
window.onload = ()=>{
18+
if( p ) p();
19+
f();
20+
}
21+
}
22+
23+
function TileToImageData( tile, color ){
24+
const rows = tile.length;
25+
const cols = tile[0].length;
26+
const buffer = new Uint8ClampedArray( rows * cols * 4 ); // 4 bytes per pixel (R,G,B,A)
27+
28+
for( let y = 0; y < rows; y++ ){
29+
const line = tile[y];
30+
for( let x = 0; x < cols; x++ ){
31+
const idx = ( y * cols + x ) * 4;
32+
[buffer[idx], buffer[idx + 1], buffer[idx + 2]] = line[x] !== ' ' ? [0, 0, 0] : color;
33+
buffer[idx + 3] = 255;
34+
}
35+
}
36+
return new ImageData( buffer, cols, rows );
37+
}
38+
39+
async function Update( name, canvas ){
40+
let ctx = canvas.getContext( '2d' );
41+
var dpr = window.devicePixelRatio || 1;
42+
43+
const bitmap = await createImageBitmap( TileToImageData( tiles[name], colors[colorIndex] ) );
44+
ctx.fillStyle = ctx.createPattern( bitmap, 'repeat' );
45+
ctx.fillRect( 0, 0, canvas.offsetWidth * dpr, canvas.offsetHeight * dpr );
46+
}
47+
48+
addOnLoad( ()=>{
49+
const canvas = document.getElementById( 'canvas' );
50+
51+
var dpr = window.devicePixelRatio || 1;
52+
canvas.width = canvas.offsetWidth * dpr;
53+
canvas.height = canvas.offsetHeight * dpr;
54+
55+
Update( tileNames[patternIndex], canvas );
56+
window.onresize = ()=> Update( tileNames[patternIndex], canvas );
57+
58+
canvas.onwheel = async ( event ) => {
59+
60+
if( event.shiftKey ){
61+
colorIndex = ( colorIndex + Math.sign( event.deltaY ) + colors.length ) % colors.length;
62+
} else {
63+
patternIndex = ( patternIndex + Math.sign( event.deltaY ) + tileNames.length ) % tileNames.length;
64+
}
65+
66+
const canvas = document.getElementById( 'canvas' );
67+
Update( tileNames[patternIndex], canvas );
68+
event.preventDefault();
69+
}
70+
71+
})

‎tiles.js‎

Lines changed: 174 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,174 @@
1+
2+
export const tileX = [
3+
'#'
4+
];
5+
6+
export const tileX1 = [
7+
'# ',
8+
' #'
9+
];
10+
11+
export const tileX2 = [
12+
'## ',
13+
'## ',
14+
' ##',
15+
' ##',
16+
];
17+
18+
export const tileX2A = [
19+
'## ',
20+
'# ',
21+
' #',
22+
' ##',
23+
];
24+
25+
export const tileX3 = [
26+
'### ',
27+
'### ',
28+
'### ',
29+
' ###',
30+
' ###',
31+
' ###',
32+
];
33+
34+
export const tileX3A = [
35+
'### ',
36+
'# # # ',
37+
'### ',
38+
' ###',
39+
' # # #',
40+
' ###',
41+
];
42+
43+
export const tileX4 = [
44+
'#### ',
45+
'#### ',
46+
'#### ',
47+
'#### ',
48+
' ####',
49+
' ####',
50+
' ####',
51+
' ####',
52+
];
53+
54+
export const tileX5 = [
55+
'##### ',
56+
'##### ',
57+
'##### ',
58+
'##### ',
59+
'##### ',
60+
' #####',
61+
' #####',
62+
' #####',
63+
' #####',
64+
' #####',
65+
];
66+
67+
export const tileX5A = [
68+
'##### ',
69+
'##### ',
70+
'## ## # ',
71+
'##### ',
72+
'##### ',
73+
' #####',
74+
' #####',
75+
' # ## ##',
76+
' #####',
77+
' #####',
78+
];
79+
80+
export const tileX5B = [
81+
'##### ',
82+
'# # ### ',
83+
'# # # # # ',
84+
'# # ### ',
85+
'##### ',
86+
' #####',
87+
' ### # #',
88+
' # # # # #',
89+
' ### # #',
90+
' #####',
91+
];
92+
93+
export const tileX6 = [
94+
'###### ',
95+
'###### ',
96+
'###### ',
97+
'###### ',
98+
'###### ',
99+
'###### ',
100+
' ######',
101+
' ######',
102+
' ######',
103+
' ######',
104+
' ######',
105+
' ######',
106+
];
107+
108+
export const tileX6A = [
109+
'###### ',
110+
'###### ',
111+
'## ## ## ',
112+
'## ## ## ',
113+
'###### ',
114+
'###### ',
115+
' ######',
116+
' ######',
117+
' ## ## ##',
118+
' ## ## ##',
119+
' ######',
120+
' ######',
121+
];
122+
123+
export const tileX7 = [
124+
'####### ',
125+
'####### ',
126+
'####### ',
127+
'####### ',
128+
'####### ',
129+
'####### ',
130+
'####### ',
131+
' #######',
132+
' #######',
133+
' #######',
134+
' #######',
135+
' #######',
136+
' #######',
137+
' #######',
138+
];
139+
140+
export const tileX7A = [
141+
'####### ',
142+
'# # ##### ',
143+
'# ### # # # ',
144+
'# # # # # # # ',
145+
'# ### # # # ',
146+
'# # ##### ',
147+
'####### ',
148+
' #######',
149+
' ##### # #',
150+
' # # # ### #',
151+
' # # # # # # #',
152+
' # # # ### #',
153+
' ##### # #',
154+
' #######',
155+
];
156+
157+
export const tileX9 = [
158+
'######## ',
159+
'######## ',
160+
'######## ',
161+
'######## ',
162+
'######## ',
163+
'######## ',
164+
'######## ',
165+
'######## ',
166+
' ########',
167+
' ########',
168+
' ########',
169+
' ########',
170+
' ########',
171+
' ########',
172+
' ########',
173+
' ########',
174+
];

0 commit comments

Comments
 (0)