class-10.md

Class 10

😱 Final projects

Goals:

• Combine your interests (code and not-code)
• Build something meaningful for yourself
• Experiment with a specific technology that interests you
• Flex your skills
• Learn some new techniques & revisit topics we've discussed in class

Deliverables:

• The code itself, uploaded to Canvas or hosted on your own website
• One or more of the following:
  • A live version of your code running on a website
  • A .zip file with the code that can be run locally
  • A video recap of the code in action
  • A live performance??
• Documentation:
  • Screenshots and/or video screen recordings that show off the output and program features
  • A description of the piece (and title if applicable). At least 1 paragraph about what you've created, what you learned, tools, techniques, and anything else that makes your project interesting. Tell a story.
  • Documentation should ideally go into your portfolio or exist on the web somewhere. You host it on your own website, the p5js editor, YouTube/Vimeo, or otherwise.
  • This could also be uploaded to https://atlasinstitute.work/

🛠️ Web Browsers

Articles & resources

• https://wesbos.com/javascript/
• https://htmlforpeople.com/
• https://github.com/leonardomso/33-js-concepts
• https://alan.norbauer.com/articles/browser-debugging-tricks

Creative Web Dev Studios

• Active Theory
• Lusion
• Resn
• Jam3
• Unit9
• Junni
• MakeMePulse
• RGA
• Media Monks
• Tool
• Wieden + Kennedy
• North Kingdom

The browser console

• Activity: alter the functionality of an existing site

SVG

• two.js svg renderer
• anime.js svg renderer & animation library
• SVGomg svg optimizer

CSS

• Enhancing User Experience With CSS Animations
• CSS Doodle by @yuanchuan
• Ana Tudor
• Drawing with A Single Div

Interesting Web APIs (check caniuse.com)

• Canvas API (Bitmap drawing docs)
• WebGL (High-performance 3d graphics)
• DeviceOrientationEvent (Accelerometer/gyroscope)
• MediaDevices & Media Streams API (Webcam, microphone, WebRTC streaming)
• WebSockets API (Persistent data streams)
• Web Audio API (Audio playback/analysis/synthesis)
• WebRTC (Video/audio/data streaming)
• WebXR (Build VR/AR/MR in-browser)
• Web MIDI API (MIDI devices)
  • JZZ
• Gamepad API (Game controller devices)
• Web Serial API (Serial devices like Arduino/Teensy)
• Geolocation API (GPS)
• Web Bluetooth

Web-based creative tools & libraries:

• Realtime graphics libraries
  • THREE.js
  • PIXI.js
  • p5js
  • two.js
  • Paper.js
  • Regl: Functional WebGL
  • Babylon.js
  • curtains.js
  • pts.js
  • http://twgljs.org/
  • ogl.js
• Live coding
  • P5LIVE
  • Hydra
  • Hedron
• Audio (see previous class for a list)
• Voice-recognition
  • Web Speech API demo (Chrome only)
• Face trackers
  • ml5
  • face-api.js
  • tracking.js
  • MediaPipe + example via UDP
    • TouchDesigner plugin
  • WebGazer.js
  • MediaPipe - Face Landmark Detection
• Body trackers
  • ml5
  • PoseNet
  • PoseNet for installations
  • Handtrack.js
  • YoHa
  • MoveNet
  • Mediapipe - Pose Landmark Detection
    • BlazePose (3d)
• Fonts
  • opentype.js
• Augmented/Mixed/Virtual Reality
  • p5xr
  • WebXR
  • AR.js
  • 8th Wall
  • Aframe
  • Native AR model viewer
• Multi-user sync
  • WebSockets (small data packets)
    • ws
    • Socket.io
    • Croquet
  • WebRTC (data/video/audio streaming)
    • PeerJS
    • Kurento

Jobs

Let's talk about jobs!

📝 Homework:

Tutorial:

• Browser console

Read:

• Articles above on CSS and other web tech
• Research the enormous landscape of web-based creative tools

Watch:

• Kate Compton: Creating generative art with Javascript
• Tim Holman - Generative Art Speedrun
• Generative Machines with Matt DesLauriers

Build something with a new (to you) Web Browser feature

• Find a tool or API above ☝️

📋 Review code

• Present your audio sketches