p5.js Boilerplates — Self‑Contained “Pattern” Collection
Each pattern is a single HTML file that runs as‑is via the p5 CDN. Tweak sizes, colors, and counts to taste.
Type 1: Minimal 2D (Global mode)
Purpose: fastest way to draw / quick verification.
<!doctype html><meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/p5/lib/p5.min.js"></script>
<script>
function setup(){ createCanvas(800,450); noStroke(); }
function draw(){ background(240); circle(mouseX,mouseY,24); }
</script>Type 2: Fullscreen & Resize (Global)
Purpose: full‑screen demos / responsive to window size.
<!doctype html><meta charset="utf-8">
<style>html,body{margin:0;height:100%}canvas{display:block}</style>
<script src="https://cdn.jsdelivr.net/npm/p5/lib/p5.min.js"></script>
<script>
function setup(){ createCanvas(windowWidth, windowHeight); }
function draw(){ background(32); fill(255); textSize(16); text('fullscreen', 12, 24); }
function windowResized(){ resizeCanvas(windowWidth, windowHeight); }
</script>Type 3: Instance Mode (single & multiple)
Purpose: multiple canvases in one page / avoid global collisions.
<!doctype html><meta charset="utf-8">
<div id="sk1"></div><div id="sk2"></div>
<script src="https://cdn.jsdelivr.net/npm/p5/lib/p5.min.js"></script>
<script>
const Sketch = (bg)=> (p)=>{
p.setup = ()=> p.createCanvas(240,160);
p.draw = ()=>{ p.background(bg); p.circle(p.mouseX,p.mouseY,20); };
};
new p5(Sketch(200), 'sk1');
new p5(Sketch(80), 'sk2');
</script>Type 4: Poster / Still (noLoop + save)
Purpose: single‑frame generative art, press s to save PNG.
<!doctype html><meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/p5/lib/p5.min.js"></script>
<script>
function setup(){
createCanvas(1200,675); noLoop();
textAlign(CENTER,CENTER); textSize(64);
}
function draw(){ background(10); fill(250); text('Poster', width/2, height/2); }
function keyPressed(){ if(key==='s') saveCanvas('poster','png'); }
</script>Type 5: Layers (createGraphics + compositing)
Purpose: persistent marks / post‑effect‑like stacking.
<!doctype html><meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/p5/lib/p5.min.js"></script>
<script>
let pg;
function setup(){ createCanvas(800,450); pg=createGraphics(width,height); pg.clear(); }
function draw(){
background(16);
pg.noStroke(); pg.fill(255,32); pg.circle(mouseX,mouseY,40); // drawing layer
image(pg,0,0);
blendMode(ADD); fill(0,120,255,40); rect(0,0,width,height); // additive tint
blendMode(BLEND);
}
function mousePressed(){ pg.clear(); } // clear the layer
</script>Type 6: WEBGL 3D (basics)
Purpose: minimal 3D scene with light + rotation.
<!doctype html><meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/p5/lib/p5.min.js"></script>
<script>
function setup(){ createCanvas(800,450,WEBGL); }
function draw(){
background(10);
directionalLight(255,255,255, 0.5,1,-0.5); ambientLight(80);
rotateY(frameCount*0.01); rotateX(-0.4);
noStroke(); box(150);
push(); translate(200,0,0); normalMaterial(); torus(60,16,24,16); pop();
}
</script>Type 7: Inline Shader (createShader)
Purpose: keep GLSL fully inside p5 (no external files).
<!doctype html><meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/p5/lib/p5.min.js"></script>
<script>
let sh; // p5.Shader
const vert=`
precision mediump float; attribute vec3 aPosition; void main(){ gl_Position=vec4(aPosition,1.0); }
`;
const frag=`
precision mediump float; uniform vec2 u_resolution; uniform float u_time;
void main(){
vec2 uv = gl_FragCoord.xy / u_resolution;
vec3 col = vec3(uv, 0.5 + 0.5*sin(u_time));
gl_FragColor = vec4(col,1.0);
}
`;
function setup(){ createCanvas(800,450,WEBGL); noStroke(); sh=createShader(vert,frag); }
function draw(){ shader(sh); sh.setUniform('u_resolution',[width,height]); sh.setUniform('u_time',millis()/1000.0); rect(-width/2,-height/2,width,height); }
</script>Type 8: Input / State / Export (practical pack)
Purpose: pause, reseed, and save are included for practical daily use.
<!doctype html><meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/p5/lib/p5.min.js"></script>
<script>
let paused=false, seed=1, t=0; // state
function setup(){ createCanvas(800,450); textSize(14); randomSeed(seed); noiseSeed(seed); }
function draw(){
if(paused){ background(24); fill(200); text('paused (SPACE to resume)', 12, 24); return; }
let dt = deltaTime/1000; t += dt;
background(30);
noStroke(); fill(255);
for(let i=0;i<200;i++){
let x = noise(i*0.02, t*0.2)*width;
let y = noise(i*0.02+99, t*0.2)*height;
circle(x,y,2);
}
fill(180); text('s:save r:reseed SPACE:pause', 12, height-12);
}
function keyPressed(){
if(key===' ') paused=!paused;
if(key==='s') saveCanvas('frame','png');
if(key==='r'){ seed=(seed+1)|0; randomSeed(seed); noiseSeed(seed); }
}
</script>Usage Notes
- All patterns are single files; adjust
width/height, colors, and counts. - A smooth path is to start with Type 1 → Type 5 → Type 7 (2D → layers → GLSL), which stack naturally.
- Derivative patterns (e.g., preload for assets, saveFrames for recording, DOM UI) can be added next.
Comments
Post a Comment