チュートリアル

An interactive sketch in the p5.js Web Editor draws circles on the canvas as the mouse pointer moves.

てんとう虫と花の絵文字が、シンプルな風景の背景の前に表示されているインタラクティブな風景プロジェクトのプレビュー。

人が3つのボールをジャグリングしている様子。背後には車が通り過ぎていきます。背景には夜景の絵画があり、木、雲、三日月が描かれています。

条件分岐とインタラクティビティのチュートリアルで作成される日の出アニメーションのプレビュー。

条件分岐とインタラクティビティのチュートリアルからの日の出アニメーションのスナップショットを表示するキャンバス。スナップショットには太陽、木々、山々の風景が含まれています。

3匹のピンクのイモムシが目玉をぎょろぎょろさせながらスタートラインで待機し、「クリックでスタート」というテキストが表示されている。

ユーザーがマウスポインターでクリックすると、薄い青色のキャンバスに花が現れるインタラクティブな花園のプレビュー。

ポワンティリスムで描かれた3つの花びらと3本の実線の茎、そして水やり缶のアニメーションの1フレーム。

ピンクのハート型メガネをかけた短い黒い巻き毛の白人の写真を撮影したウェブカムのスナップショット。写真の上に赤から黄色の線形グラデーションフィルターがかかっています。カラフルな円が画像の上に散りばめられ、カラーグラデーションのオーバーレイがあります。円の中にはカメラのレンズフレアを模した、ランダムな放射状カラーグラデーションがあります。一部のカラーグラデーションはピンクから紫、シアンから緑、黄色からオレンジなどです。

短い暗い巻き毛の白人が、ピンクのハート型メガネと暗い袖なしシャツを着ています。彼は頬に手を当て、左斜め上を見て、優しく微笑んでいます。垂直の青からピンクへのグラデーションが重ねられています。その上に、様々なサイズの角張ったものと曲線の白い4点スパークルが混在しており、メガネの左レンズの上に角張ったスパークル、右レンズの上に曲線のスパークルがあります。ピンクと青の放射状グラデーション円が上に重ねられ、レンズフレア効果を作り出しています。

コードエディタのグラフィックイラストで、シンタックスハイライトを表現するカラフルな線が描かれています。HTMLタグを表現する2つの浮かぶ円がエディタを囲んでいます。

濃い青の背景に白と黒のコントラストが効いた大胆なタイポグラフィ。上部に黒で'FONTSTYLE'、中央に白で'TYPEFACE'、下部に白で'abc'が、それぞれ異なるフォントサイズで表示されています。これによりフォントスタイルとタイプフェイスの大胆で印象的な表示が作られています。

レトロなハンドヘルドゲーム機が画面の中央に配置されています。画面にはシンプルな風景が表示されています。デバイスは明るい青色の背景に配置され、虹のような白い動きのアークと様式化された星が描かれています。両側の茶色いブロック状のプラットフォームとチェック柄の床が、ノスタルジックなビデオゲームのシーンを完成させています。

グレーの背景の中央に白い円があり、下部にp5.js Webエディタの代替テキスト出力例が表示されている。

ピンクの背景の右下に赤いハートがあり、画像を説明するalt textの例が表示されています。

3D空間での動きを示す色付きの線が付いたグリッド上のキューブ。

緑の背景に赤いてんとう虫がたくさん

赤、緑、青の光で照らされた壁と床の前にある球体。

歪んで波打つ都市の通り

遠くに消えていく霧の中に並ぶ球体の列

Google Chromeの開発者ツールのプロファイラーのスクリーンショット

タイトルは「デバッグのフィールドガイド！」で、昆虫、マウス、深く考えているノートパソコンの白黒漫画イラストが特徴です。

このチュートリアルで使用されるバウンシングパーティクルのアニメーションは、暗いキャンバス上でオレンジ色の円が跳ね回る様子を表示しています。

緑色の4つの点で各指を識別し、5つの緑色の点で親指と手のひらの下部を識別した手のひら。

ピアノの鍵盤

p5.jsのロゴの上に音符があり、HTTPメソッドでラベル付けされた矢印が「インターネット」とラベル付けされたクラウドを指しています。クラウドの上には「http://」と書かれたアイコンがあります。矢印はクラウドからNode.jsロゴが付いた「Webサーバー」とラベル付けされたピンクのキューブを指しています。