Evolving JavaScript: Cultivating Genetic Algorithms for Creative Coding

Evolving JavaScript Cultivating Genetic Algorithms for Creative Coding Kevin Maes | JSConf Budapest - June 28, 2024

Evolving JavaScript Cultivating Genetic Algorithms for Creative Coding Jó napot! Kevin Maes | JSConf Budapest - June 28, 2024

From the way way way back machine

Kevin Maes @kvmaes

Evolutionary Computation Genetic Programming (GP) Lawrence Fogel

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

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

States of a genetic algorithm

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.

Population Initialization

draw()

draw()

Evaluation

Evaluation + fitness function

Selection

Selection by roulette wheel

Selection by roulette wheel

Crossover

Crossover

Mutation

Mutation

Demo Repo github.com/kevinmaes/ga Circles Particles

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

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

Things I’ve learned fi •Population size •Tweak the tness function •Try other selection methods •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

LIVE DIE REPEAT

kevin@kevinmaes.com linkedin.com/in/kevinmaes @kvmaes Kevin Maes github.com/kevinmaes Thank you!