-
Notifications
You must be signed in to change notification settings - Fork 0
/
2018.html
291 lines (275 loc) · 15.2 KB
/
2018.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
<!doctype html>
<html>
<!-- note: your demo in this shim runs in an iframe with this content: https://gist.github.com/qfox/3cccc4f36c8319e09bb7 -->
<!--
(c) js1k.com 2018
Note: submissions belong to their respective owner, do not copy without their consent
-->
<head>
<meta charset="utf-8">
<meta
http-equiv="Content-Security-Policy"
content="
connect-src 'none' ;
default-src 'none' ;
font-src 'none' ;
frame-src 'self' data: ;
child-src 'self' data: ;
img-src 'self' data: ssl.google-analytics.com ;
media-src data: ;
object-src data: ;
style-src 'self' data: 'unsafe-inline' ;
script-src 'unsafe-inline' 'unsafe-eval' www.google-analytics.com ;
"
help="please report csp-related problems to valid demos!"
>
<title>JS1k 2018 - Craig Taub - Watchmen Tribute</title>
<meta name="author" content="YOU">
<link rel="icon" type="image/png" href="https://js1k.com/favicon.png">
<link rel="canonical" href="https://js1k.com/2018-coins/demo/NNNN">
<link rel="shortlink" href="https://js1k.com/NNNN">
<script>
// GA
</script>
<style>
/* https://qfox.nl/notes/333 */
body,html,iframe{margin:0;padding:0;border:0;width:100%;height:100%}
iframe{position:absolute;top:0;left:0;padding-top:50px;box-sizing:border-box}
header{position:relative;z-index:1;height:47px;padding-top:2px;border-bottom:1px solid #000;box-shadow:0 -10px 25px #ccc inset;background-color:#eee}
aside,div,h1,p{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:center;font-size:16px;font-weight:inherit;line-height:22px;padding:0;margin:0;cursor:default}
aside,h1{display:inline}
a{color:#000;text-decoration:none;border-bottom:1px dashed #000}
a:hover{border-bottom:1px solid red}
a[href="0"]{text-decoration:line-through;pointer-events:none;border-bottom:0;color:#ccc}
.button{float:left;width:40px;height:40px;line-height:40px;text-align:center;padding:0;margin:2px 0 0 10px;border:1px solid #888;border-color:#ddd #888 #888 #ddd;font-family:sans-serif;font-size:30px;font-weight:700;cursor:pointer}
.button:hover{color:red;border-bottom-color:#888}
.r{margin-right:10px}
time{display:none}
</style>
</head>
<body>
<header>
<div>
<h1>
<a href="https://js1k.com/">JS1k</a>
<a href="https://js1k.com/2018-coins">2018</a>
<strong></strong> demo
—
"My Tribute to Watchmen" by Craig
</h1>
<p>
<em>
A mixture of snow, particles and of course the comedians badge.
</em>
</p>
<aside>
—
1024 bytes
—
<a href="https://js1k.com/2018-coins/details/NNNN">demo details</a>
—
<a href="https://js1k.com/2018-coins/demos">list of demos</a>
—
<a href="https://js1k.com/NNNN" title="short link for your mobile devices" rel="nofollow">js1k.com/WATCHMEN-TRIBUTE</a>
<time datetime="NOW" pubdate>NOW</time>
</aside>
</div>
<a href="500" class="button p">↞</a>
<a href="502" class="button n">↠</a>
</header>
<script type="shim">
// this is the SHIM (will be ran in the context of the iframe...)
// unprefix some popular vendor prefixed things (but stick to their original name)
iwin.AudioContext = iwin.AudioContext || iwin.webkitAudioContext; // ios8 unmutes audio only during the first user triggered event with sound
iwin.requestAnimationFrame = iwin.requestAnimationFrame || iwin.mozRequestAnimationFrame || iwin.webkitRequestAnimationFrame || iwin.msRequestAnimationFrame || function(f){ iwin.setTimeout(f, 1000/30); };
canvas.requestPointerLock = canvas.requestPointerLock || canvas.mozRequestPointerLock || canvas.webkitRequestPointerLock;
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
if (typeof OscillatorNode !== 'undefined' && OscillatorNode.prototype) {
OscillatorNode.prototype.start = OscillatorNode.prototype.start || OscillatorNode.prototype.noteOn;
OscillatorNode.prototype.stop = OscillatorNode.prototype.stop || OscillatorNode.prototype.noteOff;
}
a = canvas;
b = idoc.body;
d = idoc.document;
if (!TOKEN_WEBGL) iwin.c = canvas.getContext('2d');
else iwin.g = (function () {
iwin.onorientationchange = iwin.onresize = null;
try {
var o = { antialias: true, stencil: true };
var gl = canvas.getContext('webgl', o) || canvas.getContext('experimental-webgl', o);
// keep in scope, must not be garbage collected
iwin.__glExts =
[ 'OES_texture_float', 'OES_texture_float_linear', 'OES_standard_derivatives',
'EXT_texture_filter_anisotropic', 'MOZ_EXT_texture_filter_anisotropic', 'WEBKIT_EXT_texture_filter_anisotropic',
'WEBGL_compressed_texture_s3tc', 'MOZ_WEBGL_compressed_texture_s3tc', 'WEBKIT_WEBGL_compressed_texture_s3tc'
].map(function(ext) {
return gl.getExtension(ext);
});
} catch (e) {
idoc.body.innerHTML = 'WebGL not supported.';
iwin.a=iwin.b=iwin.c=iwin.d=null;
throw e;
}
return gl;
})();
</script>
<script>
// submission form configurables:
// enable canvas shim at all? (2d/3d). other settings are ignored if this is false.
var TOKEN_CANVAS_SHIM = true;
// true enables webgl shim (exposes `g`), false enables canvas shim (exposes `c`)
var TOKEN_WEBGL = false;
// px, 0 means always 100%
var TOKEN_MAX_WIDTH = 0;
// px, 0 means always 100%
var TOKEN_MAX_HEIGHT = 0;
// should the size be smaller than specified if viewport is smaller?
var TOKEN_MAX_100P = true;
// only if width<100%
var TOKEN_CENTER_CANVAS = false;
// "press" reload button on orientation change?
var TOKEN_RELOAD_ONORIENTATIONCHANGE = true;
</script>
<script type="demo">
// THIS IS WHERE YOUR DEMO GOES
// document.write('see console');
// console.log('demo here', window.a, b, window.c, window.g, window.d);
/* FULL CODE
// global EVERYTHING
MR = Math.random;
MI=()=>Math.PI * 2
cht = innerHeight; // c height
cwh = innerWidth; // c width
S=(c)=> c.stroke() || c;
// run function + return value. ONLY if stroke() returns falsy.
// assignments are truthly unless assigned value is falsey
bp=(c, fill)=>{
c.beginPath();
if (fill) {
c.fillStyle = fill;
}
return c;
}
d = 3; // density
np = cht * cwh / (d * 100); // np
// changes number of particles based on screen size.
cA = []; // circle array
crA = ["#00f", "#6f77ec"]; // color array
// Particle Circles
B=(x, y, dx, dy, r)=>{
var cr = crA[~~(MR() * 2)];
// colour. needs var. * crA.length. dbl bitwise shorthand over Math.floor
return ()=>{
// update
x+= dx; // left/right
y+= dy; // up/down
// draw
c = bp(c, cr); // begins a new path, of resets current one
c.arc(x, y, r, 0, MI(), false);
c.fill();
}
}
// Animate particles
C=()=>{
requestAnimationFrame(C); // recursively runs, which keeps particles animating. RUNS 60 times ps
//c.clearRect(0, 0, cwh, cht); // without particles fuse into 1. clears current one before writing next
// NOT NEEDED ANYMORE
// Set background colour
c.fillStyle = "black";
c.fillRect(0, 0, cwh, cht);
// Draw Face
r = 150,
eR = 20, // eye Radius
mA = 90; // mouthArc
// draw the yellow circle
c = bp(c, 'yellow');
c.arc(cX, cY, r, 0, MI(), false);
c.fill();
c.lineWidth = 5;
c.strokeStyle = 'black';
c=S(c);
// draw the eyes
c = bp(c, 'black');
c.arc(eyX, eyY, eR, 0, MI(), false);
eT = cX + eX; // eyeXTwo
c.arc(eT, eyY, eR, 0, MI(), false);
c.fill();
// draw the mouth
c = bp(c);
c.arc(cX, cY, mA, 0, Math.PI, false);
c=S(c);
// Animate blood
// setTimeout(E, 600); // not requestAnimationFrame. for slow animation
// DOESNT SEEM NEEDED ANYMORE
xL = xS + 100, // xLimit
yL = yS + 100; // yLimit
if (bX != xL) bX++;
if (bY != yL) bY++;
// use type coercion operator.
// Animate blood 2
c = bp(c);
c.lineWidth=10;
c.strokeStyle="#A00";
c.moveTo(xS, yS); // starting point to coords
c.arc(bX, bY, 3, 0, MI()); // last point with arc
c=S(c); // Draw it
// update + redraw
//for (_ of cA) { // wont work
for (i = 1; i < cA.length; i++) {
// run loop X many times, every single second
cA[i]();
}
}
// smiling face
eX = 55, // eyeXOffset
cY = cht / 2, // centerY, render in middle
cX = cwh / 2, // centerX, render in middle
eyX = cX - eX, // eye
eyY = cY - eX; // eye
// Initialise blood spatter
xS = eyX - 50, // xStart
yS = eyY - 50, // yStart
bX = xS, // bloodToX
bY = yS; // bloodToY
// Initialise particles array
cA = [];
X=()=>(MR() - 0.5) * 0.5;
Y=(z)=>MR() * (z - r * 2)
for (i = 1; i < np; i++) {
r = MR() * 3 + 1, x = Y(cwh), y = Y(cht), dx = X(), dy = X();
cA.push(B(x, y, dx, dy, r));
}
C();
*/
// MINIFIED 994 bytes
// for(MR=Math.random,MI=(()=>2*Math.PI),cht=innerHeight,cwh=innerWidth,S=(c=>c.stroke()||c),bp=((c,e)=>(c.beginPath(),e&&(c.fillStyle=e),c)),d=3,np=cht*cwh/(100*d),cA=[],crA=["#00f","#6f77ec"],B=((e,r,t,i,l)=>{var y=crA[~~(2*MR())];return()=>{e+=t,r+=i,c=bp(c,y),c.arc(e,r,l,0,MI(),!1),c.fill()}}),C=(()=>{for(requestAnimationFrame(C),c.fillStyle="black",c.fillRect(0,0,cwh,cht),r=150,eR=20,mA=90,c=bp(c,"yellow"),c.arc(cX,cY,r,0,MI(),!1),c.fill(),c.lineWidth=5,c.strokeStyle="black",c=S(c),c=bp(c,"black"),c.arc(eyX,eyY,eR,0,MI(),!1),eT=cX+eX,c.arc(eT,eyY,eR,0,MI(),!1),c.fill(),c=bp(c),c.arc(cX,cY,mA,0,Math.PI,!1),c=S(c),xL=xS+100,yL=yS+100,bX!=xL&&bX++,bY!=yL&&bY++,c=bp(c),c.lineWidth=10,c.strokeStyle="#A00",c.moveTo(xS,yS),c.arc(bX,bY,3,0,MI()),c=S(c),i=1;i<cA.length;i++)cA[i]()}),eX=55,cY=cht/2,cX=cwh/2,eyX=cX-eX,eyY=cY-eX,xS=eyX-50,yS=eyY-50,bX=xS,bY=yS,cA=[],X=(()=>.5*(MR()-.5)),Y=(c=>MR()*(c-2*r)),i=1;i<np;i++)r=3*MR()+1,x=Y(cwh),y=Y(cht),dx=X(),dy=X(),cA.push(B(x,y,dx,dy,r));C();
// END
</script>
<script>
(function(){var doc=document;var header=doc.getElementsByTagName("header")[0];var firstChild=header.firstChild;var p=doc.getElementsByClassName("p")[0];
var n=doc.getElementsByClassName("n")[0];header.insertBefore(p,firstChild);header.insertBefore(n,firstChild);header.appendChild(doc.getElementsByTagName
("p")[0])})();(function reload(fullscreen){var doc=document;var header=doc.getElementsByTagName("header")[0];var iframe=doc.createElement("iframe");doc.
body.appendChild(iframe);var iwin=iframe.contentWindow;var idoc=iframe.contentDocument;idoc.open();idoc.close();idoc.write("<!doctype html>"+'<html st'+
'yle="margin: 0; padding: 0; border: 0;'+(TOKEN_CANVAS_SHIM?' width: 100%; height: 100%;':'')+'">'+"<head>"+'<meta charset="utf-8">'+'<body style="mar'+
'gin: 0; padding: 0; border: 0;'+(TOKEN_CANVAS_SHIM?' width: 100%; height: 100%;':'')+'">'+(TOKEN_CANVAS_SHIM?'<canvas style="display: block;'+(
TOKEN_CENTER_CANVAS?" margin: auto;":"")+'"></canvas>':"")+"");if(TOKEN_CANVAS_SHIM){var canvas=idoc.getElementsByTagName("canvas")[0];var cs=canvas.style
;idoc.body.clientWidth;cs.width=(canvas.width=Math.max(Math.min(TOKEN_MAX_WIDTH||innerWidth,innerWidth),0)||0)+"px";cs.height=(canvas.height=Math.max(
Math.min(TOKEN_MAX_HEIGHT||innerHeight-50,innerHeight-50),0)||0)+"px"}if(TOKEN_RELOAD_ONORIENTATIONCHANGE)onorientationchange=reloadClick;iwin.AudioContext
=iwin.AudioContext||iwin.webkitAudioContext;iwin.requestAnimationFrame=iwin.requestAnimationFrame||iwin.mozRequestAnimationFrame||iwin.
webkitRequestAnimationFrame||iwin.msRequestAnimationFrame||function(f){iwin.setTimeout(f,1E3/30)};if(TOKEN_CANVAS_SHIM)canvas.requestPointerLock=canvas.
requestPointerLock||canvas.mozRequestPointerLock||canvas.webkitRequestPointerLock;idoc.body.requestPointerLock=idoc.body.requestPointerLock||idoc.body.
mozRequestPointerLock||idoc.body.webkitRequestPointerLock;navigator.getUserMedia=navigator.getUserMedia||navigator.webkitGetUserMedia||navigator.
mozGetUserMedia||navigator.msGetUserMedia;var iwo=iwin.OscillatorNode&&iwin.OscillatorNode.prototype;iwo&&(iwo.start=iwo.start||iwo.noteOn)&&(iwo.stop=iwo
.stop||iwo.noteOff);if(TOKEN_CANVAS_SHIM)iwin.a=canvas;iwin.b=idoc.body;d=idoc;if(TOKEN_CANVAS_SHIM){if(!TOKEN_WEBGL)iwin.c=canvas.getContext("2d");if(
TOKEN_WEBGL)iwin.g=function(){iwin.onorientationchange=iwin.onresize=null;try{var o={antialias:true,stencil:true};var gl=canvas.getContext("webgl",o)||
canvas.getContext("experimental-webgl",o);iwin.__glExts=["OES_texture_float","OES_texture_float_linear","OES_standard_derivatives","EXT_texture_filter_"+
"anisotropic","MOZ_EXT_texture_filter_anisotropic","WEBKIT_EXT_texture_filter_anisotropic","WEBGL_compressed_texture_s3tc","MOZ_WEBGL_compressed_textur"+
"e_s3tc","WEBKIT_WEBGL_compressed_texture_s3tc"].map(function(ext){return gl.getExtension(ext)})}catch(e){idoc.body.innerHTML="WebGL not supported.";iwin
.a=iwin.b=iwin.c=iwin.d=null;throw e;}return gl}()}var demo=idoc.createElement("script");demo.textContent=doc.querySelector('script[type="demo"]').
textContent;idoc.body.appendChild(demo);idoc.close();iframe.contentWindow.focus();var firstLine=doc.getElementsByTagName("div")[0];function reloadClick(b)
{doc.body.removeChild(iframe);r.parentElement.removeChild(r);iframe=null;r=null;idoc=null;header=null;reload(b)}window.reload=reloadClick;var r=doc.
createElement("div");r.innerHTML="↻";r.className="button r";r.title="restart just the demo (local, without remote fetch)";r.onclick=reloadClick;
header.insertBefore(r,firstLine)})();
</script>
</body>
</html>