
<i class="mdi mdi-twitter"/>[#PCD2021](https://twitter.com/hashtag/PCD2021?src=hashtag_click)の７日目のお題「ブックカバー」のアニメーションを作りました。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">ブックカバー <a href="https://twitter.com/hashtag/PCD2021?src=hash&amp;ref_src=twsrc%5Etfw">#PCD2021</a> <a href="https://twitter.com/hashtag/p5js?src=hash&amp;ref_src=twsrc%5Etfw">#p5js</a> <a href="https://twitter.com/hashtag/Processing?src=hash&amp;ref_src=twsrc%5Etfw">#Processing</a> <br><br>切り絵のブックカバー<br><br>背景のパーリンノイズが綺麗！<br>波紋の他も描きたかったけど時間切れ。。<a href="https://t.co/cMrB5h6tOl">https://t.co/cMrB5h6tOl</a> <a href="https://t.co/hf0wavB6HL">pic.twitter.com/hf0wavB6HL</a></p>&mdash; suzu6 (@suzu6_py) <a href="https://twitter.com/suzu6_py/status/1362782740559536129?ref_src=twsrc%5Etfw">February 19, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


p5jsで切り絵と波紋をイメージして描いています。
技術的な要素ではパーリンノイズと図形の差分`erase()`とlayerを利用しました。

PCD JAPAN 2021.02.20-21
[Processing Community Day Japan 2021](https://pcd2021.peatix.com/)

## Code

動くコードは[@OpenProcessing](https://openprocessing.org/sketch/1106996)で公開しています。   
※ メモリを消費するらしく一定時間でリロードが発生します。

ここではレイヤーに分けてコメントします。

▼初期設定。
本の背景のグラデーションは１枚目のレイヤーで描画してます。
波紋の中心座標などのパラメータはここで決めてしまいます。
```js
let width = 600;
let height = 600;

let count = 0;

// 背景のノイズのパラメータ
var noiseVal = 40;     // ノイズ
var zseed = [0, 7000]; // ノイズのシード値を固定
let layer01 = null;

// 波紋のパラメータ
let ripple_num = 4;
let ripple_params = [];

function setup() {
  createCanvas(width, height);

  // 背景のノイズのレイヤー
  let layer = createGraphics(width, height);
  layer.background("#2f4f4f");
  layer = umi(layer);
  layer01 = layer;

  // ランダムな波紋のパラメータ
  for (let i = 0; i < ripple_num; i++) {
    ripple_params[i] = {
      x: random(0, width),
      y: random(0, height),
      offset: random(0, width),
      a: random(40, 90),
      breadth: random(10, 20)
    }
  }
}
```

▼ レイヤーを重ねて描画しているところ。
波紋のレイヤーが可変になっている。
```js
function draw() {
  count++;

  // 背景のノイズのレイヤー
  let layers = [layer01];

  // 波紋のレイヤー
  for (let i = 0; i < ripple_num; i++) {
    let layer = ripples(
      ripple_params[i].x,       // 中心x座標
      ripple_params[i].y,       // 中心y座標
      ripple_params[i].offset,  // 波紋の初期の半径
      ripple_params[i].a,       // 波紋の間隔
      ripple_params[i].breadth, // 波紋の幅
      count);                   // 時間
    layers.push(layer);
  }

  // 白い枠のレイヤー
  layers.push(frame());

  // レイヤーを重ねて描画する
  for (let layer of layers) {
    image(layer, 0, 0);
  }
}
```

▼ 背景のノイズのレイヤー。
2Dのノイズはパーリンノイズになっている。シードを固定してx, y座標を少しずつずらすと滲んだようなグラデーションになる。
```js
// 背景のノイズのレイヤー
function umi(layer) {
  let m = width / 8;
  for (var y = m; y < height - m; y++) {
    for (var x = m * 2; x < width - m * 2; x++) {
      // noiseValで割ってノイズの分布を引き延ばしている
      let nx = x / noiseVal;
      let ny = y / noiseVal;
      let g = noise(nx, ny, zseed[0]) * 50;
      let b = noise(nx, ny, zseed[1]) * 70;
      layer.stroke(color(0, 200 + g, 200 + b));
      layer.point(x, y);
    }
  }
  return layer;
}
```
▼ 1枚目のレイヤーの画像  
![layer1](/images/posts/280/284/layer1.png)

▼ 波紋のレイヤーの画像  
受け取ったパラメータをもとに波紋を描く。
はみ出た部分は`erase_out()`で切り取っている。
一つのレイヤーで一つの波紋にしないと`erase()`が他のレイヤーに影響していしまう。
```js
// 波紋の描画
function ripples(x, y, offset, a, breadth, count) {
  let layer = createGraphics(width, height);
  layer.noStroke();
  layer.fill("#fffafa");

  let num = 5;

  // 外側の円から順に描画
  for (let n = num; 0 < n; n--) {
    let r = (count + offset) % 1200 - 300 + n * a;
    if (r < 0) continue;
    layer.ellipse(x, y, r + breadth);

    layer.erase();
    layer.ellipse(x, y, r);
    layer.noErase();
  }
  layer = erase_out(layer);

  return layer;
}

// フレーム外にでた図形を切り取る
function erase_out(layer) {
  let m = width / 8;
  let m2 = m * 2;
  let b = 5;

  layer.erase()
  layer.rect(0, 0, width, m + b); // top
  layer.rect(0, height - m - b, width, height); // bottom
  layer.rect(0, 0, m2 + b, height); // left
  layer.rect(width - m2 - b, 0, width, height); // right
  layer.noErase();
  return layer;
}
```
![layer2](/images/posts/280/284/layer2.png)

▼最後に本っぽく見せるためフレームを描画します。
```js
// 本をかたどるフレーム
function frame() {
  let m = width / 8;
  let m2 = m * 2;
  let b = 10;

  let layer = createGraphics(width, height);
  layer.fill("#fffafa");
  layer.rect(m2 - b, m - b, width - m2 * 2 + b * 2, height - m * 2 + b * 2, 10);

  layer.erase()
  layer.rect(m2 + b, m + b, width - m2 * 2 - b * 2, height - m * 2 - b * 2, 10);
  layer.noErase();

  return layer;
}
```
![layer](/images/posts/280/284/layer3.png)

▼以上の三枚を重ねると動く切り絵っぽくなる。
![layers](/images/posts/280/284/layers.png)

![bookcover](/images/posts/280/284/book.gif)

## 参考

- [p5.jsで「パーリンノイズ」のスゴさを思い知る](https://infosmith.biz/blog/it/p5js-noise)
なんちゃってヒートマップの箇所の２Dのノイズを利用しました。

- [erase() はレイヤーと一緒に使わないとダメなんだと気付いた夏 - note](https://note.com/deconbatch/n/nc789e8e02b06)
erase()とレイヤーの使い方を学びました。
絵とコードが豊富に解説されているので解りやすいです。
[@deconbatch](https://twitter.com/deconbatch)さんは色遣いが神がかっている方です。▼どれも綺麗すぎてやばい。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">シフマン先生にビデオレターのお礼スケッチお送りしたいけど、どれにしようかな？🤗<a href="https://twitter.com/hashtag/processing?src=hash&amp;ref_src=twsrc%5Etfw">#processing</a> <a href="https://twitter.com/hashtag/creativecoding?src=hash&amp;ref_src=twsrc%5Etfw">#creativecoding</a> <a href="https://twitter.com/hashtag/PCD2021?src=hash&amp;ref_src=twsrc%5Etfw">#PCD2021</a> <a href="https://t.co/apoPXpmMCH">pic.twitter.com/apoPXpmMCH</a></p>&mdash; deconbatch (@deconbatch) <a href="https://twitter.com/deconbatch/status/1363076453793992710?ref_src=twsrc%5Etfw">February 20, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

【p5js】パーリンノイズとeraseを使ったブックカバー#PCD2021


p5jsで風に吹かれて砂紋が流れているアニメーションを作った！

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">お題&quot;砂漠&quot;<br><br>風紋<a href="https://twitter.com/hashtag/PCD2021?src=hash&amp;ref_src=twsrc%5Etfw">#PCD2021</a> <a href="https://twitter.com/hashtag/p5js?src=hash&amp;ref_src=twsrc%5Etfw">#p5js</a> <a href="https://t.co/ufg3xeYbxi">pic.twitter.com/ufg3xeYbxi</a></p>&mdash; suzu6 (@suzu6_py) <a href="https://twitter.com/suzu6_py/status/1361984066967400455?ref_src=twsrc%5Etfw">February 17, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

風紋って書いちゃったけどあの模様は砂紋でしたorz。
ただ、イメージは風紋なので作品名は「**風紋**」とします！！！

## 砂紋について

砂丘や砂浜にある規則的な波状の起伏は砂紋です。
水や空気が流れによって砂が動いてあの模様が出来ます。

![ナミビア砂漠の砂紋](https://upload.wikimedia.org/wikipedia/commons/thumb/a/ab/Red_sand_dune_in_Namibia.jpg/250px-Red_sand_dune_in_Namibia.jpg)  
▲ナミビア砂漠の砂紋　（Wikipediaより）


## コード

```js
let width = 600;
let height = 600;
let phase = 0;

function setup() {
  createCanvas(width, height);
}

function draw() {
  background(220);

  for(let h = -20; h < height; h += 10){
    // 高さに応じてグラデーションする
    r = map(h, 0, height, 230, 90)
    g = map(h, 0, height, 200, 50)
    b = map(h, 0, height, 150, 0)
    let c = color(r, g, b);
    fill(c);
    noStroke();
    // 斜めにずれる位相を与える
    wave(h, phase + sin(h/30) - h/20)
    phase += 0.01;
  }
}

function wave(h, p) {
  let amplitude = 10.0;
  let a = 0 - p;
  
  // 波長に影響
  let inc = TWO_PI / 20.0;
  for (let i = 0; i < width; i += 2) {
    rect(i,h - sin(a) * amplitude, 
         2, sin(a) * amplitude + 30);
    a = a + inc;

    // 揺らぎ
    a += random(-1, 1) / 30;
    
    // aが1周期の大きさになるようにする
    if (a > TWO_PI) {
      a -= TWO_PI;
    }
  }
}
```

正弦波を上から順に重ねて描きました。

![wave](/images/posts/280/283/wave.png)  
▲ のようにグラデーションを付けた波を重ねています。
不思議なことに横の波の色は変わらないのに、波を重ねると縦の波が浮かび上がって来る。透過はしていない。

この作品は<i class="mdi mdi-twitter"/>[@PCD_Tokyo](https://twitter.com/PCD_Tokyo)の企画の５日目のお題「砂漠」に投稿しています。

PCD JAPAN 2021.02.20-21
[Processing Community Day Japan 2021](https://pcd2021.peatix.com/)

## @OpenProcessing

<iframe src="https://openprocessing.org/sketch/1106708/embed/" width="430" height="480"></iframe>

## おまけ

本格的に砂紋を再現するなら**Werner model**がよさそうです。
砂の跳躍と転がる単純なモデルで砂丘を形成するプロセスをシミュレーション出来ます。
- [砂丘のパターン形成のシミュレーションについて pdf](http://hatano-lab.iis.u-tokyo.ac.jp/thesis/soturon2002/thesis_suto.pdf)
図解付きの日本語で書かれていてるので参考になります。卒業論文ですが、順に現象と式を解説しているので読み物としても面白いです。

【p5js】パーリンノイズとeraseを使ったブックカバー#PCD2021

【p5js】砂丘の砂紋のアニメーション#PCD2021