Skip to content

class-07.md

Latest commit

 

History

History
151 lines (118 loc) · 6.4 KB

class-07.md

File metadata and controls

151 lines (118 loc) · 6.4 KB

Class 7

🛠️ Command-Line Interface (CLI)

CLI cartoon

Why use CLI?

  • Automation
    • Launch apps/scripts
    • Convert files
    • Batch process files
    • Start your app on machine startup
  • Find files on your hard drive, or text within files
  • Make web requests (curl)
  • More powerful & custom commands
  • Take advantage of existing command-line tools
  • Media conversion tools
  • (Web) Servers
  • CLI tools are almost all free & open-source
  • Vibe coding tools like Gemini CLI, Github Copilot, & Claude Code are offered as terminal applications

How to use it?

  • Install your tools with a package manager:
    • Homebrew for Mac
    • Chocolatey or Scoop for Windows
    • apt for Linux (Ubuntu)
    • Or custom installation when necessary (usually just copying some files onto your computer)
  • Navigate to somewhere on your computer
  • Run a command!
    • Each command is basically a function that can take parameters, just like in JavaScript
    • Ask Google or AI how to do something with bash or zsh or Windows Command Prompt/Powershell
    • Write your command into the terminal
    • Or write more complex scripts into a text file, and run your text file from the command line

File paths meme

🛠️ Nodejs

The server is down

What is Node?

  • Node.js is an open-source, cross-platform, back-end JavaScript runtime environment that runs on the V8 engine and executes JavaScript code outside a web browser.
  • npm - Node Package manager
  • package.json - project config file

Use cases

  • Web Server & development tools
  • WebSocket server
  • Build tools & automations
  • Batch file-processing tasks
  • CLI tasks in a friendlier environment
  • General plumbing to connect different apps (http requests, file handling, websocket connections, etc)

Node Resources

🛠️ 3D Graphics

The Graphics pipeline

Basic layout & 3d thinking

CPU vs GPU

  • What tasks are handled on each?
    • Shader code and pixel display operations are handled on the GPU
    • Most of the code that you write is on the CPU, unless you're writing shaders or OpenGL code
      • Under the hood of p5js & Processing, there's a ton of OpenGL/WebGL code, so know how this stuff works is helpful to know what your performance bottlenecks might be
  • What's optimized on the GPU
    • It depends on the platform and tools
      • For example, certain parts of web browser rendering happen on the GPU, but differs per browser
    • Textures & texture operations
      • Loading an image file is almost always faster than drawing vector data
    • Cached Geometry with p5.Geometry and buildGeometry()
    • Drawing the pixels to the screen
  • cpu.land
  • CPU vs GPU vs TPU vs DPU vs QPU

📝 Homework:

Read:

  • The WebGL & OpenGL articles above

Watch:

Build something with a 3rd dimension

  • Steps
    • Start with WEBGL mode in p5js
      • This moves the coordinate system to the center of the screen
    • Use box(), sphere() and other 3d primitive functions to create shapes
      • p5js has additional 3d shapes like torus()
  • Stretch goals
    • Create your own 3d geometry with beginShape(), vertex(), and endShape()
    • Apply a texture to your geometry
    • Load a 3d model with loadModel()
    • Use a shader to create a custom material for your 3d geometry

📋 Review code

  • Present your data visualizations