A presentation at JSConf Budapest 2024 in in Budapest, Hungary by Kevin Maes
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!
When was the moment you first realized that coding was pure joy? We all need a well-deserved break from feature releases, meetings, bug fixes, tech debt, and 10X burnout! Join me in exploring delightful, interactive experiences, inspired by nature, that we as JavaScript developers can create with our everyday coding skills. We learn about genetic algorithms, what they’re good for, and how to code with them, including a demo. Adding state machines and creative coding into the mix, our small step into the world of AI programming will enable us to produce problem solving agents that are as intelligent as they are beautiful!
The following resources were mentioned during the presentation or are useful additional information.
for free. You
can too.