Skip to content

Commit 22e9991

Browse files
pepc84pepc84
committed
Update the distance of Examples in main page
1 parent 911f81e commit 22e9991

1 file changed

Lines changed: 52 additions & 247 deletions

File tree

‎index.html‎

Lines changed: 52 additions & 247 deletions
Original file line numberDiff line numberDiff line change
@@ -51,8 +51,8 @@
5151
/* Hero */
5252
.main {
5353
height: calc(100vh - 60px);
54-
min-height: 500px;
55-
max-height: 720px;
54+
min-height: 400px;
55+
max-height: 560px;
5656
display: flex;
5757
align-items: center;
5858
padding: 0 5rem;
@@ -194,253 +194,17 @@ <h1>C++ Mode for<br><span class="proc">Processing</span></h1>
194194
<div class="examples-section">
195195
<h2>Examples</h2>
196196
<div class="examples-grid">
197-
<a class="example-card" href="/examples/tree.html" id="card1">
198-
<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 theta;
199-
200-
function setup() {
201-
createCanvas(300,300);
202-
}
203-
204-
function draw() {
205-
background(0);
206-
frameRate(30);
207-
stroke(255);
208-
let a = (mouseX / width) * 90;
209-
theta = radians(a);
210-
translate(width / 2, height);
211-
line(0, 0, 0, -120);
212-
translate(0, -120);
213-
branch(120);
214-
}
215-
216-
function branch(h) {
217-
h *= 0.66;
218-
if (h > 2) {
219-
push();
220-
rotate(theta);
221-
line(0, 0, 0, -h);
222-
translate(0, -h);
223-
branch(h);
224-
pop();
225-
226-
push();
227-
rotate(-theta);
228-
line(0, 0, 0, -h);
229-
translate(0, -h);
230-
branch(h);
231-
pop();
232-
}
233-
}<\/script></body></html>`);doc.close();})();</script>
234-
<div class="example-info"><h3>Tree</h3><p>Fractals And L-Systems example</p></div>
197+
<a class="example-card" href="/examples" id="card1">
198+
<canvas class="example-canvas" id="c1"></canvas>
199+
<div class="example-info"><h3>Bouncing ball</h3><p>Basic animation with collision detection</p></div>
235200
</a>
236-
<a class="example-card" href="/examples/rotate-push-pop.html" id="card2">
237-
<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 a = 0;
238-
let offset;
239-
let num = 12;
240-
241-
function setup() {
242-
createCanvas(300,300, WEBGL);
243-
noStroke();
244-
offset = PI / 24.0;
245-
}
246-
247-
function draw() {
248-
background(0, 0, 26);
249-
ambientLight(150);
250-
directionalLight(255, 255, 255, 0, 0, -1);
251-
directionalLight(100, 100, 100, 0, 0, 1);
252-
253-
// Move camera closer — default WEBGL camera is too far
254-
translate(0, 0, 150);
255-
256-
for (let i = 0; i < num; i++) {
257-
let gray = map(i, 0, num - 1, 0, 255);
258-
push();
259-
fill(gray);
260-
rotateY(a + offset * i);
261-
rotateX(a / 2 + offset * i);
262-
box(150);
263-
pop();
264-
}
265-
a += 0.01;
266-
}<\/script></body></html>`);doc.close();})();</script>
267-
<div class="example-info"><h3>Rotate Push Pop</h3><p>Transform example</p></div>
201+
<a class="example-card" href="/examples" id="card2">
202+
<canvas class="example-canvas" id="c2"></canvas>
203+
<div class="example-info"><h3>Particle system</h3><p>STL vectors with per-particle physics</p></div>
268204
</a>
269-
<a class="example-card" href="/examples/flocking.html" id="card3">
270-
<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>// Flock class
271-
class Flock {
272-
constructor() {
273-
this.boids = [];
274-
}
275-
276-
run() {
277-
for (let b of this.boids) {
278-
b.run(this.boids);
279-
}
280-
}
281-
282-
addBoid(b) {
283-
this.boids.push(b);
284-
}
285-
}
286-
287-
// Boid class
288-
class Boid {
289-
constructor(x, y) {
290-
this.acceleration = createVector(0, 0);
291-
let angle = random(TWO_PI);
292-
this.velocity = createVector(cos(angle), sin(angle));
293-
this.position = createVector(x, y);
294-
this.r = 2.0;
295-
this.maxspeed = 2;
296-
this.maxforce = 0.03;
297-
}
298-
299-
run(boids) {
300-
this.flock(boids);
301-
this.update();
302-
this.borders();
303-
this.render();
304-
}
305-
306-
applyForce(force) {
307-
this.acceleration.add(force);
308-
}
309-
310-
flock(boids) {
311-
let sep = this.separate(boids);
312-
let ali = this.align(boids);
313-
let coh = this.cohesion(boids);
314-
sep.mult(1.5);
315-
ali.mult(1.0);
316-
coh.mult(1.0);
317-
this.applyForce(sep);
318-
this.applyForce(ali);
319-
this.applyForce(coh);
320-
}
321-
322-
update() {
323-
this.velocity.add(this.acceleration);
324-
this.velocity.limit(this.maxspeed);
325-
this.position.add(this.velocity);
326-
this.acceleration.mult(0);
327-
}
328-
329-
seek(target) {
330-
let desired = p5.Vector.sub(target, this.position);
331-
desired.normalize();
332-
desired.mult(this.maxspeed);
333-
let steer = p5.Vector.sub(desired, this.velocity);
334-
steer.limit(this.maxforce);
335-
return steer;
336-
}
337-
338-
render() {
339-
let theta = this.velocity.heading() + radians(90);
340-
fill(200, 100);
341-
stroke(255);
342-
push();
343-
translate(this.position.x, this.position.y);
344-
rotate(theta);
345-
beginShape(TRIANGLES);
346-
vertex(0, -this.r * 2);
347-
vertex(-this.r, this.r * 2);
348-
vertex(this.r, this.r * 2);
349-
endShape();
350-
pop();
351-
}
352-
353-
borders() {
354-
if (this.position.x < -this.r) this.position.x = width + this.r;
355-
if (this.position.y < -this.r) this.position.y = height + this.r;
356-
if (this.position.x > width + this.r) this.position.x = -this.r;
357-
if (this.position.y > height + this.r) this.position.y = -this.r;
358-
}
359-
360-
separate(boids) {
361-
let desiredseparation = 25.0;
362-
let steer = createVector(0, 0);
363-
let count = 0;
364-
for (let other of boids) {
365-
let d = p5.Vector.dist(this.position, other.position);
366-
if ((d > 0) && (d < desiredseparation)) {
367-
let diff = p5.Vector.sub(this.position, other.position);
368-
diff.normalize();
369-
diff.div(d);
370-
steer.add(diff);
371-
count++;
372-
}
373-
}
374-
if (count > 0) steer.div(count);
375-
if (steer.mag() > 0) {
376-
steer.normalize();
377-
steer.mult(this.maxspeed);
378-
steer.sub(this.velocity);
379-
steer.limit(this.maxforce);
380-
}
381-
return steer;
382-
}
383-
384-
align(boids) {
385-
let neighbordist = 50;
386-
let sum = createVector(0, 0);
387-
let count = 0;
388-
for (let other of boids) {
389-
let d = p5.Vector.dist(this.position, other.position);
390-
if ((d > 0) && (d < neighbordist)) {
391-
sum.add(other.velocity);
392-
count++;
393-
}
394-
}
395-
if (count > 0) {
396-
sum.div(count);
397-
sum.normalize();
398-
sum.mult(this.maxspeed);
399-
let steer = p5.Vector.sub(sum, this.velocity);
400-
steer.limit(this.maxforce);
401-
return steer;
402-
}
403-
return createVector(0, 0);
404-
}
405-
406-
cohesion(boids) {
407-
let neighbordist = 50;
408-
let sum = createVector(0, 0);
409-
let count = 0;
410-
for (let other of boids) {
411-
let d = p5.Vector.dist(this.position, other.position);
412-
if ((d > 0) && (d < neighbordist)) {
413-
sum.add(other.position);
414-
count++;
415-
}
416-
}
417-
if (count > 0) {
418-
sum.div(count);
419-
return this.seek(sum);
420-
}
421-
return createVector(0, 0);
422-
}
423-
}
424-
425-
let flock;
426-
427-
function setup() {
428-
createCanvas(300,300);
429-
flock = new Flock();
430-
for (let i = 0; i < 150; i++) {
431-
flock.addBoid(new Boid(width / 2, height / 2));
432-
}
433-
}
434-
435-
function draw() {
436-
background(50);
437-
flock.run();
438-
}
439-
440-
function mousePressed() {
441-
flock.addBoid(new Boid(mouseX, mouseY));
442-
}<\/script></body></html>`);doc.close();})();</script>
443-
<div class="example-info"><h3>Flocking</h3><p>Simulate example</p></div>
205+
<a class="example-card" href="/examples" id="card3">
206+
<canvas class="example-canvas" id="c3"></canvas>
207+
<div class="example-info"><h3>Perlin noise</h3><p>Flow field using noise()</p></div>
444208
</a>
445209
</div>
446210
<div class="examples-footer">
@@ -475,6 +239,47 @@ <h3>New to C++ Mode?</h3>
475239
<p>Processing for C++</p>
476240
</footer>
477241

242+
<script>
243+
new p5(function(p) {
244+
let x, y, vx, vy;
245+
p.setup = function() { p.createCanvas(300,300,document.getElementById('c1')); x=150;y=150;vx=2.5;vy=1.8;p.noStroke(); };
246+
p.draw = function() {
247+
p.background(10); p.fill(50,50,200); p.ellipse(x,y,36,36);
248+
x+=vx; y+=vy;
249+
if(x<18||x>282) vx*=-1;
250+
if(y<18||y>282) vy*=-1;
251+
};
252+
});
253+
new p5(function(p) {
254+
let parts=[];
255+
p.setup = function() { p.createCanvas(300,300,document.getElementById('c2')); p.noStroke(); };
256+
p.draw = function() {
257+
p.background(10,10,20,25);
258+
if(p.frameCount%3===0) parts.push({x:p.random(p.width),y:p.height,vx:p.random(-1,1),vy:p.random(-4,-1),life:1.0});
259+
for(let pt of parts){pt.x+=pt.vx;pt.y+=pt.vy;pt.vy+=0.05;pt.life-=0.008;p.fill(232,103,58,pt.life*255);p.ellipse(pt.x,pt.y,6,6);}
260+
parts=parts.filter(pt=>pt.life>0);
261+
};
262+
});
263+
new p5(function(p) {
264+
let t=0;
265+
p.setup = function() { p.createCanvas(300,300,document.getElementById('c3')); p.stroke(232,103,58,60); p.strokeWeight(1); p.noFill(); };
266+
p.draw = function() {
267+
p.background(10,10,20,15);
268+
for(let i=0;i<5;i++){
269+
let x=p.random(p.width),y=p.random(p.height);
270+
for(let j=0;j<20;j++){
271+
let angle=p.noise(x*0.005,y*0.005,t)*p.TWO_PI*2;
272+
let vx=p.cos(angle)*2,vy=p.sin(angle)*2;
273+
p.stroke(232,103+j*3,58,80);
274+
p.line(x,y,x+vx*3,y+vy*3);
275+
x+=vx;y+=vy;
276+
if(x<0||x>p.width||y<0||y>p.height) break;
277+
}
278+
}
279+
t+=0.003;
280+
};
281+
});
282+
</script>
478283
<script src="./assets/nav.js"></script>
479284
</body>
480285
</html>

0 commit comments

Comments
 (0)