Creative JavaScript Crash Course

This is a crash course in Creative JavaScript that you can go through in a single day. It mainly focuses on the JavaScript canvas, and covers the basics of drawing simple shapes and lines, setting up animation processes, using sprites, going fullscreen, simple blending, translation and rotation, mouse interaction and simple simulations, whilst also getting you more familar with the basics of variables, conditionals, loops and functions.

The material is all up on mimicproject.com. Here are the links in more or less the order you should tackle them. I'd recommend doing this in groups, like a workshop style activity, but you can also go through them on your own if you like.

This cheatsheet is pretty handy too :

https://github.com/micknoise/Advanced-Creative-Coding-1/blob/master/cheat-sheets/HTML5_Canvas_Cheat_Sheet.pdf

Tutorials

Creating a JavaScript Canvas

https://mimicproject.com/code/9ef19ff5-d582-4b95-50eb-ea21a63dfb64

Drawing a line

https://mimicproject.com/code/b9b12af0-8811-44a3-5c5f-45221bfb7605

Drawing other shapes

https://mimicproject.com/code/927aba4e-5652-7617-8f6e-c18a51f32d3a

Mouse Interaction

https://mimicproject.com/code/3860fcaa-ab6c-5165-1178-8f1120c7bae7

Fullscreen Canvas

https://mimicproject.com/code/95bbe0cf-63dc-cc52-2397-3bb51d7e6251

Fullscreen with auto-resize

https://mimicproject.com/code/fd8c79da-a495-1315-54f2-2c6de390685b

Basic Blending

https://mimicproject.com/code/126cdb47-499e-4d11-d7cb-2d51259d34d9

Loading an Image

https://mimicproject.com/code/41cf3f4a-ab7b-37ec-2055-d4cee9579651

Sprite Animation - this one is tricky but worth doing!

https://mimicproject.com/code/a6da9d47-f6e1-f707-e729-ee8083115254

Load Multiple Images - you'll need an image sequence for this

https://mimicproject.com/code/e8b01937-d1de-9a71-df5d-9f55041a88c2

Rotate and Translate

https://mimicproject.com/code/b7818244-4435-d97e-65ec-d16efcf80f55

Keyboard Interaction - something more simple to explain how this works

https://mimicproject.com/code/b8d3fd2e-e639-8548-ced9-7fef0be8983b

Bouncing Ball. A classic.

https://mimicproject.com/code/3bd29c55-3d19-13f4-68bd-8da7ec2f1a26