$$
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 |