|
51 | 51 | /* Hero */ |
52 | 52 | .main { |
53 | 53 | height: calc(100vh - 60px); |
| 54 | + min-height: 500px; |
| 55 | + max-height: 720px; |
54 | 56 | display: flex; |
55 | 57 | align-items: center; |
56 | 58 | padding: 0 5rem; |
|
106 | 108 | border-radius: 8px; |
107 | 109 | overflow: hidden; |
108 | 110 | } |
109 | | - .example-card { background: #fff; overflow: hidden; } |
110 | | - .example-canvas { width: 100%; aspect-ratio: 1; background: #000; display: block; } |
| 111 | + .example-card { background: #fff; overflow: hidden; display: block; text-decoration: none; color: inherit; } |
| 112 | + .example-card:hover .example-info h3 { color: #e8b400; } |
| 113 | + .example-canvas { width: 100%; aspect-ratio: 16/9; background: #000; display: block; } |
111 | 114 | .example-info { padding: 1rem 1.25rem; border-top: 1px solid #e0e0e0; } |
112 | 115 | .example-info h3 { font-size: 14px; font-weight: 500; margin-bottom: 0.2rem; } |
113 | 116 | .example-info p { font-size: 12px; color: #888; } |
@@ -191,96 +194,18 @@ <h1>C++ Mode for<br><span class="proc">Processing</span></h1> |
191 | 194 | <div class="examples-section"> |
192 | 195 | <h2>Examples</h2> |
193 | 196 | <div class="examples-grid"> |
194 | | - <div class="example-card"> |
195 | | - <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 y = 180; |
196 | | -
|
197 | | -function setup() { |
198 | | - createCanvas(300,300); |
199 | | - stroke(255); |
200 | | - noLoop(); |
201 | | -} |
202 | | -
|
203 | | -function draw() { |
204 | | - background(0); |
205 | | -
|
206 | | - line(0, y, width, y); |
207 | | -
|
208 | | - y = y - 1; |
209 | | -
|
210 | | - if (y < 0) { |
211 | | - y = height; |
212 | | - } |
213 | | -}<\/script></body></html>`);doc.close();})();</script> |
214 | | - <div class="example-info"><h3>No Loop</h3><p>Structure example</p></div> |
215 | | - </div> |
216 | | - <div class="example-card"> |
217 | | - <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() { |
218 | | - createCanvas(300,300, WEBGL); |
219 | | - noStroke(); |
220 | | -} |
221 | | -
|
222 | | -function draw() { |
223 | | - defineLights(); |
224 | | - background(0); |
225 | | -
|
226 | | - for (let x = 0; x <= width; x += 60) { |
227 | | - for (let y = 0; y <= height; y += 60) { |
228 | | - push(); |
229 | | -
|
230 | | - translate( |
231 | | - x - width / 2, |
232 | | - y - height / 2, |
233 | | - 0 |
234 | | - ); |
235 | | -
|
236 | | - rotateY(map(mouseX, 0, width, 0, PI)); |
237 | | - rotateX(map(mouseY, 0, height, 0, PI)); |
238 | | -
|
239 | | - box(90); |
240 | | -
|
241 | | - pop(); |
242 | | - } |
243 | | - } |
244 | | -} |
245 | | -
|
246 | | -function defineLights() { |
247 | | - pointLight(150, 100, 0, 200, -150, 0); |
248 | | -
|
249 | | - directionalLight(0, 102, 255, 1, 0, 0); |
250 | | -
|
251 | | - spotLight( |
252 | | - 255, |
253 | | - 255, |
254 | | - 109, |
255 | | - 0, |
256 | | - 40, |
257 | | - 200, |
258 | | - 0, |
259 | | - -0.5, |
260 | | - -0.5, |
261 | | - PI / 2, |
262 | | - 2 |
263 | | - ); |
264 | | -}<\/script></body></html>`);doc.close();})();</script> |
265 | | - <div class="example-info"><h3>Mixture Grid</h3><p>Lights example</p></div> |
266 | | - </div> |
267 | | - <div class="example-card"> |
268 | | - <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() { |
269 | | - createCanvas(300,300); |
270 | | - background(0); |
271 | | - strokeWeight(20); |
272 | | - frameRate(2); |
273 | | -} |
274 | | -
|
275 | | -function draw() { |
276 | | - for (let i = 0; i < width; i++) { |
277 | | - let r = random(255); |
278 | | - stroke(r); |
279 | | - line(i, 0, i, height); |
280 | | - } |
281 | | -}<\/script></body></html>`);doc.close();})();</script> |
282 | | - <div class="example-info"><h3>Random</h3><p>Math example</p></div> |
283 | | - </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> |
| 200 | + </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> |
| 204 | + </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> |
| 208 | + </a> |
284 | 209 | </div> |
285 | 210 | <div class="examples-footer"> |
286 | 211 | <a href="/examples">View all examples →</a> |
@@ -314,6 +239,47 @@ <h3>New to C++ Mode?</h3> |
314 | 239 | <p>Processing for C++</p> |
315 | 240 | </footer> |
316 | 241 |
|
| 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> |
317 | 283 | <script src="./assets/nav.js"></script> |
318 | 284 | </body> |
319 | 285 | </html> |
0 commit comments