p5.js 코드의 각 부분에 대한 쉬운 설명을 찾아보세요.
Looking for p5.sound? Go to the p5.sound reference!
호, 아치형 선을 그립니다.
원을 그립니다.
타원(Oval)을 그립니다.
공간에 하나의 점(point)을 그립니다.
사각형(네 변의 도형)을 그립니다.
사각형을 그립니다.
삼각형을 그립니다.
새로운 p5.Geometry 객체에 도형을 추가하기 시작합니다.
박스(직육면체)를 그립니다.
더 간단한 3D 도형으로부터 사용자 지정 p5.Geometry 객체를 만듭니다.
원뿔을 그립니다.
원기둥을 그립니다.
타원체를 그립니다.
도형 추가를 중단하고 새로운 p5.Geometry 객체를 반환합니다.
p5.Geometry 객체를 그래픽 처리 장치(GPU) 메모리에서 제거합니다.
평면을 그립니다.
구를 그립니다.
원환면을 그립니다.
3D 모델을 불러와 p5.Geometry 객체를 만듭니다.
p5.Geometry 객체를 캔버스에 그립니다.
베지어 곡선을 그립니다.
WebGL 모드에서 베지어 곡선을 그릴 때 사용되는 선분 수를 설정합니다.
베지어 곡선에 접선을 따라 좌표를 계산합니다.
캣멀롬 스플라인(Catmull-Rom spline) 사용하여 곡선을 그립니다.
WebGL 모드에서 스플라인 곡선을 그리는 데 사용되는 선분 수를 설정합니다.
보간법을 사용하여 스플라인 곡선을 따라 좌표를 계산합니다.
스플라인 곡선을 따라 접점 위의 좌표를 계산합니다.
curve() 및 curveVertex() 함수를 통해 그려지는 곡선의 형태를 조정합니다.
사용자 정의 도형에 꼭짓점을 추가하기 시작합니다.
함수는 사용자 정의 도형에 베지어 곡선 선분을 추가합니다.
사용자 정의 도형에 스플라인 곡선 세그먼트를 추가합니다.
>평면 도형 내부에 여백 생성을 중지합니다.
사용자 지정 3D 도형의 꼭짓점/정점(vertex)에 대한 법선 벡터를 설정합니다.
사용자 정의 도형에 2차 베지어 곡선(quadratic Bézier curve)을 추가합니다.
사용자 정의 도형에 꼭짓점을 추가합니다.
평면 도형 내부에 빈 공간을 만들기 시작합니다.
타원, 원, 호가 그려지는 위치를 변경합니다.
일부 기능을 계단식(aliased) 가장자리로 그립니다.
직사각형과 정사각형이 그려지는 위치를 변경합니다.
선의 양 끝 부분 렌더링 스타일을 설정합니다.
선분을 연결하는 이음새(joint)의 스타일을 설정합니다.
점, 선 및 도형의 윤곽에 사용되는 선의 너비를 설정합니다.
Blends multiple colors to find a color between them.
글꼴을 불러와 p5.Font 객체를 생성합니다
캔버스에 텍스트를 그립니다.
text() 함수에서 사용할 글꼴을 설정합니다.
text()를 호출할 때 텍스트가 정렬되는 방식을 설정합니다.
현재 글꼴의 크기에서 상단값를 계산합니다.
현재 글꼴의 크기에서 하단값을 계산합니다.
text()를 호출할 때의 텍스트 줄 간격을 설정합니다.
text()를 호출할 때의 글꼴 크기를 설정합니다.
text()를 호출할 때의 시스템 글꼴의 스타일을 설정합니다.
text()가 호출될 때 그려진 텍스트 문자열의 최대 너비를 계산합니다.
text()가 호출될 때 텍스트 줄바꿈(wrapping)의 스타일을 설정합니다.
이미지를 캔버스에 그립니다.
image() 호출 시 이미지가 그려지는 위치를 변경합니다.
이미지를 로드하여 p5.Image 객체를 생성합니다.
tint()로 설정된 현재 틴트를 제거합니다.
스케치에서 GIF를 생성하고 파일로 저장합니다.
색상을 사용하여 이미지에 틴트(색조, tint)를 적용합니다.
p5.Image 객체를 생성합니다.
현재 캔버스를 이미지로 저장합니다.
캔버스에서 이미지로 저장할 수 있는 프레임 시퀀스(sequence)를 캡처합니다.
다른 이미지로부터 픽셀의 영역을 복사합니다.
소스 이미지의 픽셀을 캔버스의 영역으로 복사합니다.
이미지에 이미지 필터를 적용합니다.
캔버스에서 픽셀 또는 픽셀 영역을 가져옵니다.
캔버스의 각 픽셀의 현재 값을 pixels 배열에 불러옵니다.
캔버스의 각 픽셀의 색상을 포함하는 배열입니다.
픽셀의 색상을 설정하거나 이미지를 캔버스에 그립니다.
pixels 배열에 있는 RGBA 값으로 캔버스를 업데이트합니다.
커서의 모양을 변경합니다.
마지막 프레임을 그리는 데 걸린 시간을 밀리초 단위로 추적하는 Number 변수입니다.
스크린 리더가 읽을 수 있는 캔버스에 대한 설명을 생성합니다.
스크린 리더가 읽을 수 있는 캔버스 위의 각 요소에 대한 설명을 생성합니다
디스플레이의 현재 픽셀 밀도를 반환합니다.
화면 디스플레이의 높이가 저장된 Number 변수입니다.
화면 디스플레이의 너비가 저장된 Number 변수입니다.
브라우저에 초점(focus)이 맞춰지면 true, 그렇지 않으면 false의 값을 가지는 Boolean 변수입니다.
스케치가 시작된 이후 그려진 프레임의 수를 추적하는 Number 변수입니다.
초당 그려지는 프레임 수를 설정합니다.
Toggles full-screen mode or returns the current mode.
목표 프레임 속도를 반환합니다.
스케치의 현재 URL을 String타입으로 반환합니다.
현재 URL 매개변수들을 Object 타입으로 반환합니다.
현재 URL 경로를 String이 담긴 Array 타입으로 반환합니다.
스크린 리더가 읽을 수 있는 캔버스 위의 모양에 대한 설명을 생성합니다.
캔버스의 높이가 픽셀 단위로 저장된 Number 변수입니다.
뷰에서 커서를 숨깁니다.
픽셀 밀도를 설정하거나 현재의 밀도를 반환합니다.
웹 브라우저의 콘솔에 글자를 표시합니다.
사용 중인 WebGL 버전의 값을 가지는 String 변수입니다.
캔버스의 너비가 픽셀 단위로 저장된 Number 변수입니다.
브라우저 뷰포트의 높이가 저장된 Number 변수입니다.
브라우저 창의 크기를 조절할 때 호출되는 함수입니다.
브라우저 뷰포트의 너비가 저장된 Number 변수입니다.
A class to describe a camera for viewing a 3D sketch.
빛의 반사색을 설정합니다.
Get the shader used when no lights or materials are applied.
Get the default shader used with lights, materials, and textures.
Get the shader used by normalMaterial().
Get the shader used when drawing the strokes of shapes.
3D 스케치에서 방향성을 명확히 하기 위해 그리드와 축 아이콘을 추가합니다.
3D 스케치에서 debugMode()를 끕니다.
마우스, 트랙패드, 또는 터치스크린을 사용하여 3D 스케치 주위를 회전할 수 있게 해줍니다.
도형의 표면 재질의 주변색을 설정합니다.
p5.Shader 객체를 생성하여 filter() 함수와 함께 사용합니다.
새로운 p5.Shader 객체를 생성합니다.
도형의 표면 재질의 발광색을 설정합니다.
정점(vertex)과 프래그먼트(fragment) 셰이더를 로드하여 p5.Shader 객체를 생성합니다.
specularMaterial()의 금속성 양을 설정합니다.
현재 재질을 일반(Normal) 재질로 설정합니다.
기본 셰이더로 복원합니다.
화면을 그리는 도중에 적용할 p5.Shader 객체를 설정합니다.
specularMaterial()의 광택 양을 설정합니다.
도형의 표면 재질의 반사색을 설정합니다.
도형에 사용할 텍스처를 설정합니다.
사용자 지정 도형에 적용되는 텍스처의 좌표계를 변경합니다.
도형의 uv 좌표가 질감의 범위를 벗어날 때 질감의 동작 방식을 변경합니다.
모든 방향에서 비추는 빛을 생성합니다.
한 방향으로 빛을 내는 빛을 생성합니다.
이미지에서 주변광을 생성합니다.
pointLight() 및 spotLight()의 감쇠율을 설정합니다.
장면에 주변광(ambientLight)과 방향성 광원(directionalLight)을 배치합니다
스케치에서 모든 빛을 제거합니다.
몰입감 있는 3D 배경을 생성합니다.
지정된 점에서 모든 방향으로 빛을 발하는 조명을 생성합니다.
한 지점에서 한 방향으로 빛을 내는 조명을 생성합니다.
3D 스케치에서 현재 카메라의 위치와 방향을 설정합니다.
새 p5.Camera 객체를 만들고 현재(활성) 카메라로 설정합니다.
3D 스케치에서 현재 카메라의 절두체(frustum)를 설정합니다.
3D 스케치에서 선에 대해 원근감을 활성화하거나 비활성화합니다.
3D 스케치에서 현재 카메라에 대한 정사영을 설정합니다.
3D 스케치에서 현재 카메라의 원근 투영을 설정합니다.
3D 스케치의 현재(활성) 카메라를 설정합니다.
셰이더를 하나의 드로잉 콘텍스트에서 다른 드로잉 콘텍스트로 복사합니다.
셰이더의 유니폼 (전역) 변수를 설정합니다.
Logs the hooks available in this shader, and their current implementation.
Returns a new shader, based on the original, but with custom snippets of shader code replacing default behaviour.
Sets the way colors blend when added to the canvas.
Clears the depth buffer in WebGL mode.
Creates a canvas element on the web page.
Creates and a new p5.Framebuffer object.
Creates a p5.Graphics object.
A system variable that provides direct access to the sketch's <canvas> element.
Removes the default canvas.
Resizes the canvas to a given width and height.
Set attributes for the WebGL Drawing context
Toggles the framebuffer's autosizing mode or returns the current mode.
Begins drawing shapes to the framebuffer.
An object that stores the framebuffer's color data.
Creates a new p5.Camera object to use with the framebuffer.
An object that stores the framebuffer's depth data.
Draws to the framebuffer by calling a function that contains drawing instructions.
Stops drawing shapes to the framebuffer.
Gets a pixel or a region of pixels from the framebuffer.
Loads the current value of each pixel in the framebuffer into its pixels array.
Sets the framebuffer's pixel density or returns its current density.
An array containing the color of each pixel in the framebuffer.
Deletes the framebuffer from GPU memory.
Resizes the framebuffer to a given width and height.
Updates the framebuffer with the RGBA values in the pixels array.
Creates a new p5.Framebuffer object with the same WebGL context as the graphics buffer.
Removes the graphics buffer from the web page.
Resets the graphics buffer's transformations and lighting.
숫자의 절댓값을 계산합니다.
어떤 숫자에 가장 가까우면서 그 숫자보다 크거나 같은 정수 값을 계산합니다.
최솟값과 최댓값 사이로 숫자를 제한합니다.
두 점 사이의 거리를 계산합니다.
오일러 수 e(2.71828...)를 어떤 수만큼 곱한 거듭제곱을 계산합니다.
어떤 숫자에 가장 가까우면서 그 숫자보다 작거나 같은 정수 값을 계산합니다.
어떤 숫자의 분수 부분을 계산합니다.
특정한 증가에 대하여 두 숫자 사이의 숫자를 계산합니다.
어떤 숫자의 자연 로그(밑이 e인 로그)를 계산합니다.
벡터의 크기, 또는 길이를 계산합니다.
한 범위에서 다른 범위로 숫자를 다시 매핑합니다.
여러 개의 숫자 중 가장 큰 값을 반환합니다.
여러 개의 숫자 중 가장 작은 값을 반환합니다.
한 범위의 어떤 숫자를 0과 1 사이의 값으로 매핑합니다.
2^3과 같은 지수 식을 계산합니다.
어떤 숫자에 가장 가까운 정수를 계산합니다.
어떤 숫자의 제곱을 계산합니다.
어떤 숫자의 제곱근을 계산합니다.
조정이 가능하며 자연스러운 느낌을 줄 수 있는 임의의 숫자를 반환합니다.
noise() 함수에 의해 생성된 노이즈의 특성을 조정합니다.
noise() 함수의 시드 값을 결정합니다.
배열에서 임의의 숫자나 임의의 요소를 반환합니다.
가우시안 또는 정규 분포에 맞는 임의의 숫자를 반환합니다.
random() 과 randomGaussian() 함수로 시드 값을 설정합니다.
새로운 p5.Vector 객체를 생성합니다.
각도 측정에 사용되는 단위 체계를 변경합니다.
숫자의 아크 사인 값을 계산합니다.
숫자의 아크 탄젠트 값을 계산합니다.
점, 원점, 그리고 양의 x축에 의해 형성된 각도를 계산합니다.
각도의 코사인을 계산합니다.
라디안으로 측정된 각도를 각도(degree) 단위로 변환합니다.
도로 측정된 각도를 라디안 값으로 변환합니다.
각도의 사인값을 계산합니다.
각도의 탄젠트 값을 계산합니다
Method for executing an HTTP request
Method for executing an HTTP GET request
Method for executing an HTTP POST request
This method is suitable for fetching files up to size of 64MB.
Loads a JSON file to create an Object.
Loads a text file to create an Array.
Reads the contents of a file or URL and creates a p5.Table object with its values
Loads an XML file to create a p5.XML object.
Creates a new p5.PrintWriter object.
A class to describe a print stream.
Saves a given element(image, text, json, csv, wav, or html) to the client's computer
Saves an Object or Array to a JSON file.
Saves an Array of Strings to a file, one per line.
Writes the contents of a Table object to a file
Returns the current day as a number from 1–31.
Returns the current hour as a number from 0–23.
Returns the number of milliseconds since a sketch started running.
Returns the current minute as a number from 0–59.
Returns the current month as a number from 1–12.
Returns the current second as a number from 0–59.
Returns the current year as a number such as 1999.
Use addColumn() to add a new column to a Table object
Use addRow() to add a new row of data to a p5.Table object
Removes all rows from a Table
An array containing the names of the columns in the table, if the "header" the table is loaded with the "header" parameter.
Finds the first row in the Table that contains the value provided, and returns a reference to that row
Finds the rows in the Table that contain the value provided, and returns references to those rows
Retrieves a value from the Table's specified row and column
Retrieves all table data and returns it as a multidimensional array.
Retrieves all values in the specified column, and returns them as an array
Returns the total number of columns in a Table.
Retrieves a Float value from the Table's specified row and column
Retrieves all table data and returns as an object
Returns a reference to the specified p5.TableRow
Returns the total number of rows in a Table.
Gets all rows from the table
Retrieves a String value from the Table's specified row and column
Finds the first row in the Table that matches the regular expression provided, and returns a reference to that row
Finds the rows in the Table that match the regular expression provided, and returns references to those rows
Use removeColumn() to remove an existing column from a Table object
Removes a row from the table object.
Removes any of the specified characters (or "tokens").
An array containing the p5.TableRow objects that make up the rows of the table
Stores a value in the Table's specified row and column
Stores a Float value in the Table's specified row and column
Stores a String value in the Table's specified row and column
Trims leading and trailing whitespace, such as spaces and tabs, from String table values
Retrieves a value from the TableRow's specified column
Retrieves a Float value from the TableRow's specified column
Retrieves an String value from the TableRow's specified column
Stores a value in the TableRow's specified column
Stores a Float value in the TableRow's specified column
Stores a String value in the TableRow's specified column
Adds a new child element and returns a reference to it.
Returns the number of attributes the element has.
Returns the first matching child element as a new p5.XML object.
Returns an array with the element's child elements as new p5.XML objects.
Returns the element's content as a String.
Returns the element's name as a String.
Return an attribute's value as a Number.
Returns the element's parent element as a new p5.XML object.
Return an attribute's value as a string.
Returns true if the element has a given attribute and false if not.
Returns true if the element has child elements and false if not.
Returns an Array with the names of the element's attributes.
Returns an array with the names of the element's child elements as Strings.
Removes the first matching child element.
Returns the element as a String.
Sets an attribute to a given value.
Sets the element's content.
Sets the element's tag name.
The system variable accelerationX always contains the acceleration of the device along the x axis
The system variable accelerationY always contains the acceleration of the device along the y axis
The system variable accelerationZ always contains the acceleration of the device along the z axis
The deviceMoved() function is called when the device is moved by more than the threshold value along X, Y or Z axis
The system variable deviceOrientation always contains the orientation of the device
The deviceShaken() function is called when the device total acceleration changes of accelerationX and accelerationY values is more than the threshold value
The deviceTurned() function is called when the device rotates by more than 90 degrees continuously.
The system variable pAccelerationX always contains the acceleration of the device along the x axis in the frame previous to the current frame
The system variable pAccelerationY always contains the acceleration of the device along the y axis in the frame previous to the current frame
The system variable pAccelerationZ always contains the acceleration of the device along the z axis in the frame previous to the current frame
The system variable pRotationX always contains the rotation of the device along the x axis in the frame previous to the current frame
The system variable pRotationY always contains the rotation of the device along the y axis in the frame previous to the current frame
The system variable pRotationZ always contains the rotation of the device along the z axis in the frame previous to the current frame
The system variable rotationX always contains the rotation of the device along the x axis
The system variable rotationY always contains the rotation of the device along the y axis
The system variable rotationZ always contains the rotation of the device along the z axis
The setMoveThreshold() function is used to set the movement threshold for the deviceMoved() function
The setShakeThreshold() function is used to set the movement threshold for the deviceShaken() function
When a device is rotated, the axis that triggers the deviceTurned() method is stored in the turnAxis variable
요소가 변경될 때 함수를 호출합니다.
다른 웹 페이지로 연결하는 <a> 요소를 생성합니다.
간단한 오디오 재생을 위한 숨겨진<audio> 요소를 생성합니다.
<button></button> 요소를 생성합니다.
웹캠 또는 마이크로부터 오디오/비디오 스트림을 캡처(capture)하는 <video> 요소를 생성합니다.
체크박스 <input></input> 요소를 생성합니다.
색상 선택 도구 요소를 생성합니다.
<div></div> 요소를 생성합니다.
새로운 p5.Element 객체를 생성합니다.
'file'을 입력받는 <input></input> 요소를 생성합니다.
캔버스 밖에 나타날 수 있는 <img> 요소를 생성합니다.
텍스트 <input></input> 요소를 생성합니다.
<p>
라디오 버튼 요소를 생성합니다.
드롭다운 메뉴 <select></select> 요소를 생성합니다.
슬라이더 <input></input> 요소를 생성합니다.
<span></span> 요소를 생성합니다.
간단한 오디오/비디오를 재생할 수 있는 <video> 요소를 생성합니다.
요소가 입력을 받을 때 함수를 호출합니다.
이벤트 핸들러를 포함하여 p5.js에 의해 생성된 모든 요소를 제거합니다.
페이지에서 전달된 CSS 선택자 문자열과 일치하는 첫 번째 요소를 검색합니다.
페이지에서 주어진CSS 선택자 문자열과 일치하는 모든 요소를 검색합니다.
Adds a value to the end of an array
Copies an array (or part of an array) to another array
Concatenates two arrays, maps to Array.concat()
Reverses the order of an array, maps to Array.reverse()
Decreases an array by one element and returns the shortened array, maps to Array.pop().
Shuffles the elements of an array.
Sorts an array of numbers from smallest to largest, or puts an array of words in alphabetical order
Inserts a value or an array of values into an existing array
Extracts an array of elements from an existing array
Converts a Boolean, String, or Number to its byte value.
Converts a Number or String to a single-character String.
Converts a String to a floating point (decimal) Number.
Converts a Number to a String with its hexadecimal value.
Converts a Boolean, String, or decimal Number to an integer.
Converts a Boolean or Number to String.
Converts a single-character String to a Number.
Converts a String with a hexadecimal value to a Number.
Creates a new instance of p5.NumberDict using the key-value pair or object you provide.
Creates a new instance of p5.StringDict using the key-value pair or the object you provide.
A simple Dictionary class for Strings.
Removes all items in the web browser's local storage.
Returns a value in the web browser's local storage.
Removes an item from the web browser's local storage.
Stores a value in the web browser's local storage.
Combines an array of strings into one string.
Applies a regular expression to a string and returns an array with the first match.
Applies a regular expression to a string and returns an array of matches.
Converts a Number into a String with a given number of digits.
Converts a Number into a String with commas to mark units of 1,000.
Converts a Number into a String with a plus or minus sign.
Converts a positive Number into a String with an extra space in front.
Splits a String into pieces and returns an array containing the pieces.
Removes whitespace from the start and end of a String without changing the middle.
Add the given number to the value currently stored at the given key
Divide the given number with the value currently stored at the given key
Return the highest key currently used in the Dictionary.
Return the highest number currently stored in the Dictionary.
Return the lowest key currently used in the Dictionary.
Return the lowest number currently stored in the Dictionary.
Multiply the given number with the value currently stored at the given key
Subtract the given number from the value currently stored at the given key
Removes all previously stored key-value pairs from the Dictionary.
Creates a new key-value pair in the Dictionary.
Returns the value stored at the given key.
Returns true if the given key exists in the Dictionary, otherwise returns false.
Logs the set of items currently stored in the Dictionary to the console.
Removes the key-value pair stored at the given key from the Dictionary.
Converts the Dictionary into a JSON file for local download.
Converts the Dictionary into a CSV file for local download.
Updates the value associated with the given key in case it already exists in the Dictionary
Returns the number of key-value pairs currently stored in the Dictionary.
Turns off the parts of the Friendly Error System (FES) that impact performance.
A function that's called repeatedly while the sketch runs.
Returns true if the draw loop is running and false if not.
Resumes the draw loop after noLoop() has been called.
Stops the code in draw() from running repeatedly.
Ends a drawing group that contains its own styles and transformations.
A function that's called once to load assets before the sketch runs.
Begins a drawing group that contains its own styles and transformations.
Runs the code in draw() once.
Removes the sketch from the web page.
A function that's called once when the sketch begins running.
AUTO allows us to automatically set the width or height of an element (but not both), based on the current height and width of the element
HSB (hue, saturation, brightness) is a type of color model
The default, two-dimensional renderer.
Version of this p5.js.
One of the two render modes in p5.js, used for computationally intensive tasks like 3D rendering and shaders.
One of the two possible values of a WebGL canvas (either WEBGL or WEBGL2), which can be used to determine what capabilities the rendering environment has.
Prints a message to the web browser's console.
A list that keeps several pieces of data in order.
A value that's either true or false.
A number that can be positive, negative, or zero.
A container for data that's stored as key-value pairs.
A sequence of text characters.