気になる p5.js・Processing に関するネタ（作品ツイートとは別）

↓こちらのスクラップにも関連ネタあり。
●ゲーム・アニメ・SFに出てきそうなUI関連、面白い・楽しい見た目を作れそうなもの
　https://zenn.dev/youtoy/scraps/6f9662e20de5f6

↓p5.jsつながりの、別のスクラップ
●気になる p5.js・Processing の作品のツイートをメモしていく【2021年5月〜】
　https://zenn.dev/youtoy/scraps/f10b21da08ba38

●Processing で音に反応して動くアニメーションを作る（前編）｜deconbatch｜note
　https://note.com/deconbatch/n/n0c821c969389

●Processing で音に反応して動くアニメーションを作る（後編）｜deconbatch｜note
　https://note.com/deconbatch/n/n3278d8dd6704

●Processing/p5.js の noise() で遊ぼう！ 前編｜deconbatch｜note
　https://note.com/deconbatch/n/ne0d44d86eade

●Processing/p5.js の noise() で遊ぼう！ 後編｜deconbatch｜note
　https://note.com/deconbatch/n/n210a9efb72f4

●p5.xrを使ってOculus Quest2で再生できるVRを作る方法。p5.jsを改変するだけ。 – moistpeace official
　https://moistpeace.com/2021/01/28/p5xr-intro/

●P5.jsでAudio Visualizerを作ってみた！【ビート検知】 - Izm Log
　https://izm51.com/posts/p5-js-audio-visualizer/

●p5.ble.js · A Javascript library that enables communication between BLE devices and p5 sketches.
　https://itpnyu.github.io/p5ble-website/

●Get Started · p5.ble.js
　https://yining1023.github.io/p5ble-website/docs/getstarted

●bmoren/p5.collide2D: A collision detection library for 2D geometry in p5.js
　https://github.com/bmoren/p5.collide2D

●【p5.js】クリエイティブコーディングに挑戦（その2） - クモのようにコツコツと
　https://www.i-ryo.com/entry/2019/07/21/194243
●【p5.js】クリエイティブコーディングに挑戦（その1） - クモのようにコツコツと
　https://www.i-ryo.com/entry/2019/06/20/234635

●パーティクルを追加 | p5.js でゲーム制作
　https://fal-works.github.io/make-games-with-p5js/docs/arrange/particles/

●円や球面にランダムに点を散らしたい〜高校数学を使って分布関数を作る〜 - KAYAC engineers' blog
　https://techblog.kayac.com/how-to-distribute-points-randomly-using-high-school-math

＞ 上記を元に、少し改変
●p5.js Web Editor | パーティクル（中から外に360度）
　https://editor.p5js.org/youtoy/sketches/iVhYMKn6N

●p5.jsとp5.speechで音声合成と音声認識 : だらっと学習帳
　http://blog.livedoor.jp/reona396/archives/55812545.html

●12_2：ビデオの操作 Creative Coding p5.js – HIM.CO ヒム・カンパニー
　https://himco.jp/2019/03/26/12_2：ビデオの操作-creative-coding-javascrip/

●Processing Advent Calendar 2020 - Adventar
　https://adventar.org/calendars/4953

●Processingで機械学習！？ (RunwayML + Processing) - ZawaWorks’s diary
　https://zawaworks.hatenablog.com/entry/2020/12/03/224736

●runwayml/p5js: RunwayML + p5.js 🐠
　https://github.com/runwayml/p5js

●tetunori/p5.toio: toio™library for p5.js
　https://github.com/tetunori/p5.toio

●Optional chaining (?.) - JavaScript | MDN
　https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Optional_chaining

公式サンプルを見ていくと、面白いものがありそう。

●examples | p5.js
　https://p5js.org/examples/

●フラクタル、カオスをProcessingで記述する | 永松 歩 | Ayumu Nagamatsu
　https://ayumu-nagamatsu.com/archives/431/

●De Jong アトラクターの応用：Processing 3D アニメーション作例｜deconbatch｜note
　https://note.com/deconbatch/n/n8953bd6194e9

p5.js で雷を書ける？

●How to Generate Shockingly Good 2D Lightning Effects
　https://gamedevelopment.tutsplus.com/tutorials/how-to-generate-shockingly-good-2d-lightning-effects--gamedev-2681

●yoppa org – 加速と減速 – イージングによるアニメーション
　https://yoppa.org/mit-design1-21/12356.html

https://drive.google.com/file/d/1r2iWoFOAJffFZPtTC1hSBqfv8YnAFVdi/view

●GSAP Basic - OpenProcessing
　https://openprocessing.org/sketch/1227453

●GreenSock | Docs | GSAP | gsap.updateRoot()
　https://greensock.com/docs/v3/GSAP/gsap.updateRoot()
●GreenSock | Docs
　https://greensock.com/docs/v3

●p5.js + matter.js で落ち物ゲーっぽいもの - Qiita
　https://qiita.com/Yu_ling/items/9bd1683a8b79aa49f88c

●Matter.js and p5.js bubbles example
　https://codepen.io/prataprockers/pen/OjpWZy

●p5.js Web Editor | matter.js test
　https://editor.p5js.org/piecesofuk/sketches/rJxOzAKvm

●物理演算エンジン「Matter.js」を使ってみた（スマホも対応） | ページ 2 / 2 | 株式会社LIG
　https://liginc.co.jp/web/js/other-js/155192/2

●【Matter.js】大量の2D物理演算で処理時間を計測 | 底辺動物の雑記ブログ
　https://ashikapengin.com/2021/02/10/matter-js/

