Skip to content

Commit 690c8d9

Browse files
pepc84pepc84
committed
deleted hardcoded examples
1 parent 22e9991 commit 690c8d9

1 file changed

Lines changed: 245 additions & 50 deletions

File tree

‎index.html‎

Lines changed: 245 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -194,17 +194,253 @@ <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" 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>
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>
200235
</a>
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>
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>
204268
</a>
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>
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>
208444
</a>
209445
</div>
210446
<div class="examples-footer">
@@ -239,47 +475,6 @@ <h3>New to C++ Mode?</h3>
239475
<p>Processing for C++</p>
240476
</footer>
241477

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>
283478
<script src="./assets/nav.js"></script>
284479
</body>
285480
</html>

0 commit comments

Comments
 (0)