HTML SAMPLES ZIP FILES TO DOWNLOAD

TUTORIALS

HTML5 examples on santiago.bz

reference / HTML5

MAIN RESOURCE: MOZILLA
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D

html5canvastutorials.com

w3schools.com/graphics/canvas_intro.asp

diveintohtml5.info/canvas.html

html5doctor.com/an-introduction-to-the-canvas-2d-api/

http://www.cheat-sheets.org/

Danny Shifman’s Coding Train:
https://www.youtube.com/channel/UCvjgXvBlbQiydffZU7m1_aw
Workflow: https://youtu.be/gJa6wri8YNQ

STEM CODING https://www.youtube.com/channel/UCXxg0QcUky0d0C20Ua35dyQ

SVG TUTORIALS

tutorialspoint.com/html5/html5_svg.htm

adobe.com/inspire/2013/09/exporting-svg-illustrator.html

REFERENCE / EXAMPLES

html5examples.info

Mozilla Developers Site 

Safari canvas reference

MSN canvas reference

Interactive canvas

html5gamedevelopment.com/html5-demos

html5rocks.com/en/mobile/optimization-and-performance/

Javascript touch events / touch events

DESIGN EXAMPLES

https://flowstudio.co/

WEBGL / THREE.JS > threejs.org

Getting started with WebGL

HTML5 3D Canvas Tutorial

WebGL – 3D for the web

Exporting WebGL from Maya using three.js – look at chameleon example

HTML5 and WEBGL examples

WebGL Fluid Simulation

20 WebGL Examples

CODING TUTORIALS

JAVASCRIPT: blog.udemy.com/javascript-tutorial-learn-the-basics

udemy.com

codecademy.com

w3schools.com -> HTML5 + Javascript + JQuery + JSON

P5.JS

p5.js
P5 Editor https://editor.p5js.org/

OBSERVABLE: observablehq.com

VIDEO/AUDIO/Web Conferencing WEBRTC on all browsers BUT Safari

github.com/webrtc/samples

WEB FONTS

google.com/fonts
edgewebfonts.adobe.com/fonts
fontsquirrel.com

TEXT EDITORS

Visual Studio Code

ILLUSTRATOR TO CANVAS // TOOLS

Mike Swanson: AI2CANVAS

Janvas

EXPLORE
• 560 free online courses
• p5js.org
• WebGL
• WebGL 3D
• inka3D = maya to html5
• SVG
• SVG animation
• Arduino (free)
• CINDER ( MAC XCODE DEVELOPMENT C++)
• Openframeworks (app developer on mac)
• Max/Jitter (paid)
• Golan Levin
• RGA.com 
• CHROME: Commodore 64 keyboard http://www.igorski.nl/experiment/websid
• ANGULAR JS
• ANGULAR JS Examples
• Modern JS explained to Dinosaurs

SAMPLE CODES

//////////////////////////////////////////////////
// DECLARE requestAnimFrame   

var fps = 30;

window.requestAnimFrame = (function(callback) {
        return 	window.requestAnimFrame 			|| 
		        	window.webkitRequestAnimFrame 	|| 
					window.mozRequestAnimFrame 		|| 
					window.oRequestAnimFrame 		|| 
					window.msRequestAnimFrame 		||
        function(callback) {
          			window.setTimeout(callback, 1000 / fps);
        };
})();


///// CALL THE FOLLOWING FROM WITHIN THE draw() FUNCTION

requestAnimFrame( function() {
          draw();  // THIS CREATES THE ANIMATION
}); 

//////////////////////////////////////////////////    
///// MOUSE COORDINATES 

var stage, mouseX, mouseY; 

function mousePos(event) { 
  
  stage = canvas.getBoundingClientRect();
  mouseX = event.clientX - stage.left; 
  mouseY = event.clientY - stage.top;

}

<canvas id="myCanvas" onMouseMove="mousePos(event)"></canvas>
////////////////////////////////