Textures, images, repeat loops ( for/condition/increment ) conditionals, elastic/proportional design (canvas.width and canvas.height), relative positioning. Audio and video optimization for the web. Folder structures and organizations.

Optimizing the canvas
 CT 1.6.3 -> 1.7.4
• W3.org
• W3S getContext(“2d”)
JS Reference – MOZILLA
Functions / functions2
Mathematical operations 
JS Comments
JS Variables
JS Operators
JS Comparisons
JS If…Else
JS Switch
• iacopoapps.appspot.com/hopalongwebgl/(webgl 3D)
• darkpsychedelic.ru (Flash)

Media type and format guide: image, audio, and video content:


filter: blur(5px);
filter: brightness(0.4);
filter: contrast(200%);
filter: drop-shadow(16px 16px 20px blue);
filter: grayscale(50%);
filter: hue-rotate(90deg);
filter: invert(75%);
filter: opacity(25%);
filter: saturate(30%);
filter: sepia(60%);

Using repeat loops, conditionals and mathematical functions create the following pieces that visually translate the numerical operations in your code, inspired by your research on Tibetan Mandalas. 800x600px minimum
Mandelbrot example

1) Image Mandala: using at least 10 optimized transparent personal and individual PNGs (300px on their largest side) create an interactive composition on the canvas: think of it as an interactive collage where each element will be responsive to the actions of the user.. The images must be 100% yours!

Willey / Neill / Dennehy / Curtis / Bono / Denardo / Fontano / Roque / Ellis

2) Vector Mandala: Inspire yourself by your Mandala research, and create a unique design with at least 10 interactive quadrants (each one in its own canvas) and turn it into a code/interactive based personal mandala. Illustrator CANNOT be used.
Nordhagen / Contreras / Cannatelli / Brickeen / Briesemeister / Fleming / Storozuck / Hoffmann / Denardo / 

3) Illustrator Mandala:  Use Illustrator to create the quadrants that will compose an interactive vector mandala. At least 10 components in their own virtual canvas

Platetter || Bernardini || Behles || Mairone || Torres || Ryan || Waggenheim || Phipps / Denardo / Bono / Hoffmann / Richardson / Dincheva / BonoCurtis

4) Video Mandala: using at least 5 personal videos (10 secs, 400 x 225px max on the largest side, optimized as MP4) create an interactive video composition.

Miro Video Converter  mirovideoconverter.com
Online converters
HTML5 Video // Mozilla

Manipulating video: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Manipulating_video_using_canvas

Optimizing HTMl5 Video

Ellis / Lowell / Roque / Whitesel / Denardo / Richardson / Sprague