Skip to content

Commit 8149b96

Browse files
pepc84pepc84
committed
Examples: remove duplicate code-highlight.js
1 parent 2197060 commit 8149b96

1 file changed

Lines changed: 102 additions & 69 deletions

File tree

‎index.html‎

Lines changed: 102 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -242,8 +242,108 @@ <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/graphing-2d-equations.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/reach3.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>const numSegments = 8;
247+
let x = new Array(numSegments).fill(0);
248+
let y = new Array(numSegments).fill(0);
249+
let angle = new Array(numSegments).fill(0);
250+
let segLength = 26;
251+
let targetX, targetY;
252+
253+
let ballX = 50;
254+
let ballY = 50;
255+
let ballXDirection = 1;
256+
let ballYDirection = -1;
257+
258+
function setup() {
259+
createCanvas(300,300);
260+
strokeWeight(20.0);
261+
stroke(255, 100);
262+
noFill();
263+
264+
x[x.length-1] = width/2; // Set base x-coordinate
265+
y[x.length-1] = height; // Set base y-coordinate
266+
}
267+
268+
function draw() {
269+
background(0);
270+
271+
strokeWeight(20);
272+
ballX = ballX + 1.0 * ballXDirection;
273+
ballY = ballY + 0.8 * ballYDirection;
274+
if (ballX > width-25 || ballX < 25) {
275+
ballXDirection *= -1;
276+
}
277+
if (ballY > height-25 || ballY < 25) {
278+
ballYDirection *= -1;
279+
}
280+
ellipse(ballX, ballY, 30, 30);
281+
282+
reachSegment(0, ballX, ballY);
283+
for (let i = 1; i < numSegments; i++) {
284+
reachSegment(i, targetX, targetY);
285+
}
286+
for (let i = x.length-1; i >= 1; i--) {
287+
positionSegment(i, i-1);
288+
}
289+
for (let i = 0; i < x.length; i++) {
290+
segment(x[i], y[i], angle[i], (i+1)*2);
291+
}
292+
}
293+
294+
function positionSegment(a, b) {
295+
x[b] = x[a] + cos(angle[a]) * segLength;
296+
y[b] = y[a] + sin(angle[a]) * segLength;
297+
}
298+
299+
function reachSegment(i, xin, yin) {
300+
let dx = xin - x[i];
301+
let dy = yin - y[i];
302+
angle[i] = atan2(dy, dx);
303+
304+
targetX = xin - cos(angle[i]) * segLength;
305+
targetY = yin - sin(angle[i]) * segLength;
306+
}
307+
308+
function segment(x, y, a, sw) {
309+
strokeWeight(sw);
310+
push();
311+
translate(x, y);
312+
rotate(a);
313+
line(0, 0, segLength, 0);
314+
pop();
315+
}<\/script></body></html>`);doc.close();})();</script>
316+
<div class="example-info"><h3>Reach3</h3><p>Interaction example</p></div>
317+
</a>
318+
<a class="example-card" href="/examples/directional.html" id="card2">
319+
<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() {
320+
createCanvas(300,300, WEBGL);
321+
noStroke();
322+
fill(204);
323+
}
324+
325+
function draw() {
326+
background(0);
327+
328+
let dirY = (mouseY / height - 0.5) * 2;
329+
let dirX = (mouseX / width - 0.5) * 2;
330+
331+
directionalLight(204, 204, 204, -dirX, -dirY, -1);
332+
333+
push();
334+
translate(-100, 0, 0);
335+
sphere(80);
336+
pop();
337+
338+
push();
339+
translate(100, 0, 0);
340+
sphere(80);
341+
pop();
342+
}<\/script></body></html>`);doc.close();})();</script>
343+
<div class="example-info"><h3>Directional</h3><p>Lights example</p></div>
344+
</a>
345+
<a class="example-card" href="/examples/graphing-2d-equations.html" id="card3">
346+
<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() {
247347
createCanvas(300,300);
248348
}
249349
@@ -290,73 +390,6 @@ <h2>Examples</h2>
290390
}<\/script></body></html>`);doc.close();})();</script>
291391
<div class="example-info"><h3>Graphing 2D Equations</h3><p>Math example</p></div>
292392
</a>
293-
<a class="example-card" href="/examples/coordinates.html" id="card2">
294-
<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() {
295-
createCanvas(300,300);
296-
297-
background(0);
298-
noFill();
299-
300-
stroke(255);
301-
302-
point(320, 180);
303-
point(320, 90);
304-
305-
stroke(0, 153, 255);
306-
307-
line(0, 120, 640, 120);
308-
309-
stroke(255, 153, 0);
310-
311-
rect(160, 36, 320, 288);
312-
313-
noLoop();
314-
}<\/script></body></html>`);doc.close();})();</script>
315-
<div class="example-info"><h3>Coordinates</h3><p>Structure example</p></div>
316-
</a>
317-
<a class="example-card" href="/examples/moving-on-curves.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 beginX = 20.0; // Initial x-coordinate
319-
let beginY = 10.0; // Initial y-coordinate
320-
let endX = 570.0; // Final x-coordinate
321-
let endY = 320.0; // Final y-coordinate
322-
let distX; // X-axis distance to move
323-
let distY; // Y-axis distance to move
324-
let exponent = 4; // Determines the curve
325-
let x = 0.0; // Current x-coordinate
326-
let y = 0.0; // Current y-coordinate
327-
let step = 0.01; // Size of each step along the path
328-
let pct = 0.0; // Percentage traveled (0.0 to 1.0)
329-
330-
function setup() {
331-
createCanvas(300,300);
332-
noStroke();
333-
distX = endX - beginX;
334-
distY = endY - beginY;
335-
}
336-
337-
function draw() {
338-
fill(0, 2);
339-
rect(0, 0, width, height);
340-
pct += step;
341-
if (pct < 1.0) {
342-
x = beginX + (pct * distX);
343-
y = beginY + (pow(pct, exponent) * distY);
344-
}
345-
fill(255);
346-
ellipse(x, y, 20, 20);
347-
}
348-
349-
function mousePressed() {
350-
pct = 0.0;
351-
beginX = x;
352-
beginY = y;
353-
endX = mouseX;
354-
endY = mouseY;
355-
distX = endX - beginX;
356-
distY = endY - beginY;
357-
}<\/script></body></html>`);doc.close();})();</script>
358-
<div class="example-info"><h3>Moving On Curves</h3><p>Motion example</p></div>
359-
</a>
360393
</div>
361394
<div class="examples-footer">
362395
<a href="/examples">View all examples →</a>

0 commit comments

Comments
 (0)