小さな例がたくさんあります。p5.jsの可能性を探索しましょう。
for Japanese Only.下記以外にも旧バージョンにたくさんの実例あります! 実例(OLD)をご覧ください!
黒い背景に白い円があり、透明度が異なります。
モバイルデバイスの動き
デバイスの動きに基づいてアニメーションを作成します。
単位円上の点と、それに対応するサインおよびコサインの値がグラフ上に表示されています。
サインとコサイン
円運動、往復運動、波動運動をアニメーション化します。
暗い紫色の立方体の球体が薄いピンクの背景にあります。
オービットコントロール
マウスでカメラを制御します。
右に向かって傾いた虹色の煙、その上に右を指す白い矢印。
スモークパーティクル
パーティクルシステムで煙をシミュレートします。
グレーの背景に白と黒で描かれた基本的な形状。
基本図形
2D図形を描画します。
青い背景の上に異なる色で描かれたいくつかの基本的な形。
色
スケッチに色を追加します。
黒い背景に描かれたうねうねした虹の線。
線を描く
マウスで描きます。
黒い背景に小さな緑の円。
イベントによるアニメーション
アニメーションの一時停止と再開。
小さな黒い円が虹のような格子状の軌道を描き、灰色と白のストライプの背景の上にあります。
条件
スケッチが実行されている間に、if文とelse文を使用して決定を行います。
白い背景に「ichi」、「ni」、「san」、「shi」の単語の3つの列。最初の列は右揃え、中間の列は中央揃え、左の列は左揃えです。
単語
フォントを読み込み、テキストを描画します。
オウムの白黒写真。画像の上に曲線が描かれ、その線の内側に色が追加されています。
画像データのコピー
画像ファイルからキャンバスにペイントします。
2枚の葉の小枝が白い背景に並んでいます。右の小枝は「マスク」とラベル付けされています。左の小枝は「マスクされた画像」とラベル付けされており、右の小枝の形を使ってチューリップの写真をマスクしています。
アルファマスク
1つの画像を使用して、別の画像の一部を切り抜きます。
背景に惑星上の宇宙飛行士がいて、その上にこの画像のやや透明なバージョンが重ねられ、左側に配置されています。
画像の透明度
キャンバス上で画像を半透明にします。
オーディオプレーヤーのタイムスタンプのクローズアップ、"0:00 / 2."と表示されています。
オーディオプレーヤー
オーディオファイルのプレーヤーを作成します。
手がデスクに触れている動画のスクリーンショット、ポインター指が映っています。
ビデオプレーヤー
ビデオファイルのプレーヤーを作成します。
手の動画の2つの重なったスクリーンショット。ポインターフィンガーが机に触れています。スクリーンショットの右上には「キャンバスをクリックして動画フィードを開始および一時停止します。」というテキストがあります。
キャンバス上の動画
キャンバス上に動画を表示し、スタイリングします。
木々の逆光の白黒写真。
ビデオキャプチャ
カメラからのライブビデオフィードを表示します。
グレーの背景に「キャンバスに画像ファイルをドラッグしてください」と書かれた白いテキスト。
画像ドロップ
ページ訪問者がドラッグ&ドロップした画像を表示します。
「こんにちは、p5!」とラベル付けされた送信ボタン付きの入力フィールド
入力とボタン
ページ訪問者からのテキスト入力を使用します。
黄色の背景に、入力フィールド、ラジオボタン、ドロップダウンからなる調査。
フォーム要素
フォームを作成し、結果に応答します。
黒い背景に緑と青の幾何学的形状。
移動
座標系の原点を移動します。
キャンバスの中心を回転する線分。
回転
座標系を回転させます。
重ねられたソリッドな長方形。
スケール
座標系のスケールを変更します。
灰色の背景に小さな白い円。
線形補間
0から1の間の数値を別の範囲に変換します。
黒い背景に大きな黄色の円。
マップ
数値を別の範囲に変換します。
黒い背景に小さな紫の円。
ランダム
ランダムな数値を取得します。
ピンクの長方形の中にある小さな白い円。
制約
数値を範囲内に保ちます。
灰色の背景にあるピンクの時計。
時計
現在の時間を取得します。
上部が明るい緑、下部が暗い青にフェードする横縞。
色の補間
2つの色の間でフェードします。
小さな円がそれぞれ異なる色で、円形のパスに配置され、色のスペクトル全体の色相を表示します。
カラーホイール
色のスペクトルの視覚化を作成します。
十本の虹色の線がベジェ曲線の形で描かれます。
ベジェ曲線
曲線のセットを描画します。
ダークグレーのキャンバスが、内部に描かれた線を対称的なセクションで反射します。
万華鏡
マウスで鏡像デザインを描画します。
ブラックとホワイトの抽象的なノイズテクスチャ。
ノイズ
パーリンノイズを使用して自然なテクスチャを生成します。
黒い背景に描かれた虹色のフラクタルツリー。
再帰的な木
自己呼び出し関数を使用して木を描画します。
p5.jsに関連するランダムな単語の系列がマルーンの背景に散りばめられています。
ランダムポエトリー
単語のバンクからランダムに選ばれた単語で詩を生成します。
黒い背景に二つの目。
エイム
ポイントに向かって回転します。
二つの同心円上の頂点からなる三角形で構成された虹のリング。
三角形で分割
リングを三角形に分割します。
グレーの背景に大きな紫色の円。
サークル クリッカー
円を素早くクリックするゲームを作成し、ハイスコアを保存します。
二つの狭い白い矩形と、ピンポンゲームのパドルとボールを表す白い正方形。
ピンポン
アタリの「ポン」にインスパイアされたゲームを作成します。
アーケードゲーム「スネーク」におけるスネークとフルーツを表す狭い緑のL字形と赤い正方形。
スネーク
スネークアーケードゲームに基づいたゲームを作成します。
八つの3D形状:平面、ボックス、シリンダー、円錐、トーラス、球、楕円体、そして宇宙飛行士のモデル。形状の表面は多色です。
ジオメトリ
カスタムモデルを含む3D形状を描画します。
スネークモデルのタイル状の平面。
カスタムジオメトリ
プログラムで3D形状を生成します。
黒い背景にある宇宙飛行士の3Dモデル。
マテリアル
3Dオブジェクトの色、テクスチャ、および光に対する反応を変更します。
都市の横断歩道の動画のスクリーンショットで、色がずれています。
フィルターシェーダー
シェーダーを使って画像を操作します。
赤から青に波打つリボンが白い背景にあります。
シェーダーによる位置調整
シェーダーを使って形状の頂点を調整します。
カメラから最も近い球体と最も遠い球体がぼやけて見える5つのオレンジ色の球体の列。
フレームバッファぼかし
カメラの被写界深度をシミュレートします。
黒いキャンバスの中央に非常に暗い灰色の矩形があります。矩形の端に白い円があります。
グラフィックスの作成
オフスクリーンで画像を描画します。
黒と白の背景に、繰り返される白い円と黒い輪郭の四角形で作られた2つの曲線。
複数のキャンバス
インスタンスモードを使用して、ページに複数のキャンバスを配置します。
グラデーションのある正方形グリッドに分割された2つの球体。
テクスチャとしてのシェーダー
シェーダーを使用して3D形状のテクスチャを生成します。
黒い背景に雪が降っている。
スノーフレーク
雪が降る様子をアニメーション化する。
黒い背景に20個の白い円。
シェイクしてボールが跳ねる
モバイルデバイスの動きに基づいてボールの動きをアニメーション化します。
黒い背景に白い線で結ばれた多色の円のパターン。
繋がった粒子
マウスを使って円と接続線を描画します。
虹色の三角形で表現された鳥のようなオブジェクトの群れが、群れ行動をモデル化している。
群れ行動
鳥の群れ行動をシミュレーションします。
白い背景に黒い円の輪郭。円の下には「クリックしてドラッグしてバブルを追加します。」と書かれています。
ローカルストレージ
デバイス上のブラウザからデータを保存します。
JSON
データをJavaScriptオブジェクト表記で保存します。
テーブル
データをカンマ区切りの値として保存します。
キャンバスの底にある傾斜した平面の上に浮かぶ小さな緑の円。
非直交反射
傾斜面で跳ねるボールをシミュレートします。
黒い背景にある黄色の五角形。
ソフトボディ
マウスに向かって加速するソフトボディの物理をシミュレートします。
9つの多色の円が灰色の背景に異なる高さで配置されています。
力
物体が液体を通過する際の力をシミュレートします。
黒い線で描かれた白い背景の正方形のグリッド。一部の正方形は黒で塗りつぶされています。
ライフゲーム
ジョン・コンウェイのセルオートマトンを再現します。
マンデルブロ集合のカラフルな描画。
マンデルブロ集合
フラクタル構造を生成する数学的集合を視覚化します。
旧バージョンのp5.js日本語サイトをお探しですか?こちらです!