Evolving JavaScript: Cultivating Genetic Algorithms for Creative Coding

Evolving JavaScript Cultivating Genetic Algorithms for Creative Coding !‫שלום‬ Kevin Maes | ReactNext - June 24, 2024

11 Nachmani

From the way way way back machine

Kevin Maes @kvmaes

Evolutionary Computation Genetic Programming (GP) Evolutionary Programming (EP) Genetic Algorithms (GA) Evolutionary Strategies (ES) Lawrence Fogel John H. Holland Evolutionary Algorithms

John H. Holland

John H. Holland Adaptation in Natural and Arti cial Systems fi “general theories of adaptive processes apply across biological, cognitive, social, and computational systems”

Why genetic algorithms? Desired behavior Optimal design Solve complex search problems

There’s a GA for that! • Designing ef cient network topologies • Automated software testing • Evolving game strategies • Scheduling Problems fi • Complex hardware design

Evolved antenna First generation Middle generations Last generation

= ST5-33-142-7

States of a genetic algorithm

Population Initialization Many “individuals” Each with a potential solution Stored in their “DNA”

Evaluation & Fitness Evaluate performance Reward behavior Punishment Weighted criteria

Selection Roulette Wheel Selection 4% 28% 3% 1% 6% R 22% 8% 11% 17%

Crossover x total population size

Mutation • Need to maintain variation • Avoid “local optima” • Strive for the “global optimum” • Mutation rate • Mutation amount

Canvas, easy as 1, 2, 3. 1. // index.html <canvas id=“canvas” width=“500” height=“500”></canvas> 2. // Access the canvas element const canvas = document.getElementById(‘canvas’); 3. // Get the 2d canvas context const ctx = canvas.getContext(‘2d’); See Canvas API docs for how to draw shapes, text, styles, etc.

Creative Coding Tips • Don’t forget to clear the canvas before drawing to the canvas • Always use requestAnimationFrame • Crank up the frame rate and be impressed • Consider OOP for particle systems

• Simpli ed syntax • Built-in animation loop • Event handling • Extensive library • Community resources fi • Playground environment

Things I’ve learned • Population size • Tweak the tness function • Try other selection methods fi • Adjust mutation rates and amounts

Can GAs help us? • Optimizing UI Layouts • Automating A/B Testing • Personalized content recommendations • Code optimization or readability • Dynamic pricing models • Improve website accessibility

Resources Daniel Shiffman thecodingtrain.com/ New JavaScript version coming September 2024!

EDGE OF TOMORROW

Thank you!