Processing入門

試作ページ

公式サイト https://p5js.org/ 言語切り替えに日本語版は無い

P5.js 日本語リファレンス 作成途中の模様

検索するとProcessing入門サイトは沢山見つかるし、公式サイトの機械翻訳で頑張る手もある。


見本を見てみよう。https://p5js.org/examples/


Snake game スネークをキーボードの i j k l で操作してドットを拾うゲーム

Song マウスで演奏。シンセ音を鳴らす。

Mic Threshold 大きな音をマイクで拾ってドットを飛ばす

Video Capture Webカメラの映像を色調反転表示


Video Pixels 動画を再生してエフェクトをかける。マウスで操作

Shader Using Webcam Webカメラの映像にエフェクトを追加


Oscillator Frequency マウスでシンセ音の周波数(X方向)とボリューム(Y方向)を変化

Delay ディレイをかける。マウスのXYでディレイを制御

Convolution Reverb リバーブをかける。マウスクリックでリバーブの環境を切り替える。キーを押すとインパルスを再生


Kaleidoscope 万華鏡風にマウスで描く

Soft Body 軟体シミュレーション。マウスを追跡する可塑性の有る図形

Slider GUIの例。スライダーで色(RGB)を変化

Materials 3DCGの例。マウスで照明の位置を変化

Acceleration Ball Bounce スマホ用。加速度センサーでボールを飛ばす


やってみよう。https://editor.p5js.org/ 例からコードをコピーして入れ替えて試すとよい。


改造しよう。

Simple Shapes 図形の大きさや座標、色を変えてみよう。

Interactivity 1 クリックする度にサイズが小さくなるようにしてみよう。背景塗潰しを無くしてみよう。

Animation ボールの揺れ方やスピードを変えてみよう。