템닉의 개발저장소

Parameter에는 세가지 대분류가 있다.

Creating Parameters에는 총 6가지 기능이 존재한다. (https://codea.io/reference/)
parameter.number, parameter.integer, parameter.color, parameter.boolean, parameter.text, parameter.action
이 프로젝트에서는 number와 integer만 쓰였다.

Creating Parameters

1. parameter.number

이 함수는 뷰어 안에 코드에서 전역 변수로 사용할 수 있는 시각적 슬라이더를 만들어줍니다.

마치 유니티 인스펙터에 Range 코드를 통해 슬라이더를 만드는 것과 비슷한 것 같다.

Syntax
parameter.number( name )
parameter.number( name, min, max )
parameter.number( name, min, max, initial )
parameter.number( name, min, max, initial, callback )

-- name: string. 파라미터 함수는 name으로 전역 변수를 생성합니다.
-- min: int 또는 float. 매개변수가 가질 수 있는 최솟값을 지정합니다.
-- max: int 또는 float. 매개변수가 가질 수 있는 최댓값을 지정합니다.
-- initial: int 또는 float. 매개변수의 초깃값(시작값)을 지정합니다.
-- callback: function. callback은 매개변수가 변경될 때마다 호출되며 매개변수 값이 인수로 전달됩니다.

일반적으로 setup() 함수 내에서 parameter.number() 함수를 호출합니다.
위와 같이 사용하며 name 문자열은 버튼에 지정되는 레이블이며 전역변수로 노출됩니다.
callback 인수는 버튼을 눌렀을 때 호출할 콜백 함수를 지정하는데 사용하며, 유일한 인수로는 버튼의 name이 전달됩니다.
name에 지정한 문자열은 코드에서 사용할 수 있는 전역 변수로 표시됩니다. 뷰어에서 슬라이더를 조정하면 변수가 적절하게 설정됩니다. min, max, initial을 통해 최솟값, 최댓값, 초깃값을 각각 설정할 수 있습니다. 초깃값이 지정되지 않은 경우, 파라미터는 최솟값으로 설정됩니다. 최솟값이나 최댓값이 지정되지 않은 경우 [0, 10] 범위를 디폴트값으로 가집니다.
optional callback 인수는 파라미터 슬라이더가 변경될 때 호출할 콜백 함수를 지정합니다. 이 콜백 함수는 파라미터의 값을 단일 인수로 받습니다.

2. parameter.integer

이 함수는 뷰어 안에 코드에서 전역 변수로 사용할 수 있는 시각적 슬라이더를 만들어줍니다.

Syntax
parameter.integer( name )
parameter.integer( name, min, max )
parameter.integer( name, min, max, initial )
parameter.integer( name, min, max, initial, callback )

-- name: string. parameter.integer 함수는 name으로 전역 변수를 생성합니다.
-- min: int 또는 float. 매개변수가 가질 수 있는 최솟값을 지정합니다.
-- max: int 또는 float. 매개변수가 가질 수 있는 최댓값을 지정합니다.
-- initial: int 또는 float. 매개변수의 초깃값(시작값)을 지정합니다.
-- callback: function. callback은 매개변수가 변경될 때마다 호출되며 매개변수 값이 인수로 전달됩니다.

일반적으로 setup() 함수 내에서 parameter.integer() 함수를 호출합니다.
위와 비슷하나, 이 함수는 name으로 선언된 변수를 항상 정수값으로 설정합니다. 따라서, 최솟값, 최댓값, 초기값이 정수여야합니다.
name에 지정한 문자열은 코드에서 사용할 수 있는 전역 변수로 표시됩니다. 뷰어에서 슬라이더를 조정하면 변수가 적절하게 설정됩니다. min, max, initial을 통해 최솟값, 최댓값, 초깃값을 각각 설정할 수 있습니다. 초깃값이 지정되지 않은 경우, 파라미터는 최솟값으로 설정됩니다. 최솟값이나 최댓값이 지정되지 않은 경우 [0, 10] 범위를 디폴트값으로 가집니다.
optional callback 인수는 파라미터 슬라이더가 변경될 때 호출할 콜백 함수를 지정합니다. 이 콜백 함수는 파라미터의 값을 단일 인수로 받습니다.

3. parameter.color

이 기능은 코드의 전역 색상 변수를 조정하는 데 사용할 수 있는 시각적 색상 샘플을 뷰어에 만듭니다.

Syntax
parameter.color( name )
parameter.color( name, color )
parameter.color( name, color, callback )

parameter.color( name )
parameter.color( name, red, green, blue )
parameter.color( name, red, green, blue, callback )

parameter.color( name )
parameter.color( name, red, green, blue, alpha )
parameter.color( name, red, green, blue, alpha, callback )

parameter.color( name )
parameter.color( name, gray )
parameter.color( name, gray, callback )

parameter.color( name )
parameter.color( name, gray, alpha )
parameter.color( name, gray, alpha, callback )

-- name: 문자열, 이 매개변수 함수는 이 이름으로 전역 색상 변수를 생성합니다.
-- red: 정수, 색상의 빨간 구성 요소의 초기 값을 지정합니다.
-- green: 정수, 색상의 녹색 구성 요소의 초기 값을 지정합니다.
-- blue: 정수, 색상의 파란 구성 요소의 초기 값을 지정합니다.
-- gray: 정수, 색상의 회색 값 지정
-- alpha: 정수, 색상의 알파 구성 요소의 초기 값 지정
-- callback: 함수, 매개변수가 변경될 때 호출되는 함수로, 이 함수는 색상 값이 변경될 때의 값을 인수로 받습니다.

일반적으로 setup() 함수 내에서 parameter.color() 함수를 호출합니다. name으로 지정한 문자열은 색상 형식의 전역 변수로 노출됩니다.
이것은 코드 내에서 사용할 수 있습니다. 뷰어에서 컬러 샘플을 탭하면 interactive color picker가 표시되어 코드가 실행되는 동안 변수를 실시간으로 조정할 수 있습니다. 또한 color object, 그레이 스케일 값 또는 RGB triplet(알파 값을 포함할 수도 있음)로 색상의 초기 값을 설정할 수 있습니다.
optional callback 인수는 색상 값이 변경될 때 호출될 콜백 함수를 지정합니다. 이 콜백 함수는 색상 형식의 새 값이 포함된 단일 인수를 받습니다.

4. parameter.boolean

이 기능은 코드의 부울 변수를 조정하는 데 사용할 수 있는 시각적 스위치를 뷰어에 만듭니다.

Syntax
parameter.boolean( name )
parameter.boolean( name, initial )
parameter.boolean( name, initial, callback )
parameter.boolean( name, callback )

-- name: 문자열, 이 매개변수 함수는 이 이름으로 전역 변수를 생성합니다.
-- initial: boolean. boolean 매개변수의 초깃값(시작값)을 지정합니다.
-- callback: function. callback은 매개변수가 변경될 때마다 호출되며 매개변수 값이 인수로 전달됩니다.

일반적으로 setup() 함수 내에서 parameter.boolean() 함수를 호출합니다.
name으로 지정한 문자열은 코드 내에서 사용될 수 있는 전역 변수로 노출됩니다.
뷰어에서 스위치를 조절하면 변수가 적절히 설정됩니다. 또한 스위치의 초기 값을 지정할 수 있습니다. true로 설정하면 스위치가 ON 상태로 설정되고, false로 설정하면 OFF 상태로 설정됩니다.
optional callback 인수는 매개변수 스위치가 변경될 때 호출될 콜백 함수를 지정합니다. 이 콜백 함수는 매개변수의 값을 단일 인수로 받습니다.

5. parameter.text

이 기능은 뷰어에 시각적인 텍스트 상자를 만듭니다. 이 컨트롤에 입력하여 이름으로 정의된 해당 문자열 값의 내용을 조정할 수 있습니다.

Syntax
parameter.text( name )
parameter.text( name, initial )
parameter.text( name, initial, callback )
parameter.text( name, callback )

-- name: string. 이 매개변수 함수는 이 이름으로 전역 변수를 생성합니다.
-- initial: string. 매개변수의 초깃값을 지정합니다.
-- callback: function. callback은 매개변수가 변경될 때마다 호출되며 매개변수 값이 인수로 전달됩니다.

일반적으로 setup() 함수 내에서 parameter.text() 함수를 호출합니다. name으로 지정한 문자열은 코드 내에서 사용할 수 있는 전역 변수로 노출됩니다.
parameter.text 컨트롤에 텍스트를 입력하면 name으로 정의된 변수가 적절히 설정됩니다. 또한 initial을 문자열로 설정하여 텍스트 변수의 초기 내용을 지정할 수 있습니다.
optional callback 인수는 매개변수 텍스트가 변경될 때 호출될 콜백 함수를 지정합니다. 이 콜백 함수는 매개변수의 값을 단일 인수로 받습니다.

6. parameter.action

이 기능은 뷰어 사이드바에 시각적 버튼을 만듭니다. 버튼을 누르면 콜백으로 정의된 기능을 호출합니다. name 인수는 버튼의 레이블을 설정합니다.

Syntax
parameter.action( name, callback )

-- name: string. 이 매개변수 함수는 이 이름으로 전역 변수를 생성합니다.
-- callback: function. callback은 매개변수가 변경될 때마다 호출되며 매개변수 값이 인수로 전달됩니다.

Syntax
output.clear()

Codea 에서 기본적으로 제공해주는 예제인 Lines이다.

function setup()
    -- Expose parameters to control our line

    -- The start point
    parameter.number("x1",0,WIDTH,100)
    parameter.number("y1",0,HEIGHT,100)

    -- The end point
    parameter.number("x2",0,WIDTH,WIDTH-100)
    parameter.number("y2",0,HEIGHT,HEIGHT-100)

    -- The stroke width
    parameter.number("width",1,100,10)
    
    -- The line cap type
    parameter.integer("lineCap",0,2,0)
end

function draw()
    background(10,10,20)

    -- Set stroke and fill color to white
    fill(255,0,0)
    stroke(255)

    -- Update stroke width
    strokeWidth(width)

    if width < 3 then
        -- Disable smoothing for low widths
        noSmooth()
    else
        smooth()
    end

    -- Set the line cap mode
    lineCapMode(lineCap)

    -- Draw the line
    line(x1,y1,x2,y2)
end

SQL 문법처럼 대시 두개가 주석의 역할을 하는 것 같다.

background를 주석처리 해봤더니 이전의 선들이 안지워진다. 프레임 워크 자체 버그인지 백그라운드가 저 선들을 가려주는 건지는 아직 모르겠다.  관련 커뮤니티에 질문을 남겨봤다. 백그라운드 함수 자체가 이전 화면을 클리어시켜주고, 그 이후에 백그라운드 색을 채색시키는 함수였다. 그래서 이전의 선들이 그대로 남아있던 것이다.

setup 함수에 파라미터들을 넣어주고 선을 자유롭게 변경할 수 있도록 되어있다.
parameter로 만들수 있게끔 해주는 자체 기능인것 같다.