p5jsでライブコーディングしてみたい

この記事は オモゐデ漁船 Advent Calendar 2022 2日目 の記事です。
やっほ~~・もう12月って魔ッ!? 

adventar.org

プログラム言語を直接操作することで行う、リアルタイム・パフォーマンスの映像作品に興味があります。ライブコーディングっていうらしい。

DJブース後ろのスクリーンに流す映像に使えそうですね。

p5.js Web Editor

ライブコーディングの一例ですが、p5jsというブラウザのツールを使うことで幾何学模様ができるのだそうです。

H #36days_H #36daysoftype #36daysoftype09 pic.twitter.com/I9GgRUzQ3d

— italiano.jpg (@italiano_jpg) March 18, 2022

D #36days_D #36daysoftype #36daysoftype09 pic.twitter.com/kDgYjgiRgx

— italiano.jpg (@italiano_jpg) March 16, 2022

B #36days_B #36daysoftype #36daysoftype09 pic.twitter.com/taDPh0VYkL

— italiano.jpg (@italiano_jpg) March 15, 2022

Numbers #p5js #creativecoding pic.twitter.com/RP6tHefkyf

— italiano.jpg (@italiano_jpg) January 29, 2022

Genuary Day 19: Typography#genuary #genuary2022 #p5js pic.twitter.com/YhwoqZ5z12

— italiano.jpg (@italiano_jpg) January 24, 2022

Genuary Day 16 + 6: Color gradients gone wrong + trade styles
I’m big fan of @kiel_m’s work, inspiration for this comes their folding gradient explorations#genuary #genuary2022 #genartclub #p5js pic.twitter.com/ijQ5w0Acec

— italiano.jpg (@italiano_jpg) January 17, 2022

#genuary2022 day 15 - Sand
Sound on!
A simulated cymatic experiment using sand. Standing waves on a plate move sand away from areas of high vibration. Different chords create different waves.#rstats code available https://t.co/AeR3gCwMd6 #rtistry #genuary #mathart #Math pic.twitter.com/Be9AEAhEjg

— George Savva (@georgemsavva) January 15, 2022

limewire.exe pic.twitter.com/DiD34a6IZa

— italiano.jpg (@italiano_jpg) January 10, 2022

Foil pic.twitter.com/IdwMGqHxA7

— italiano.jpg (@italiano_jpg) July 19, 2021

ok pic.twitter.com/bj0FsDhySl

— italiano.jpg (@italiano_jpg) July 17, 2021

正方形の辺に沿うように，大きさによって間隔をずらした破線を配置して，時間経過で動かす．画面をフィードバックさせる．https://t.co/G6er9ldKgA#p5js #creativecoding #dailycoding #generativeart pic.twitter.com/BdP2BQI0bA

— TAKAWO Shunsuke (@takawo) December 1, 2022

　眺めているだけで楽しいのですが、
次回は描画の実践をして見ようと思います。

それでは皆さん、よい歳末を!!

#OmoideAdvent2022