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:
https://developer.mozilla.org/en-US/docs/Web/Media/Formats
CANVAS FILTERS
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/filter
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%);2 – MANDALAS
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
https://blog.mikeswanson.com/ai2canvas
Platetter || Bernardini || Behles || Mairone || Torres || Ryan || Waggenheim || Phipps / Denardo / Bono / Hoffmann / Richardson / Dincheva / Bono / Curtis
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
http://converterpoint.com/
HTML5 Video // Mozilla
Manipulating video: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Manipulating_video_using_canvas
Optimizing HTMl5 Video
https://www.dacast.com/blog/optimizing-html5-video-streaming/
Ellis / Lowell / Roque / Whitesel / Denardo / Richardson / Sprague