banners schammers

This commit is contained in:
Nicky Case 2020-04-30 23:35:04 -04:00
parent 649c1c7bd9
commit f1b3d0630b
19 changed files with 246 additions and 117 deletions

View File

@ -1,3 +1,19 @@
[Play it here!](https://ncase.me/covid-19/)
# How To Translate
herp derp
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!

BIN
banners/curve.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 61 KiB

BIN
banners/pix/0.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 79 KiB

BIN
banners/pix/1.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 85 KiB

BIN
banners/pix/2.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 93 KiB

BIN
banners/pix/3.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 112 KiB

BIN
banners/pix/4.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 56 KiB

BIN
banners/pix/5.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 198 KiB

26
banners/splash.css Normal file
View File

@ -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;
}

15
banners/splash.html Normal file
View File

@ -0,0 +1,15 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="splash.css" />
</head>
<body>
<div id="banner">
<div id="icu"></div>
</div>
</body>
</html>
<script src="splash.js"></script>

35
banners/splash.js Normal file
View File

@ -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);
};

BIN
banners/tile.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 637 KiB

View File

@ -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;
}

View File

@ -59,17 +59,28 @@
<article>
<div class="section">
<div>
<h1>What Happens Next?</h1>
<h2>COVID-19 Futures, Explained With Playable Simulations</h2>
<h3>by <a href='https://scholar.google.com/citations?user=_wHMGkUAAAAJ&hl=en'>Marcel Salathé</a> (epidemiologist) and <a href='https://ncase.me/'>Nicky Case</a> (art/code)</h3>
<h3>🕐 30 min play/read</h3>
<iframe id="splash" width="960" height="480" src="banners/splash.html"></iframe>
<div style="top: 70px;font-size: 75px;font-weight: bold;">
What Happens Next?
</div>
<div style="font-weight: 500;top: 140px;left: 10px;font-size: 29px;">
COVID-19 Futures, Explained With Playable Simulations
</div>
<div style="font-weight: 100;top: 189px;left: 10px;font-size: 19px;line-height: 21px;">
<b>
🕐 30 min play/read
&nbsp;&middot;&nbsp;
</b>
by
<a href="https://scholar.google.com/citations?user=_wHMGkUAAAAJ&amp;hl=en">Marcel Salathé</a>
(epidemiologist)
&
<a href="https://ncase.me/">Nicky Case</a>
(art/code)
</div>
</div>
</div>
<p><strong>[ Hi early-access folks! Don&#39;t share this yet, I&#39;m still polishing it up. Once you&#39;re done please give feedback on the Patreon comments. I&#39;ll add you to the playtester credits if you want, thanks! ^_^ ]</strong></p>
<p>. . .</p>
<p>&quot;The only thing to fear is fear itself&quot; was stupid advice.</p>
<p>Sure, don&#39;t hoard toilet paper but if policymakers fear fear itself, they&#39;ll downplay real dangers to avoid &quot;mass panic&quot;. Fear&#39;s not the problem, it&#39;s how we <em>channel</em> our fear. Fear gives us energy to deal with dangers now, and prepare for dangers later.</p>
@ -86,9 +97,10 @@
<p>So, buckle in: we&#39;re about to experience some turbulence.</p>
<div class="section">
<div class="section chapter">
<div>
<h1>The Last Few Months</h1>
<img src="banners/curve.png" height=480 style="position: absolute;"/>
<div>The Last Few Months</div>
</div>
</div>
@ -245,9 +257,10 @@
<p>Brace yourselves for an emergency landing...</p>
<div class="section">
<div class="section chapter">
<div>
<h1>The Next Few Months</h1>
<img src="banners/curve.png" height=480 style="position: absolute;"/>
<div>The Next Few Months</div>
</div>
</div>
@ -517,9 +530,10 @@
<p>So now, let&#39;s plan for some <em>worse</em> worst-case scenarios. Water landing, get your life jacket, and please follow the lights to the emergency exits:</p>
<div class="section">
<div class="section chapter">
<div>
<h1>The Next Few Years</h1>
<img src="banners/curve.png" height=480 style="position: absolute;"/>
<div>The Last Few Years</div>
</div>
</div>
@ -608,16 +622,17 @@
<p><strong>Here&#39;s an (optional) Sandbox Mode, with <em>everything</em> available. Simulate &amp; play around to your heart&#39;s content:</strong></p>
<div class="sim">
<iframe src="sim?stage=SB&format=sb" width="800" height="540"></iframe>
<iframe src="sim?stage=SB&format=sb" width="800" height="540"></iframe>
</div>
<p>This basic &quot;epidemic flight simulator&quot; has taught us so much. It&#39;s let us answer questions about the past few months, next few months, and next few years.</p>
<p>So finally, let&#39;s return to...</p>
<div class="section">
<div class="section chapter">
<div>
<h1>The Now</h1>
<img src="banners/curve.png" height=480 style="position: absolute;"/>
<div>The Now</div>
</div>
</div>
@ -641,8 +656,6 @@
<p>The only thing to fear is the idea that the only thing to fear is fear itself.</p>
<p><strong>[ If you&#39;d like, please give me feedback on the Patreon comments! Don&#39;t share this yet, it&#39;ll go live tomorrow May 1st noon Eastern time. Thank you so much! 💖 ]</strong></p>
<div class="footnotes">
<hr>
<ol>
@ -854,6 +867,7 @@
</ol>
</div>
</article>
@ -897,61 +911,36 @@
<br><br>
Here's the generous Patrons who made this possible: 💖
Here's some of the generous Patrons who made this possible: 💖
<br><br>
<div id="supporters">
name name<br>
name name<br>
name name<br>
name name<br>
name name<br>
name name<br>
name name<br>
name name<br>
name name<br>
name name<br>
name name<br>
name name<br>
name name<br>
name name<br>
name name<br>
name name<br>
name name<br>
name name<br>
name name<br>
name name<br>
name name<br>
name name<br>
name name<br>
name name<br>
name name<br>
name name<br>
name name<br>
name name<br>
name name<br>
name name<br>
name name<br>
name name<br>
name name<br>
name name<br>
name name<br>
name name<br>
name name<br>
name name<br>
name name<br>
name name<br>
name name<br>
name name<br>
name name<br>
name name<br>
name name<br>
name name<br>
name name<br>
name name<br>
9_9<br>Aaron Steelman<br>Abdallah AbuHashem<br>Adam Zeiner<br>Aeryn Light<br>Agent Entity<br>Ahti Ahde<br>Aimee Jarboe<br>Akito INOUE<br>Aldebarb <br>alex <br>Alex Kreitzberg<br>Alexander Zacherl<br>Alexis Olson<br>Allison Clift-Jennings<br>Amy Fuchs<br>Amy Traylor<br>Andre Latchman<br>Andrea Chlebikova<br>Andrea Di Biagio<br>Andrew Sachs<br>Andy Ellis<br>Anton Eremin<br>Apollo Slater<br>Aria Minaei<br>Armelle Laine<br>Arvand Barghi<br>Aurimas<br>B Cavello<br>Ben Kraft<br>Benoit Doidic<br>Berk Gedik<br>Brandon Quinn<br>Brendan Nelligan<br>Brian Handy<br>Brian Lange<br>Bruce Steinberg<br>Caelyn McAulay<br>Caio Vinicius do Nascimento<br>Cassandra Xia<br>Catherine J Smith<br>Cathy Deng<br>Cedric Nering<br>Chad Sansing<br>Charlie Stigler<br>Chong Kee Tan<br>Choose A Username<br>Chris Hallacy<br>Chris Makler<br>Chris Ploeg<br>Christine Capra<br>Christopher Ferrie<br>Christopher Walker<br>Clive Freeman<br>Colin Anderson<br>Colin Liotta<br>Connie <br>Corey Girard<br>count <br>Cristy Stone<br>Curtis Frye<br>Cyrus Levy<br>D <br>Da LIberman<br>Dag Frode Solberg<br>Damien Bernard<br>Daniel Shiffman<br>Daniel Teitelbaum<br>Dante <br>Darius Bacon<br>Dave B.<br>Dave Tu<br>David E Weekly<br>David Mora<br>Denis <br>Dominik <br>Duilio Palacios<br>Dylan Field<br>Eldecrok <br>Eric Chisholm<br>Ernst Scholtz<br>Ethan Muller<br>Eugene Eric Kim<br>Evan Rocha<br>Evan Shulman<br>Fanboat <br>Fiona Nielsen<br>Florencia Herra Vega<br>FlyingRat <br>Gabriel Barbosa Nunes<br>Gargi Sharma<br>Gary Coulter<br>Gauthier Muguerza<br>Glen E. Ivey<br>Grävling <br>Green <br>Greg <br>Guy Chapman<br>Harry Brisson<br>HI <br>Hilary Fried<br>Hildegard von Bigass<br>Idahosa Ness<br>ikrima <br>IndustrialRobot <br>Ivar Troost<br>Ivo Murrell<br>J C<br>Jacob Christian Munch-Andersen<br>James <br>James Horton<br>Jan Kölling<br>Jared Cosulich<br>Jason Crawford<br>Jay Mitchell<br>Jay Treat<br>jc <br>Jean-Eudes Denis<br>Jesse Bradley<br>Jing Wang<br>Jingfeng Chen<br>Joe Sevits<br>Jonne Harja<br>Joost Gadellaa<br>Joseph Rocca<br>Josh 'Cheeseness' Bush<br>Josh Koenig<br>Joshua Horowitz<br>Joy Buolamwini<br>k3taminee<br>Kailys <br>Kalu <br>Karen Cooper<br>Kate Fractal<br>Kelly Reed<br>Kelvin Nishikawa<br>Kendra Lockman<br>Kevin Richardson<br>Kevin Simler<br>Kevin Zollman<br>KevinDeLand <br>Kien <br>Kimberly Lammi<br>Kwame Thomison<br>Kyle Buswell<br>Kyle Studstill<br>labratross <br>Landy Manderson<br>Laura <br>Laura Baldwin<br>Laurent COOPER<br>Lee Berman<br>Leopard Dan<br>Liyi Zhang<br>Lucas Garron<br>Lukas Peyer<br>Lydia Choy<br>M <br>Malte <br>Manuel Kueblboeck<br>Marc Cohen<br>Marc Marasco<br>Marguerite Dibble<br>Mark Guzdial<br>marko <br>Mary Bush<br>Mary C.<br>Matt Hughes<br>Matthew Campbell<br>Maura Dawes<br>Maxim Sidorov<br>Mercury Legba<br>Michael Donatz<br>Michael Handler<br>Michael Huff<br>Michael Slade<br>Michal Takáč<br>Mikayla <br>Mikey <br>Mikkel Snyder<br>Naomi Alderman<br>Nat Alison<br>Natalie Rothfels<br>Natalie Sun<br>Nelson Crespo<br>Nguyet Vuong<br>Nigel Kerr<br>Nikhil Harithas<br>Nikita Vasilyev<br>Nimrod Kimhi<br>Noah Richards<br>Orb Li<br>Pablo Molins<br>Patrick Henderson<br>Paul d'Aoust<br>Paul Sztajer<br>Phil Dougherty<br>Philip White<br>Pierre Thierry<br>Pixl Pixl<br>postmillenial <br>Przemek Piotrowski<br>Rachél Bazelais<br>Rae McIntosh<br>Rafael F.Font<br>Ralph Pantozzi<br>raspbeguy <br>Raymond Keller<br>Rebecca Thomas<br>Reed Copperstrand<br>Ridima Ramesh<br>Rob Howard<br>Rob McKaughan<br>Robert Aran<br>Robert Cobb<br>Robert Duncan<br>Rohit Bhat<br>Ruby Moore<br>S Smith<br>saianne <br>Sara Ness<br>Sasha Fenn<br>Scott Reynolds<br>Sean Riley<br>Sergey Dolgov<br>Shreeya Goel<br>Simon <br>Simon Morrow<br>slow.danger<br>Smarter Every Day<br>Sofia Razón<br>Soraya Een Hajji<br>Sorden <br>Srini Kadamati<br>Steve Cha<br>Steve Ryman<br>Steve Waldman<br>Stewart Burrows Brand<br>Stian Soltvedt<br>Stuart <br>Sylvain Francis<br>T <br>Tal Rotbart<br>Tamir Bahar<br>Thais Weiller<br>Thember <br>Tobias Rose-Stockwell<br>toby schachman<br>Todd Siegel<br>Tom Lieber<br>Tommy Maranges<br>Toph Tucker<br>Tyler Coleman<br>Victor Debrus<br>Vlad Dziuba<br>Vladimir <br>Wait But Why<br>Wesley Gardner<br>what's for dinner<br>Will Dayble<br>William B Everett<br>Wouter <br>Yan Naung Oak<br>Yohan Dash<br>Yu-Han Kuo<br>Zach Smith<br>Zan Armstrong<br>Zener <br>zubr kabbi<br>김슬<br>🐸
</div>
<br><br>
And <i>huge</i> 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
<br><br>
Any errors remaining are probably Nicky's fault.
</div>
</div>

View File

@ -44,9 +44,9 @@
<div id="label_c_waning">
<input class="sim_checkbox" type="checkbox" id="c_waning">
Loses immunity <icon s></icon> in <span id="label_p_waning">N</span> years
Loses immunity <icon s></icon> in <span id="label_p_waning">N</span> months
<br>
<input class="sim_input" type="range" id="p_waning" min="0.5" max="5" step="0.5" value="1">
<input class="sim_input" type="range" id="p_waning" min="1" max="60" step="1" value="12">
</div>
<hr>
@ -158,8 +158,11 @@
Reset
</div>
</div>
<div id="sb_stop">
Stop
</div>
<div id="sb_reset">
Reset All
Reset Sliders
</div>
<div id="sb_replay">
Replay Recording

View File

@ -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],

View File

@ -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;
});

