class-05.md

Class 5

🛠️ Software Design (How to write better code)

We thought it would be easy

General advice for cleaner, better code

• Practice
• Ask for feedback from your peers or mentors (or AI)
• Refactor & clean-up your own code once it's working
• Study common coding techniques. What are people in the industry talking & writing about?
  • Watch talks from conferences
  • Read blog posts
  • Follow developers on social media

Strategies

Use Design patterns

• It takes experience to know which might be best in a given situation, so start trying them out!

Look for opportunities to DRY (Don't Repeat Yourself) up your code

• Video: What is DRY code?
• Article: "Is Your Code DRY or WET?"

SOLID principles

• SOLID principles
• The SOLID Principles in Pictures
• Applying SOLID principles in React

Defensive programming

Try Refactoring your code for better organization and code clarity

• Readability (see below)
• Comments
• Indentation
• OOP (classes) - Example sketch
• Separate files
• Build scripts
• Package managers
• es6 imports

Example of readability over brevity

🛠️ How to build anything

• Follow the engineering design process
• Break the problem down
  • Google the components of the problem, and follow the process above
  • Project management tools (Asana, Jira, Notion)
• Write ugly code, then clean it up once it works
  • Don't over-engineer it until it's working
• Ask someone for help/advice!
• What happens when you hit a wall?
  • Sleep on it
  • Go for a walk
  • Use a duck
  • Try a different approach or reduce your ambition this time around. You'll figure it out with persistence!
• Build your toolkit as you find solutions
  • Haxademic is one of mine

🛠️ Graphics Effects & Algorithms

• Nature of Code by Daniel Shiffman
• p5js libraries
• Postprocessing demo in PIXI.js
  • Postprocessing demo in p5js
• List of visual algorithms
• List of graphics algorithms @ Cacheflowe's Creative Coding Notes

🛠️ Math

Math in generative art

• Floating Point Math
• Trigonometry (Making generative art with simple mathematics)
  • Polar (circular) coordinates
  • Circular oscillation
  • Divide an arc
  • Sketch: Drive a car
• Vectors
  • Keep track of 2d/3d coordinates and do all of the math for you!
• Basic physics
  • Introduction to Matter.js - The Nature of Code
  • Matter.js example
• Collision detection
• Raytracing / Raymarching
• FFT
  • p5.js Coding Tutorial | Music Visualization with FFT
• Coding Math video series by Keith Peters
• ...and so much more

📝 Homework

Read

• So you want to build a generator by Kate Compton
• Shepherding Random Numbers by Inconvergent
• Emergence and Generative Art by Amy Goodchild
• Randomness in the Composition of Artwork by Tyler Hobbs
• Probability Distributions for Algorithmic Artists by Tyler Hobbs
• What makes generative art hard? by Ben Kovach

Build a "generator"

• Shapes
• Some ideas
  • Basic example
  • Generate an environment
  • Or a character
  • Or a pattern
  • Or a particle system
  • Animate your generated visuals
  • Add sound!

Inspiration

• Manolo - code
• Dave Bollinger
• Saskia Freeke: Patterns
• Andreas Gysin: Bots
• Everest Pipkin: Mirror Lake
• Lolo Armdz
• Amanda Cifaldi: Tiny Spires
• Cacheflowe: Branchers
• Kjetl Golid
• Frederik Vanhoutte
• Dmitri Cherniak
• Caleb Ogg
• fxhash
  • KilledByAPixel
  • flight404
  • toxi
  • https://www.fxhash.xyz/generative/slug/panta-rei

📋 Review code

• Present your animation loops