-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
111 lines (111 loc) · 6.06 KB
/
index.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">
<title>Ghadeer's Playcloud</title>
<link type="text/css" rel="stylesheet" href="./index.css" />
<script type="importmap">
{
"imports": {
"lumen": "/node_modules/lumen/lib/index.js",
"aether": "/node_modules/aether/lib/index.js",
"gear": "/node_modules/gear/lib/index.js",
"vibrato.js/core": "/node_modules/vibrato.js/lib/js/core.js"
}
}
</script>
<script type="module">
import * as Home from "/js/home/toy.js"
import init from "/js/initializer.js"
init(Home);
</script>
</head>
<body>
<div class="menu">
<div class="items">
<div id="logo" title="Ghadeer's Playcloud"></div>
<div id="controls-button" title="Controls"></div>
<div id="about-button" title="About / Info"></div>
</div>
<div class="links">
<div id="github" title="Fork me!"></div>
<div id="linkedin" title="Contact me!"></div>
<div id="mastodon" title="Follow me!"><a rel="me" href="https://techhub.social/@gee8sh"></a></div>
<div id="youtube" title="Subscribe to my channel!"></div>
</div>
</div>
<div class="tiles">
<div style="width: 752px; height: 360px; padding: 16px">
<canvas
id="canvas"
style="display: flex; float: right; width: 360px; height: 360px; margin-left: 32px;"
width="512"
height="512">
<!-- width and height are set to match the texture dimensions in order to avoid blurring. -->
Please use a web browser that supports WebGL!
</canvas>
<h1>Welcome to Ghadeer's Playcloud!</h1>
<p>Hello! 👋🙂</p>
<p>
My name is Ghadeer, and this is my "playcloud" (as opposed to a playground).
It is where I will be creating toys, often purposeless ones,
just for the pure joy of programming, to learn something new in the process,
and hopefully to stir some curiosity in the passers-by.
</p>
<p>Please feel free to play with them! Feedback, including bug reports, is appreciated.</p>
<p>Cheers!</p>
</div>
<div class="toy" id="path-tracing"><span><p>Path Tracing</p><sub>GPU</sub></span></div>
<div class="toy" id="gravity"><span><p>Gravity</p><sub>GPU</sub></span></div>
<div class="toy" id="scalar-field-tracing"><span><p>Scalar Field<br/>Ray Casting</p><sub>GPU</sub></span></div>
<div class="toy" id="sculpting"><span><p>Sculpting</p></span></div>
<div class="toy" id="gltf-wires"><span><p>glTF Renderer</p><p>(wire frames)</p><sub>GPU</sub></span></div>
<div class="toy" id="gltf"><span><p>glTF Renderer</p></span></div>
<div class="toy" id="scalar-field"><span><p>Scalar Field</p></span></div>
<div class="toy" id="mandelbrot"><span><p>Mandelbrot</p></span></div>
<div class="toy" id="tree"><span><p>Tree</p></span></div>
<div class="toy" id="sierpinski"><span><p>Sierpinski Triangles</p></span></div>
<div class="toy" id="webgl-lab"><span><p>WebGL Lab</p></span></div>
<div class="toy" id="scanner"><span><p>Scanner</p></span></div>
<div class="toy" id="msx"><span><p>MSX Programs</p></span></div>
</div>
<div id="about" class="hud">
<div>
<h1>Ghadeer's Playcloud Home Page</h1>
<p>
The "toys" presented in this site were mainly vehicles for me to experiment with different
ideas and web technologies. Most of the toys are about graphics, but there are and there
will be some toys focusing on other interests such as simulation, audio/music, parsing,
and retro-computing (MSX).
</p>
<p>
Some of the toys have the <span style="color: red; font-weight: bold;">GPU</span> suffix.
These toys use the new and promising WebGPU API, which is still not officially released, but
is accessible either through Origin Trials or a browser experimental feature flag.
</p>
<h2>Credits</h2>
Not all artwork is mine:
<p><table style="position: relative; left: 2em;">
<tr>
<td><img src="./icons/controls.svg" class="img-char" /> <img src="./icons/monitor.svg" class="img-char" /></td>
<td>➡</td>
<td>icons by <a href="https://freeicons.io/profile/2257">www.wishforge.games</a> on <a href="https://freeicons.io">freeicons.io</a></td>
</tr><tr>
<td><img src="./icons/about.svg" class="img-char" /></td>
<td>➡</td>
<td>icon by <a href="https://freeicons.io/profile/103149">Rolas Design</a> on <a href="https://freeicons.io">freeicons.io</a></td>
</tr>
</table></p>
And the other social media icons were obtained from the respective sites they refer to.
</div>
</div>
<div id="controls" class="hud">
<div>
<h1>The Controls</h1>
<p>The controls should be quite intuitive. Just click on on the tiles to load the various toys.</p>
<p>Try interacting with the image in this panel (including dragging and dropping images onto it). </p>
</div>
</div>
</body>
</html>