p5.jsのnoiseで色々遊んでみた !!

はじめに

p5.js での色々な noise の遊び方を作ったので, 説明は省略させていただいておりますが掲載します.
どなたかが楽しむためのお役に立てていれば幸いです.

いつか時間がある時に説明を追記できれば良いなと思っています...笑

あそびかた集

1.

sketch.js

// 2D noise sample - 1

function setup() {
  const w = min(windowWidth, windowHeight);
  createCanvas(w, w);
  
  background(100);
  
  noStroke();
}

function draw() {
  background(100, 3);
  
  // シンプルな直線運動
  // const x = frameCount%width;
  // const y = height/2;
  
  // random
  // const x = frameCount%width;
  // const y = random() * height;
  
  // noise
  const x = frameCount%width;
  const y = noise(frameCount/100) * height;
  
  circle(x, y, 10);
}

2.

sketch.js

// 2D noise sample - 2

function setup() {
  const w = min(windowWidth, windowHeight);
  createCanvas(w, w);

  noStroke();
}

function draw() {
  background(100);

  for (let x = 0; x < width; x++) {
    // noise 2つの引数
    const y = noise(x/100, frameCount/100) * height;

    circle(x, y, 10);
  }
}

3.

sketch.js

// 2D noise sample - 3

function setup() {
  const w = min(windowWidth, windowHeight);
  createCanvas(w, w);
}

function draw() {
  background(100);

  for (let x = 0; x < width; x++) {
    // noise 縦にラインを引いてみる
    const y = noise(x/100, frameCount/100) * height;

    line(x, y, x, 0);
  }
}

4.

sketch.js

// 3D noise sample - 1

function setup() {
  createCanvas(windowWidth, windowHeight, WEBGL);
}

function draw() {
  background(100);
  
  orbitControl();
  
  const step = 10;
  for (let x = -200; x < 200; x+= step) {
     for (let z = -200; z < 200; z+= step) {
       push();
       // noise 3つの引数
       const y = noise(x/500, z/500, frameCount/500) * 1000;
       const r = noise(x/500, z/500, frameCount/500) * 255;
       fill(r, 100, 200);
       translate(x, y, z);
       box(step*0.8);
       pop();
     }
  }
}

5.

sketch.js

// another noise sample - 2

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  
  // ある一定の値を超えた時に表示する
  if(noise(frameCount/100)>0.5){
    fill("red");
    circle(width/4, height/2, 100);
  }
  
  // randomとの比較
  if(random()>0.5){
    fill("blue")
    circle(width*3/4, height/2, 100);
  }
}

6.

sketch.js

// another noise sample - 2

function setup() {
  const w = min(windowWidth, windowHeight);
  createCanvas(w, w);
  
  background(0);
  
  noStroke();
}

function draw() {
  background(0, 1);
  
  for(let angle = 0; angle < TAU; angle += 0.005){
    const seed = abs(angle - PI);
    const r = noise(seed, frameCount/100) * width / 2;
    
    const x = width/2 + r * cos(angle);
    const y = height/2 + r * sin(angle);
    
    const g = noise(seed, frameCount/500) * 255;
    fill(100, g, 200);
    circle(x, y, 10);
  }
}

終わりに

あとは, 四角形を敷き詰めて色を noise で使うみたいなこともできると思います.

もっとnoiseで楽しんでいきたいです〜！