diff --git a/README.md b/README.md index 81fc507..9baba65 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,19 @@ +[Play it here!](https://ncase.me/covid-19/) + # How To Translate -herp derp \ No newline at end of file +Check to see if it's been translated + +Check to see if in Issues + +Fork this whole repo + +Translate words.md, index.html, sim/index.html, thumbnail + +Add to index.html with link + +Send Pull Request + +Wait for me + +DONE! \ No newline at end of file diff --git a/banners/curve.png b/banners/curve.png new file mode 100644 index 0000000..13e7b9c Binary files /dev/null and b/banners/curve.png differ diff --git a/banners/pix/0.png b/banners/pix/0.png new file mode 100644 index 0000000..7418fbf Binary files /dev/null and b/banners/pix/0.png differ diff --git a/banners/pix/1.png b/banners/pix/1.png new file mode 100644 index 0000000..6271347 Binary files /dev/null and b/banners/pix/1.png differ diff --git a/banners/pix/2.png b/banners/pix/2.png new file mode 100644 index 0000000..b68d5a8 Binary files /dev/null and b/banners/pix/2.png differ diff --git a/banners/pix/3.png b/banners/pix/3.png new file mode 100644 index 0000000..2d6bd9d Binary files /dev/null and b/banners/pix/3.png differ diff --git a/banners/pix/4.png b/banners/pix/4.png new file mode 100644 index 0000000..3a1dde5 Binary files /dev/null and b/banners/pix/4.png differ diff --git a/banners/pix/5.png b/banners/pix/5.png new file mode 100644 index 0000000..09ebdbd Binary files /dev/null and b/banners/pix/5.png differ diff --git a/banners/splash.css b/banners/splash.css new file mode 100644 index 0000000..69c582f --- /dev/null +++ b/banners/splash.css @@ -0,0 +1,26 @@ +body{ + margin:0; + background: #000; +} +#banner{ + position: relative; + overflow: hidden; + width: 160px; + height: 480px; + background: url(tile.png); + background-size: 960px; + background-position: 0 0%; + background-color: #000; + + transition: width 8s linear; +} +#banner[retract]{ + transition: width 1s linear; +} +#icu{ + width: 1000px; + background: #fff; + height: 4px; + position: absolute; + top: 446px; +} \ No newline at end of file diff --git a/banners/splash.html b/banners/splash.html new file mode 100644 index 0000000..39eabee --- /dev/null +++ b/banners/splash.html @@ -0,0 +1,15 @@ + + + + + + + + + + + + + diff --git a/banners/splash.js b/banners/splash.js new file mode 100644 index 0000000..49e31d3 --- /dev/null +++ b/banners/splash.js @@ -0,0 +1,35 @@ +window.$ = (query,el=document)=>{ + return el.querySelector(query); +}; + +window.onload = ()=>{ + doStep(0); +}; + +let bannerDOM = $('#banner'); +let doStep = (num)=>{ + + bannerDOM.style.backgroundPosition = '0% '+(num*-100)+'%'; + bannerDOM.style.width = '960px'; + setTimeout(()=>{ + + bannerDOM.setAttribute('retract','true'); + setTimeout(()=>{ + bannerDOM.style.width = '0px'; + + setTimeout(()=>{ + + bannerDOM.removeAttribute('retract'); + + setTimeout(()=>{ + doStep(num+1); + },100); + + + },1000); + + },100); + + },9000); + +}; \ No newline at end of file diff --git a/banners/tile.png b/banners/tile.png new file mode 100644 index 0000000..8cda335 Binary files /dev/null and b/banners/tile.png differ diff --git a/css/index.css b/css/index.css index c3d6d7f..0bc03aa 100644 --- a/css/index.css +++ b/css/index.css @@ -16,6 +16,18 @@ a:hover{ color: #ff8080; } +.sim{ + width:100%; + background: #eee; + overflow: hidden; + margin: 1.5em 0; +} +iframe{ + border:2px solid #eee; + display: block; + margin:0 auto; +} + article > p, article > ul, article > ol, article > h1, article > h2, article > h3{ width: 640px; margin:1em auto; @@ -27,27 +39,39 @@ article > p, article > ul, article > ol, article > h1, article > h2, article > h overflow: hidden; margin-bottom: 2em; margin-top: 3em; - padding: 20px 0; } .section:first-of-type{ margin-top: 0; - height: 260px; + height: 480px; } .section > div{ width: 960px; - margin:1em auto; -} - -.sim{ - width:100%; - background: #eee; - overflow: hidden; - margin: 1.5em 0; -} -iframe{ - border:2px solid #eee; - display: block; margin:0 auto; + color: #fff; + position: relative; +} +.section > div > div{ + position: absolute; +} +.section > div > iframe{ + display: block; + border: none; +} +.section.chapter > div{ + height: 250px; + font-size: 70px; + font-weight: bold; +} +.section.chapter > div > div{ + position: absolute; + top: 70px; +} +.section.chapter > div > img{ + display: block; + position: absolute; + height: 320px; + right: 0; + bottom: 0; } icon{ @@ -86,7 +110,7 @@ sub{ font-size: 16px; width: 110px; position: absolute; - top: 347px; + top: 527px; left: calc(50% - 478px); line-height: 1.3em; } diff --git a/index.html b/index.html index 3027a2a..41095e7 100644 --- a/index.html +++ b/index.html @@ -59,17 +59,28 @@
-

What Happens Next?

-

COVID-19 Futures, Explained With Playable Simulations

-

by Marcel Salathé (epidemiologist) and Nicky Case (art/code)

-

🕐 30 min play/read

+ +
+ What Happens Next? +
+
+ COVID-19 Futures, Explained With Playable Simulations +
+
+ + 🕐 30 min play/read +  ·  + + by + Marcel Salathé + (epidemiologist) + & + Nicky Case + (art/code) +
-

[ Hi early-access folks! Don't share this yet, I'm still polishing it up. Once you're done please give feedback on the Patreon comments. I'll add you to the playtester credits if you want, thanks! ^_^ ]

- -

. . .

-

"The only thing to fear is fear itself" was stupid advice.

Sure, don't hoard toilet paper – but if policymakers fear fear itself, they'll downplay real dangers to avoid "mass panic". Fear's not the problem, it's how we channel our fear. Fear gives us energy to deal with dangers now, and prepare for dangers later.

@@ -86,9 +97,10 @@

So, buckle in: we're about to experience some turbulence.

-
+
-

The Last Few Months

+ +
The Last Few Months
@@ -245,9 +257,10 @@

Brace yourselves for an emergency landing...

-
+
-

The Next Few Months

+ +
The Next Few Months
@@ -517,9 +530,10 @@

So now, let's plan for some worse worst-case scenarios. Water landing, get your life jacket, and please follow the lights to the emergency exits:

-
+
-

The Next Few Years

+ +
The Last Few Years
@@ -608,16 +622,17 @@

Here's an (optional) Sandbox Mode, with everything available. Simulate & play around to your heart's content:

- +

This basic "epidemic flight simulator" has taught us so much. It's let us answer questions about the past few months, next few months, and next few years.

So finally, let's return to...

-
+
-

The Now

+ +
The Now
@@ -641,8 +656,6 @@

The only thing to fear is the idea that the only thing to fear is fear itself.

-

[ If you'd like, please give me feedback on the Patreon comments! Don't share this yet, it'll go live tomorrow May 1st noon Eastern time. Thank you so much! 💖 ]

-
    @@ -854,6 +867,7 @@
+
@@ -897,61 +911,36 @@

- Here's the generous Patrons who made this possible: 💖 + Here's some of the generous Patrons who made this possible: 💖

- name name
- name name
- name name
- name name
- name name
- name name
- name name
- name name
- name name
- name name
- name name
- name name
- name name
- name name
- name name
- name name
- name name
- name name
- name name
- name name
- name name
- name name
- name name
- name name
- name name
- name name
- name name
- name name
- name name
- name name
- name name
- name name
- name name
- name name
- name name
- name name
- name name
- name name
- name name
- name name
- name name
- name name
- name name
- name name
- name name
- name name
- name name
- name name
+ 9_9
Aaron Steelman
Abdallah AbuHashem
Adam Zeiner
Aeryn Light
Agent Entity
Ahti Ahde
Aimee Jarboe
Akito INOUE
Aldebarb
alex
Alex Kreitzberg
Alexander Zacherl
Alexis Olson
Allison Clift-Jennings
Amy Fuchs
Amy Traylor
Andre Latchman
Andrea Chlebikova
Andrea Di Biagio
Andrew Sachs
Andy Ellis
Anton Eremin
Apollo Slater
Aria Minaei
Armelle Laine
Arvand Barghi
Aurimas
B Cavello
Ben Kraft
Benoit Doidic
Berk Gedik
Brandon Quinn
Brendan Nelligan
Brian Handy
Brian Lange
Bruce Steinberg
Caelyn McAulay
Caio Vinicius do Nascimento
Cassandra Xia
Catherine J Smith
Cathy Deng
Cedric Nering
Chad Sansing
Charlie Stigler
Chong Kee Tan
Choose A Username
Chris Hallacy
Chris Makler
Chris Ploeg
Christine Capra
Christopher Ferrie
Christopher Walker
Clive Freeman
Colin Anderson
Colin Liotta
Connie
Corey Girard
count
Cristy Stone
Curtis Frye
Cyrus Levy
D
Da LIberman
Dag Frode Solberg
Damien Bernard
Daniel Shiffman
Daniel Teitelbaum
Dante
Darius Bacon
Dave B.
Dave Tu
David E Weekly
David Mora
Denis
Dominik
Duilio Palacios
Dylan Field
Eldecrok
Eric Chisholm
Ernst Scholtz
Ethan Muller
Eugene Eric Kim
Evan Rocha
Evan Shulman
Fanboat
Fiona Nielsen
Florencia Herra Vega
FlyingRat
Gabriel Barbosa Nunes
Gargi Sharma
Gary Coulter
Gauthier Muguerza
Glen E. Ivey
Grävling
Green
Greg
Guy Chapman
Harry Brisson
HI
Hilary Fried
Hildegard von Bigass
Idahosa Ness
ikrima
IndustrialRobot
Ivar Troost
Ivo Murrell
J C
Jacob Christian Munch-Andersen
James
James Horton
Jan Kölling
Jared Cosulich
Jason Crawford
Jay Mitchell
Jay Treat
jc
Jean-Eudes Denis
Jesse Bradley
Jing Wang
Jingfeng Chen
Joe Sevits
Jonne Harja
Joost Gadellaa
Joseph Rocca
Josh 'Cheeseness' Bush
Josh Koenig
Joshua Horowitz
Joy Buolamwini
k3taminee
Kailys
Kalu
Karen Cooper
Kate Fractal
Kelly Reed
Kelvin Nishikawa
Kendra Lockman
Kevin Richardson
Kevin Simler
Kevin Zollman
KevinDeLand
Kien
Kimberly Lammi
Kwame Thomison
Kyle Buswell
Kyle Studstill
labratross
Landy Manderson
Laura
Laura Baldwin
Laurent COOPER
Lee Berman
Leopard Dan
Liyi Zhang
Lucas Garron
Lukas Peyer
Lydia Choy
M
Malte
Manuel Kueblboeck
Marc Cohen
Marc Marasco
Marguerite Dibble
Mark Guzdial
marko
Mary Bush
Mary C.
Matt Hughes
Matthew Campbell
Maura Dawes
Maxim Sidorov
Mercury Legba
Michael Donatz
Michael Handler
Michael Huff
Michael Slade
Michal Takáč
Mikayla
Mikey
Mikkel Snyder
Naomi Alderman
Nat Alison
Natalie Rothfels
Natalie Sun
Nelson Crespo
Nguyet Vuong
Nigel Kerr
Nikhil Harithas
Nikita Vasilyev
Nimrod Kimhi
Noah Richards
Orb Li
Pablo Molins
Patrick Henderson
Paul d'Aoust
Paul Sztajer
Phil Dougherty
Philip White
Pierre Thierry
Pixl Pixl
postmillenial
Przemek Piotrowski
Rachél Bazelais
Rae McIntosh
Rafael F.Font
Ralph Pantozzi
raspbeguy
Raymond Keller
Rebecca Thomas
Reed Copperstrand
Ridima Ramesh
Rob Howard
Rob McKaughan
Robert Aran
Robert Cobb
Robert Duncan
Rohit Bhat
Ruby Moore
S Smith
saianne
Sara Ness
Sasha Fenn
Scott Reynolds
Sean Riley
Sergey Dolgov
Shreeya Goel
Simon
Simon Morrow
slow.danger
Smarter Every Day
Sofia Razón
Soraya Een Hajji
Sorden
Srini Kadamati
Steve Cha
Steve Ryman
Steve Waldman
Stewart Burrows Brand
Stian Soltvedt
Stuart
Sylvain Francis
T
Tal Rotbart
Tamir Bahar
Thais Weiller
Thember
Tobias Rose-Stockwell
toby schachman
Todd Siegel
Tom Lieber
Tommy Maranges
Toph Tucker
Tyler Coleman
Victor Debrus
Vlad Dziuba
Vladimir
Wait But Why
Wesley Gardner
what's for dinner
Will Dayble
William B Everett
Wouter
Yan Naung Oak
Yohan Dash
Yu-Han Kuo
Zach Smith
Zan Armstrong
Zener
zubr kabbi
김슬
🐸
+

+ + And huge thank you to these folks for playtesting/proofreading: + Alex Kreitzberg, + Amit Patel, + EmilyKate McDonough, + Emma Hodcroft, + Gillian Tarr, + Grävling, + Kayle Sawyer, + Michael Huff, + Phil Dougherty, + Philipp Wacker, + Ridima Ramesh, + Sofia Razón, + Srini Kadamati, + Vi Hart + +

+ + Any errors remaining are probably Nicky's fault. + diff --git a/sim/index.html b/sim/index.html index 8b591d8..b573d6b 100644 --- a/sim/index.html +++ b/sim/index.html @@ -44,9 +44,9 @@
- Loses immunity in N years + Loses immunity in N months
- +
@@ -158,8 +158,11 @@ Reset +
+ Stop +
- Reset All + Reset Sliders
Replay Recording diff --git a/sim/js/Controls.js b/sim/js/Controls.js index 6490095..95c6739 100644 --- a/sim/js/Controls.js +++ b/sim/js/Controls.js @@ -254,7 +254,7 @@ let defaultParams = [ ["p_transmission", 4], ["p_exposed", 3], ["p_recovery", 10], - ["p_waning", 1], + ["p_waning", 12], ["p_hospital", 333], ["p_years", 2], ["p_speed", 30], diff --git a/sim/js/Model.js b/sim/js/Model.js index 45f2f40..b68184c 100644 --- a/sim/js/Model.js +++ b/sim/js/Model.js @@ -45,7 +45,7 @@ let updateModel = (days, fake)=>{ let transmissionRate = 1/params.p_transmission, incubationRate = 1/params.p_exposed, recoveryRate = 1/params.p_recovery, - immunityLossRate = 1/(params.p_waning*365); + immunityLossRate = 1/(params.p_waning*(365/12)); // R0 r0 = transmissionRate/recoveryRate; @@ -140,10 +140,11 @@ let updateModel = (days, fake)=>{ let canvas = $('#graphCanvas'); let context = canvas.getContext('2d'); -canvas.width = 1000; -canvas.height = 1000; -canvas.style.width = (canvas.width/2)+"px"; -canvas.style.height = (canvas.height/2)+"px"; +let canvasScale = 2; +canvas.width = 500*canvasScale; +canvas.height = 500*canvasScale; +canvas.style.width = (canvas.width/canvasScale)+"px"; +canvas.style.height = (canvas.height/canvasScale)+"px"; let interventionColors = [ @@ -525,12 +526,14 @@ let draw = ()=>{ // S h = S * canvas.height; ctx.fillStyle = "#eeeeee"; + //ctx.fillStyle = "#000"; ctx.fillRect(0,y,w,h); // R y += h; h = R * canvas.height; ctx.fillStyle = "#bbbbbb"; + //ctx.fillStyle = "#000"; ctx.fillRect(0,y,w,h); // E @@ -551,7 +554,7 @@ let draw = ()=>{ interventionColors.forEach((ic)=>{ if(ic[0]=="non_s") return; // EXCEPT Non-Susceptibles ctx.fillStyle = ic[1]; - ctx.globalAlpha = int[ic[0]] * ic[2]; + ctx.globalAlpha = int[ic[0]] * 0.2;//ic[2]; ctx.fillRect(0,y,w,h); ctx.globalAlpha = 1; }); diff --git a/words/words.html b/words/words.html index bd38f1c..8622508 100644 --- a/words/words.html +++ b/words/words.html @@ -14,17 +14,28 @@
-

What Happens Next?

-

COVID-19 Futures, Explained With Playable Simulations

-

by Marcel Salathé (epidemiologist) and Nicky Case (art/code)

-

🕐 30 min play/read

+ +
+ What Happens Next? +
+
+ COVID-19 Futures, Explained With Playable Simulations +
+
+ + 🕐 30 min play/read +  ·  + + by + Marcel Salathé + (epidemiologist) + & + Nicky Case + (art/code) +
-

[ Hi early-access folks! Don't share this yet, I'm still polishing it up. Once you're done please give feedback on the Patreon comments. I'll add you to the playtester credits if you want, thanks! ^_^ ]

- -

. . .

-

"The only thing to fear is fear itself" was stupid advice.

Sure, don't hoard toilet paper – but if policymakers fear fear itself, they'll downplay real dangers to avoid "mass panic". Fear's not the problem, it's how we channel our fear. Fear gives us energy to deal with dangers now, and prepare for dangers later.

@@ -563,7 +574,7 @@ the second-most important idea in Epidemiology 101:

Here's an (optional) Sandbox Mode, with everything available. Simulate & play around to your heart's content:

- +

This basic "epidemic flight simulator" has taught us so much. It's let us answer questions about the past few months, next few months, and next few years.

@@ -596,8 +607,6 @@ the second-most important idea in Epidemiology 101:

The only thing to fear is the idea that the only thing to fear is fear itself.

-

[ If you'd like, please give me feedback on the Patreon comments! Don't share this yet, it'll go live tomorrow May 1st noon Eastern time. Thank you so much! 💖 ]

-
    diff --git a/words/words.md b/words/words.md index 034496e..445f9d5 100644 --- a/words/words.md +++ b/words/words.md @@ -1,16 +1,27 @@
    -
    -

    What Happens Next?

    -

    COVID-19 Futures, Explained With Playable Simulations

    -

    by Marcel Salathé (epidemiologist) and Nicky Case (art/code)

    -

    🕐 30 min play/read

    +
    + +
    + What Happens Next? +
    +
    + COVID-19 Futures, Explained With Playable Simulations +
    +
    + + 🕐 30 min play/read +  ·  + + by + Marcel Salathé + (epidemiologist) + & + Nicky Case + (art/code) +
    -**[ Hi early-access folks! Don't share this yet, I'm still polishing it up. Once you're done please give feedback on the Patreon comments. I'll add you to the playtester credits if you want, thanks! ^_^ ]** - -. . . - "The only thing to fear is fear itself" was stupid advice. Sure, don't hoard toilet paper – but if policymakers fear fear itself, they'll downplay real dangers to avoid "mass panic". Fear's not the problem, it's how we *channel* our fear. Fear gives us energy to deal with dangers now, and prepare for dangers later. @@ -691,6 +702,4 @@ So what does this mean for YOU, right now? Don't downplay fear to build up hope. Our fear should *team up* with our hope, like the inventors of airplanes & parachutes. Preparing for horrible futures is how we *create* a hopeful future. -The only thing to fear is the idea that the only thing to fear is fear itself. - -**[ If you'd like, please give me feedback on the Patreon comments! Don't share this yet, it'll go live tomorrow May 1st noon Eastern time. Thank you so much! 💖 ]** +The only thing to fear is the idea that the only thing to fear is fear itself. \ No newline at end of file