I'm your instructor, associate professor of Fine Art and Computer Science, Mark Baldridge!
A-Frame is a web framework for building virtual reality (VR) experiences. Built on top of HTML and completely wrapping three.js, it offers a powerful entity-component framework that provides declarative, extensible, and composable immersive experiences for the web.
p5.jsA port of the artist-friendly programming language Proce55ing (these days, spelled more traditionally, without the 5s) into a javascript library, p5.js, offers a robust toolkit for creating generative, and procedural works of interactive audiovisual art.
Tone.jsThough p5.js has its own method for addressing the Web Audio Api, we'll probably use the special-made toolkit Tone.js, in combination with p5.js and possibly A-Frame or its core, three.js.
HERE IS MY Coding Sound link to get started with Tone.js
Featuring animation and image textures, this is a great place to start
A-Frame: Parent/Child RelationshipsFeaturing the parent/child relationship, think about making parents that have no geometry applied. How might that be an advantage?
A-Frame: Walking ProjectParent/child person will walk around the scene
Featuring some of the work I've made for students this is a great place to start
Compare this to examples in the editor to see how to port work to our sites
Brian offers free, seamless, image textures and various "maps", like "normal maps" which can give the illusion of surface detail
Danilo has some good tutorials about A-Frame, including this one, on materials, part of a playlist with almost 30 videos! (13 are "hidden" —I dunno if he want's to make a dime off them)
Daniel Shiffman author of an influential book, The Nature of Code, also has a YouTube channel, _The Coding Train_, with tons of tutorials including this playlist
Steve's Makerspace has a playlist on "generative art" which is art that generates on the spot, based on certain parameters. He has a peculiar approach to color so you might start with 2: Color in p5.js: How to Code Generative Art. Or you can jump ahead to any topic that interests you!NOTE: Steve shares links to his p5.js editor examples in the description of each vide. These are easy to copy and share!
More to Come...