-
Notifications
You must be signed in to change notification settings - Fork 109
/
index.html
81 lines (71 loc) · 4.67 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
<html>
<head>
<title>Olive.c</title>
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/index.css" />
</head>
<body>
<h1>Olive.c Demos</h1>
<p>Olive.c is a simple graphics library that does not have any dependencies and renders everything into the given memory pixel by pixel.</p>
<p>Below is a bunch of demos written in C using this library compiled to WebAssembly. Every frame of the animations is generated pixel by pixel on CPU without using any special GPU APIs like OpenGL, Metal, etc. </p>
<p>The source code of the library and the demos is available on GitHub: <a href="https://github.com/tsoding/olive.c">https://github.com/tsoding/olive.c</a></p>
<div id="sec-triangle">
<h2 id="demo-triangle"><a href="#demo-triangle">Triangle</a></h2>
<p>Rainbow triangle together with a transparent circle. Source: <a href="https://github.com/tsoding/olive.c/blob/master/demos/triangle.c">demos/triangle.c</a></p>
<canvas id="app-triangle"></canvas>
</div>
<div id="sec-dots3d">
<h2 id="demo-dots3d"><a href="#demo-dots3d">Dots 3D</a></h2>
<p>A bunch of 3D dots projected onto your 2D screen plus a text with a builtin monospaced font. Source: <a href="https://github.com/tsoding/olive.c/blob/master/demos/dots3d.c">demos/dots3d.c</a></p>
<canvas id="app-dots3d"></canvas>
</div>
<div id="sec-squish">
<h2 id="demo-squish"><a href="#demo-squish">Squish</a></h2>
<p>Resizing images on the fly. Source: <a href="https://github.com/tsoding/olive.c/blob/master/demos/squish.c">demos/squish.c</a></p>
<canvas id="app-squish"></canvas>
</div>
<div id="sec-triangle3d">
<h2 id="demo-triangle3d"><a href="#demo-triangle3d">Triangle 3D</a></h2>
<p>Rotating rainbow triangle in 3D. Unlike <a href="#demo-3d">3D dots above</a> this is a solid shape. Source: <a href="https://github.com/tsoding/olive.c/blob/master/demos/triangle3d.c">demos/triangle3d.c</a></p>
<canvas id="app-triangle3d"></canvas>
</div>
<div id="sec-triangleTex">
<h2 id="demo-triangleTex"><a href="#demo-triangleTex">Rotating 2D Textures</a></h2>
<p>Source: <a href="https://github.com/tsoding/olive.c/blob/master/demos/triangleTex.c">demos/triangleTex.c</a></p>
<canvas id="app-triangleTex"></canvas>
</div>
<div id="sec-triangle3dTex">
<h2 id="demo-triangle3dTex"><a href="#demo-triangle3dTex">Rotating 3D Textures</a></h2>
<p>Textures by <a href="https://opengameart.org/content/handpainted-stone-texture">MELLE</a>. Source: <a href="https://github.com/tsoding/olive.c/blob/master/demos/triangle3dTex.c">demos/triangle3dTex.c</a></p>
<canvas id="app-triangle3dTex"></canvas>
</div>
<div id="sec-cup3d">
<h2 id="demo-cup3d"><a href="#demo-cup3d">Cup 3D</a></h2>
<p>Design by <a href="https://github.com/rexim">rexim</a>. 3D model by <a href="https://github.com/kolumb">kolumb</a>. Source: <a href="https://github.com/tsoding/olive.c/blob/master/demos/cup3d.c">demos/cup3d.c</a></p>
<canvas id="app-cup3d"></canvas>
</div>
<div id="sec-teapot3d">
<h2 id="demo-teapot3d"><a href="#demo-teapot3d">Utah Teapot</a></h2>
<p>Famous <a href="https://en.wikipedia.org/wiki/Utah_teapot">Utah Teapot</a>. Model by <a href="https://graphics.stanford.edu/courses/cs148-10-summer/as3/code/as3/teapot.obj">Standford University</a>. Source: <a href="https://github.com/tsoding/olive.c/blob/master/demos/teapot3d.c">demos/teapot3d.c</a></p>
<p>(I have no idea why it runs with a reasonable FPS)</p>
<canvas id="app-teapot3d"></canvas>
</div>
<div id="sec-penger3d">
<h2 id="demo-penger3d"><a href="#demo-penger3d">Penger</a></h2>
<p><a href="https://penger.neocities.org/">Penger</a> - The Mascot of Tsoding Discord Community. The character design by <a href="https://github.com/LainLayer">LainLayer</a>. The model by <a href="https://github.com/Max-Kawula">Max-Kawula</a>. Source: <a href="https://github.com/tsoding/olive.c/blob/master/demos/penger3d.c">demos/penger3d.c</a></p>
<canvas id="app-penger3d"></canvas>
</div>
<script src="js/vc.js"></script>
<script>
startDemo("triangle", "./wasm/triangle.wasm");
startDemo("dots3d", "./wasm/dots3d.wasm");
startDemo("squish", "./wasm/squish.wasm");
startDemo("triangle3d", "./wasm/triangle3d.wasm");
startDemo("triangleTex", "./wasm/triangleTex.wasm");
startDemo("triangle3dTex", "./wasm/triangle3dTex.wasm");
startDemo("cup3d", "./wasm/cup3d.wasm");
startDemo("teapot3d", "./wasm/teapot3d.wasm");
startDemo("penger3d", "./wasm/penger3d.wasm");
</script>
</body>
</html>