Weeks 11 - 15


Final Project:
Due for presentation (last week of class)(listen in class for scheduling details)
Scheduling details: due to the quiz on Thursday, Dec. 7th, all presentations will have to be made on the date reserved for the final exam:  Thursday December 14th.  See below for instructions.
Rules: Invent your own stuff, or feel free to re-use and adapt  any of "my examples" hosted at sru.edu
or, if you reuse any code from elsewhere then
  1. cite your source(s) (using proper academic citation)
  2. describe exactly what your contribution was (beyond that contributed to by the sources cited)
  3. pay special attention to copyright law and fair use.
A. Make an adventurous and interesting project using Three.js and/or A-frame, placing said project in a working web page class web space. Use original shapes and textures, shaders,  interactivity, and/or animation. Be creative!
B. Using either SVG and CSS (with options of also using of HTML5, <replicate>, and/or JavaScript), make an adventurous and interesting project,  placing said project in a working web page on obsidian. Use textures, shapes, filters, interactivity, and/or animation. Be creative!
C. Be sure to follow the rules for submitting assignments for this course: Proper subject line (456, not CPSC456, so I can find it), and proper URL pointing to your work in class folder.
D. For the presentation, limit to 120/16 = 7.5 minutes (including set-up)! Allow one minute for questions and transition to the next presenter. Taking more than the allotted time will result in a grading penalty. Display the basics of what your code does (appearance-wise), describe the nature of the coding undertaken (in general terms); mention problems you encountered and how you solved (or didn't solve those problems). Of particular interest would be any of the items listed below under "problems to work on."
Assignment #5: Due December 5th
Make a scene like this (or this), but with 20 birds, each with different colors and moving differently, and each with its wings flapping, but at different rates (related to the speed of their motion).

2nd Quiz -- Thursday Dec. 7th

Lecture topics -- for final weeks

ThreeJS (8/19), SVG (4/19), A-frame (4/19), Theory (3/19)

Problems to work on:

*By 'hoopla,' I mean additional libraries (beyond three.js itself), tortured JavaScript, obtuse formulaic gymnastics, etc. Id est: keep it simple enough that others (including you and me) can understand everything you've done.

Filter examples from lecture
New examples in ThreeJS Elements (including controls)
clicktorelease.com from Jaume Sanchez (VR and WebGL expert)
Replicate 3D examples
animating a pattern
random SVG examples

A-frame: from the FAQ: "A-Frame is an open-source web framework for building virtual reality experiences. We can build VR web pages that we can walk inside with just HTML. Under the hood, it is a three.js framework that brings the entity-component-system pattern to the DOM."
A-frame website
 A simple a-frame example *
and another one
particle system with snow

fancy water shader as used in web game using A-frame

more examples
example 5
example9 -- different colors and textures on faces, changing textures. Also transparency and reflectance.
examplea -- shadows, shininess
Wikipedia article