チュートリアル

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

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

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

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

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

Three pink caterpillars with googly eyes on the starting line wait for the race with the text “Click to start”.

A preview of the interactive flower garden with flowers appearing on a light blue canvas as a user clicks with their mouse pointer.

A still frame from an animation of three flowers with petals illustrated using pointillism, three solid stems, and a watering pot.

A webcam snapshot of a white person with short dark curly hair wearing pink heart shaped glasses posing for a picture. There is a red to yellow linear gradient filter on top of the photo. Colorful circles are scattered on top of the image with a color gradient overlay. The circles have randomized radial color gradients inside them to mimic a camera's lens flare. Some color gradients are pink to purple, cyan to green, or yellow to orange.

A white person with short, dark curly hair wears pink heart-shaped glasses and a dark sleeveless shirt. He places his hand on his cheek and looks diagonally to the left, smiling softly. A vertical linear blue to pink gradient is overlaid. On top of that, we see a mixture of angular and curved white 4-pointed sparkles of varying sizes, with an angular sparkle over the left lens of his glasses, and a curved sparkle over the right lens. We see pink and blue radial gradient circles layered on top, creating a lens flare effect.

A graphic illustration of a code editor with colorful lines that suggest syntax highlighting code. Two floating circles resembling HTML tags surround the editor.

Bold typography in contrasting white and black against a deep blue background. It features the words 'FONTSTYLE' in black at the top. 'TYPEFACE' is in white in the middle. 'abc' is in white at the bottom. Each is in a different font size. This creates a bold and striking display of font styles and typefaces.

A retro handheld gaming device, positioned at the center of the screen. It has a simple landscape on its screen. The device is set against a bright blue background with white motion arcs resembling a rainbow and stylized stars. Blocky brown platforms on either side and a checkered floor complete the nostalgic video game scene.

A white circle in the center of a gray background with an example of a p5.js Web Editor alt text output listed at the bottom.

A red heart in the bottom right corner of a pink background with an example of alt text describing the image.

A cube on top of a grid with colored lines showing its movement in 3D space.

A bunch of red ladybugs on a green background

A sphere in front of some walls and a floor, lit by a red, green, and blue light.

A warped, wavy city street

A line of spheres receding into fog as they go off into the distance

A screenshot of the profiler in the developer tools of Google Chrome

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

The bouncing particles animation used in this tutorial displays orange circles bouncing around a dark canvas.

The palm of a hand with 4 points in green color that identify each finger, and 5 green points identifying the thumb and  bottom of the palm.

Piano keys

A p5.js logo with musical notes above it has arrows labeled with HTTP methods pointing to a cloud labeled “Internet”. Above the cloud is an icon that reads “http\://”. Arrows point from the cloud to a pink cube labeled “Web Server” with the Node.js logo above it.