-
Notifications
You must be signed in to change notification settings - Fork 0
/
privacy.html
707 lines (581 loc) · 32.4 KB
/
privacy.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
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Privacy Policy | Mighty Crayon</title>
<meta name="description"
content="Mighty Crayon is a 501(c)(3) Non-Profit commited to helping children learn and grow through educative creative mediums.">
<link rel="icon" sizes="192x192" href="assets/img/icons/android-chrome-192x192.png">
<link rel="icon" sizes="512x512" href="assets/img/icons/android-chrome-512x512.png">
<link rel="apple-touch-icon" sizes="192x192" href="assets/img/icons/android-chrome-192x192.png">
<link rel="icon" type="image/png" sizes="16x16" href="assets/img/icons/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="assets/img/icons/favicon-32x32.png">
<link rel="manifest" href="assets/img/icons/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="assets/img/icons/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<link rel="canonical" href="index.html" />
<meta property="og:locale" content="en_US" />
<meta property="og:type" content="article" />
<meta property="og:title" content="Mighty Crayon | Home" />
<meta property="og:description"
content="Mighty Crayon is a 501(c)(3) Non-Profit commited to helping children learn and grow through educative creative mediums." />
<meta property="og:url" content="index.html" />
<meta property="og:site_name" content="Mighty Crayon | Home" />
<meta property="article:publisher" content="https://www.facebook.com/MightyCrayon/" />
<meta property="og:image" content="assets/img/general/piyush-banner.jpg" />
<link rel="stylesheet" href="assets/css/app.css">
</head>
<body class=" ">
<div class="cursor" data-cursor>
<div class="inner">
<div class="circle"></div>
</div>
</div>
<div class="cursor-dot" data-cursor-dot></div>
<div id="loading-cover" class="loading-cover"></div>
<div id="loading" class="loading">
<div class="logo" title="Privacy">
<span class=""><span class="rev_item">
<img src="assets/img/icons/android-chrome-512x512.png" width="500" />
</span></span>
</div>
</div>
<div id="head" class="header">
<div class="header-wrap header-static">
<div data-stick-cursor>
<a href="index.html" class="logo" data-stick-cursor id="main-logo" title="">
<img src="assets/img/icons/android-chrome-512x512.png" />
</a>
</div>
<div class="right-nav hidescroll ">
<a href="index.html" data-stick-cursor class="font-caps">Home</a>
<a href="contact.html" target="_blank" data-stick-cursor class="font-caps hide-mobile">Contact</a>
</div>
</div>
<div class="nav-menu hidescroll" data-stick-cursor id="nav">
<span class="line"></span>
<span class="line"></span>
<span class="font-caps text">Menu</span>
</div>
</div>
<div id="menu" class="menu hideOnLoad">
<div class="menu-content" id="menu-content">
<div class="nav-close hover-target" data-stick-cursor id="navClose">
<span class="line"></span>
</div>
<div class="menu-wrapper">
<div class="column">
<a href="index.html" class="logo navlink" data-stick-cursor title="">
<img src="assets/img/general/logo.svg" />
</a>
<ol class="links">
<li>
<a href="index.html" class="navlink" data-stick-cursor>
<span class="q_split"><span class="rev_item">Introduction</span></span>
</a>
</li>
<li>
<a href="features.html" class="navlink" data-stick-cursor>
<span class="q_split"><span class="rev_item">All Features</span></span>
</a>
</li>
<li>
<a href="http://beta.app.vold.io/" target="_blank" data-stick-cursor>
<span class="q_split"><span class="rev_item">Login to Console</span></span>
</a>
</li>
</ol>
</div>
<div class="nav_bottom">
<div class="col">
<div class="copyright hidescroll">
© <span class="year_copy">2023</span> Mighty Crayon. All rights reserved.<br>
Website by <a href="https://fleava.com/" target="_blank" data-stick-cursor class="hover-target"
title="Fleava Digital Agency">Fleava</a>
</div>
</div>
<div class="col">
<div class="copyright hidescroll">
<a href="mailto:app@vold.io?subject=Request Demo" data-stick-cursor>Request Demo</a><br>
<a href="mailto:app@vold.io?subject=Join Dev Team" data-stick-cursor>Join the Dev Team</a><br>
<a href="mailto:app@vold.io?subject=Partnership" data-stick-cursor>Partnerships</a>
</div>
</div>
<div class="col">
<a href="terms.html" class="navlink" data-stick-cursor>Terms of Service</a> <br> <a href="privacy.html"
class="navlink" data-stick-cursor>Privacy Policy</a>
</div>
</div>
</div>
</div>
</div>
<div id="dynamicLoad" class="dynamic_load">
<div class="progress">
<div class="bar" id="dynamicBar"></div>
</div>
</div>
<div id="barba-wrapper">
<div class="barba-container">
<div id="main" class="q_smooth" data-bg="#000000">
<section class="section dark terms" id="section-header">
<div class="q-container container-inner">
<div class="columns">
<div class="column">
<h1>
<span class="q_split"><span class="rev_item">Privacy</span></span>
<span class="q_split"><span class="rev_item">Policy.</span></span>
</h1>
<p><strong>Effective Since: Januaray 1st, 2023</strong></p>
<p>This Privacy Policy describes Our policies and procedures on the collection, use and disclosure of
Your information when You use the Service and tells You about Your privacy rights and how the law
protects You. We use Your Personal data to provide and improve the Service. By using the Service, You
agree to the collection and use of information in accordance with this Privacy Policy.</p>
<p><strong>Interpretation</strong></p>
<p>The words of which the initial letter is capitalized have meanings defined under the following
conditions. The following definitions shall have the same meaning regardless of whether they appear in
singular or in plural.</p>
<p><strong>Definitions</strong></p>
<ul>
<li>
<p><strong>You</strong> means the individual accessing or using the Service, or the company, or
other legal entity on behalf of which such individual is accessing or using the Service, as
applicable.</p>
</li>
<li>
<p><strong>Company</strong> (referred to as either "the Company", "We", "Us" or "Our" in this
Agreement) refers to Mighty Crayon, a 501(c)(3) located @ 400 NW Gilman Blvd, Issaquah, WA 98027
</p>
</li>
<li>
<p><strong>Account</strong> means a unique account created for You to access our Service or parts of
our Service.</p>
</li>
<li>
<p><strong>Website</strong> refers to Mighty Crayon, accessible from www.mightycrayon.org</p>
</li>
<li>
<p><strong>Service</strong> refers to the Website.</p>
</li>
<li>
<p><strong>Country</strong> refers to: United States of America</p>
</li>
<li>
<p><strong>Service Provider</strong> means any natural or legal person who processes the data on
behalf of the Company. It refers to third-party companies or individuals employed by the Company
to facilitate the Service, to provide the Service on behalf of the Company, to perform services
related to the Service or to assist the Company in analyzing how the Service is used.</p>
</li>
<li>
<p><strong>Third-party Social Media Service</strong> refers to any website or any social network
website through which a User can log in or create an account to use the Service.</p>
</li>
<li>
<p><strong>Personal Data</strong> is any information that relates to an identified or identifiable
individual.</p>
</li>
<li>
<p><strong>Cookies</strong> are small files that are placed on Your computer, mobile device or any
other device by a website, containing the details of Your browsing history on that website among
its many uses.</p>
</li>
<li>
<p><strong>Usage Data</strong> refers to data collected automatically, either generated by the use
of the Service or from the Service infrastructure itself (for example, the duration of a page
visit).</p>
</li>
</ul>
<p><strong>Collecting and Using Your Personal Data</strong></p>
<p><strong>Personal Data</strong> While using Our Service, We may ask You to provide Us with certain
personally identifiable information that can be used to contact or identify You. Personally
identifiable information may include, but is not limited to: Email address, First name and last name,
Usage Data.</p>
<p><strong>Usage Data</strong></p>
<p>Usage Data is collected automatically when using the Service. Usage Data may include information such
as Your Device's Internet Protocol address (e.g. IP address), browser type, browser version, the pages
of our Service that You visit, the time and date of Your visit, the time spent on those pages, unique
device identifiers and other diagnostic data.</p>
<p>When You access the Service by or through a mobile device, We may collect certain information
automatically, including, but not limited to, the type of mobile device You use, Your mobile device
unique ID, the IP address of Your mobile device, Your mobile operating system, the type of mobile
Internet browser You use, unique device identifiers and other diagnostic data.</p>
<p>We may also collect information that Your browser sends whenever You visit our Service or when You
access the Service by or through a mobile device.</p>
<p><strong>Tracking Technologies and Cookies</strong></p>
<p>We use Cookies and similar tracking technologies to track the activity on Our Service and store
certain information. Tracking technologies used are beacons, tags, and scripts to collect and track
information and to improve and analyze Our Service.</p>
<p>You can instruct Your browser to refuse all Cookies or to indicate when a Cookie is being sent.
However, if You do not accept Cookies, You may not be able to use some parts of our Service. Cookies
can be "Persistent" or "Session" Cookies. Persistent Cookies remain on your personal computer or
mobile device when You go offline, while Session Cookies are deleted as soon as You close your web
browser. We use both session and persistent Cookies for the purposes set out below:</p>
<ul>
<li>
<p><strong>Necessary / Essential Cookies</strong>
<p>Type: Session Cookies; Administered by: Us; Purpose: These Cookies are essential to provide You
with services available through the Website and to enable You to use some of its features. They
help to authenticate users and prevent fraudulent use of user accounts. Without these Cookies, the
services that You have asked for cannot be provided, and We only use these Cookies to provide You
with those services.</p>
</li>
<li>
<p><strong>Cookies Policy / Notice Acceptance Cookies</strong></p>
<p>Type: Persistent Cookies; Administered by: Us; Purpose: These Cookies identify if users have
accepted the use of cookies on the Website.</p>
</li>
<li>
<p><strong>Functionality Cookies</strong></p>
<p>Type: Persistent Cookies; Administered by: Us; Purpose: These Cookies allow us to remember
choices You make when You use the Website, such as remembering your login details or language
preference. The purpose of these Cookies is to provide You with a more personal experience and to
avoid You having to re-enter your preferences every time You use the Website.</p>
</li>
<li>
<p><strong>Tracking and Performance Cookies</strong></p>
<p>Type: Persistent Cookies; Administered by: Third-Parties; Purpose: These Cookies are used to
track information about traffic to the Website and how users use the Website. The information
gathered via these Cookies may directly or indirectly identify you as an individual visitor. This
is because the information collected is typically linked to a pseudonymous identifier associated
with the device you use to access the Website. We may also use these Cookies to test new
advertisements, pages, features or new functionality of the Website to see how our users react to
them.</p>
</li>
</ul>
<p>For more information about the cookies we use and your choices regarding cookies, please visit our
Cookies Policy.</p>
<p><strong>Use of Your Personal Data</strong></p>
<p>The Company may use Personal Data for the following purposes:</p>
<ul>
<li>
<p><strong>To provide and maintain our Service</strong>, including to monitor the usage of our
Service.</p>
</li>
<li>
<p><strong>To manage Your Account:</strong> to manage Your registration as a user of the Service.
The Personal Data You provide can give You access to different functionalities of the Service that
are available to You as a registered user.</p>
</li>
<li>
<p><strong>For the performance of a contract:</strong> the development, compliance and undertaking
of the purchase contract for the products, items or services You have purchased or of any other
contract with Us through the Service.</p>
</li>
<li>
<p><strong>To contact You:</strong> To contact You by email, telephone calls, SMS, or other
equivalent forms of electronic communication, such as a mobile application's push notifications
regarding updates or informative communications related to the functionalities, products or
contracted services, including the security updates, when necessary or reasonable for their
implementation.</p>
</li>
<li>
<p><strong>To provide You</strong> with news, special offers and general information about other
goods, services and events which we offer that are similar to those that you have already
purchased or enquired about unless You have opted not to receive such information.</p>
</li>
<li>
<p><strong>To manage Your requests:</strong> To attend and manage Your requests to Us.</p>
</li>
</ul>
<p>We may share your personal information in the following situations:</p>
<ul>
<li>
<p><strong>With Service Providers:</strong> We may share Your personal information with Service
Providers to monitor and analyze the use of our Service, to show advertisements to You to help
support and maintain Our Service, to contact You, to advertise on third party websites to You
after You visited our Service or for payment processing.</p>
</li>
<li>
<p><strong>For Business transfers:</strong> We may share or transfer Your personal information in
connection with, or during negotiations of, any merger, sale of Company assets, financing, or
acquisition of all or a portion of our business to another company.</p>
</li>
<li>
<p><strong>With Affiliates:</strong> We may share Your information with Our affiliates, in which
case we will require those affiliates to honor this Privacy Policy. Affiliates include Our parent
company and any other subsidiaries, joint venture partners or other companies that We control or
that are under common control with Us.</p>
</li>
<li>
<p><strong>With Business partners:</strong> We may share Your information with Our business partners
to offer You certain products, services or promotions.</p>
</li>
<li>
<p><strong>With other users:</strong> when You share personal information or otherwise interact in
the public areas with other users, such information may be viewed by all users and may be publicly
distributed outside. If You interact with other users or register through a Third-Party Social
Media Service, Your contacts on the Third-Party Social Media Service may see Your name, profile,
pictures and description of Your activity. Similarly, other users will be able to view
descriptions of Your activity, communicate with You and view Your profile.</p>
</li>
</ul>
<p><strong>Retention of Your Personal Data</strong></p>
<p>The Company will retain Your Personal Data only for as long as is necessary for the purposes set out
in this Privacy Policy. We will retain and use Your Personal Data to the extent necessary to comply
with our legal obligations (for example, if we are required to retain your data to comply with
applicable laws), resolve disputes, and enforce our legal agreements and policies.</p>
<p>The Company will also retain Usage Data for internal analysis purposes. Usage Data is generally
retained for a shorter period of time, except when this data is used to strengthen the security or to
improve the functionality of Our Service, or We are legally obligated to retain this data for longer
time periods.</p>
<p><strong>Transfer of Your Personal Data</strong></p>
<p>Your information, including Personal Data, is processed at the Company's operating offices and in any
other places where the parties involved in the processing are located. It means that this information
may be transferred to — and maintained on — computers located outside of Your state, province, country
or other governmental jurisdiction where the data protection laws may differ than those from Your
jurisdiction.</p>
<p>Your consent to this Privacy Policy followed by Your submission of such information represents Your
agreement to that transfer.</p>
<p>The Company will take all steps reasonably necessary to ensure that Your data is treated securely and
in accordance with this Privacy Policy and no transfer of Your Personal Data will take place to an
organization or a country unless there are adequate controls in place including the security of Your
data and other personal information.</p>
<p><strong>Disclosure of Your Personal Data</strong></p>
<p><strong>Business Transactions</strong> If the Company is involved in a merger, acquisition or asset
sale, Your Personal Data may be transferred. We will provide notice before Your Personal Data is
transferred and becomes subject to a different Privacy Policy.</p>
<p><strong>Law enforcement</strong> Under certain circumstances, the Company may be required to disclose
Your Personal Data if required to do so by law or in response to valid requests by public authorities
(e.g. a court or a government agency).</p>
<p><strong>Other legal requirements</strong> The Company may disclose Your Personal Data in the good
faith belief that such action is necessary to:</p>
<p>
Comply with a legal obligation;<br>
Protect and defend the rights or property of the Company;<br>
Prevent or investigate possible wrongdoing in connection with the Service;<br>
Protect the personal safety of Users of the Service or the public;<br>
Protect against legal liability
</p>
<p><strong>Security of Your Personal Data</strong></p>
<p>The security of Your Personal Data is important to Us, but remember that no method of transmission
over the Internet, or method of electronic storage is 100% secure. While We strive to use commercially
acceptable means to protect Your Personal Data, We cannot guarantee its absolute security.</p>
<p><strong>Detailed Information on the Processing of Your Personal Data</strong></p>
<p>Service Providers have access to Your Personal Data only to perform their tasks on Our behalf and are
obligated not to disclose or use it for any other purpose.</p>
<p><strong>Children's Privacy</strong></p>
<p>Our Service does not address anyone under the age of 13. We do not knowingly collect personally
identifiable information from anyone under the age of 13. If You are a parent or guardian and You are
aware that Your child has provided Us with Personal Data, please contact Us. If We become aware that
We have collected Personal Data from anyone under the age of 13 without verification of parental
consent, We take steps to remove that information from Our servers.</p>
<p>We also may limit how We collect, use, and store some of the information of Users between 13 and 18
years old. In some cases, this means We will be unable to provide certain functionality of the Service
to these users. If We need to rely on consent as a legal basis for processing Your information and
Your country requires consent from a parent, We may require Your parent's consent before We collect
and use that information.</p>
<p><strong>Links to Other Websites</strong></p>
<p>Our Service may contain links to other websites that are not operated by Us. If You click on a third
party link, You will be directed to that third party's site. We strongly advise You to review the
Privacy Policy of every site You visit. We have no control over and assume no responsibility for the
content, privacy policies or practices of any third party sites or services.</p>
<p><strong>Changes to this Privacy Policy</strong></p>
<p>We may update our Privacy Policy from time to time. We will notify You of any changes by posting the
new Privacy Policy on this page. We will let You know via email and/or a prominent notice on Our
Service, prior to the change becoming effective and update the "Last updated" date at the top of this
Privacy Policy.</p>
<p>You are advised to review this Privacy Policy periodically for any changes. Changes to this Privacy
Policy are effective when they are posted on this page.</p>
</div>
</div>
</div>
</section>
<footer id="footer">
<section class="section">
<div class="footer-wrap">
<a href="index.html" class="logo" data-stick-cursor id="main-logo" title="">
<img src="assets/img/icons/android-chrome-512x512.png" />
</a>
<p>© <span class="year_copy">2023</span> <a href="index.html" data-stick-cursor title="">Mighty
Crayon</a>. All Rights Reserved.<br>
<a href="terms.html" data-stick-cursor>Terms of Service</a> | <a href="privacy.html"
data-stick-cursor>Privacy Policy</a><br>
Website by Aarnav Bhat and Piyush Acharya
</p>
</div>
</section>
</footer>
</div>
</div>
</div>
<script src="../unpkg.com/axios%400.27.2/dist/axios.min.js"></script>
<script src="assets/js/scripts.js"></script>
</body>
<script type="module">
const imgSize = [1250, 1097];
const vertex = `
attribute vec2 uv;
attribute vec2 position;
varying vec2 vUv;
void main() {
vUv = uv;
gl_Position = vec4(position, 0, 1);
}
`;
const fragment = `
precision highp float;
precision highp int;
uniform sampler2D tWater;
uniform sampler2D tFlow;
uniform float uTime;
varying vec2 vUv;
uniform vec4 res;
void main() {
// R and G values are velocity in the x and y direction
// B value is the velocity length
vec3 flow = texture2D(tFlow, vUv).rgb;
vec2 uv = .5 * gl_FragCoord.xy / res.xy ;
vec2 myUV = (uv - vec2(0.5))*res.zw + vec2(0.5);
myUV -= flow.xy * (0.15 * 0.7);
vec2 myUV2 = (uv - vec2(0.5))*res.zw + vec2(0.5);
myUV2 -= flow.xy * (0.125 * 0.7);
vec2 myUV3 = (uv - vec2(0.5))*res.zw + vec2(0.5);
myUV3 -= flow.xy * (0.10 * 0.7);
vec3 tex = texture2D(tWater, myUV).rgb;
vec3 tex2 = texture2D(tWater, myUV2).rgb;
vec3 tex3 = texture2D(tWater, myUV3).rgb;
gl_FragColor = vec4(tex.r, tex2.g, tex3.b, 1.0);
}
`;
{
const renderer = new ogl.Renderer({ dpr: 2 });
const gl = renderer.gl;
document.getElementById('menu-content').appendChild(gl.canvas);
//gl.canvas.classList.add('kenburns')
// Variable inputs to control flowmap
let aspect = 1;
const mouse = new ogl.Vec2(-1);
const velocity = new ogl.Vec2();
function resize() {
let a1, a2;
var imageAspect = imgSize[1] / imgSize[0];
if (window.innerHeight / window.innerWidth < imageAspect) {
a1 = 1;
a2 = window.innerHeight / window.innerWidth / imageAspect;
} else {
a1 = (window.innerWidth / window.innerHeight) * imageAspect;
a2 = 1;
}
mesh.program.uniforms.res.value = new ogl.Vec4(
window.innerWidth,
window.innerHeight,
a1,
a2
);
renderer.setSize(window.innerWidth, window.innerHeight);
aspect = window.innerWidth / window.innerHeight;
}
const flowmap = new ogl.Flowmap(gl, {
falloff: 1.0, // size of the stamp, percentage of the size
alpha: 0.3, // opacity of the stamp
dissipation: 0.94 // affects the speed that the stamp fades. Closer to 1 is slower
});
// Triangle that includes -1 to 1 range for 'position', and 0 to 1 range for 'uv'.
const geometry = new ogl.Geometry(gl, {
position: {
size: 2,
data: new Float32Array([-1, -1, 3, -1, -1, 3])
},
uv: { size: 2, data: new Float32Array([0, 0, 2, 0, 0, 2]) }
});
const texture = new ogl.Texture(gl, {
minFilter: gl.LINEAR,
magFilter: gl.LINEAR
});
const img = new Image();
img.onload = () => (texture.image = img);
img.crossOrigin = "Anonymous";
img.src = "assets/img/general/navbg2.jpg";
let a1, a2;
var imageAspect = imgSize[1] / imgSize[0];
if (window.innerHeight / window.innerWidth < imageAspect) {
a1 = 1;
a2 = window.innerHeight / window.innerWidth / imageAspect;
} else {
a1 = (window.innerWidth / window.innerHeight) * imageAspect;
a2 = 1;
}
const program = new ogl.Program(gl, {
vertex,
fragment,
uniforms: {
uTime: { value: 0 },
tWater: { value: texture },
res: {
value: new ogl.Vec4(window.innerWidth, window.innerHeight, a1, a2)
},
img: { value: new ogl.Vec2(imgSize[0], imgSize[1]) },
// Note that the uniform is applied without using an object and value property
// This is because the class alternates this texture between two render targets
// and updates the value property after each render.
tFlow: flowmap.uniform
}
});
const mesh = new ogl.Mesh(gl, { geometry, program });
window.addEventListener("resize", resize, false);
resize();
// Create handlers to get mouse position and velocity
const isTouchCapable = "ontouchstart" in window;
if (isTouchCapable) {
//window.addEventListener("touchstart", updateMouse, false);
//window.addEventListener("touchmove", updateMouse, { passive: false });
} else {
window.addEventListener("mousemove", updateMouse, false);
}
let lastTime;
const lastMouse = new ogl.Vec2();
function updateMouse(e) {
e.preventDefault();
if (e.changedTouches && e.changedTouches.length) {
e.x = e.changedTouches[0].pageX;
e.y = e.changedTouches[0].pageY;
}
if (e.x === undefined) {
e.x = e.pageX;
e.y = e.pageY;
}
// Get mouse value in 0 to 1 range, with y flipped
mouse.set(e.x / gl.renderer.width, 1.0 - e.y / gl.renderer.height);
// Calculate velocity
if (!lastTime) {
// First frame
lastTime = performance.now();
lastMouse.set(e.x, e.y);
}
const deltaX = e.x - lastMouse.x;
const deltaY = e.y - lastMouse.y;
lastMouse.set(e.x, e.y);
let time = performance.now();
// Avoid dividing by 0
let delta = Math.max(10.4, time - lastTime);
lastTime = time;
velocity.x = deltaX / delta;
velocity.y = deltaY / delta;
// Flag update to prevent hanging velocity values when not moving
velocity.needsUpdate = true;
}
requestAnimationFrame(update);
var menu = document.getElementById('menu')
function update(t) {
requestAnimationFrame(update);
if (menu.classList.contains('active')) {
// Reset velocity when mouse not moving
if (!velocity.needsUpdate) {
mouse.set(-1);
velocity.set(0);
}
velocity.needsUpdate = false;
// Update flowmap inputs
flowmap.aspect = aspect;
flowmap.mouse.copy(mouse);
// Ease velocity input, slower when fading out
flowmap.velocity.lerp(velocity, velocity.len ? 0.15 : 0.1);
flowmap.update();
program.uniforms.uTime.value = t * 0.01;
renderer.render({ scene: mesh });
}
}
}
</script>
</html>