뒤로

설명

캔버스의 가로, 세로 중심으로 나눠져 4등분 되어있습니다. 가로축과 세로축을 움직이면 배경을 이루는 사각형의 폭과 높이가 늘어나고 줄어듭니다. 그리고 사각형의 중앙에 위치해 있는 원의 크기와 모양도 배경의 폭과 높이에 맞춰 달라집니다.

상호작용


스케치는 설명, 상호작용, 캔버스 세 개의 부분으로 구성되어 있습니다.

1. 설명 부분은 스케치를 열었을 때 캔버스에 그려져 있는 이미지를 설명하고, 이미지와 상호작용하는 방법을 설명합니다. 그리고 해당 관점에 기초해서 스케치가 만들어진 의도를 담고 있습니다.

2. 캔버스 부분은 이미지를 보여주는 부분입니다. 상호작용을 통해 변화하는 이미지를 확인할 수 있습니다.

3. 상호작용 부분은 캔버스에 보이는 이미지와 상호작용하는 부분입니다. 상호작용하는 방법은 스케치마다 다릅니다. 상호작용하는 방법은 캔버스에 직접 상호작용, 슬라이더, 상태 선택, 버튼 이렇게 네 가지 종류가 있습니다.

3_1. 캔버스에 직접 상호작용은 스케치마다 방법이 다르기 때문에 글로 설명되어 있습니다.
3_2. 슬라이더는 두 개의 값 사이를 조절할 때 사용합니다.
3_3. 상태 선택은 두 가지나 세 가지 모드 중 하나를 선택할 때 사용합니다.
3_4. 버튼은 새로운 색상이나 새로고침과 같이 한 번 입력할 때 사용합니다.
3_5. 이미지 저장 버튼은 모든 스케치의 상호작용 부분의 마지막에 위치해 있습니다. 이미지 저장 버튼을 누르면 현재 캔버스에 보이는 이미지를 본인의 컴퓨터에 png파일로 저장합니다.