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;
  }
};
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(this.x, this.y);
    fill(255);
    ellipse(0, 0, this.size, this.size);
    rotate(this.angle);
    fill(153, 204, 0);
    ellipse(this.size / 4, 0, this.size / 2, this.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>

<div id="canvas7"></div>
<script>
let petals = [];
const NUM = 100
function setup() {
  createCanvas(300, 300).parent('canvas7');
  frameRate(30);
  colorMode(HSB);
  noStroke();
  for (let i = 0; i < NUM; i++) {
   petals.push(new Sakura())
  }
  noLoop();
}
function draw() {
  background(255);
  petals.forEach(petal=>{
    petal.display();
    petal.move();
  })
}
//クリックで停止と再開
function mousePressed() {
  isLooping()? noLoop():loop()
  return false;
}
class Sakura {
  constructor() {
   this.hue = random(320, 350);
   this.alpha = random(0.6, 1);
   this.size = random(20, 40);
   this.xRadius = random(10, 50);
   this.base = random(width)
   this.vPos = createVector(this.base, random(height));
   this.vAngle = createVector(random(360), random(360))
   this.vVelocity = createVector(1, this.size / 20)
   //花びらの形を変える
   this.yScale = 1;
  }
  move() {
    this.vAngle.add(this.vVelocity) 
    this.yScale = abs(sin(radians(this.vAngle.x)));
    // X軸の動き 基準値 + 半径 * -1から１
    this.vPos.x = this.base + this.xRadius * sin(radians(this.vAngle.y));
    // Y軸の動き
    this.vPos.y += this.vVelocity.y;
    if(this.vPos.y > height + this.size){
      this.vPos.y = -this.size;
    }
  }
 display() {
  fill(this.hue, 30, 100, this.alpha);
  push();
  translate(this.vPos.x, this.vPos.y);
  rotate(radians(this.vAngle.x));
  beginShape();
   for(let angle = 0; angle < 360 /4 ; angle++){
    let A = 4/ 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 = this.size * r * cos(radians(angle)); 
    let y = this.yScale * this.size * r * sin(radians(angle)); 
    vertex(x, y);
  }
  endShape(CLOSE);
  pop();
  }
}
</script>