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

## はじめに

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

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

## あそびかた集

### 1.

```javascript: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);
}

```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2236620/88407e33-3122-a403-752d-765d0acebe29.png)


### 2. 

```javascript: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);
  }
}
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2236620/21cc7d7b-eb75-d7ee-53bd-c7c4a0486351.png)



### 3.
```javascript: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);
  }
}

```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2236620/3bb39088-93cf-e1cc-b4ff-55ad99cf5d1b.png)

### 4.

```javascript: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();
     }
  }
}
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2236620/09be5458-9a6f-6ec8-3637-742b1cc7c92e.png)


### 5.
```javascript: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);
  }
}
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2236620/432ee76e-53e2-c469-89ea-ff6c0bca00f3.png)


### 6.
```javascript: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);
  }
}
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2236620/23ff8971-0af7-d41a-e6bb-d5f06812e881.png)


## 終わりに

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

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