
デスクトップアプリを作るならPCの電源周りの動作にも気を配る必要があります。
裏で動いていた非同期なタスクがスリープから起動後に再度実行できるようイベントをハンドリングしていきます。

Electornでは`powerMonitor`というAPIが用意されています。

## powerMonitor

`powerMonitor`は電源の状態の変化をモニターします。

[powerMonitor | Electron](https://www.electronjs.org/docs/api/power-monitor)

### イベント: resume
システムが再開したときのイベントです。

### 利用例

メインプロセスでのみ利用できます。
`app`の`redy`の中で利用します。

▼ TypeScriptでの例。
```ts:main.ts
import { app, powerMonitor } from "electron";
import log from "electron-log";

app.on("ready", async () => {
  log.info("App ready");


  /**
   * システム（PC）が再開したとき
   */
  powerMonitor.on('resume', function () {
    log.info('System resumption');
    // 何らかの処理
  })
});
```

## その他のイベント

公式が充実しているため短い紹介だけします。

- システムの再開と停止: `resume`, `suspend`
- 電源の状態: `on-ac`, `on-battery`
- スクリーンをロックとアンロック: `lock-screen`, `unlock-screen`
- システムが再起動またはシャットダウンするとき: `shutdown`

## 状態を把握するメソッド

- `powerMonitor.getSystemIdleState(idleThreshold)`  
  現在のシステムの状態 `active` 、 `idle` 、 `locked` 、 `unknown`を返す。
- `powerMonitor.getSystemIdleTime()`  
  アイドル状態の秒数を返す
- `powerMonitor.isOnBatteryPower()`  
  システムがバッテリー電源状態かどうか

電源周りはタブレットPCを使った設備点検などのアプリで利用できそうです。

## 参考

- [powerMonitor | Electron](https://www.electronjs.org/docs/api/power-monitor)
- [powerMonitor · Electron docs gitbook - imfly](https://imfly.gitbooks.io/electron-docs-gitbook/content/jp/api/power-monitor.html)

【Electron】PCのスリープと起動イベントを検知する


Node.js (electron)で作成していたアプリでHTTPリクエスト中の処理をキャンセルして再度リクエストなどする必要があったため、Axiosでリクエスト中の処理をキャンセルする実装をしました。

リクエストを出した側からキャンセルすることができます。

## Axios

**Axios**はnode.jsとブラウザのための[promiseベース](https://javascript.info/promise-basics)のHTTPクライアント。

- [Axios - GitHub](https://github.com/axios/axios)
- ドキュメント [axios-http.com](https://axios-http.com/)

キャンセル処理についてはドキュメントの[Cancellation](https://axios-http.com/docs/cancellation)に書いてあります。

## コードサンプルと解説
ドキュメントのコードサンプルです。
```js
const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios.get('/user/12345', {
  // キャンセルのトークン
  cancelToken: source.token
}).catch(function (thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
    // handle error
  }
});

axios.post('/user/12345', {
  name: 'new name'
}, {
  cancelToken: source.token
})

// cancel the request (the message parameter is optional)
source.cancel('Operation canceled by the user.');
```

`CancelToken.source`を利用してキャンセルトークンを作成してリクエストのオプションに設定します。
そして`source.cancel()`でリクエストをキャンセルできる。

`CancelToken.source()`が返す`source`は独立しているので、▼のようにリクエスト別にキャンセルできます。
```js
// キャンセルトークンが独立している
const source1 = CancelToken.source();
const source2 = CancelToken.source();

axios.get('/user/12345', {
  cancelToken: source1.token
})
axios.get('/user/12345', {
  cancelToken: source2.token
})
```

## 動かして確認してみる

確認しやすいようにドキュメントのコードサンプルを拡張しました。
`http://localhost:3000/delay`が時間のかかる処理のエンドポイントとしています。


```js
const axios = require('axios');
const CancelToken = axios.CancelToken;
const source = CancelToken.source();
const source2 = CancelToken.source();

const start = Date.now();
console.log("start: ", start)

// ①レスポンスがそんなかからないリクエスト
axios.get('http://localhost:3000/', {
  cancelToken: source.token
}).then((res) => {
    // 正常動作
    console.log(Date.now() - start, res.data);
}).catch((thrown) => {
  if (axios.isCancel(thrown)) {
    console.log(Date.now() - start, 'Request canceled: ', thrown.message);
  } else {
    // handle error
    console.log(Date.now() - start, 'Some error: ', thrown.message);
  }
})

// ②レスポンスに３秒かかるリクエスト
axios.get('http://localhost:3000/delay', {
  cancelToken: source.token
}).then((res) => {
    // 正常動作
    console.log(Date.now() - start, res.data);
}).catch((thrown) => {
  if (axios.isCancel(thrown)) {
    console.log(Date.now() - start, 'Request canceled: ', thrown.message);
  } else {
    // handle error
    console.log(Date.now() - start, 'Some error: ', thrown.message);
  }
})


// ③レスポンスに３秒かかるリクエスト（キャンセルしない）
axios.get('http://localhost:3000/delay', {
  cancelToken: source2.token
})
.then((res) => {
    // 正常動作
    console.log(Date.now() - start, res.data);
}).catch((thrown) => {
  if (axios.isCancel(thrown)) {
    console.log(Date.now() - start, 'Request canceled: ', thrown.message);
  } else {
    // handle error
    console.log(Date.now() - start, 'Some error: ', thrown.message);
  }
})

// 1秒後にキャンセルリクエスト
setTimeout(() => {
    // cancel the request (the message parameter is optional)
    source.cancel('Operation canceled by the user.');
}, 1000);
```
３つのリクエストを用意してキャンセルしています。
-  ①レスポンスがそんなかからないリクエスト
-  ②キャンセルするレスポンスに３秒かかるリクエスト
-  ③キャンセルしないレスポンスに３秒かかるリクエスト

これを実行すると▼のログが出ます。数字はミリ秒です。

```bash
> node .\cancellation.js
start:  1630385223319
71 Hello World!
1021 Request canceled:  Operation canceled by the user.
3081 3 seconds delay
```

- ①はキャンセル前にリクエストが終了しているため正常終了。
- ②は３秒かかる処理の途中でキャンセルが実行されたことがわかる。
- ③はキャンセルしたトークンと別のキャンセルトークンが設定されていたため、キャンセルされず正常終了しました。

### サーバ側のコード
リクエストキャンセルの確認のためのサーバを[Express](https://expressjs.com/ja/)で再現しました。
`http://localhost:3000/delay`が時間のかかる処理のエンドポイントとしています。

```js
const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => {
  res.send('Hello World!')
})

// リクエスト返答まで時間がかかるエンドポイント
app.get('/delay', (req, res) => {
  setTimeout(()=>{
    res.send('3 seconds delay');
  }, 3000);
})

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`)
})
```

コードサンプルは[Github](https://github.com/suzu6/trial-code/tree/master/JS/delay_server)に登録しています。

axiosでリクエスト中の処理をキャンセルする


electonのアプリをビルドするためにelectron-builderを利用しています。
Windows版のインストーラの作成はNSISというスクリプト型のインストールシステムで作ります。

色々と調べてなんとなく全体を把握できたので、まとめて紹介します。

## 動作確認環境

electron-builderがそれなりに新しければ特に問題はないと思います。

確認しているのはElectron + Vuejsのちょっと特殊な環境です。

- Windows 10 Home
- [vue-cli-plugin-electron-builder](https://nklayman.github.io/vue-cli-plugin-electron-builder/): ~2.0.0-rc.5
  - electronでVueが使えるプラグイン
  - electron-builder: ^21.2.0 -> 22.2.0　に依存しています。

vue-cli-plugin-electron-builderの内部でelectron-builderを利用してます。
electron-builderの最新も`v22.11.7`ですのでそこまで古いわけではなさそう。

## electron-builderの設定

インストーラの設定は基本的に`package.json`の`build`オプションにelectron-builderの設定を書いていきます。
（vue-cli-plugin-electron-builderの場合はvue.config.jsの`builderOptions`に書く）

▼ 配布用のWindowsアプリを作る場合は大体こんな感じになっていると思います。
コメントを書きたいのでjsoncで書いていますがJSONに読み替えてください。
```json
"build": {
  "appId": "jp.example.myapp",
  "productName": "アプリの名前（日本語OK）",
  "mac": {/* Macの設定 */},
  "dmg": {/* Macの設定 */},
  // Windowsの設定
  "win": {
    "icon": "path/to/icon256.png",
    "target": {
      // Windowsインストーラー
      "target": "nsis",
      "arch": ["x64"]
    },
    // Windowsアプリのコード証明
    "certificateFile": "./path/to/コード証明書.pfx",
    "publisherName": "SUZU6",
    "certificatePassword": "xxxxxxxxx",
    // インストーラのアップ先
    "publish": {
      // https://www.electron.build/configuration/publish#s3options
      "provider": "s3",
      "bucket": "bucket",
      "region": "ap-northeast-1",
      "storageClass": "STANDARD",
      "path": "/installer"
    }
  },
  // インストーラの設定
  "nsis": {
    // https://www.electron.build/configuration/nsis
    // インストーラの名前
    "artifactName": "${productName}_setup_${version}.${ext}",
    // 設定スクリプトのパス
    "include": "build/installer.nsh",
    "oneClick": false,
    "allowToChangeInstallationDirectory": false,
    "createDesktopShortcut": false,
  },
}
```

NSISを使うため`build.win.target.target: nsis`としてください。
そして、`build.nsis`に設定を書いていきます。

## electron-builderのnsisの設定

- https://www.electron.build/configuration/nsis.html
こちらはelectron-builderでのNSISの設定のドキュメントです。

利用したり調べて分かった項目を紹介します。


|key|type|default|discription|
|--|--|--|--|
|`artifactName`|string|`${productName} Setup ${version}.${ext}`|インストーラのファイル名<br>変数については[File Macros](https://www.electron.build/file-patterns#file-macros)を参照|
|`include`|string|`build/installer.nsh`|NSISスクリプトのパス<br>`build/installer.nsh`といったファイルを用意してインストーラを拡張できる。|
|`script`|string|`build/installer.nsi`|NSISスクリプトのパス<br>拡張子が`.nsi`|
|`allowToChange`<br>`Installation`<br>`Directory`<br>長いので分割|boolean|false|ユーザーがインストールディレクトリを変更できるようにするかどうか。|
|`installerIcon`|string|アプリのアイコン（`build.win.icon`）と同じ|画像のパス|
|`uninstallerIcon`|string|アプリのアイコン（`build.win.icon`）と同じ|画像のパス|
|`installerIcon`|string||
|`oneClick`|boolean|true|ワンクリックインストーラを利用するか。インストーラを拡張しない場合は利用した方が分かりやすいと思う。|
|`createStartMenuShortcut`|boolean|true|スタートメニューのショートカットを作成するかどうか|
|`createDesktopShortcut`|boolean|true|デスクトップにショートカットを作るか|
|`shortcutName`|string|アプリ名|すべてのショートカットの名前|

## ファイル名などで利用できるマクロ

ファイル名などの文字列には[File Macros](https://www.electron.build/file-patterns#file-macros)が使えます。

|key|discription|
|--|--|
|`${arch}`|`ia32`, `x64`|
|`${os}`|ターゲットプラットフォームに応じて`mac`、`linux`または`win`|
|`${platform}`|`darwin`、`linux`または`win32`といった`process.platform`のプロパティ|
|`${name}`|`package.json`の`name`|
|`${productName}`|製品名|
|`${version}`|バージョン|
|`${channel}`|バージョンからプレリリースコンポーネントが検出されました（例 `beta`）|
|`${env.ENV_NAME}`|任意の環境変数|

他に[AppInf](https://www.electron.build/api/electron-builder#AppInfo)oの任意のプロパティが利用できます（例 `buildVersion`、`buildNumber`）。

## NSISスクリプト

インストーラをもっと拡張したい場合はNSISスクリプトで細かく設定できる。

[Custom NSIS script - www.electron.build](https://www.electron.build/configuration/nsis.html#custom-nsis-script)

electronのnsisプロパティの`script`と`include`でスクリプトのファイルパスを渡して読み込むことができます。


インストーラにスタートアップのチェックボタンをつけて、スタートアップに登録させることができたのでそのスクリプトを次の記事で紹介しています。

私は正直いまいち書き方を理解していない。
下のリンクを読んでスタートアップ


### NSISで使える変数

ちょっとしたTips。

NSISスクリプトで適当な変数を書いてビルドするとその変数は定義されていないとエラーが出る。
その際に、定義されている変数が一覧で出てくるので確認しておくと自由度が上がると思う。

ただし、NSISはShift-jisでエラーが出るため日本語は文字化けする。

下記のように出てくる。
```bash
# ビルドに失敗した
ExecError: C:\Users\user\AppData\Local\electron-builder\Cache\nsis\nsis-3.0.4.1\Bin\makensis.exe exited 
with code ERR_ELECTRON_BUILDER_CANNOT_EXECUTE
Output:

Output:
Command line defined: "APP_ID=jp.example.myapp"
Command line defined: "APP_GUID=xxxxxxxxxxxxxxxxxxxxxxxxxxxx"
Command line defined: "UNINSTALL_APP_KEY=xxxxxxxxxxxxxxxxxxxxxxxxxxxx"
Command line defined: "PRODUCT_NAME=�J��@�|@�|�b�v��A�b�v"  # 文字化け
Command line defined: "PRODUCT_FILENAME=�J�C�@�|�b��N�b�v"    # 文字化け
Command line defined: "APP_FILENAME=myapp"
Command line defined: "APP_DESCRIPTION=My electron app"
Command line defined: "VERSION=1.0.0"
Command line defined: "PROJECT_DIR=C:\git\myapp"
Command line defined: "BUILD_RESOURCES_DIR=C:\git\myapp\build"
Command line defined: "APP_PACKAGE_NAME=myapp"
Command line defined: "MUI_ICON=C:\git\myapp\dist_electron\.icon-ico\icon.ico"
Command line defined: "MUI_UNICON=C:\git\myapp\dist_electron\.icon-ico\icon.ico"
Command line defined: "APP_64=C:\git\myapp\dist_electron\myapp-1.0.0-x64.nsis.7z"
Command line defined: "APP_64_NAME=myapp-1.0.0-x64.nsis.7z"
Command line defined: "APP_64_HASH=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
Command line defined: "COMPANY_NAME=SUZU6"
Command line defined: "APP_PRODUCT_FILENAME=�J�C�N���@�|�b�v�A�b�v"
Command line defined: "COMPRESSION_METHOD=7z"
Command line defined: "MULTIUSER_INSTALLMODE_ALLOW_ELEVATION"
Command line defined: "INSTALL_MODE_PER_ALL_USERS_REQUIRED"
Command line defined: "SHORTCUT_NAME=�J�C�N���@�|�b�v�A�b�v"
Command line defined: "UNINSTALL_DISPLAY_NAME=�J�C�N���@�|�b�v�A�b�v 1.0.0"
Command line defined: "MUI_WELCOMEFINISHPAGE_BITMAP=${NSISDIR}\Contrib\Graphics\Wizard\nsis3-metro.bmp"     
Command line defined: "MUI_UNWELCOMEFINISHPAGE_BITMAP=${NSISDIR}\Contrib\Graphics\Wizard\nsis3-metro.bmp"   
Command line defined: "ESTIMATED_SIZE=18823"
Command line defined: "COMPRESS=auto"
Command line defined: "UNINSTALLER_OUT_FILE=C:\git\myapp\dist_electron\__uninstaller-nsis-myapp.exe"    
Processing config: C:\Users\user\AppData\Local\electron-builder\Cache\nsis\nsis-3.0.4.1\nsisconf.nsh    
Processing script file: "<stdin>" (ACP)
warning 6000: unknown variable/constant "APP_NAME.lnk" detected, ignoring (C:\git\myapp\build\installer.nsh:10)

```

## 参考
- [electron-builder による Windows インストーラー (NSIS) 作成でやりたかったことの実現方法まとめ](https://techracho.bpsinc.jp/kawawa/2020_12_09/101448)
- [【NSIS】Windows向けインストーラーの作成方法：Modern UIを使用](https://office54.net/python/nsis-make-installer)
- [Electron Builder NSIS Create a shortcut in startup](https://stackoverflow.com/questions/48422871/electron-builder-nsis-create-a-shortcut-in-startup)
- [Reading and Writing the Registry - NSIS makes it easy](https://nsis.sourceforge.io/Reading_and_Writing_the_Registry_-_NSIS_makes_it_easy)
- [NSISで作るインストーラーのチートシート](https://qiita.com/logue/items/f8b622d53705471ef037)

electron-builderとnsisでWindowsアプリのインストーラの設定まとめ


electonのアプリをビルドするためにelectron-builderを利用しています。
Windows版のインストーラの作成はNSISというスクリプト型のインストールシステムで作ります。

インストーラにスタートアップのチェックボタンを付けて、チェックがあればアプリをスタートアップに登録するスクリプトを作りました。

前の記事の[electron-builderとnsisでWindowsアプリのインストーラの設定まとめ - suzu6.net]()にNSISについてまとめました。

## electron-builderの設定
```bash
# Modern UIをインクルードする
!include MUI2.nsh

!ifndef BUILD_UNINSTALLER
  # ②チェックボタンがチェックされた時の関数
  Function AddToStartup
    # ③スタートアップにショートカットを作成
    CreateShortCut "$SMSTARTUP\${PRODUCT_NAME}.lnk" "$INSTDIR\${PRODUCT_NAME}.exe" ""
  FunctionEnd

  # ①インストーラの最終ページにチェックボタンをつける
  !define MUI_FINISHPAGE_SHOWREADME
  !define MUI_FINISHPAGE_SHOWREADME_TEXT "スタートアップに登録する"
  !define MUI_FINISHPAGE_SHOWREADME_FUNCTION AddToStartup
!endif
!macro customUnInstall
  # ④アンインストール時にスタートアップのショートカットを削除する
  Delete "$SMSTARTUP\${PRODUCT_NAME}.lnk"
!macroend
```

処理の説明です。
1. インストーラの最終ページにチェックボタンをつける
   `MUI_FINISHPAGE`がインストーラの最後のfinishがあるページのことです。ここにチェックボタンを付けます。
2. チェックボタンがチェックされた時の関数
   `MUI_FINISHPAGE_SHOWREADME_FUNCTION`で呼び出した関数を定義しています。
3. スタートアップにショートカットを作成
   `CreateShortCut`でショートカットを作成します。`$SMSTARTUP`がスタートアップのフォルダパス、`$INSTDIR`がインストール先のフォルダパスです。
4. アンインストール時にスタートアップのショートカットを削除する


`package.json`の`build.productName`に設定したアプリ名をとることができます。
`build.productName`は`build.name`とは違って日本語でアプリ名を定義できます。

## 参考
- [electron-builder による Windows インストーラー (NSIS) 作成でやりたかったことの実現方法まとめ](https://techracho.bpsinc.jp/kawawa/2020_12_09/101448)
- [【NSIS】Windows向けインストーラーの作成方法：Modern UIを使用](https://office54.net/python/nsis-make-installer)
- [Electron Builder NSIS Create a shortcut in startup](https://stackoverflow.com/questions/48422871/electron-builder-nsis-create-a-shortcut-in-startup)
- [Reading and Writing the Registry - NSIS makes it easy](https://nsis.sourceforge.io/Reading_and_Writing_the_Registry_-_NSIS_makes_it_easy)
- [NSISで作るインストーラーのチートシート](https://qiita.com/logue/items/f8b622d53705471ef037)

electron-builderとnsisでインストーラにスタートアップのチェックボタンを付ける


Node.jsからChrome.exeを起動して任意のページを開く方法がわかったので紹介します。

## 動作確認環境

- Windows 10 Home
- Node.js: v14.17.5

MacもChromeのexeのパスを指定して起動できるはずです。

## Chrome.exeを起動して任意のページを開くコード

Windowsで実行できるサンプルコードです。
Chromeのexeのパスは自身の環境に合わせてください。

```js:open_chrome.js
// Chromeのパス
const chromePath = '"C:/Program Files/Google/Chrome/Application/chrome.exe"';
// 開くページのURL
const argument = "https://www.suzu6.net";

const spawn = require("child_process").spawn;
// Windowsの場合はコマンドプロンプトで実行する
const chrome = spawn(chromePath, [argument], { shell: true });

// 実行時の出力
chrome.stdout.on("data", data => {
  console.log(`stdout: ${data}`);
});

// 実行時のエラー出力
chrome.stderr.on("data", data => {
  console.error(`stderr: ${data}`);
});

// プロセスが終了する時の処理
chrome.on("close", code => {
  console.log(`child process exited with code ${code}`);
});

```

スクリプトを実行するとChromeが開きこのサイトが表示されます。
```bash
# Windows
> node .\open_chrome.js
child process exited with code 0
```

`process.platform`でOSを判定してパスを切り替える処理を加えると良い感じになる。
```js
const is_windows = process.platform==='win32'
const is_mac = process.platform==='darwin'
const is_linux = process.platform==='linux'
```

## Windowsでの注意点

Windowsではパスの記述に癖があります。
- 区切り文字は`/`で良いです。
  - バッククォートの場合は`\`ではなく`\\`にする。 
- フォルダ名のスペースに気を付ける。
  - × `'C:/Program Files/Google/Chrome/Application/chrome.exe'` :　C:/Programとそれ以降で分かれる
  - × `'C:/"Program Files"/Google/Chrome/Application/chrome.exe'` : スペースがうまく処理できずに不要なタブが開いてしまう ![picture 1](/images/posts/312-node-run-chrome-exe/20210825T175539.png)  
  - 〇 `'"C:/Program Files/Google/Chrome/Application/chrome.exe"'`


以上

Node.jsでChrome.exeを起動してページを開く方法


<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】砂丘の砂紋のアニメーション#PCD2021

個人の技術ブログを作り直しました（３回目）


前回作ったブログでサイトマップを作ります。
generateで静的ページを作って公開する予定です。



## Table of Contents

## セットアップ

[@nuxtjs/sitemap](https://www.npmjs.com/package/@nuxtjs/sitemap)を使います。

```sh
$ yarn add @nuxtjs/sitemap
```
`nuxt.config.js`の`modules`に`'@nuxtjs/sitemap'`を追加します。
すべてのルートが確実にキャッチされるように、インクルードした他のモジュールの後で実行する必要があります。

```js:nuxt.config.js
export default {
  modules: [
    '@nuxt/content',
    '@nuxtjs/sitemap'
  ],
}
```

次に、サイトマップ構成のデフォルトをいくつか追加します—を追加hostnameして空の関数を設定します。この関数は、後でコンテンツのパスを取得して返すために使用します。
```js:nuxt.config.js
export default {

  sitemap: {
    hostname: process.env.BASE_URL || 'https://www.suzu6.net/', 
    routes: async () => {} // routesにURLを渡す
  },

}
```

`routes: ['path/article1', 'path/article1']`のように配列を渡すとサイトマップを作ってくれます。
これから、この配列を網羅的に作っていく。


ドメイン名だけだと`TypeError [ERR_INVALID_URL]: Invalid URL: www.suzu6.net\`が出る。
URLの形式じゃないとエラーが出るのは良いね。
httpから書きます。


## URLのリストを作成する

routesにサイトマップの配列を渡します。
@nuxt/contentでは以下のコードで`content/posts/*.md`のパスを渡します。

```js:nuxt.config.js
routes: async () => {
  const { $content } = require('@nuxt/content')

  const posts = await $content('posts')
    .only(['path'])
    .fetch()

  return posts.map((p) => p.path)
}
```

上記の設定で`yarn run generate`で同時にsitemap.xmlが作られるようになります。

```xml:dist/sitemap.xml
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
	<url>
		<loc>
			https://www.suzu6.net/posts/102-katex-math-functions
		</loc>
	</url>
	<url>
		<loc>
			https://www.suzu6.net/posts/14
		</loc>
	</url>
	<url>
		<loc>
			https://www.suzu6.net/posts/10
		</loc>
	</url>
  ...
```

## サイトマップにパス以外の情報を渡す。

```js
routes: [
  '/page/1',
  '/page/2',
  {
    url: '/page/3',
    changefreq: 'daily',
    priority: 1,
    lastmod: '2017-06-30T13:30:00.000Z'
  }
]
```

```js:nuxt.config.js

  sitemap: {
    hostname: process.env.BASE_URL || 'https://www.suzu6.net/',
    routes: async () => {
      let array = [
        {
          // トップページ
          url: '/',
          changefreq: 'daily',
          priority: 1,
          lastmod: new Date()
        }
      ];
      // コンテンツ
      const { $content } = require('@nuxt/content')
      const posts = await $content('posts')
        .only(['path', 'updated_at'])
        .fetch()
      array = array.concat(
        posts.map((p) => 
          { 
            return {
              url: p.path, 
              lastmod: p.updated_at,
              priority: 1,
            }
          })
      )
      return array
    }
  },
```



```xml:sitemap.xml
	<url>
		<loc>
			https://www.suzu6.net/
		</loc>
		<lastmod>
			2020-12-16T09:50:32.366Z
		</lastmod>
		<changefreq>
			daily
		</changefreq>
		<priority>
			1.0
		</priority>
	</url>
	<url>
		<loc>
			https://www.suzu6.net/posts/1
		</loc>
		<lastmod>
			2019-01-04T00:00:00.000Z
		</lastmod>
		<priority>
			1.0
		</priority>
	</url>
```



- [Generating Sitemap Entries For Nuxt Content](https://medium.com/javascript-in-plain-english/generating-sitemap-entries-for-nuxt-content-f7eb7b5fdb3b)

nuxt/contentでサイトマップを作る

nuxt/contentで作ったサイトに絵文字や数式のプラグインを追加して、マークダウンの書式を拡張します。
nuxt/contentを使っていなくても、remarkのプラグイン選びの参考にはなるかと思います。

## Table of Contents

## マークダウンのプラグイン
[markdown - @nuxt/contet](https://content.nuxtjs.org/configuration#markdown)

@nuxt/contentでは[remark](https://www.npmjs.com/package/remark)というプラグインでマークダウンの構文を解析しています。
HTMLへのパースは[remark-html](https://github.com/remarkjs/remark-html)を使ったりと、マークダウンを拡張する`remark-*`の豊富なエコシステムがあります。
目的に応じて役割ごとに細かなプラグインを組み合わせて扱うことができる。

`yarn` または `npm` でプラグインをインストールして**nuxt.config.js**に追加するだけで利用できます。
下はここで使っている絵文字や数式（$\KaTeX$）のプラグインを追加したところです。
コードを書かなくてよいので管理しやすい。

```js:nuxt.config.js
export default {
  // Content module configuration (https://go.nuxtjs.dev/config-content)
  content: {
    markdown: {
      remarkPlugins: [
        'remark-emoji',
        'remark-math',
        'remark-toc',
        'remark-footnotes',
        'remark-code-titles'
      ],
      rehypePlugins: [
        'rehype-katex'
      ]
    }
  },
}
```
２つのpuluginがあります。
`remark`はMarkdownの構文を解析するプロセッサで、`rehype`がHTMLを構築するプロセッサです。
例えば、`remark-math`がMarkdownの構造を解析して`rehype-katex`が$\KaTeX$に対応するHTMLに変換している。
`remark-emoji`のように単体で両方こなすものもある。

remarkについて読み応えのある熱い記事を見つけたので載せておきます。独自のParserの拡張の仕方も載ってます。
- [Remark で広げる Markdown の世界](https://vivliostyle.github.io/vivliostyle_doc/ja/vivliostyle-user-group-vol2/spring-raining/index.html)

---

以下からremarkの拡張プラグインを紹介していきます。
利用できる公式オススメのプラグインは[awesome-remark](https://github.com/remarkjs/awesome-remark)にまとまってます。  

## 絵文字

[remark-emoji](https://github.com/rhysd/remark-emoji)

```sh
# インストール
$ yarn add remark-emoji
```
**nuxt.config.js**の`content.markdown.remarkPlugins`に`remark-emoji`を追加する。
これでパースできるようになっています。

マークダウンの中の対応する文字を絵文字に変換してくれます。
```txt:入力
Emojis in this text will be replaced: :dog: :+1:

Toilet Time
:toilet: = 2 Minutes
:toilet: + :iphone: = 5 Minutes
:toilet: + :iphone: + ⁣:signal_strength: = 10 Minutes
:toilet: + :iphone: + :signal_strength: + :battery: = Infinite 
```

▼**出力結果**（引用符で囲ってます）
> 
> Emojis in this text will be replaced: :dog: :+1:
> 
> 
> Toilet Time  
> :toilet: = 2 Minutes  
> :toilet: + :iphone: = 5 Minutes  
> :toilet: + :iphone: + ⁣:signal_strength: = 10 Minutes  
> :toilet: + :iphone: + :signal_strength: + :battery: = Infinite   

[EMOJI CHEAT SHEET](https://www.webfx.com/tools/emoji-cheat-sheet/)の絵文字のコードは使えるはずです。

## 数式

数式に対応する`remarkPlugins`が[remark-math](https://github.com/remarkjs/remark-math)です。
数式を$$で囲うか、文中の場合は$で囲います。


対応する`rehype`には$\KaTeX$と**MathJax**があります。
- [rehype-katex](https://github.com/remarkjs/remark-math/blob/main/packages/rehype-katex)
- [rehype-mathjax](https://github.com/remarkjs/remark-math/blob/main/packages/rehype-mathjax)

どちらもLaTeXですが、HTMLの描画方法が少し違います。
個人的には描画速度が早くてKaTeXを選んでます。

```sh
# インストール
$ yarn add remark-emoji
```
**nuxt.config.js**の`content.markdown.remarkPlugins`に`remark-math`を、`rehypePlugins`に`rehype-katex`を追加する。
そして、表示のために$\KaTeX$のスタイルシートも当てます。
```js
export default {
    link: [
      // Add style sheet
      {
        rel: 'stylesheet',
        href: 'https://cdn.jsdelivr.net/npm/katex@0.11.0/dist/katex.min.css'
      },
    ],
  },

  // Content module configuration (https://go.nuxtjs.dev/config-content)
  content: {
    markdown: {
      remarkPlugins: [
        'remark-math'
      ],
      rehypePlugins: [
        'rehype-katex'
      ]
    }
  },
}
```
マークダウンで数式を書いてみる。
```md
**オイラーの等式**
$$
e^{i\pi}+1= 0
$$
ネイピア数$e$、虚数$i$、円周率$\pi$と有名な定数に$0$と$1$がある全部入りの数式。

**正規分布（ガウス分布）**
$$
f(x) = \frac{1}{\sqrt{2\pi\sigma^2}}\exp{-\frac{(x-\mu)^2}{2\sigma^2}}
$$
平均を$\mu$, 分散を$\sigma^2 \gt 0$とする正規分布とは、確率密度関数が次の形で与えられる確率密度関数。
```

▼**出力結果**  
> **オイラーの等式**
> $$
> e^{i\pi}+1= 0
> $$
> ネイピア数$e$、虚数$i$、円周率$\pi$と有名な定数に$0$と$1$がある全部入りの数式。
> 
> **正規分布（ガウス分布）**
> $$
> f(x) = \frac{1}{\sqrt{2\pi\sigma^2}}\exp{-\frac{(x-\mu)^2}{2\sigma^2}}
> $$
> 平均を$\mu$, 分散を$\sigma^2 \gt 0$とする正規分布とは、確率密度関数が次の形で与えられる確率密度関数。

備考：[@nuxt/content で数式を表示する](https://blog.tunehira.net/posts/display-eqations-with-nuxt-content/)の記事と同様に、数式が表示されずはまりました。スタイルシートが足りなかったことが原因でした。


## 見出しの目次を作る

[remark-toc](https://github.com/remarkjs/remark-toc)

マークダウンの中で目次を出したいところに`## Table of Contents`を書くとその位置に目次が出ます。
見出し（#）が自動的に目次になる。

```txt
## Table of Contents
```
この記事の[Table of Contents](https://www.suzu6.net/posts/265-nuxt-content-remark/#table-of-contents)もこれを利用しています。

## 改行をHTMLに適用する

マークダウンでは末尾にスペース2個で改行となります（１行間を空けると別のpタグで囲まれる）。
ただ、それを知らないとテキストと表示がずれているように感じます。

```html
マークダウン
This is a
paragraph.
↓
HTML
<p>This is a
paragraph.</p>

```

[remark-breaks](https://github.com/remarkjs/remark-breaks)はマークダウンの改行をHTMLでも改行してくれます。

```html
マークダウン
This is a
paragraph.
↓
HTML
<p>This is a<br>
paragraph.</p>
```
マークダウンの原理主義でないなら直感的にわかりやすいと思う。

## コードブロックにタイトルをつける

Qiitaなどのブログではコードブロックにファイル名などの補足があります。
あれを実現するためのパーサーが[remark-code-titles](https://www.npmjs.com/package/remark-code-titles)です。

```sh
# インストール
$ yarn add remark-code-titles
```

```js:nuxt.config.jsに追加する
export default {
  …
  content: {
      remarkPlugins: [
        'remark-code-titles'
      ],
    }
  },
```

コードブロックの先頭に **```拡張子:コードブロックのタイトル** と書くとタイトルが
`<div class="remark-code-title">コードブロックのタイトル</div>`と決まったクラスの`<div>`に囲まれる。
そこにスタイルを当ててタイトルっぽくしてます。

````txt
```python:Hello.py
printf("Hello, World!");
return 0;
```
````
▼変換したHTML。
```html
<div data-v-f58a9f50="" class="remark-code-title">hello.c</div>

<div data-v-f58a9f50="" class="nuxt-content-highlight">
  <pre data-v-f58a9f50="" class="line-numbers language-c"><code data-v-f58a9f50=""><span data-v-f58a9f50="" class="token function">printf</span><span data-v-f58a9f50="" class="token punctuation">(</span><span data-v-f58a9f50="" class="token string">"Hello, World!"</span><span data-v-f58a9f50="" class="token punctuation">)</span><span data-v-f58a9f50="" class="token punctuation">;</span>
<span data-v-f58a9f50="" class="token keyword">return</span> <span data-v-f58a9f50="" class="token number">0</span><span data-v-f58a9f50="" class="token punctuation">;</span>
</code></pre>
</div>
```
▼コードブロックのCSSの例。公開すると位置がずれているけどCSSわからん。
```css
.remark-code-title {
    background: #d9d7e0;
    border-radius: 0px 0px 4px 4px;
    color: #3a3a3a;
    font-size: 0.75rem;
    letter-spacing: 0.075em;
    line-height: 1;
    padding: 0.25rem 0.5rem;
    position: absolute;
    left: 1rem;
    text-align: right;
}
```

## 折り畳みを追加する

冗長な説明や長いコードブロックを折り畳むと、文章の流れを良くしつつ補足できる。
そんな折り畳み機能を追加するのが[remark-collapse](https://github.com/Rokt33r/remark-collapse)です。

```sh
$ yarn add remark-collapse
```

使い方
```txt
<details><summary>Open tango</summary>

target content

</details>
```
出力結果

<details><summary>Open tango</summary>

target content

</details>


## 脚注を作る

最高！これを探していました！

remark-footnotes[^1]を利用しています。
脚注はマークダウンのコンテンツの下部に作成されます。
文章の途中に脚注の補足を書いても下部に移動する。

星[^★]や日本語[^日本語]など数字以外の文字もいけるが、
対応する脚注は数字が自動で割り振られている。
そのため、自分で数字を合わせなければならない[^2]。

```md
文章中の脚注[^1]

[^1]: 脚注の補足

星[^★]や日本語[^日本語]など数字以外の文字もいけるが、
対応する脚注は数字が自動で割り振られている。

[^★]: 星マーク
[^日本語]: 日本語も大丈夫です。
```

ページの下部（パースしたコンテンツの最後）に脚注が出る。

[^1]: remark-footnotes: [https://github.com/remarkjs/remark-footnotes](https://github.com/remarkjs/remark-footnotes)

[^★]: 星マーク
[^日本語]: 日本語も大丈夫です。
[^2]: 自動で数字が割り振られる。ここは`[^2]`と書いている。

remarkでnuxt/contentのマークダウン書式を拡張する


## はじめに

javascriptで図形やグラフィカルな描画が書ける[p5js](https://p5js.org/)が面白そうだったので、サンプルを動かしました。

このサイトの環境でどう動かせるか実験した記事です。

[公式　p5js](https://p5js.org/)

## 時計のサンプルを動かしてみる

Example [clock](https://p5js.org/examples/input-clock.html)


<div id="canvas" class="has-text-centered"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.min.js"></script>
<script src="/js/posts/46-p5js-clock.js"></script>

```js
function setup() {
  // 親要素を指定して描画位置を変更する
  let canvas = createCanvas(400, 400);
  canvas.parent('canvas');
  
  // 省略
}
```

変更箇所はcanvasの大きさと位置だけです。
p5jsのデフォルトでは`</body>`のすぐ上にcanvasが描画されるため、記事の中に組み込めるようにcanvasの親要素を指定してます。

関数が充実していますね。
時間が`second()` `minute()` `hour()`だけで取得できますし、図形の形や色も簡潔にかけるためコードがスッキリしています。

## 参考

[《JavaScript》p5.jsでcanvasを任意の場所に配置する方法。 Qiita](https://qiita.com/uto-usui/items/3dc216f7c1bab3b90e0e)

p5jsのサンプルを動かしてみる

はじめに

時計のサンプルを動かしてみる

参考