-
Notifications
You must be signed in to change notification settings - Fork 16
/
Copy pathindex.html
344 lines (307 loc) · 11.2 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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>q5</title>
<link rel="icon" href="/q5js_logo.webp">
<link rel="stylesheet" href="index.css">
<meta name="description"
content="Beginner friendly graphics powered by WebGPU and optimized for interactive art! q5.js is also compatible with popular p5.js addons including p5.sound, ml5.js, and p5play.">
<meta property="og:title" content="q5.js">
<meta property="og:type" content="website">
<meta property="og:url" content="https://q5js.org">
<meta property="og:image" content="q5js_logo.webp">
<meta property="og:description"
content="Beginner friendly graphics powered by WebGPU and optimized for interactive art! q5.js is also compatible with popular p5.js addons including p5.sound, ml5.js, and p5play.">
</head>
<body class="dark">
<main></main>
<nav id="topNav">
<a id="q5_home" href="../home">
<div class="img q5js_logo"></div>
<div class="img q5js_brand"></div>
</a>
<div id="navLinks">
<a href="../learn">📖 Learn</a>
<a href="https://discord.gg/QuxQYwGWuB">🤝 Join</a>
<a href="https://www.patreon.com/q5play">💙 Support</a>
</div>
</nav>
<div id="reel0" class="reel">
<div id="controls">
<div class="btn">
<div id="darkModeIcon"></div>
</div>
<textarea id="scriptLink" rows="1"
readonly=""><script src="https://q5js.org/q5.js"></script></textarea>
<div class="btn">
<div id="fullscreenIcon"></div>
</div>
</div>
</div>
<div id="reel1" class="reel">
<md id="md1-0">
<h2 id="create-art-with-q5-🎨">Create art with q5! 🎨</h2>
<ul>
<li>inspired by <a href="https://p5js.org" target="_blank">p5.js</a> and <a href="https://processing.org/"
target="_blank">Processing</a> ⭐️</li>
<li>performance optimized for interactive art 🚀</li>
<li>lightning fast <a href="https://github.com/q5js/q5.js/wiki/q5-WebGPU-renderer" target="_blank">WebGPU
renderer</a> ⚡️</li>
<li>beginner friendly <a href="/learn" target="_blank">documentation</a> 📚</li>
<li>compatible with popular p5 addons 🧩</li>
<li>no dependencies, ~110kb minified 📦</li>
<li>free to use under the LGPL (just like p5.js) 🆓</li>
</ul>
</md>
<div class="minis">
<md id="md1-1">
<p>Familiar with p5? You'll be right at home with q5. 🏡</p>
<p>It's like getting a free computer upgrade! 🖥️</p>
</md>
<script type="mini" id="q5.js" horiz="">
createCanvas(100, 100);
circle(50, 50, 50);
</script>
</div>
</div>
<div class="reel">
<md id="md3-0">
<h2 id="works-with">Works with</h2>
</md>
<div id="partners">
<!-- <a href="https://b5editor.app/"
title="b5 - A node based online editor for introducing q5.js to young programmers." target="_blank">
<img id="b5_brand" src="/assets/brands/b5_brand.svg" alt="">
</a> -->
<a href="https://p5js.org/reference/p5.sound/">
<img id="ml5_brand" src="/assets/brands/p5sound_brand.webp" alt="">
</a>
<a href="https://p5play.org"
title="p5play - A JavaScript game engine that uses q5.js for graphics and Box2D for physics." target="_blank">
<!-- <img id="p5play_logo" src="/assets/brands/p5play_logo.svg" alt=""> -->
<img id="p5play_brand" src="/assets/brands/p5play_brand_dark.webp" alt="">
</a>
<a href="https://ml5js.org/">
<img id="ml5_brand" src="/assets/brands/ml5_brand.webp" alt="">
</a>
<a href="https://openprocessing.org/user/504812">
<img id="openprocessing_brand" src="/assets/brands/openprocessing_brand.webp" alt="">
</a>
</div>
</div>
<div id="reel4" class="reel">
<div class="minis horiz">
<md id="md4-0">
<h2 id="start-coding-💻">Start coding! 💻</h2>
<p>No installation required! Use an online code editor: <a
href="https://studio.firebase.google.com/new?template=https:%2F%2Fgithub.com%2Fq5js%2Fq5-webgpu-template"
target="_blank">Firebase Studio</a>, <a href="https://openprocessing.org/sketch/2534845"
target="_blank">OpenProcessing</a>, or <a href="https://codepen.io/qashto/pen/jENEJNy"
target="_blank">CodePen</a>.</p>
</md>
<md id="md4-1">
<h2 id="join-us-🤝">Join us 🤝</h2>
<p>The future of creative coding is here! Join us on the <a href="https://discord.gg/QuxQYwGWuB"
target="_blank">q5 community Discord</a>.</p>
</md>
<div class="minis horiz">
<md id="md4-2">
<h2 id="local-dev-🛠️">Local dev 🛠️</h2>
<p>You can <a href="https://github.com/q5js/q5.js/wiki/Get-Started" target="_blank">use q5 offline</a> or add
this to your HTML file to always load the latest version.</p>
<pre><code class="language-html"><script src="https://q5js.org/q5.js"></script>
</code></pre>
</md>
<md id="md4-3">
<h2 id="support-q5-💙">Support q5 💙</h2>
<p><a href="https://github.com/q5js/q5.js" target="_blank">q5 is open source on GitHub</a> and anyone can use
it for free under the terms of the LGPL (just like p5.js).</p>
<p>If you enjoy using q5, we need your support via <a href="https://github.com/sponsors/quinton-ashley"
target="_blank">GitHub Sponsors</a>, <a href="https://ko-fi.com/q5play" target="_blank">Ko-fi</a>, or <a
href="https://www.patreon.com/q5play" target="_blank">Patreon</a>.</p>
</md>
</div>
</div>
</div>
<div id="reel10" class="reel">
<md id="md10-0">
<h2 id="exclusive-features-💫">Exclusive Features 💫</h2>
</md>
<div class="minis horiz">
<md id="md10-1">
<ul>
<li>frame your canvas with <a href="/learn/#displayMode" target="_blank"><code>displayMode</code></a> 🖼️</li>
<li><a href="https://github.com/q5js/q5.js/wiki/Top%E2%80%90Level-Global-Mode" target="_blank">top-level
global mode</a> ⚙️</li>
<li>modular use from <a href="https://github.com/q5js/q5.js/tree/main/src" target="_blank">source</a> 📦</li>
</ul>
</md>
<md id="md10-2">
<ul>
<li>98% smaller than p5 + p5.sound + p5.capture 🌳</li>
<li>includes <a href="/learn/#soundSection" target="_blank">sound</a> playback and mixing 🔊</li>
<li>includes canvas <a href="/learn/#recordSection" target="_blank">recorder</a> 🎞️</li>
</ul>
</md>
</div>
</div>
<div id="reel20" class="reel">
<md id="md20-0">
<h2 id="credits-🌟">Credits 🌟</h2>
<p>This project aims to continue the legacy of the incredible work done by <a href="https://benfry.com"
target="_blank">Ben Fry</a> and <a href="https://x.com/REAS" target="_blank">Casey Reas</a> on Java <a
href="https://processingfoundation.org/" target="_blank">Processing</a>, <a href="http://lauren-mccarthy.com"
target="_blank">Lauren McCarthy</a>'s work on <a href="https://p5js.org" target="_blank">p5.js</a>, and all
contributors to these projects.</p>
<p>The original <a href="https://github.com/LingDong-/q5xjs" target="_blank">q5xjs (v0)</a> was created by <a
href="https://github.com/LingDong-" target="_blank">@LingDong~</a> and released under the public domain
Unlicense license. We forked and significantly extended the abandoned codebase.</p>
<p>q5.js is open source under the LGPLv3, created and actively maintained by <a
href="https://github.com/quinton-ashley" target="_blank">@quinton-ashley</a>. The q5 team includes contributor
<a href="https://github.com/Tezumie" target="_blank">@Tezumie</a>.
</p>
</md>
</div>
<footer>
<md id="md100">
<p>q5js.org was created by the q5 team. Copyright 2024-2025.</p>
</md>
</footer>
<script src="../q5.js"></script>
<script>
createCanvas();
let speedMod = 1;
let draggedLava = null;
let dragOffsetX = 0;
let dragOffsetY = 0;
class Lava {
constructor(x, y, r) {
this.x = x;
this.y = y;
this.r = r;
this.d = r * 2;
this.maxSize = this.d * 2;
this.xSpeed = random(-0.5, 0.5);
this.ySpeed = random(-0.5, -2);
this.res = r < 25 ? 5 : 8;
this.resF = this.res + 2;
this.offsets = Array.from({ length: this.res }, () => random(-5, 5));
this.noiseOffsets = Array.from({ length: this.res }, () => random(1000));
this.layer = round(random(1, 4));
}
move() {
if (!this.dragging) {
this.x += this.xSpeed;
this.y += this.ySpeed * speedMod;
if (this.y < -this.maxSize) {
this.x = random(width);
this.y = height + this.d;
}
}
for (let i = 0; i < this.offsets.length; i++) {
this.offsets[i] = map(noise(this.noiseOffsets[i]), 0, 1, 0, this.d);
this.noiseOffsets[i] += this.hovered ? 0.025 : 0.005;
}
}
show() {
push();
if (darkMode) fill(183, 235, 255, 25 * this.layer);
else fill(0, 25 * this.layer);
if (this.hovered) strokeWeight(2);
else strokeWeight(1);
translate(this.x, this.y);
beginShape();
for (let i = 0; i <= this.resF; i++) {
let rad = (i * TAU) / this.res;
let r = this.r + this.offsets[i % this.offsets.length];
curveVertex(r * cos(rad), r * sin(rad));
}
endShape();
if (mouseX || mouseY) {
this.hovered = inFill(mouseX, mouseY);
if (this.hovered && mouseIsPressed) {
if (!draggedLava) {
this.dragging = true;
draggedLava = this;
dragOffsetX = this.x - mouseX;
dragOffsetY = this.y - mouseY;
cursor('grabbing');
}
} else if (this.hovered) {
cursor('grab');
}
} else this.hovered = false;
pop();
}
}
let darkMode = false;
let lavas = [];
let looping = true;
let amount = floor(width / 40);
for (let i = 0; i < amount; i++) {
let l = new Lava(random(width), random(height), random(10, 100));
lavas.push(l);
}
let blue = color(183, 235, 255, 64);
let black = color(0, 64);
function draw() {
darkMode = document.body.classList.contains('dark');
background(darkMode ? black : blue);
for (let l of lavas) {
l.move();
l.show();
}
}
function mouseDragged() {
if (draggedLava) {
draggedLava.x = mouseX + dragOffsetX;
draggedLava.y = mouseY + dragOffsetY;
return false;
}
}
function mouseReleased() {
if (draggedLava) {
draggedLava.dragging = false;
draggedLava = null;
}
mouseX = mouseY = 0;
}
function mouseWheel() {
return true;
}
function windowResized() {
resizeCanvas();
}
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.52.2/min/vs/loader.min.js"></script>
<script src="/learn/mini-editor.js"></script>
<script src="/home/theme.js"></script>
<script>
document.getElementById('fullscreenIcon').addEventListener('click', () => {
if (document.fullscreenElement) document.exitFullscreen();
else document.documentElement.requestFullscreen();
});
document.getElementById('darkModeIcon').addEventListener('click', () => {
setTheme(document.body.classList.contains('dark') ? 'light' : 'dark');
});
window.addEventListener('scroll', function () {
if (window.scrollY > 50) {
// Adjust the scroll position as needed
document.body.classList.add('nav-fixed');
} else {
document.body.classList.remove('nav-fixed');
}
});
(async () => {
await Q5.initWebGPU();
let scripts = document.body.querySelectorAll('script[type="mini"]');
for (let script of scripts) {
let mie = new MiniEditor(script);
await mie.init();
}
})();
</script>
</body>
</html>