p5.js備忘録

/* CDN */
<script src="https://cdn.jsdelivr.net/npm/p5@1.5.0/lib/p5.js"></script>
<script>
function setup() {
  createCanvas(300, 100);
  frameRate(1); 
}

function draw() {
  console.log(frameCount) //frameCountは表示されたフレームの数
}
</script>

<div id="myContainer"></div>
<script>
function setup() {
 let cnv = createCanvas(100, 100);
 cnv.parent('myContainer');
}
</script>

//スケッチ関数を定義
const canvas1 = c1 => {
  c1.setup = ()=> {
   c1.createCanvas(100, 100).parent('canvas1');
   c1.textSize(30);
   c1.textAlign(c1.CENTER, c1.CENTER);
   c1.noLoop();
  };
  c1.draw = () =>{
   c1.background(200);
   c1.text(c1.frameCount, c1.width / 2, c1.height / 2);
  };
 c1.mousePressed=()=>{
  c1.redraw();
  return false;
  }
};
//p5インスタンスを作成
new p5(canvas1); 

<div id="canvas1"></div>
<script>
function setup() {
  createCanvas(100, 100).parent('canvas1');
  frameRate(1); 
  textSize(30);
  textAlign(CENTER, CENTER);
}
function draw() {
  background(200);
  text(frameCount, width / 2, height / 2);
}
function mousePressed() {
  redraw();
  return false;
}
/* 備考：touchStarted()やmousePressed()だとスマフォでスクロールしなくなるので
const el1 = document.getElementById('canvas1');
   el1.addEventListener('click', ()=>{
   redraw();
  })
にしている*/
</script>

function windowResized() {
 resizeCanvas(windowWidth, windowHeight);
}

let v1;
function setup() {
  createCanvas(100, 100);
  stroke(255, 0, 255);
  v1 = createVector(width / 2, height / 2);
}
function draw() {
  background(255);
  line(v1.x, v1.y, mouseX, mouseY); //v1.xとv1.yで取得
}

<div id="canvas2"></div>
<script>
const NUM = 30 
let deg = 360/ NUM
let balls = [];
function setup() {
  createCanvas(300, 300).parent('canvas2');
  colorMode(HSB);
  angleMode(DEGREES)
  for (let i = 0; i < NUM; i++) {
   balls.push(new Ball(360/ NUM * i, cos(deg * i), sin(deg * i)))
  }
  noLoop();
}
function draw() {
  background(255);
  balls.forEach(ball=>{
    ball.move();
    ball.display();
  })
}
//クリックで停止と再開　
function mousePressed() {
  isLooping()? noLoop():loop()
  return false;
}

class Ball {
  constructor(color, vX, vY) {
    this.vPos = createVector(width/2, height/2);
    this.radius = 15;
    this.color = color;
    this.vVelocity = createVector(vX, vY);
  }
  move() {
    //ベクトルの加算するだけで、それぞれのXとYを加算する必要がない
    this.vPos.add(this.vVelocity) 
    if(this.vPos.x  > width || this.vPos.x < 0){
     this.vVelocity.x = -this.vVelocity.x
    }
    if(this.vPos.y  > height || this.vPos.y < 0){
     this.vVelocity.y = -this.vVelocity.y
   }
  }
  display() {
    ellipse(this.vPos.x, this.vPos.y, this.radius, this.radius);
    fill(this.color, 100, 100, 1);
    noStroke()
  }
}
</script>

<div id="canvas3"></div>
<script>
let eyes=[];
function setup() {
  createCanvas(300, 300).parent('canvas3');
  noStroke();
  eyes.push(new Eye(c3.width*0.25, c3.height*0.25, 100));
  eyes.push(new Eye(c3.width*0.25, c3.height*0.75, 100));
  eyes.push(new Eye(c3.width*0.75, c3.height*0.75, 100));
  eyes.push(new Eye(c3.width*0.75, c3.height*0.25, 100));
}
function draw() {
  background(102);
  eyes.forEach(eye=>{
    eye.update(mouseX, mouseY);
    eye.display();
  })
}
class Eye{
constructor(x, y, size){
  this.x = x;
  this.y = y;
  this.size = size;
  this.angle = 0;
}
update(mx, my){
    this.angle = atan2(my - this.y, mx - this.x);
  }
display() {
    push(); // 現在の描画状態を保存
 　 translate(x, y); // 座標系を (x, y) に移動
  　fill(255); // 白で塗りつぶし
  　ellipse(0, 0, size, size); // 中心に大きな円を描画
  　rotate(angle); // 指定した角度だけ回転
  　fill(153, 204, 0); // 緑で塗りつぶし
  　ellipse(size / 4, 0, size / 2, size / 2); // 小さな円を描画
  　pop(); // 描画状態を復元
  };
}
</script>

<div id="canvas4"></div>
<script>
function setup() {
 createCanvas(300, 300).parent('canvas4');
 push();
 translate(width * 0.25, height * 0.25)
 star(50, 20, 5);
 pop();
 push();
 translate(width * 0.75, height * 0.25);
 star(50, 20, 10);
 pop();
 push();
 translate(width * 0.25, height * 0.75);
 star(50, 50, 4);
 pop();
 push();
 translate(width * 0.75, height * 0.75);
 star(50, 40, 8);
 pop();
}
function star(radius1, radius2, points) {
  let angle = TWO_PI / points; // TWO_PIは360
  let halfAngle = angle / 2.0;
  beginShape();
  for (let a = 0; a < TWO_PI; a += angle) {
    let sx = cos(a) * radius2;
    let sy = sin(a) * radius2;
    vertex(sx, sy);
    sx = cos(a + halfAngle) * radius1;
    sy = sin(a + halfAngle) * radius1;
    vertex(sx, sy);
  }
  endShape(CLOSE);
}
</script>

<div id="canvas5"></div>
<script>
function setup(){
  createCanvas(300, 300).parent('canvas5');
  translate(width / 2, height / 2);
  roseCurve(8,5);
}
function roseCurve(n,d) {
 beginShape();
 for(let angle = 0; angle < TWO_PI * d; angle += 0.01){
    let r = 100 * sin(angle * (n / d));
  //直座標(x,y)に変換
    let x = r * cos(angle);  
    let y = r * sin(angle);
    vertex(x, y);
  }
 endShape(CLOSE);
}
</script>

<div id="canvas6"></div>
<script>
function setup(){
  createCanvas(300, 300).parent('canvas6');
  translate(width / 2, height / 2);
  sakura(4)//花びらの枚数
}
function sakura(n) {
  beginShape();
  for(let angle = 0; angle < 360 ; angle++){
    let A = n/ PI * radians(angle);
    let mod = floor(A) % 2; 
    let r0 = pow(-1, mod) * (A - floor(A)) + mod;
    let h = r0 < 0.8 ? 0 : 0.8 - r0
    let r = r0 + 2 * h;
    let x = 100 * r * cos(radians(angle)); 
    let y = 100 * r * sin(radians(angle)); 
    vertex(x, y);
  }
  endShape(CLOSE);
}
</script>