Skip to content

Commit 372dcb1

Browse files
pepc84pepc84
committed
Examples: use .syntax-block like reference pages
1 parent df5120e commit 372dcb1

1 file changed

Lines changed: 178 additions & 70 deletions

File tree

‎index.html‎

Lines changed: 178 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -242,109 +242,217 @@ <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/characters-strings.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 letter = "";
247-
let words = "Begin...";
245+
<a class="example-card" href="/examples/morph.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>// Two arrays to store the vertices for two shapes
247+
// This example assumes that each shape will have the same
248+
// number of vertices, i.e. the size of each array will be the same
249+
let circle = [];
250+
let square = [];
251+
252+
// An array for a third set of vertices, the ones we will be drawing
253+
// in the window
254+
let morph = [];
255+
256+
// This boolean variable will control if we are morphing to a circle or square
257+
let state = false;
248258
249259
function setup() {
250260
createCanvas(300,300);
251-
textFont("monospace");
261+
262+
// Create a circle using vectors pointing from center
263+
for (let angle = 0; angle < 360; angle += 9) {
264+
// Note we are not starting from 0 in order to match the
265+
// path of a circle.
266+
let v = p5.Vector.fromAngle(radians(angle-135));
267+
v.mult(100);
268+
circle.push(v);
269+
// Let's fill out morph array with blank vectors while we are at it
270+
morph.push(createVector());
271+
}
272+
273+
// A square is a bunch of vertices along straight lines
274+
// Top of square
275+
for (let x = -50; x < 50; x += 10) {
276+
square.push(createVector(x, -50));
277+
}
278+
// Right side
279+
for (let y = -50; y < 50; y += 10) {
280+
square.push(createVector(50, y));
281+
}
282+
// Bottom
283+
for (let x = 50; x > -50; x -= 10) {
284+
square.push(createVector(x, 50));
285+
}
286+
// Left side
287+
for (let y = 50; y > -50; y -= 10) {
288+
square.push(createVector(-50, y));
289+
}
252290
}
253291
254292
function draw() {
255-
background(0);
256-
fill(255);
257-
textSize(14);
258-
text("Click on the program, then type to add to the String", 50, 50);
259-
text("Current key: " + letter, 50, 70);
260-
text("The String is " + words.length + " characters long", 50, 90);
261-
textSize(36);
262-
263-
// manual wrap
264-
let lineWidth = 540;
265-
let x = 50;
266-
let y = 140;
267-
let lineHeight = 44;
268-
let line = "";
269-
for (let i = 0; i < words.length; i++) {
270-
let testLine = line + words[i];
271-
if (textWidth(testLine) > lineWidth) {
272-
text(line, x, y);
273-
y += lineHeight;
274-
line = words[i];
275-
} else {
276-
line = testLine;
293+
background(51);
294+
295+
// We will keep how far the vertices are from their target
296+
let totalDistance = 0;
297+
298+
// Look at each vertex
299+
for (let i = 0; i < circle.length; i++) {
300+
let v1;
301+
// Are we lerping to the circle or square?
302+
if (state) {
303+
v1 = circle[i];
277304
}
305+
else {
306+
v1 = square[i];
307+
}
308+
// Get the vertex we will draw
309+
let v2 = morph[i];
310+
// Lerp to the target
311+
v2.lerp(v1, 0.1);
312+
// Check how far we are from target
313+
totalDistance += p5.Vector.dist(v1, v2);
278314
}
279-
text(line, x, y);
280-
}
281315
282-
function keyTyped() {
283-
if ((key >= 'A' && key <= 'z') || key === ' ') {
284-
letter = key;
285-
words += key;
316+
// If all the vertices are close, switch shape
317+
if (totalDistance < 0.1) {
318+
state = !state;
319+
}
320+
321+
// Draw relative to center
322+
translate(width/2, height/2);
323+
strokeWeight(4);
324+
// Draw a polygon that makes up all the vertices
325+
beginShape();
326+
noFill();
327+
stroke(255);
328+
for (let v of morph) {
329+
vertex(v.x, v.y);
286330
}
331+
endShape(CLOSE);
287332
}<\/script></body></html>`);doc.close();})();</script>
288-
<div class="example-info"><h3>Characters Strings</h3><p>Data example</p></div>
333+
<div class="example-info"><h3>Morph</h3><p>Motion example</p></div>
289334
</a>
290-
<a class="example-card" href="/examples/operator-precedence.html" id="card2">
291-
<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() {
292-
createCanvas(300,300);
293-
background(51);
294-
noFill();
295-
stroke(51);
335+
<a class="example-card" href="/examples/button.html" id="card2">
336+
<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 rectX, rectY;
337+
let circleX, circleY;
338+
let rectSize = 90;
339+
let circleSize = 93;
340+
let rectColor, circleColor, baseColor;
341+
let rectHighlight, circleHighlight;
342+
let currentColor;
343+
let rectOver = false;
344+
let circleOver = false;
296345
297-
stroke(204);
298-
for (let i = 0; i < width - 20; i += 4) {
299-
if (i > (30 + 70)) {
300-
line(i, 0, i, 50);
346+
function setup() {
347+
createCanvas(300,300);
348+
rectColor = color(0);
349+
rectHighlight = color(51);
350+
circleColor = color(255);
351+
circleHighlight = color(204);
352+
baseColor = color(102);
353+
currentColor = baseColor;
354+
circleX = width / 2 + circleSize / 2 + 10;
355+
circleY = height / 2;
356+
rectX = width / 2 - rectSize - 10;
357+
rectY = height / 2 - rectSize / 2;
358+
ellipseMode(CENTER);
359+
}
360+
361+
function draw() {
362+
update(mouseX, mouseY);
363+
background(currentColor);
364+
365+
if (rectOver) {
366+
fill(rectHighlight);
367+
} else {
368+
fill(rectColor);
301369
}
302-
}
370+
stroke(255);
371+
rect(rectX, rectY, rectSize, rectSize);
303372
304-
stroke(255);
305-
rect(4 + (2 * 8), 52, 290, 48);
306-
rect((4 + 2) * 8, 100, 290, 49);
373+
if (circleOver) {
374+
fill(circleHighlight);
375+
} else {
376+
fill(circleColor);
377+
}
378+
stroke(0);
379+
ellipse(circleX, circleY, circleSize, circleSize);
380+
}
307381
308-
stroke(153);
309-
for (let i = 0; i < width; i += 2) {
310-
if (((i > 20) && (i < 50)) || ((i > 100) && (i < width - 20))) {
311-
line(i, 151, i, height - 1);
382+
function update(x, y) {
383+
if (overCircle(circleX, circleY, circleSize)) {
384+
circleOver = true;
385+
rectOver = false;
386+
} else if (overRect(rectX, rectY, rectSize, rectSize)) {
387+
rectOver = true;
388+
circleOver = false;
389+
} else {
390+
circleOver = rectOver = false;
391+
}
392+
}
393+
394+
function mousePressed() {
395+
if (circleOver) {
396+
currentColor = circleColor;
397+
}
398+
if (rectOver) {
399+
currentColor = rectColor;
400+
}
401+
}
402+
403+
function overRect(x, y, w, h) {
404+
if (mouseX >= x && mouseX <= x + w &&
405+
mouseY >= y && mouseY <= y + h) {
406+
return true;
407+
} else {
408+
return false;
409+
}
410+
}
411+
412+
function overCircle(x, y, diameter) {
413+
let disX = x - mouseX;
414+
let disY = y - mouseY;
415+
if (sqrt(sq(disX) + sq(disY)) < diameter / 2) {
416+
return true;
417+
} else {
418+
return false;
312419
}
313-
}
314420
}<\/script></body></html>`);doc.close();})();</script>
315-
<div class="example-info"><h3>Operator Precedence</h3><p>Math example</p></div>
421+
<div class="example-info"><h3>Button</h3><p>Gui example</p></div>
316422
</a>
317-
<a class="example-card" href="/examples/rotate.html" id="card3">
318-
<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 angle = 0;
319-
let jitter = 0;
423+
<a class="example-card" href="/examples/translate.html" id="card3">
424+
<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 x = 0;
425+
let y;
426+
let dim = 80;
320427
321428
function setup() {
322429
createCanvas(300,300);
323-
324430
noStroke();
325-
fill(255);
326-
327-
rectMode(CENTER);
328431
}
329432
330433
function draw() {
331-
background(51);
434+
background(102);
435+
436+
x = x + 0.8;
332437
333-
// during even-numbered seconds (0, 2, 4, 6...)
334-
if (second() % 2 === 0) {
335-
jitter = random(-0.1, 0.1);
438+
if (x > width + dim) {
439+
x = -dim;
336440
}
337441
338-
angle = angle + jitter;
442+
translate(x, height / 2 - dim / 2);
339443
340-
let c = cos(angle);
444+
fill(255);
445+
rect(-dim / 2, -dim / 2, dim, dim);
341446
342-
translate(width / 2, height / 2);
343-
rotate(c);
447+
// Transforms accumulate. Notice how this rect moves
448+
// twice as fast as the other, but it has the same
449+
// parameter for the x-axis value
450+
translate(x, dim);
344451
345-
rect(0, 0, 180, 180);
452+
fill(0);
453+
rect(-dim / 2, -dim / 2, dim, dim);
346454
}<\/script></body></html>`);doc.close();})();</script>
347-
<div class="example-info"><h3>Rotate</h3><p>Transform example</p></div>
455+
<div class="example-info"><h3>Translate</h3><p>Transform example</p></div>
348456
</a>
349457
</div>
350458
<div class="examples-footer">

0 commit comments

Comments
 (0)