index.html 3.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
  1. <html>
  2. <head>
  3. <title>Olive.c</title>
  4. <link rel="stylesheet" href="css/reset.css" />
  5. <link rel="stylesheet" href="css/index.css" />
  6. </head>
  7. <body>
  8. <h1>Olive.c Demos</h1>
  9. <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>
  10. <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>
  11. <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>
  12. <div id="sec-triangle">
  13. <h2 id="demo-triangle"><a href="#demo-triangle">Triangle</a></h2>
  14. <p>Rainbow triangle together with a transparent circle. Source:&nbsp;<a href="https://github.com/tsoding/olive.c/blob/master/demos/triangle.c">demos/triangle.c</a></p>
  15. <canvas id="app-triangle"></canvas>
  16. </div>
  17. <div id="sec-dots3d">
  18. <h2 id="demo-dots3d"><a href="#demo-dots3d">Dots 3D</a></h2>
  19. <p>A bunch of 3D dots projected onto your 2D screen plus a text with a builtin monospaced font. Source:&nbsp;<a href="https://github.com/tsoding/olive.c/blob/master/demos/dots3d.c">demos/dots3d.c</a></p>
  20. <canvas id="app-dots3d"></canvas>
  21. </div>
  22. <div id="sec-squish">
  23. <h2 id="demo-squish"><a href="#demo-squish">Squish</a></h2>
  24. <p>Resizing images on the fly. Source:&nbsp;<a href="https://github.com/tsoding/olive.c/blob/master/demos/squish.c">demos/squish.c</a></p>
  25. <canvas id="app-squish"></canvas>
  26. </div>
  27. <div id="sec-triangle3d">
  28. <h2 id="demo-triangle3d"><a href="#demo-triangle3d">Triangle 3D</a></h2>
  29. <p>Rotating rainbow triangle in 3D. Unlike <a href="#demo-3d">3D dots above</a> this is a solid shape. Source:&nbsp;<a href="https://github.com/tsoding/olive.c/blob/master/demos/triangle3d.c">demos/triangle3d.c</a></p>
  30. <canvas id="app-triangle3d"></canvas>
  31. </div>
  32. <div id="sec-triangleTex">
  33. <h2 id="demo-triangleTex"><a href="#demo-triangleTex">Rotating Textures</a></h2>
  34. <p>Source:&nbsp;<a href="https://github.com/tsoding/olive.c/blob/master/demos/triangleTex.c">demos/triangleTex.c</a></p>
  35. <canvas id="app-triangleTex"></canvas>
  36. </div>
  37. <div id="sec-triangle3dTex">
  38. <h2 id="demo-triangle3dTex"><a href="#demo-triangle3dTex">Rotating Textures</a></h2>
  39. <p>Source:&nbsp;<a href="https://github.com/tsoding/olive.c/blob/master/demos/triangle3dTex.c">demos/triangle3dTex.c</a></p>
  40. <canvas id="app-triangle3dTex"></canvas>
  41. </div>
  42. <div id="sec-cup3d">
  43. <h2 id="demo-cup3d"><a href="#demo-cup3d">Cup 3D</a></h2>
  44. <p>Design by <a href="https://github.com/rexim">rexim</a>. 3D model by <a href="https://github.com/kolumb">kolumb</a>. Source:&nbsp;<a href="https://github.com/tsoding/olive.c/blob/master/demos/cup3d.c">demos/cup3d.c</a></p>
  45. <canvas id="app-cup3d"></canvas>
  46. </div>
  47. <div id="sec-teapot3d">
  48. <h2 id="demo-teapot3d"><a href="#demo-teapot3d">Utah Teapot</a></h2>
  49. <p>Famous <a href="https://graphics.stanford.edu/courses/cs148-10-summer/as3/code/as3/teapot.obj">Utah Teapot</a> model. (I have no idea why it runs with a reasonable FPS). Source:&nbsp;<a href="https://github.com/tsoding/olive.c/blob/master/demos/teapot3d.c">demos/cup3d.c</a></p>
  50. <canvas id="app-teapot3d"></canvas>
  51. </div>
  52. <script src="js/vc.js"></script>
  53. <script>
  54. startDemo("triangle", "./wasm/triangle.wasm");
  55. startDemo("dots3d", "./wasm/dots3d.wasm");
  56. startDemo("squish", "./wasm/squish.wasm");
  57. startDemo("triangle3d", "./wasm/triangle3d.wasm");
  58. startDemo("triangleTex", "./wasm/triangleTex.wasm");
  59. startDemo("triangle3dTex", "./wasm/triangle3dTex.wasm");
  60. startDemo("cup3d", "./wasm/cup3d.wasm");
  61. startDemo("teapot3d", "./wasm/teapot3d.wasm");
  62. </script>
  63. </body>
  64. </html>