프로세싱언어 p5.js 로 누구나 쉽게 웹애니메이션까지

프로그래머가 아니어도 쉽게 프로그램을 만들 수 있도록 해주는 언어로 프로세싱언어가 있는데

프로세싱 언어를 자바스크립트에 통합시켜 만든 패키지로 p5가 있습니다.

https://p5js.org/reference/

아래와 같이 기본적인 드로잉 기능부터 3D는 물론 사운드까지 

다양한 예제들과 라이브러리가 제공됩니다.

Examples

Structure

Coordinates
Width/Height
Setup/Draw
No Loop
Loop
Redraw
Functions
Recursion
Create Graphics

Form

Points/Lines
Shape Primitives
Pie Chart
Regular Polygon
Star
Triangle Strip
Bezier
3D Primitives

Data

Variables
True/False
Variable Scope
Numbers

Arrays

Array
Array 2D
Array Objects

Control

Iteration
Embedded Iteration
Conditionals 1
Conditionals 2
Logical Operators

Image

Load/Display Image
Background Image
Transparency
Alpha Mask
Create Image
Pointillism

Color

Hue
Saturation
Brightness
Color Variables
Relativity
Linear Gradient
Radial Gradient
Lerp Color

Math

Increment Decrement
Operator Precedence
Distance 1D
Distance 2D
Sine
Sine Cosine
Sine Wave
Additive Wave
PolarToCartesian
Arctangent. 
Linear Interpolation. 
Double Random
Random
Noise1D
Noise Wave
Arctangent
Noise2D
Noise3D
Random Chords

Simulate

Forces
Particle System
Flocking
Wolfram CA
Game of Life
Multiple Particle Systems
Spirograph
L-Systems
Spring
Springs
Soft Body
SmokeParticles
Brownian Motion
Chain
Snowflakes
Penrose Tiles

Interaction

Tickle
Follow 1
Follow 2
Follow 3
Snake game
Wavemaker
Reach 1
Reach 2
Reach 3

Objects

Objects
Multiple Objects
Array of Objects
Objects 2

Lights

Directional
Mixture

Motion

Non Orthogonal Reflection
Linear
Bounce
Bouncy Bubbles
Moving On Curves
Morph
Moving On Curves. 
Morph

Instance Mode

Instantiation
Instance Container

DOM

Input/Button
Slider
Modifying the DOM
Video
Video Canvas
Video Pixels
Video Capture
Drop

Drawing

Continous Lines
Patterns
Pulses

Transform

Translate
Scale
Rotate
Arm

아래와 같이 링크만 걸어주거나

<script src="../p5.min.js"></script>

아래와 같이 CDN 을 사용해도 됩니다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.js"></script>

아래 예제페이지에서 다양한 기능을 확인해보세요

https://p5js.org/examples/