$$
We are given
For very large
$$
We are given
For very large
| //--------------Engine.js------------------- | |
| const WIDTH = 320; | |
| const HEIGHT = 180; | |
| const PAGES = 10; //page = 1 screen HEIGHTxWIDTH worth of screenbuffer. | |
| const PAGESIZE = WIDTH*HEIGHT; | |
| const SCREEN = 0; | |
| const BUFFER = PAGESIZE; | |
| const BUFFER2 = PAGESIZE*2; |
| http://tehmou.github.io/WebGL-from-Scratch/ | |
| a few annotated code style tutorials explaining the basics of setting up webgl, cool water ripple shader | |
| http://webglfundamentals.org/ | |
| 2d camera in canvas: | |
| http://stackoverflow.com/questions/16919601/html5-canvas-camera-viewport-how-to-actally-do-it | |
| Codeincomplete series on javascript games: | |
| http://codeincomplete.com/games/ | |
| Coding Math: | |
| http://www.codingmath.com/ | |
| Mary Rose Cook codes a Canvas game live in 30 minutes: |
Lots of "magic numbers" going on here for the motion and color, my goal was simply to learn how to animate within a canvas element. My one struggle on this one was figuring out how to make a line made up of individual circles seem continuously drawn despite the speed increase. Eureka moment came when I realized I could just draw more than 1 per frame.
| // Use Gists to store code you would like to remember later on | |
| console.log(window); // log the "window" object to the console |