Web Directions

Conffab

  • Speakers
  • Presentations
  • Conferences
  • Organizers
  • Topics
  • Pricing & Plans
  • Browse
  • Signup
  • Sign In
  • Speakers
  • Presentations
  • Conferences
  • Organizers
  • Topics
  • Pricing & Plans
  • Browse
  • Signup
  • Sign In
Advanced Search
Searching videos

Canvas Cold War

Simon Swain at Code 2015
Sign up for Conffab Free to watch this and hundreds of other videos for free
  • Details
  • Keypoints

Growing up in the ’80s wasn’t as cool as it’s made out to be. As a teenager of that decade, we not only lacked any reasonable fashion sense, we lived under the constant shadow of nuclear oblivion. In hindsight, the arms race begat some huge advances in computing theory and practice, and since your average mobile phone is more powerful than that era’s entire North American early warning system, makes a great target for simulation.

Cold War is an in-browser recreation of the nightmare that was the ’80s, exploring emergent systems, the limits of Javascript performance, and some techniques that might actually be useful in your day job when you get back to civilization. Expect vector graphics, high altitude bombers, missiles, killer satellites and explosions. More than a few explosions. And unlike the ’80s, lasers that actually work.

16ms to jank! That’s our budget.

Canvas transform/translate commands are the key to really understand how to get canvas to do cool stuff. They let you do transforms with a minimum of mathematical calculations.

Classic example is the swarm simulation: you don’t define the behaviour, you define the conditions that the actors will respond to and what they will do. Then you see emergent behaviour.

This is how you can build up the Cold War game, where the nation states have a variety of weapons and counter-weapons. You can then run your simulation without actually knowing the result.

(look up the video for this one!)

simonswain.com/coldwar

You may also be interested in

Thumbnail for Rats of the Maze

Rats of the Maze

Simon Swain

Thumbnail for Once More with Feeling

Once More with Feeling

Tim Kadlec

Thumbnail for CSS Grid Layout

CSS Grid Layout

Rachel Andrew

Thumbnail for Flexing Your Layout Muscles – A Pragmatic Look at Flexbox

Flexing Your Layout Muscles – A Pragmatic Look at Flexbox

Stephanie Rewis

Thumbnail for The Power and Responsibility of Unicode Adoption

The Power and Responsibility of Unicode Adoption

Katie McLaughlin

Thumbnail for Does Your Web App Speak Schadenfreude?

Does Your Web App Speak Schadenfreude?

Greg Rewis

Thumbnail for CSS: Code Smell Sanitation

CSS: Code Smell Sanitation

Fiona Chan

Thumbnail for Zen of JavaScript

Zen of JavaScript

Dmitry Baranovskiy

More presentations from Code 2015

    Thumbnail for The State of the Animation

    The State of the Animation

    Rachel Nabors

    Thumbnail for What Comes Next for the Web Platform?

    What Comes Next for the Web Platform?

    Alex Russell

    Thumbnail for Async and Await

    Async and Await

    James Hunter

    Thumbnail for Async Frontiers in JavaScript

    Async Frontiers in JavaScript

    Domenic Denicola

    Thumbnail for Classing up ES6

    Classing up ES6

    Andy Sharman

    Thumbnail for Current Best Practice in Front End Ops

    Current Best Practice in Front End Ops

    Alex Sexton

    Thumbnail for Stop the Fanaticism – Using the Right Tools for the Job

    Stop the Fanaticism – Using the Right Tools for the Job

    Kassandra Perch

    Thumbnail for Pop-up Accessibility

    Pop-up Accessibility

    Rhiana Heath

Conffab
  • About
  • Speakers
  • Presentations
  • Conferences
  • Contact
  • Sign in
Sign Up

© Conffab 2025