-
Notifications
You must be signed in to change notification settings - Fork 0
/
mode7.html
127 lines (107 loc) · 3.59 KB
/
mode7.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Mode 7</title>
<style>
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
background: black;
color: white;
}
canvas {
width: 640px;
height: 400px;
image-rendering: pixelated;
}
</style>
</head>
<body>
<canvas width="320" height="200"></canvas>
<script src="mode7.js"></script>
<script>
function createImageDataFromUrl(url) {
return new Promise((resolve, reject) => {
const i = new Image()
i.crossOrigin = 'anonymous'
i.src = url
i.onload = (e) => {
const canvas = document.createElement('canvas')
canvas.width = i.width
canvas.height = i.height
const cx = canvas.getContext('2d')
cx.drawImage(i, 0, 0)
resolve(cx.getImageData(0,0,cx.canvas.width,cx.canvas.height))
}
i.onerror = (e) => {
reject(e)
}
})
}
Module.onRuntimeInitialized = async _ => {
console.log(Module, Module.buffer === Module.wasmMemory.buffer)
const canvas = document.querySelector('canvas')
const cx = canvas.getContext('2d', {
alpha: false
})
const keys = new Map()
function key(e) {
keys.set(e.code, e.type === 'keydown')
}
window.addEventListener('keyup', key)
window.addEventListener('keydown', key)
const PlaneSize = 2048
const planePointer = Module._get_safe_memory(PlaneSize * PlaneSize * 4)
const plane = new ImageData(new Uint8ClampedArray(Module.buffer, planePointer, PlaneSize * PlaneSize * 4), PlaneSize, PlaneSize)
const targetPointer = Module._get_safe_memory(320 * 200 * 4)
const target = new ImageData(new Uint8ClampedArray(Module.buffer, targetPointer, 320 * 200 * 4), 320, 200)
createImageDataFromUrl('https://azazeln28.neocities.org/codepen/image/circuit.png')
.then((imageData) => {
for (let i = 0; i < imageData.data.length; i++) {
plane.data[i] = imageData.data[i]
}
})
let angle = 0
, x = 0
, y = 0
, frameID
Module._set_perspective(Math.PI * 0.5, 0.001, 0.006)
Module._set_plane(plane.width, plane.height, planePointer)
Module._set_view(angle, x, y)
function frame(time) {
cx.fillStyle = 'white'
cx.fillRect(0, 0, cx.canvas.width, cx.canvas.height)
if (keys.get('ArrowLeft')) {
angle -= 0.05
} else if (keys.get('ArrowRight')) {
angle += 0.05
}
if (keys.get('ArrowUp')) {
x += Math.cos(angle) * 0.001
y += Math.sin(angle) * 0.001
} else if (keys.get('ArrowDown')) {
x -= Math.cos(angle) * 0.001
y -= Math.sin(angle) * 0.001
}
Module._set_view(angle, x, y)
Module._render(target.width, target.height, targetPointer)
cx.putImageData(target, 0, 0)
//cx.putImageData(plane, 0, 0)
cx.font = '16px monospace'
cx.textAlign = 'left'
cx.textBaseline = 'top'
cx.fillText(`${time}`, 0, 0)
cx.fillText(`${angle}, ${x}, ${y}`, 0, 16)
frameID = window.requestAnimationFrame(frame)
}
frameID = window.requestAnimationFrame(frame)
}
</script>
</body>
</html>