●p5.js matter.js sample 13 – matter.jsをp5.jsで描画 | キャンバスのコンパス。
　https://yujin777.com/2020/08/22/p5-js-matter-js-sample-13-matter-jsをp5-jsで描画/

●5.17: Introduction to Matter.js - The Nature of Code - YouTube
　https://www.youtube.com/watch?v=urR596FsU68

●5.17: Introduction to Matter.js - The Nature of Code - YouTube
　https://www.youtube.com/watch?v=urR596FsU68
●website/README.md at dbd1dfe415fd0a6e1f2bbeb8675e39c42d32ee71 · CodingTrain/website
　https://github.com/CodingTrain/website/blob/dbd1dfe415fd0a6e1f2bbeb8675e39c42d32ee71/Courses/natureofcode/5.18_matter_intro/README.md

物理演算エンジンの matter.js を p5.js と組み合わせるのに、簡単にしてくれるラッパー的なもの。

●p5-matter by pzp1997
　http://palmerpaul.com/p5-matter/

3Dの物理演算エンジン

●schteppe/cannon.js: A lightweight 3D physics engine written in JavaScript.
　https://github.com/schteppe/cannon.js

●p5.js Web Editor | cannonjs eliza-chain pendulum
　https://editor.p5js.org/zapra/sketches/S6nxM-qQE

●p5.jsのcone()とcylinder()には円板を描画しないオプションがある : だらっと学習帳
　http://blog.livedoor.jp/reona396/archives/55849851.html

https://twitter.com/reona396/status/1290980900646162433

●ammo js softbody demo on p5 - YouTube
　https://www.youtube.com/watch?v=LFPgytlKmGk

●p5.js Web Editor | amoo.js softbody volume demo
　https://editor.p5js.org/setapolo/sketches/e7xZ2cfjV

デモ：
●b-g/p5-matter-examples: Examples showing how to combine p5.js and matter.js.
　https://github.com/b-g/p5-matter-examples

●Matter.js Demo
　https://brm.io/matter-js/demo/#newtonsCradle

●#301 threeとammoと物理エンジン　3D入門いまさら　再生ボタンをー押すだけ押すだけ｜CR交通大戦シリーズ｜note
　https://note.com/rodz/n/nea822da52ab6

●【JavaScript/p5.js】物理エンジンMatter.jsを使ってバランスゲームを作ってみた【ゲームプログラミング】 | The Ultimate Media
　http://the-ultimate-media.com/balancing-game

●18.2: 3D Geometries - WebGL and p5.js Tutorial - YouTube
　https://www.youtube.com/watch?v=6TPVoB4uQCU&t=0s

●18.3: Light and Material - WebGL and p5.js Tutorial - YouTube
　https://www.youtube.com/watch?v=k2FguXvqp60&t=0s

●18.4: Texture - WebGL and p5.js Tutorial - YouTube
　https://www.youtube.com/watch?v=O1mYw-3Wl_Q&t=0s

●three.js + p5js integration
　https://codepen.io/velenoise/details/wabZva

●Using p5.js and three.js together · Issue #1771 · processing/p5.js
　https://github.com/processing/p5.js/issues/1771
●A Pen by p5.js
　https://codepen.io/p5js/pen/apVPVx?editors=1111

●p5.js上でthree.js動かすイッキ見　モデル編その１｜CR交通大戦シリーズ｜note
　https://note.com/rodz/n/nd59aea529149

●p5js, tramontana, interactive spaces, interactive experiences
　https://tramontana.xyz/tramontanajavascriptgettingstarted_2_2

https://twitter.com/tkyko13/status/1443916920193884165

https://twitter.com/tetunori_lego/status/1464784088603119621

●クリエイティブコーディングの教科書
　https://zenn.dev/baroqueengine

https://twitter.com/tetunori_lego/status/1474647860679704577

●p5.jsで輪郭抽出 : だらっと学習帳
　http://blog.livedoor.jp/reona396/archives/55853620.html

●ByteSize Coding - YouTube
YouTubeのvideoIDが不正ですhttps://www.youtube.com/c/ByteSizeCoding/videos

●Kaleidoscope - p5.js Tutorial - YouTube
https://www.youtube.com/watch?v=KcHqRAM0sEU

p5.js とパーリンノイズの話。
https://genekogan.com/code/p5js-perlin-noise/

●p5.jsで楽しもうマウス&カーソルインタラクション : だらっと学習帳
　http://blog.livedoor.jp/reona396/archives/55826829.html

●p5.jsで楽しもうキーボードインタラクション : だらっと学習帳
　http://blog.livedoor.jp/reona396/archives/55829220.html

●そもそも光を発してるモニタ上で、あえて「光ってる」ように見せるには？-クリエイティブ・コーディング・天国！
　https://jp.deconbatch.com/2022/01/blendmode-add.html

●塗りつぶしアルゴリズムをp5.jsで実装してみた｜タカハシラボ｜note
　https://note.com/ke_takahashi/n/n58bb9a37a149

●Blenderで作成したモデルをp5.jsで読み込む - ギンの備忘録
　https://gin-graphic.hatenablog.com/entry/2021/07/11/173000

function preload() {
    dog = loadModel('dog.obj');
}

function setup() {
   createCanvas(w, w, WEBGL);
   colorMode(HSB);
   noStroke();
   noLoop();
}

function draw(){
  background(0);

  ambientLight(10);
  pointLight(200, 100, 100, -w/2, -w/2, w);
  specularMaterial(100);

  translate(125,-50)
  rotateX(-PI/8);
  rotateY(PI/4);
  rotateZ(PI);
  scale(75);
  model(dog);
}