A presentation at ReactNext 2024 in in Tel Aviv-Yafo, Israel by Kevin Maes
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!
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.