https://github.com/quinten/spaces

html5 canvas animation experiment, loop of spaces in colors
https://github.com/quinten/spaces

3d-graphics animation canvas demo es6 javascript

Last synced: 26 days ago
JSON representation

html5 canvas animation experiment, loop of spaces in colors

• Host: GitHub
• URL: https://github.com/quinten/spaces
• Owner: Quinten
• License: mit
• Created: 2018-01-27T20:39:31.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2018-02-06T21:45:35.000Z (almost 7 years ago)
• Last Synced: 2024-12-17T05:52:41.740Z (about 1 month ago)
• Topics: 3d-graphics, animation, canvas, demo, es6, javascript
• Language: JavaScript
• Homepage: https://quinten.github.io/spaces/
• Size: 31.3 KB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# spaces

## html5 canvas animation experiment, loop of spaces in colors

Demo: https://quinten.github.io/spaces/

### About this demo

I programmed this demo to get familiar with some of the new es6 javascript features. So it probably won't work in IE11.

It has a little homemade 3d engine running that is loaded through javascript modules. No external frameworks. Everything is drawn onto the canvas 2d context.

The animation is a camera moving through doors and turning corners, but it is kept very abstract. There is no shading on the walls and each room appears to have a different color.

If you look deeper into the code, you will see that there are actually no walls rendered at all. Instead the doors are being rendered with a special compositing effect that reveals the door behind it. Once a door is passed, the background of the canvas becomes the color of the door.

### Running the code on your local machine

Once you have cloned this repo, you can run a local dev server with:

```

node server.js

```

And open http://localhost:4567/ in your browser.

### License

MIT license