Zenn
Open4

p5.jsのメモ

JavaScript
Question
p5.js
Ask Me Anything
Help Wanted
suto3suto3

P5.js に関する雑多なメモ

好き勝手に書きます

suto3suto3

WebGLのテスト

 function setup(){
   createCanvas(windowWidth, windowHeight, WEBGL);
 }
 
 function draw(){
   background(200);
   rotateX(frameCount * 0.01);
   rotateY(frameCount * 0.01);
   box(200, 200, 200);
 }
suto3suto3

市松模様を書く

p5.js で様々なパターンを描画してみた - Qiita

 const sketch = p => { 
   p.setup = () => {
     const step = 64; //各ブロックの間隔
     const c = p.color(0,127+p.random(128),0); //市松の色
     const canvas = p.createCanvas(window.innerWidth, document.body.clientHeight);
     canvas.position(0,0); //canvasをページの原点に固定
     canvas.style('z-index','-1');//canvasを後ろに移動する
     p.background(3);          //背景色  
     p.noStroke();
     p.fill(c);
 
     for (let y = 0; y <= p.height; y += step) {
       if(y % (step*2) == 0){  // y の値が (step*2) で割り切れる時
         for (let x = step ; x <= p.width; x += step*2) {
           p.rect(x, y, step, step);
         }
       }else{ // y の値が (step*2) で割り切れない時
         for (let x = 0; x <= p.width; x += step*2) {
           p.rect(x, y, step, step);
         }
       }
     }
   }
   p.draw = () => {             
   }
 }
 new p5(sketch, '');