Skip to content

class-03.md

Latest commit

 

History

History
216 lines (173 loc) · 11.8 KB

class-03.md

File metadata and controls

216 lines (173 loc) · 11.8 KB
Raw

Class 3

  • Please add context about your assignment in Canvas
    • What went well and what didn't
    • How you arrived at your result
    • A paragraph's worth of writing is plenty
    • This can be in the sketch comments, in a Canvas comment on your assignment page, or in the "paper" view when turning in
  • Tidy Code command - how to group code together like you're writing an organized text document
    • grouping related lines with line spacing
    • consistency around spacing & indentation
  • Finding nice colors: https://color.adobe.com/create/color-wheel
  • Glow effect example, fast linear gradient example
  • Oct 25 (Sat) art show for CTD class - w/Livvy & The Company
  • Creative Coding Art Show
  • Office hours start in earnest this week on Thursdays (4-6pm)
  • NBM install last week

🛠️ Programming Languages

Language differences & use-cases

Typing

  • In computer programming, a type system is a logical system comprising a set of rules that assigns a property called a type (for example, integer, floating point, string) to every term (a word, phrase, or other set of symbols). Usually the terms are various language constructs of a computer program, such as variables, expressions, functions, or modules. A type system dictates the operations that can be performed on a term. For variables, the type system determines the allowed values of that term.

    Type systems formalize and enforce the otherwise implicit categories the programmer uses for algebraic data types, data structures, or other data types, such as "string", "array of float", "function returning boolean".

  • Type System for Javascript:

    • JavaScript is a dynamically-typed language. What this means is that it performs type checking at runtime.

      Take for instance a language like java or C++ which is a statically-typed language. Type checking in such language is performed at compile time. This is very useful as it warns the programmer of all type errors before the code executes successfully. This way, programmers are subjected to [fewer errors].

    • JavaScript is a weakly typed language. It recognizes different data types (numbers, strings, etc.), but doesn't use them too strictly, trying to convert data when it seems reasonable. [Many] expressions that don't work in other languages work perfectly well in JavaScript. Try to perform any arithmetic operation (except addition) with strings or another data type (except when both operands are numbers or strings consisting only of numbers). You will see that they always work and return NaN, which makes sense.

      In strongly typed languages, adding a number to a string won't work. (Source)

  • Video: Typing: Static vs Dynamic, Weak vs. Strong

Programming paradigms:

Languages update over time:

🛠️ IDEs

  • IDEs - what can they do for you?
    • An IDE (Integrated Development Environment) lets you write, compile, and run code all in one place
    • They're built specifically for certain languages and have tools to help you write code faster and with fewer errors
    • They can be customized with plugins and themes
  • REPLs

🛠️ Professional AI coding setup

  • Read Coding and learning with AI if you haven't yet - this section is about the hands-on setup, not the philosophy
  • Pick an AI-assisted editor
  • What's actually going on under the hood
    • Inline suggestions vs. chat vs. full agentic "vibe coding" - a spectrum, not one thing
    • Context matters most - the AI can only work with what it can see (open files, terminal output, instructions you give it)
  • Giving the AI durable context/instructions
    • AGENTS.md (or CLAUDE.md, .cursorrules, etc) - a file in your project that tells the AI tool your conventions, constraints, and preferences, so you don't repeat yourself every session
    • Skills - packaged, reusable instructions for a specific kind of task (a deploy checklist, a code review style) that the AI can invoke by name
    • MCP servers (Model Context Protocol) - lets an AI tool call out to external tools/data (a database, a design tool, a browser) beyond just reading/writing files
  • Routing - not every task needs the biggest/most expensive model
    • Different tools let you pick a model per-task (fast/cheap vs. slow/capable)
    • Worth understanding what you're actually paying for (in money, time, or both)
  • Live demo: setting up a project with an AGENTS.md file and watching the difference it makes

🛠️ Debugging

Debugging meme

Since we just set up an AI coding assistant above, this is a great addition to your debugging toolkit too - but see Coding and learning with AI for how to lean on it without atrophying your own debugging skills.

Resources

Documentation meme

What to do when something doesn't work

Extra bracket meme

  • Does your IDE point out any syntax problems?
  • Is there an error message in the console?
  • Check your syntax
  • Check for typos
  • Can you make a more basic version of the code do something?
  • Double-check the documentation
  • Do some Googling - has someone else had this problem?
  • Get help from ChatGPT or Copilot

General debugging

Typo/error meme

  • Reference errors (is your code pointing to the right thing?)
  • console.log() / println()
  • Debuggers - live demo

Graphical debugging

"Why aren't things drawing the way I expect them to?"

  • It's hard, because there as less-obvious ways to identify a problem
  • If something isn't displaying, can you make a simpler version?
  • Add a "debug view"
    • In GLSL (shaders), there's no textual logging or output, so developers will draw various textures and stages of pixel operations to the screen to decipher what might be happening
    • #debugviewart

🛠️ Shaping our sketches

⏱️ Time

  • Time, according to p5js:
    • second(), minute(), hour() uses your system clock
    • Track millis() for custom/precise time intervals
    • frameCount % 60
    • nf()
    • deltaTime
  • Time according to TouchDesigner (live demo)

🛠️ Animation

📝 Homework:

Read:

Watch:

Choose a secondary tool to investigate this semester. Some suggestions:

  • Web tech: html/css/canvas/svg
    • THREE.js
    • React / react-three-fiber
  • Unity or Unreal
  • TouchDesigner
  • VVVV
  • Processing
  • openFrameworks
  • Nannou
  • OpenRNDR
  • Sonic Pi
  • Tidal Cycles or Strudel
  • Chuck

Build a clock

  • Textual, graphical, or both
  • Make it abstract or conceptual, not a literal clock
  • Some ideas
    • Use millis() for fine-grained time display
    • Build a countdown clock?
      • How long until you graduate, or other big life milestones?
      • How many years do you have left to live? Use variables to calculate
      • Doomsday Clock
    • Show multiple time zones, or use an invented time scale
    • Does IRL time of day influence the color or drawing style?
    • Add sound
    • Apply time to your favorite activity
    • Reveal the rhythm of time with shapes
    • Use Javascript for more Date functions
    • Turn the time into another "poster" and change the content depending on the time of day
  • Inspiration
  • Steps
    • Sketch it out on paper
    • Write some code, see if it sticks
      • Sometimes the code will lead us down different, interesting paths
    • Pivot when something isn't working and try a different approach

📋 Review code

  • Present your posters