Skip to content

Commit 6fc05ba

Browse files
pepc84pepc84
committed
Examples: remove code-block wrapper, only syntax-block
1 parent 6a772b8 commit 6fc05ba

1 file changed

Lines changed: 37 additions & 110 deletions

File tree

‎index.html‎

Lines changed: 37 additions & 110 deletions
Original file line numberDiff line numberDiff line change
@@ -242,145 +242,72 @@ <h1 style="font-family:'Space Grotesk',sans-serif;font-size:2rem;font-weight:600
242242
<div class="examples-section">
243243
<h2>Examples</h2>
244244
<div class="examples-grid">
245-
<a class="example-card" href="/examples/mouse-1d.html" id="card1">
246-
<iframe class="example-canvas" id="c1" width="300" height="300" style="width:100%;aspect-ratio:1;border:none;display:block;background:#000;" scrolling="no"></iframe><script>(function(){const iframe=document.getElementById('c1');const doc=iframe.contentDocument||iframe.contentWindow.document;doc.open();doc.write(`<!DOCTYPE html><html><head><style>*{margin:0;padding:0;}body{overflow:hidden;}</style><script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.min.js"><\/script></head><body><script>function setup() {
245+
<a class="example-card" href="/examples/linear-interpolation.html" id="card1">
246+
<iframe class="example-canvas" id="c1" width="300" height="300" style="width:100%;aspect-ratio:1;border:none;display:block;background:#000;" scrolling="no"></iframe><script>(function(){const iframe=document.getElementById('c1');const doc=iframe.contentDocument||iframe.contentWindow.document;doc.open();doc.write(`<!DOCTYPE html><html><head><style>*{margin:0;padding:0;}body{overflow:hidden;}</style><script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.min.js"><\/script></head><body><script>let x = 0.0;
247+
let y = 0.0;
248+
249+
function setup() {
247250
createCanvas(300,300);
248251
noStroke();
249-
colorMode(RGB, height, height, height);
250-
rectMode(CENTER);
251252
}
252253
253254
function draw() {
254-
background(0);
255-
256-
let r1 = map(mouseX, 0, width, 0, height);
257-
let r2 = height - r1;
255+
background(51);
258256
259-
fill(r1);
260-
rect(width / 2 + r1 / 2, height / 2, r1, r1);
257+
x = lerp(x, mouseX, 0.05);
258+
y = lerp(y, mouseY, 0.05);
261259
262-
fill(r2);
263-
rect(width / 2 - r2 / 2, height / 2, r2, r2);
260+
fill(255);
261+
stroke(255);
262+
ellipse(x, y, 66, 66);
264263
}<\/script></body></html>`);doc.close();})();</script>
265-
<div class="example-info"><h3>Mouse 1D</h3><p>Input example</p></div>
264+
<div class="example-info"><h3>Linear Interpolation</h3><p>Math example</p></div>
266265
</a>
267-
<a class="example-card" href="/examples/clock.html" id="card2">
268-
<iframe class="example-canvas" id="c2" width="300" height="300" style="width:100%;aspect-ratio:1;border:none;display:block;background:#000;" scrolling="no"></iframe><script>(function(){const iframe=document.getElementById('c2');const doc=iframe.contentDocument||iframe.contentWindow.document;doc.open();doc.write(`<!DOCTYPE html><html><head><style>*{margin:0;padding:0;}body{overflow:hidden;}</style><script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.min.js"><\/script></head><body><script>let cx, cy;
269-
let secondsRadius;
270-
let minutesRadius;
271-
let hoursRadius;
272-
let clockDiameter;
273-
274-
function setup() {
266+
<a class="example-card" href="/examples/recursion.html" id="card2">
267+
<iframe class="example-canvas" id="c2" width="300" height="300" style="width:100%;aspect-ratio:1;border:none;display:block;background:#000;" scrolling="no"></iframe><script>(function(){const iframe=document.getElementById('c2');const doc=iframe.contentDocument||iframe.contentWindow.document;doc.open();doc.write(`<!DOCTYPE html><html><head><style>*{margin:0;padding:0;}body{overflow:hidden;}</style><script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.min.js"><\/script></head><body><script>function setup() {
275268
createCanvas(300,300);
276-
stroke(255);
277-
278-
let radius = min(width, height) / 2;
279-
280-
secondsRadius = radius * 0.72;
281-
minutesRadius = radius * 0.60;
282-
hoursRadius = radius * 0.50;
283-
clockDiameter = radius * 1.8;
284-
285-
cx = width / 2;
286-
cy = height / 2;
269+
noStroke();
270+
noLoop();
287271
}
288272
289273
function draw() {
290-
background(0);
274+
drawCircle(width / 2, 280, 6);
275+
}
291276
292-
fill(80);
293-
noStroke();
294-
ellipse(cx, cy, clockDiameter, clockDiameter);
295-
296-
let s = map(second(), 0, 60, 0, TWO_PI) - HALF_PI;
297-
298-
let m = map(
299-
minute() + norm(second(), 0, 60),
300-
0,
301-
60,
302-
0,
303-
TWO_PI
304-
) - HALF_PI;
305-
306-
let h = map(
307-
hour() + norm(minute(), 0, 60),
308-
0,
309-
24,
310-
0,
311-
TWO_PI * 2
312-
) - HALF_PI;
277+
function drawCircle(x, radius, level) {
278+
let tt = 126 * level / 4.0;
313279
314-
stroke(255);
280+
fill(tt);
281+
ellipse(x, height / 2, radius * 2, radius * 2);
315282
316-
strokeWeight(1);
317-
line(
318-
cx,
319-
cy,
320-
cx + cos(s) * secondsRadius,
321-
cy + sin(s) * secondsRadius
322-
);
323-
324-
strokeWeight(2);
325-
line(
326-
cx,
327-
cy,
328-
cx + cos(m) * minutesRadius,
329-
cy + sin(m) * minutesRadius
330-
);
331-
332-
strokeWeight(4);
333-
line(
334-
cx,
335-
cy,
336-
cx + cos(h) * hoursRadius,
337-
cy + sin(h) * hoursRadius
338-
);
339-
340-
strokeWeight(2);
341-
beginShape(POINTS);
342-
343-
for (let a = 0; a < 360; a += 6) {
344-
let angle = radians(a);
345-
let x = cx + cos(angle) * secondsRadius;
346-
let y = cy + sin(angle) * secondsRadius;
347-
vertex(x, y);
348-
}
283+
if (level > 1) {
284+
level = level - 1;
349285
350-
endShape();
286+
drawCircle(x - radius / 2, radius / 2, level);
287+
drawCircle(x + radius / 2, radius / 2, level);
288+
}
351289
}<\/script></body></html>`);doc.close();})();</script>
352-
<div class="example-info"><h3>Clock</h3><p>Input example</p></div>
290+
<div class="example-info"><h3>Recursion</h3><p>Structure example</p></div>
353291
</a>
354-
<a class="example-card" href="/examples/storing-input.html" id="card3">
355-
<iframe class="example-canvas" id="c3" width="300" height="300" style="width:100%;aspect-ratio:1;border:none;display:block;background:#000;" scrolling="no"></iframe><script>(function(){const iframe=document.getElementById('c3');const doc=iframe.contentDocument||iframe.contentWindow.document;doc.open();doc.write(`<!DOCTYPE html><html><head><style>*{margin:0;padding:0;}body{overflow:hidden;}</style><script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.min.js"><\/script></head><body><script>let num = 60;
356-
let mx = [];
357-
let my = [];
358-
359-
function setup() {
292+
<a class="example-card" href="/examples/mouse-2d.html" id="card3">
293+
<iframe class="example-canvas" id="c3" width="300" height="300" style="width:100%;aspect-ratio:1;border:none;display:block;background:#000;" scrolling="no"></iframe><script>(function(){const iframe=document.getElementById('c3');const doc=iframe.contentDocument||iframe.contentWindow.document;doc.open();doc.write(`<!DOCTYPE html><html><head><style>*{margin:0;padding:0;}body{overflow:hidden;}</style><script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.min.js"><\/script></head><body><script>function setup() {
360294
createCanvas(300,300);
361295
noStroke();
362-
fill(255, 153);
363-
364-
for (let i = 0; i < num; i++) {
365-
mx[i] = 0;
366-
my[i] = 0;
367-
}
296+
rectMode(CENTER);
368297
}
369298
370299
function draw() {
371300
background(51);
372301
373-
let which = frameCount % num;
302+
fill(255, 204);
303+
rect(mouseX, height / 2, mouseY / 2 + 10, mouseY / 2 + 10);
374304
375-
mx[which] = mouseX;
376-
my[which] = mouseY;
305+
let inverseX = width - mouseX;
306+
let inverseY = height - mouseY;
377307
378-
for (let i = 0; i < num; i++) {
379-
let index = (which + 1 + i) % num;
380-
ellipse(mx[index], my[index], i, i);
381-
}
308+
rect(inverseX, height / 2, inverseY / 2 + 10, inverseY / 2 + 10);
382309
}<\/script></body></html>`);doc.close();})();</script>
383-
<div class="example-info"><h3>Storing Input</h3><p>Input example</p></div>
310+
<div class="example-info"><h3>Mouse 2D</h3><p>Input example</p></div>
384311
</a>
385312
</div>
386313
<div class="examples-footer">

0 commit comments

Comments
 (0)