Making stuff with Libraries

There are several ways to make a complex system/website. For our purposes (not necessary the only way) it might involve
  1. visuals/design/space... (we'll call it landscape for the purpose of this assignment)
  2. engine/algorithm/logic (moving things inside the space, logic of the game, or the algorithm of the interactivity),
  3. interface (how someone interfaces that space...and what kind of information is revealed about the space like scores)
  4. input how someone engages with the work. Keyoard/joystick, sound, video?
  5. state (remembering what happend over sessions)
  6. communication (how I communicate with other users/website?)
  7. ... These are not mutually exlusive. If you work on one, the other parts may come with it.
    Hopefully we can explore them using libraries/examples so you get a intuition for what is happening. Today lets' have fun and create a landscape (literal landscae, or world that a game occupies, or a data landscpe)...etc
Notes

Landscape / Space

Go through the libraries here (which are known to have many users, good documentation, and a lot of examples). Look at the documentation and demos. Get a sense what it is designed for.
Build a landscape, a space, data visualization/space using one of the libraries.


LibraryGood forResources (a starting point, not a complete list)
three.js 3D space Creating a scene, three.js examples, Three.js Journey, Three.js Resources
PixiJS2D, WebGL-fast, addressable sprites Quick start, PixiJS examples, Playground, Showcase
D3.jsa data landscape, terrain or cityscape built out of real data (weather, transit, your own data) What is D3?, Getting started (see "D3 in vanilla HTML"), D3 gallery
A-Frame3D space written as HTML tags (<a-box>, <a-sky>). Built on three.js, the easiest way into 3D, and it works in VR headsets Introduction, A-Frame examples, Showcase
Babylon.jstrue 3D space, an alternative to three.js with more built in (physics, GUI) and an online playground The very first step, Feature demos, Playground
Phaser2D game worlds. A full game framework: scenes, sprites, tilemaps, camera, input and physics are included Making your first Phaser 3 game, Create a game app, Phaser examples
LeafletAn interactive map with your own markers, shapes and popups Quick start guide, Leaflet tutorials
p5.jscreative coding, generative art, the easiest on-ramp if you are newer to code Get started, p5.js examples
Warning: many libraries need a server. If you double-click your HTML file, the address bar starts with file://. A small example with one CDN line usually still works that way. But as soon as a page uses <script type="module">, or loads images, sounds, 3D models or data files, the browser blocks it and you get a blank page. three.js and PixiJS projects almost always hit this.

Fix: open the page through a server so the address starts with http://. In VS Code, install the Live Server extension, right-click your HTML file, and choose "Open with Live Server". A page uploaded to a web server also works. If you see a blank page, check the address bar first, then the console.


Library field notes

Write these while you look through the documentation and demos (spend 10-20 minutes), before you start prompting. Every library has its own vocabulary: nouns for the things it makes (in three.js: Scene, Camera, Mesh) and verbs for what you do with them. Look at the "Getting Started" page, the words after new in the first example, and the words that keep repeating across the demos. (Remember, traditionally these libraries take months to learn so you will not be able to fully understand the language unless you have prior experience). 
## Library field notes
Libraries I looked at:
Why I chose this one:
What it is for: (digested in your own words)  
What it is not good for:
Vocabulary (5 to 8 words what you understand to be the vocabulary used):


Start in Plan mode

Before asking Copilot to write any code, make a plan with it first.
  1. In VS Code, open the Chat view (⌃⌘I on Mac, Ctrl+Alt+I on Windows).
  2. Choose Plan from the agents dropdown at the bottom of the chat (the menu that usually says "Agent").
  3. Describe the landscape you want to build. Use the library's vocabulary from your field notes, and ask for one self-contained index.html file.
  4. Plan mode does not change any files. It answers with a step-by-step plan and questions about anything unclear. Answer the questions and revise the plan until it describes what you want.
  5. When the plan looks right, click the button to implement it.
Copy the final plan into your README along with your prompts.



Sample starter Each one has the prompts that were typed, in order, and the page that came out of them. Read the prompts first, then open the page. (In retrospect,

SampleLibraryPromptPage
Clickable, draggable cubesthree.js prompt html
Platformer gamePixiJS prompt html


Hand in

Use one library and create a scene. (If you have time/interest/tokens, you can work on another library. Make sure you hand it in as a separate folder).
Hand in your working html/js/css files (you can ask Copilot to generate one self-contained file, which may be easier), with these two things:
  1. Comments in the code. Comment inside the code what it does, in English. You can have AI write this.
  2. A README.md file with:
    • a Library field notes section (see above)
    • the library you used
    • the prompts you used
    • the % of AI usage remaining when you started, and the % remaining when you finished
Put your landscape and its README in google drive folder here.

(Next time we do this kind of lab, I'd like to make possible for other students in the class to test your landscape as a starting point if they choose to do so. Also it gives us a sense what we can do with these different libraries).
Notes

Lab 2: What is the Logic/Algorithm/Engine

Give your own landscape from Lab 1 something that happens in it: movement, a narrative beat, a rule that plays out over time. This should run on its own, no button required yet, that is Lab 3. Before adding anything, check what your landscape library already includes. Some of them (Phaser, Babylon.js, A-Frame, D3.js) ship their own engine, so you may not need a second library at all.

What pairs with what:
LandscapeEngine optionsNote
three.js Anime.js, GSAP, Rapier (2D/3D) Anime.js/GSAP tween position/rotation directly, no adapter needed. Not Matter.js, that is 2D-only.
PixiJS Anime.js, GSAP, Matter.js, Rapier Tween a sprite's x/y/alpha directly. GSAP has an optional PixiPlugin for extras like tint. PixiJS's own Ticker is just the frame loop, not motion itself, you still write or import that.
D3.js its own d3.transition() Already ships its own animation system, you may not need Anime.js or GSAP at all.
A-Frame its own animation component, or Anime.js/GSAP Add animation="..." to a tag and it moves, no Javascript needed for simple motion. It is three.js underneath, so the three.js options work too. Physics needs a separate add-on.
Babylon.js its own animation system and physics, or GSAP Animation and physics (gravity, collisions) are built in, you likely do not need another library.
Phaser its own tweens, timers and physics It is a game framework, the engine is already included: tweens, timed events, and two physics systems (a simple one called Arcade, and Matter.js). Do not add a second engine.
Leaflet plain Javascript, or GSAP No engine included. Move a marker with a timer and setLatLng(), or use the built-in flyTo() to move the camera. Not Matter.js or Rapier, a map has no physics.
p5.js Matter.js, or Anime.js/GSAP p5.js + Matter.js is the most well-trodden combo (see Coding Train's p5-matter examples), a good default if you want physics and are newer to this.


Update your README to say what the engine does and how to see it running.

Publish the updated landscape and engine, this is what you or a classmate build on in Lab 3.
Notes

Lab 3: Interface

Use your own or a classmate's landscape and engine. Read the README first, then build an interface on top of it: controls that let someone touch what is already running.

You do not need to master the library. The point is an interesting interface, not fluency in a tool, use AI to help read the code and find what is safe to hook into. That reading, with help, is the actual exercise. If you use a classmate's, this is "read a system you did not write." If the README does not tell you enough, that is useful information, not a dead end, note what was missing.
Notes

Lab 4: State

Give your landscape and interface persistent state, something it remembers after the page reloads, or that is shared across visitors. What is worth remembering, and about whom? That is the real question a database answers.

Feeds into the final project.
Notes