class-03.md

Class 3

🛠️ 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:

• Object-oriented (imperative)
• Functional (declarative)
  • Unleash JavaScript's Potential with Functional Programming
• And others

Languages update over time:

• Javascript history

🛠️ 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
  • Online-REPs-and-REPLs

🛠️ How does a program execute?

• Entry point (main function)
• Compiling vs Interpreting
• Basic control flow tools:
  • Functions
  • Conditionals (branching logic)
  • Loops
  • Control flow diagram
• Order of operations
  • In most languages, code executes serially by default. One operation needs to finish before the next starts.
  • Multithreading breaks out of the predictable order of execution and allows for more optimal performance, but at a cost of complexity

🛠️ Shaping our sketches

• Remapping numbers
  • User input
  • Sliders
  • Random numbers
  • Data
  • noise()
    • example: noise grid offset
    • example: noise circles
    • example: textured noise mesh
  • sin() example
    • Making generative art with simple mathematics
    • TD: lfo/pattern/function CHOPs
  • lerp() example
  • map() example
  • modulo % example
• Normalizing numbers
• Using map() - Live demo
  • Map mouse input - normalize and use for rotation
  • Map time (seconds to screen width)

⏱️ 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

• Exercises:
  • Intro to basic movement
  • And more examples/exercises
• Real-time coding vs scripting or event-based or reactive environments
  • noLoop() option in p5.js

📝 Homework:

Read:

• On Meta-Design and Algorithmic Design Systems by Rune Madsen
  • MIT Media Lab's Brilliant New Logo Has 40,000 Permutations
  • Cacheflowe - Nightlines

Watch:

• Secrets of Game Feel and Juice
• Juice it or lose it
  • See how animation effects can give an otherwise boring game lots of personality

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
  • Raven Kwok: Time
  • Humans since 1982: A Million Times
  • Reza Ali: Reactions
• 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