-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
254 lines (217 loc) · 14.5 KB
/
index.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title> A Web Packet's Journey </title>
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, shrink-to-fit=no">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="apple-touch-icon" href="images/icon.png">
<!-- <link rel="icon" type="image/png" href="images/favicon.png"> -->
<meta name="description" content="A Web Packet's Journey is an online ( desktop, mobile, cardboard and WebVR ) educational interactive-narrative/game based on the route a web request packet takes over the Internet.">
<!-- for Google+ -->
<meta itemprop="name" content="A Web Packet's Journey">
<meta itemprop="description" content="A Web Packet's Journey is an online ( desktop, mobile, cardboard and WebVR ) educational interactive-narrative/game based on the route a web request packet takes over the Internet.">
<meta itemprop="image" content="images/icon.png">
<!-- for Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@branger_briz">
<meta name="twitter:title" content="A Web Packet's Journey">
<meta name="twitter:description" content="A Web Packet's Journey is an online ( desktop, mobile, cardboard and WebVR ) educational interactive-narrative/game based on the route a web request packet takes over the Internet.">
<meta name="twitter:creator" content="@branger_briz">
<meta name="twitter:image:src" content="images/icon.png">
<!-- for Facebook -->
<meta property="og:title" content="A Web Packet's Journey">
<meta property="og:type" content="article">
<meta property="og:url" content="http://awebpacketsjourney.net">
<meta property="og:image" content="images/icon.png">
<meta property="og:description" content="A Web Packet's Journey is an online ( desktop, mobile, cardboard and WebVR ) educational interactive-narrative/game based on the route a web request packet takes over the Internet.">
<meta property="og:site_name" content="A Web Packet's Journey">
<link rel="stylesheet" href="css/styles.css">
</head>
<body class="splash-bg">
<section id="splash">
<div>
<h4><a href="http://brangerbriz.com" target="_blank">Branger_Briz</a> Presents</h4>
<img src="images/title.png" alt="A Web Packet's Journey" id="title">
<div id="packet"></div>
<div id="splash-options">
<button onclick="location='play'">Play</button>
<button onclick="location='learn'">Learn</button>
<button onclick="location='#help'">Support</button>
</div>
</div>
</section>
<img id="down-arrow" src="images/down-arrow.png">
<section id="project-info">
<div class="header"></div>
<div class="body">
<div>
<h3>
A Web Packet's Journey is an online educational interactive-narrative/game based on the route a web request packet takes over the Internet.
</h3>
<p>
Typically it takes less than a second to load a web page, but SO MUCH HAPPENS in that fraction of a second that is worth learning about: IP addresses, WiFi, Internet Service Providers (or ISPs), Net Neutrality, privacy, surveillance, the "cloud", data centers, servers, DDoS attacks, encryption and various other conceptual bits and physical pieces that make the Internet what it is today. A Web Packet's Journey aims to put all of those bits and pieces in context by creating an interactive <a href="play">web experience</a> (mobile, desktop and even <a href="https://webvr.info/" target="_blank">Virtual Reality</a>) accompanied by <a href="learn">supplementary reference materials</a> on this site.
</p>
<h2>This Page is Under Construction...</h2>
<p>
...as we used to say in the early days. A "proof of concept" is currently available on this site. This includes the first 2 (out of 10) parts that make up A Web Packet's Journey, which you can <a href="play">play right now</a>! This also includes the <a href="learn">supplementary materials</a> for both scenes. To stay up to date on the project's progress, sign up for our email list below (No spam. Just occasional project updates. We promise).
</p>
<form id="subForm" class="js-cm-form" action="https://www.createsend.com/t/subscribeerror?description=" method="post" data-id="5B5E7037DA78A748374AD499497E309E38C070287AD94CAE94C82FE84EA458CCDCC84C442B8D9A5A935424E533BC21B1B91A0F20E0ACD915245D3B1B9DAB8BA4">
<input id="fieldEmail" name="cm-olktthd-olktthd" placeholder="you@email.net" type="email" class="js-cm-email-input"
required />
<button class="js-cm-submit-button" type="submit">get updates</button>
</form>
<h2 id="help">Help Us Finish</h2>
<p>
We've already done <a href="#open-source">a lot of work</a> to create the bones for this project as well as the first two parts, but we've got <a href="learn">8 more parts</a> left to make! If you're interested in helping us out, there are a few ways you can do that. A project like this takes considerable time and money. If you have either, please send us@brangerbriz.com an email. We plan on implementing a more conventional financial support system soon. For those who prefer to donate their time by either contributing code, 3D models, designs, research or other creative help. email is also currently the best way to sync up (until we get individual "to-do" tasks up on our github issues page).
</p>
<p>
We want to thank <a href="https://www.mozilla.org" target="_blank">Mozilla</a> for providing the grant that made this proof of concept possible, as well as <a href="https://www.sogadesigncollective.com/" target="_blank">SOGA Design Collective</a> for their character designs.
</p>
<div id="supporters">
<a href="https://www.mozilla.org" target="_blank">
<img src="images/moz-logo.png" alt="mozilla">
</a>
<a href="https://www.sogadesigncollective.com/" target="_blank">
<img src="images/soga-logo.png" alt="SOGA Design Collective">
</a>
</div>
</div>
</div>
<div class="footer"></div>
</section>
<section id="open-source">
<div>
<h1>Open Source</h1>
<p>
This project is not only "free" in the sense that anyone with Internet can access the game and it's supplementary materials at no cost, but it's also "free" in the Free/Libre Open Source Software sense. Check out our <a href="https://github.com/brangerbriz/A-Web-Packets-Journey" target="_blank">GitHub Repo</a>.
</p>
<p>
We could definitely use some help completing this project and open source is a great way to make that happen, but beyond the practical benefits, releasing and documenting the development process also allows us to add another layer of digital literacy to the project. We're obviously obsessed with the Web. Why else would we make an entire game about how it works? But in our age of mobile apps and proprietary platforms, the Web's true promise and potential seems forgotten. We hope that by sharing our process, this project could also serve as an example of the Web platform's potential.
</p>
<h2>the Web Platform <br class="break"> is the best platform</h2>
<p>
Unlike other centralized and corporately controlled platforms, e.g., smart phone app stores or commercial game consoles, the World Wide Web is inherently decentralized. As long as your computer has access to the Internet, you can host a web page, and as long as other computers have web browsers on them, they can access your web page. Today, web pages can be much more than just linked documents. They can be multimedia, apps, games and everything else you've ever seen (or have yet to see) on a screen! The more time we spend on our screens, the more essential the Web's distributed nature becomes. As we move into the era of augmented and virtual realities, it's important to remember the Web can do those things too! Let's keep our virtual worlds in the public commons and outside of corporately controlled spaces by creating our virtual future on the Web. We hope that by sharing our commented and non-obfuscated code, as well as our process via blog posts, we can help steer other creative coders in the right direction. :)
</p>
<!-- <div id="blog-posts">
<div>
<h3>multiple experiences...</h3>
<p>vr, mobile, desktop etc explainer for what's going on here</p>
</div>
<div>
<h3>multiple experiences...</h3>
<p>vr, mobile, desktop etc explainer for what's going on here</p>
</div>
</div> -->
<div id="end-card">
<p>made with love and optimism by</p>
<a href="http://brangerbriz.com" target="_blank">
<img src="images/BB_full_logo_white.svg" alt="Branger_Briz">
</a>
</div>
</div>
</section>
<script type="text/javascript" src="https://js.createsend1.com/javascript/copypastesubscribeformlogic.js"></script>
<!-- third party dependencies -->
<script src="libs/Tween.js"></script>
<script src="libs/three.min.js"></script>
<!-- globally used classes / functions -->
<script src="js/BaseObjClass.js"></script>
<script src="js/utils.js"></script>
<!-- scene specific classes / functions -->
<script src="js/Packet.js"></script>
<script src="js/site-utils.js"></script>
<script>
/*
welcome code explorer! we're glad you're interested to see how
this game works :) we've done our best to make the code legible
( no minification or obfiscation ) and have tried to leave
helpful comments along the way. this project is open-source so
you can also look at all this code on our github:
https://github.com/brangerbriz/A-Web-Packets-Journey
if you have any thoughts/questions we'd love to hear 'em. you
can contact us@brangerbriz.com
*/
let width = (innerWidth<500) ? innerWidth : 500
let height = (innerHeight<500) ? innerHeight*(320/500) : 320
let pdiv = document.querySelector('#packet')
pdiv.style.width = `${width}px`
pdiv.style.height = `${height}px`
const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera(75,width/height,0.1,100)
camera.position.z = 1
camera.position.y = 0.5
const renderer = new THREE.WebGLRenderer({
alpha:true, antialias:true
})
renderer.setSize( width, height )
pdiv.appendChild( renderer.domElement )
let packet = new Packet({
bounce:true,
lights:false,
type:'dns'
},(mesh)=>{
scene.add(mesh)
})
//
document.addEventListener('mousemove',(e)=>{
if(packet.mesh){
let trn = Math.PI/3
let hlfW = innerWidth/2
let hlfH = innerHeight/2
let xOff = e.clientX - hlfW
let yOff = e.pageY - hlfH
packet.mesh.rotation.y = Math.map(xOff,-hlfW,hlfW,-trn,trn)
packet.mesh.rotation.x = Math.map(yOff,-hlfH,hlfH,-trn,trn)
}
})
document.addEventListener("touchstart", (e)=>{
if(!packet.spinning){
packet.spinning = true
let x = -Math.PI*2
new TWEEN.Tween(packet.mesh.rotation).to({x:x}, 1000)
.easing(TWEEN.Easing.Quadratic.InOut)
.onComplete(()=>{
packet.spinning = false
packet.mesh.rotation.x = 0
}).start()
}
})
//
let clouds = new PxlClouds('#project-info > .body')
let pxlHeader = new PxlFade('#project-info > .header','up')
let pxlFooter = new PxlFade('#project-info > .footer','down')
// ----------------------
window.addEventListener('resize',()=>{
width = (innerWidth<500) ? innerWidth : 500
height = (innerHeight<320) ? innerHeight : 320
camera.aspect = width/height
camera.updateProjectionMatrix()
renderer.setSize(width, height)
pdiv.style.width = `${width}px`
pdiv.style.height = `${height}px`
//
clouds.resize()
pxlHeader.draw()
pxlFooter.draw()
})
function animate(){
requestAnimationFrame( animate )
TWEEN.update()
renderer.render( scene, camera )
clouds.update()
}
animate()
</script>
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-6098550-34"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-6098550-34');
</script>
</body>
</html>