도형과 색상
애니메이션과 변수
미디어 불러오기
대체 텍스트 없음
단어
글꼴을 불러오고 글자를 그립니다.
대체 텍스트 없음
이미지 데이터 복사
캔버스에 이미지 파일로부터 색상을 입힙니다.
대체 텍스트 없음
알파 마스크
한 이미지를 사용해 다른 이미지의 일부를 잘라냅니다.
대체 텍스트 없음
이미지 투명도
캔버스에 이미지를 반투명하게 만듭니다.
대체 텍스트 없음
오디오 플레이어
오디오 파일의 플레이어를 생성합니다.
대체 텍스트 없음
비디오 플레이어
비디오 파일의 플레이어를 생성합니다.
대체 텍스트 없음
캔버스에서의 비디오
캔버스에서 비디오를 표시하고 스타일을 지정합니다.
대체 텍스트 없음
비디오 캡처
카메라의 라이브 비디오 피드를 표시합니다.
입력 요소
변환
값 계산
반복
Listing Data with Arrays
각도와 동작
게임
3D
고급 캔버스 렌더링
클래스와 객체
데이터 불러오기와 저장
대체 텍스트 없음
로컬 스토리지(Local Storage)
브라우저에서 기기에 데이터를 저장합니다.
대체 텍스트 없음
JSON
JSON(JavaScript Object Notation)으로 데이터를 저장합니다.
대체 텍스트 없음
테이블
데이터를 쉼표로 구분된 값(CSV)으로 저장합니다.
Three random images loaded and displayed on a canvas after using async/await and Promise.all.
Load Multiple Images with Promise.all
Load multiple files at the same time before drawing on canvas.
수학과 물리
대체 텍스트 없음
비직각 반사
경사진 표면에서 튕기는 공을 시뮬레이션합니다.
대체 텍스트 없음
소프트 바디(Soft Body)
마우스 방향으로 가속되는 부드러운 물체의 물리학을 시뮬레이션합니다.
대체 텍스트 없음
힘
여러 물체가 유체를 통과하면서 작용하는 힘을 시뮬레이션합니다.
대체 텍스트 없음
연기 입자(Smoke Particles)
입자 시스템(particle system)을 활용하여 연기를 시뮬레이션합니다.
대체 텍스트 없음
라이프 게임(Game of Life)
존 콘웨이(John Conway)의 세포 자동자(cellular automation)를 재현합니다.
대체 텍스트 없음
망델브로 집합(Mandelbrot Set)
프랙탈 구조를 생성하는 수학적인 집합을 시각화합니다.
Shaders
대체 텍스트 없음
필터 셰이더(Filter Shader) (p5.strands)
셰이더로 이미지를 조작합니다.
대체 텍스트 없음
필터 셰이더(Filter Shader) (GLSL)
셰이더로 이미지를 조작합니다.
대체 텍스트 없음
셰이더로 위치 조정하기 (p5.strands)
셰이더를 사용하여 도형의 정점을 조정합니다.
대체 텍스트 없음
셰이더로 위치 조정하기 (GLSL)
셰이더를 사용하여 도형의 정점을 조정합니다.
대체 텍스트 없음
프레임버퍼 흐림(Framebuffer Blur)
카메라의 심도(depth of field)를 시뮬레이션합니다.
A gradient from red to blue.
Gradient (p5.strands)
Draw a radial gradient between two points in p5.strands.
A dithered gradient from red to blue.
Dithered Gradient (p5.strands)
Draw a dithered radial gradient between two points in p5.strands.
A row of five orange spheres. The closest and farthest spheres from the camera appear blurred.
Depth Blur (p5.strands)
Simulate a camera's depth of field, with a shader written in p5.strands.
A city scene blurred around the edges of the frame
Variable Blur (p5.strands)
Create a blur shader with a different amount of blur at different parts of the canvas.
Sound
An image of sound waves rendered in p5.js.
Making a Beep
Creating tones with an Oscillator.
An image of sound waves rendered in p5.js.
Filtering Sound
Simulate the sound of waves and wind with white noise.
An image of sound waves rendered in p5.js.
Playing Melodies
Create melodic music using an array of pitch values.
An image of sound waves rendered in p5.js.
Echo Synth
Trigger a short sound with an echo effect.
An image of sound waves rendered in p5.js.
Sample Playback
Load a soundfile and change its properties.
An image of sound waves rendered in p5.js.
Measuring Amplitude (Visualization)
Analyze the amplitude of sound with p5.Amplitude.
An image of sound waves rendered in p5.js.
Visualizing Sound
Spectral analysis for audio-responsive animations.
An image of sound waves rendered in p5.js.
Connecting to ToneJS
Working with AudioContexts and cross-library synthesis.