View File

@ -14,17 +14,28 @@
<div class="section">
<div>
<h1>What Happens Next?</h1>
<h2>COVID-19 Futures, Explained With Playable Simulations</h2>
<h3>by <a href='https://scholar.google.com/citations?user=_wHMGkUAAAAJ&hl=en'>Marcel Salathé</a> (epidemiologist) and <a href='https://ncase.me/'>Nicky Case</a> (art/code)</h3>
<h3>🕐 30 min play/read</h3>
<iframe id="splash" width="960" height="480" src="banners/splash.html"></iframe>
<div style="top: 70px;font-size: 75px;font-weight: bold;">
What Happens Next?
</div>
<div style="font-weight: 500;top: 140px;left: 10px;font-size: 29px;">
COVID-19 Futures, Explained With Playable Simulations
</div>
<div style="font-weight: 100;top: 189px;left: 10px;font-size: 19px;line-height: 21px;">
<b>
🕐 30 min play/read
&nbsp;&middot;&nbsp;
</b>
by
<a href="https://scholar.google.com/citations?user=_wHMGkUAAAAJ&amp;hl=en">Marcel Salathé</a>
(epidemiologist)
&
<a href="https://ncase.me/">Nicky Case</a>
(art/code)
</div>
</div>
</div>
<p><strong>[ Hi early-access folks! Don&#39;t share this yet, I&#39;m still polishing it up. Once you&#39;re done please give feedback on the Patreon comments. I&#39;ll add you to the playtester credits if you want, thanks! ^_^ ]</strong></p>
<p>. . .</p>
<p>&quot;The only thing to fear is fear itself&quot; was stupid advice.</p>
<p>Sure, don&#39;t hoard toilet paper but if policymakers fear fear itself, they&#39;ll downplay real dangers to avoid &quot;mass panic&quot;. Fear&#39;s not the problem, it&#39;s how we <em>channel</em> our fear. Fear gives us energy to deal with dangers now, and prepare for dangers later.</p>
@ -563,7 +574,7 @@ the <em>second</em>-most important idea in Epidemiology 101:</p>
<p><strong>Here&#39;s an (optional) Sandbox Mode, with <em>everything</em> available. Simulate &amp; play around to your heart&#39;s content:</strong></p>
<div class="sim">
<iframe src="sim?stage=SB&format=sb" width="800" height="450"></iframe>
<iframe src="sim?stage=SB&format=sb" width="800" height="540"></iframe>
</div>
<p>This basic &quot;epidemic flight simulator&quot; has taught us so much. It&#39;s let us answer questions about the past few months, next few months, and next few years.</p>
@ -596,8 +607,6 @@ the <em>second</em>-most important idea in Epidemiology 101:</p>
<p>The only thing to fear is the idea that the only thing to fear is fear itself.</p>
<p><strong>[ If you&#39;d like, please give me feedback on the Patreon comments! Don&#39;t share this yet, it&#39;ll go live tomorrow May 1st noon Eastern time. Thank you so much! 💖 ]</strong></p>
<div class="footnotes">
<hr>
<ol>

View File

@ -1,16 +1,27 @@
<div class="section">
<div>
<h1>What Happens Next?</h1>
<h2>COVID-19 Futures, Explained With Playable Simulations</h2>
<h3>by <a href='https://scholar.google.com/citations?user=_wHMGkUAAAAJ&hl=en'>Marcel Salathé</a> (epidemiologist) and <a href='https://ncase.me/'>Nicky Case</a> (art/code)</h3>
<h3>🕐 30 min play/read</h3>
<div>
<iframe id="splash" width="960" height="480" src="banners/splash.html"></iframe>
<div style="top: 70px;font-size: 75px;font-weight: bold;">
What Happens Next?
</div>
<div style="font-weight: 500;top: 140px;left: 10px;font-size: 29px;">
COVID-19 Futures, Explained With Playable Simulations
</div>
<div style="font-weight: 100;top: 189px;left: 10px;font-size: 19px;line-height: 21px;">
<b>
🕐 30 min play/read
&nbsp;&middot;&nbsp;
</b>
by
<a href="https://scholar.google.com/citations?user=_wHMGkUAAAAJ&amp;hl=en">Marcel Salathé</a>
(epidemiologist)
&
<a href="https://ncase.me/">Nicky Case</a>
(art/code)
</div>
</div>
</div>
**[ 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.