1

목차 목차

1. 프로세싱의 이해

2. Tkinter

3. Label

4. Button

5. Entry

6. Menu

2
1. 프로세싱의 이해 및 개요
프로세싱이란?

프로세싱(Processing)은 자바(Java) 언어를 기 반으로 개발된 유연한 소프트웨어 스케치북이며 시각적 예술의
맥락에서 코드를 작성하는 방법을 학습하는 언어다.
미디어아트 전용 프로그래밍 언어로, 여러 미디어 아트를 구현 할 수 있다.(https://openprocessing.org/ 참고)

Processing은 프레임 기반으로 작성되므로 애니메이션은 별도의 노력이 없어도 쉽게 구현이 된다. 기본적으
로 구현해야 하는 draw() 함수는 초당 60번의 주기로 반복적으로 호출되며 스케치한 내용을 화면에 렌더링한
다. Processing에서는 적절한 변수의 변화를 통하여 애니메이션을 간단하게 구현해 볼 수 있어 구현하려 는
본래의 목적에 더욱 집중할 수 있다.

3
2. 프로세싱의 설치 및 실행
설치 및 실행

1. 프로세싱 프로그램 설치
프로세싱 사이트(https://processing.org)에서 프로그램을 다운로드한다.

2. 파이썬 모드 설치(기본은 자바)

4
3. 프로세싱의 좌표체계
기본 화면 만들기

프로세싱은 좌상단이 원점인 직교 좌표계를 사용한다.

예를 들어 스케치의 너비가 320픽셀이고 높이가 240 픽셀인 경우 (0, 0) 좌표는 좌상단 픽셀이며,
(320, 240) 좌표는 우하단이 된다.

5
4. 프로세싱 기초 함수
Line

선은 line으로 표시하며 , line(x1, y1, x2 ,y2)로 표현한다.

X1, y1 : 선의 시작점의 좌표
X2, y2 : 선의 끝점의 좌표

line(20, 20, 80, 80)

line(20, 80, 50, 50)

6
4. 프로세싱 기초 함수
Color of line

Stroke 는 선의 색상을 나타내며, 다양한 표현 방법이 존재한다.

stroke(255, 128, 0, 128) # bright orange with 50% transparency

stroke(255) # sets the stroke color to white
stroke(255, 255, 255) # identical to the line above
stroke(255, 128, 0) # bright orange (red 255, green 128, blue 0)
stroke("#FF8000") # bright orange as a web color
stroke(255, 128, 0, 128) # bright orange with 50% transparency
line(100, 100, 50, 50)

StrokeWeight 는 선의 넓이를 표시.

strokeWeight(5)
line(100, 100, 50, 50)

7
4. 프로세싱 기초 함수
Practice

하단의 프로그램을 완성해보자.

Setup()함수는 한번만 실행

size(가로, 세로) = 화면의 크기

Draw함수는 초당 60번 주기로

반복적으로 호출되는 함수.

8
4. 프로세싱 기초 함수
Line Practice

400, 400 스케치를 만든 후,

오른쪽과 이미지와 같이 3개의 선을 그리시오.

9
4. 프로세싱 기초 함수
사각형 및 원

사각형은 rect로 표시하며 , rect(x, y, w,h)로 표현한다.

X, y : 사각형의 시작 좌표 size(500,500)
W, h : 사각형의 폭과 높이 rect(50,50,75,100) # Drawing the rectanglesize(500,500)

원은 circle로 표시하며 , circle(x, y, r)로 표현한다.

X, y : 원의 중점 좌표 size(500,500)
R : 원의 반지름 circle(250,250,100)

타원은 ellipse로 표시하며 , ellpise(x, y, w,h)로 표현한다.

X, y : 원의 중점 좌표 size(500,500)
W, h : 타원의 폭과 높이 ellipse(250,250,100,50)
10
4. 프로세싱 기초 함수
도형 색상 채우기

도형은 fill을 사용해서 색상을 채울 수 있으며, strok와 같은 색상 표현 방법을 사용한다.

size(500,500)

fill(255)
circle(100,250,50)

fill(255,0,0)
rect(250,250,50,50)

11
4. 프로세싱 기초 함수
Practice

아래의 코드를 실행하고, 원이 그려질 때 마다 랜덤한 색상으로 채워지게 변형해보자.

12
Drawing Practice 1
데칼코마니 만들기

데칼코마니란, 좌우가 대칭되어진 그림을 의미한다.

직전 페이지의 코드를 활용하여 아래와 같은 데칼코마니 프로그램을
완성해보자.

13
4. 프로세싱 기초 함수
키보드 입력 및 전역변수

하단의 코드를 실행시킨 후, 화면을 넘어가도 다시 돌아와 반복하도록 변형시켜보자.

14
15