처리 언어에 대한 궁극적인 가이드 1부: 기본 사항

게시 됨: 2022-03-11

당신은 지루함과 당신의 창의력을 사용하기 위해 가려움으로 고군분투하고 있습니다. 시각적으로 인상적이고 예술적인 것을 만들고 싶습니다. 아니면 프로그래밍을 배우고 가능한 한 빨리 인상적인 것을 만들고 싶을 수도 있습니다. 그렇다면 처리 언어가 올바른 방법입니다.

지금까지 작업한 모든 프로그래밍 언어 중에서 Processing은 의심할 여지 없이 가장 재미있는 언어 중 하나였습니다. 배우기 쉽고 이해하고 사용하기 쉽지만 매우 강력한 언어입니다. 코드 줄로 빈 캔버스에 그림을 그리는 것과 거의 같습니다. 창의력을 제한하는 엄격한 규칙이나 지침은 없으며 유일한 제한은 상상력입니다.

처리 언어에 대한 궁극적인 가이드 1부: 기본 사항

대학에서 나는 고등학생들을 모아서 처리를 가르치는 프로그램의 조교였습니다. 그들 중 대부분은 강력한 프로그래밍 배경이 없었고 일부는 이전에 단 한 줄의 코드도 작성하지 않았습니다. 단 5일 만에 그들은 언어를 배우고 자신만의 간단한 게임을 만들어야 했습니다. 성공률은 거의 100퍼센트였고, 우리는 거의 실패를 겪지 않았습니다. 이 기사에서 이것이 바로 우리가 할 일입니다. 전체 프로그램을 두 부분으로 축소했습니다. 먼저 언어에 대해 이야기하겠습니다. 기본 개요, 처리 연습을 제공하고 몇 가지 팁과 트릭을 제공합니다. 그런 다음 다음 파트에서는 ​​단계별로 간단한 게임을 빌드하고 각 단계에 대해 자세히 설명합니다. 또한 게임이 웹 브라우저에서 실행될 수 있도록 p5js를 사용하여 게임 코드를 JavaScript로 변환하겠습니다.

당신이 이미 알고 있어야 할 것

이 기사를 이해하고 쉽게 따르려면 프로그래밍 기본 사항에 대해 이야기하지 않을 것이므로 프로그래밍에 대한 기본 지식이 있어야 합니다. 나는 대부분 고급 프로그래밍 개념을 다루지 않을 것이므로 피상적 인 이해가 도움이 될 것입니다. 객체 지향 프로그래밍(OOP)과 같은 낮은 수준의 아이디어와 개념에 대해 이야기하는 부분이 있지만 중요하지는 않습니다. 언어의 구조에 관심이 있는 호기심 많은 독자를 위한 것입니다. 알고 싶지 않다면 그 부분을 건너뛸 수 있습니다. 그 외에는 이 멋진 언어를 배우고자 하는 야망과 자신만의 게임을 만들고자 하는 열정만 있으면 됩니다!

팔로우 방법

저는 항상 시도하고 실험하여 프로그래밍을 배우는 것을 찬성합니다. 자신의 게임에 빨리 뛰어들수록 프로세싱에 더 빨리 익숙해질 것입니다. 이것이 나의 첫 번째 제안이 될 것이므로 자신의 환경에서 모든 단계를 시도하십시오. 프로세싱에는 간단하고 사용하기 쉬운 IDE(예: 코드 편집기)가 있습니다. 따라하기 위해 다운로드 및 설치해야 하는 유일한 것입니다. 여기에서 다운로드할 수 있습니다.

시작하겠습니다!

처리 언어란 무엇입니까?

이 섹션에는 언어, 구조 및 컴파일 및 실행 프로세스에 대한 몇 가지 참고 사항에 대한 간략한 기술 개요가 포함되어 있습니다. 세부 사항에는 프로그래밍 및 Java 환경에 대한 고급 지식이 포함됩니다. 지금은 세부 사항에 신경 쓰지 않고 자신의 게임을 배우고 코딩하기를 기다릴 수 없다면 "처리의 기초" 섹션으로 건너뛸 수 있습니다.

프로세싱은 말하자면 코드로 스케치할 수 있는 시각적 프로그래밍 언어입니다. 그러나 그것은 그 자체로 정확히 프로그래밍 언어가 아니며 "Java-esque" 프로그래밍 언어라고 부르는 것입니다. 즉, 언어가 Java 플랫폼 위에 구축되었지만 정확히 Java 자체는 아닙니다. Java를 기반으로 하며 실행 버튼을 누르면 모든 코드가 사전 처리되고 Java 코드로 직접 변환됩니다. Java의 PApplet 클래스는 모든 Processing 스케치의 기본 클래스입니다. 예를 들어 몇 가지 기본 처리 코드 블록을 살펴보겠습니다.

 public void setup() { // setup codes goes here } public void draw() { // draw codes goes here }

이러한 코드 블록은 다음과 같이 변환됩니다.

 public class ExampleFrame extends Frame { public ExampleFrame() { super("Embedded PApplet"); setLayout(new BorderLayout()); PApplet embed = new Embedded(); add(embed, BorderLayout.CENTER); embed.init(); } } public class Embedded extends PApplet { public void setup() { // setup codes goes here } public void draw() { // draw codes goes here } }

처리 코드 블록이 Java의 PApplet에서 확장된 클래스로 래핑되었음을 알 수 있습니다. 따라서 처리 코드에서 정의한 모든 클래스(있는 경우)는 내부 클래스로 처리됩니다.

프로세싱이 Java 기반이라는 사실은 특히 Java 개발자인 경우 많은 이점을 제공합니다. 구문이 익숙할 뿐만 아니라 스케치에 Java 코드, 라이브러리, JAR 파일 포함, Java 애플리케이션에서 직접 처리 애플릿 사용, 클래스 정의 및 int와 같은 표준 데이터 유형 사용과 같은 작업을 수행할 수 있는 기능을 제공합니다. , float, char 등. 설정하는 데 시간을 할애하려는 경우 Eclipse에서 직접 Pocessing 코드를 작성할 수도 있습니다. 할 수 없는 한 가지는 Processing 스케치에서 AWT 또는 Swing 구성 요소를 사용하는 것입니다. 이는 Processing의 반복 특성과 충돌하기 때문입니다. 그러나 걱정하지 마십시오. 우리는 이 기사에서 그런 멋진 일을 하지 않을 것입니다.

처리의 기초

처리 코드는 설정 및 그리기 블록의 두 가지 주요 부분으로 구성됩니다. 설정 블록은 코드가 실행될 때 한 번 실행되고 그리기 블록은 계속 실행됩니다. Processing의 기본 개념 은 프로그램이 종료될 때까지 드로 블록 내에서 작성한 내용이 위에서 아래로 초당 60번 실행된다는 것 입니다. 우리는 바로 이 아이디어를 활용하여 모든 것을 구축할 것입니다. 우리는 물체를 움직이게 만들고, 점수를 유지하고, 충돌을 감지하고, 중력을 구현하고, 이 기능을 사용하여 거의 모든 다른 작업을 수행합니다. 이 새로 고침 루프는 우리 프로젝트의 심장 박동입니다 . 이 하트비트를 사용하여 코드에 생명을 불어넣는 방법은 이후 섹션에서 설명하겠습니다. 먼저 Processing IDE를 소개하겠습니다.

처리 IDE

이 시점까지 읽었지만 여전히 Processing IDE를 다운로드하지 않았다면 계속 진행하십시오. 이 기사 전체에서 나는 스스로 시도할 수 있는 몇 가지 쉬운 작업에 대해 간략히 설명할 것입니다. IDE가 실행 중일 때만 연습할 수 있습니다. 다음은 처리 IDE에 대한 간략한 소개입니다. 매우 간단하고 이해하기 쉬우므로 간략히 설명하겠습니다.

예상대로 실행 및 중지 버튼은 제안한 대로 작동합니다. 실행 버튼을 클릭하면 코드가 컴파일되고 실행됩니다. 본질적으로 처리 프로그램은 종료되지 않으며 방해를 받을 때까지 영원히 실행됩니다. 프로그래밍 방식으로 종료할 수 있지만 종료하지 않으면 중지 버튼을 사용할 수 있습니다.

실행 및 중지 오른쪽에 나비 모양의 버튼이 디버거 입니다. 디버거를 사용하려면 이에 관한 완전히 다른 기사가 필요합니다. 이 기사의 범위를 벗어나므로 지금은 무시해도 됩니다. 디버거 버튼 옆에 있는 드롭다운은 모드를 추가/설정하는 곳입니다. Mod 는 몇 가지 특정 기능을 제공하고, Android용 코드를 작성할 수 있게 하고, Python으로 코드를 작성할 수 있게 하는 등의 작업을 수행합니다. 모드도 범위를 벗어나므로 기본 Java 모드로 유지하고 무시할 수도 있습니다.

코드 편집기의 창은 스케치가 일반적으로 실행되는 곳입니다. 이미지에서는 크기나 배경색과 같은 속성을 설정하지 않았거나 아무 것도 그리지 않았기 때문에 비어 있습니다.

코드 편집기에 대해 할 이야기는 별로 없으며 단순히 코드를 작성하는 곳입니다. 줄 번호 (!) 가 있습니다. 이전 버전의 Processing에는 그런 항목이 없었으며 처음 봤을 때 얼마나 기뻤는지 상상도 할 수 없습니다.

아래 블랙박스는 콘솔 입니다. 빠른 디버깅을 위해 인쇄할 때 사용할 것입니다. 콘솔 옆의 오류 탭에는 오류가 표시됩니다. 이것은 또한 Processing 3.0과 함께 제공되는 새로운 유용한 기능입니다. 이전 버전에서는 오류가 콘솔에 인쇄되어 추적하기 어려웠습니다.

설정 블록

앞에서 언급했듯이 설정 블록은 프로그램이 시작될 때 한 번 실행됩니다. 이미지나 사운드를 로드하는 것과 같이 구성을 만들고 한 번만 실행하려는 작업에 사용할 수 있습니다. 다음은 설정 블록의 예입니다. 자신의 환경에서 이 코드를 실행하고 결과를 직접 확인하십시오.

 public void setup() { // Size of our sketch will be 800x600, // and use the P2D rendering engine. size(800, 600, P2D); // We could have used this function instead of size() // fullScreen(P2D); // The background color of our sketch will be black // by default, unless specified otherwise background(0); // We could have used this to set a background image. // Note that size of our sketch should be the same as the image. // background(loadImage("test.jpg")); // Shapes and objects will be filled with red by default, // unless specified otherwise. fill(255,0,0); // Shaped and objects will have a white border by default, // unless specified otherwise. stroke(255); }

스타일(배경, 채우기, 획)과 관련된 방법은 속성 및 설정 섹션에서 설명합니다. 지금은 여기에서 설정한 설정과 구성이 전체 스케치에 어떤 영향을 미치는지 알아야 합니다. 여기에 작성된 코드는 스케치 전체에 적용할 수 있는 몇 가지 기본 규칙 세트를 설정하는 데 사용됩니다. 이 섹션에서 이해해야 하는 것은 아래 나열된 방법입니다.

size() - 이름에서 알 수 있듯이 이 함수는 스케치의 크기를 구성하는 데 사용됩니다. 설정 코드 블록의 첫 번째 줄에 있어야 합니다. 다음 형식으로 사용할 수 있습니다.

  • 크기(폭, 높이);
  • 크기(너비, 높이, 렌더러);

너비와 높이 값은 픽셀로 주어질 수 있습니다. Size 함수는 스케치가 사용할 렌더링 엔진을 설정하는 데 사용되는 세 번째 매개변수인 renderer를 허용합니다. 기본적으로 렌더러는 P2D로 설정됩니다. 사용 가능한 렌더러는 P2D(Processing 2D), P3D(Processing 3D, 스케치에 3D 그래픽이 포함될 경우 사용해야 함) 및 PDF(2D 그래픽은 Acrobat PDF 파일에 직접 그려집니다. 자세한 정보는 여기에서 찾을 수 있음)입니다. P2D 및 P3D 렌더러는 OpenGL 호환 그래픽 하드웨어를 사용합니다.

fullScreen() - Processing 3.0부터는 size() 함수 대신 fullScreen 함수를 사용할 수 있습니다. size() 함수와 마찬가지로 설정 블록의 첫 번째 줄에도 있어야 합니다. 사용법은 다음과 같습니다.

  • 전체 화면();
  • 전체 화면(디스플레이);
  • 전체 화면(렌더러);
  • 전체 화면(디스플레이, 렌더러);

매개변수 없이 사용하면 처리 스케치가 전체 화면으로 실행되고 기본 디스플레이에서 실행됩니다. '디스플레이' 매개변수는 스케치를 실행할 디스플레이를 설정하는 데 사용됩니다. 예를 들어 외부 모니터를 컴퓨터에 연결하는 경우 디스플레이 변수를 2(또는 3, 4 등)로 설정하면 스케치가 실행됩니다. 'renderer' 매개변수는 위의 size() 부분에서 설명한 대로입니다.

설정 차단

이것은 Processing의 새 릴리스와 함께 도입된 또 다른 기능입니다. 설정 및 그리기와 같은 코드 블록입니다. 가변 매개변수를 사용하여 size() 또는 fullScreen() 메서드를 정의하려는 경우에 유용합니다. 또한 Eclipse와 같은 Processing 자체 IDE 이외의 환경을 사용하는 경우 이 코드 블록에서 size() 및 smooth()와 같은 기타 스타일 속성을 정의해야 합니다. 그러나 대부분의 경우 필요하지 않을 것입니다. 확실히 이 기사에서는 그렇지 않습니다.

블록 그리기

드로 블록에 대해 이야기할 특별한 것은 없지만 모든 것이 특별합니다. 드로우 블록은 모든 마법이 일어나는 곳입니다. 초당 60번 박동하는 프로그램의 핵심입니다. 이 코드 블록에는 모든 코드 논리가 들어 있습니다. 모든 모양, 개체 등이 여기에 기록됩니다.

이 기사에서 이야기할 대부분의 코드는 그리기 블록에서 가져온 것이므로 이 코드 블록이 어떻게 작동하는지 명확하게 이해하는 것이 중요합니다. 데모를 제공하기 위해 시도해 볼 수 있는 것이 있습니다. 먼저 print() 또는 println() 메서드를 사용하여 콘솔에 무엇이든 인쇄할 수 있습니다. 인쇄 방법은 콘솔에만 인쇄하지만 println은 인쇄하고 끝에 개행을 추가하므로 각 println()은 별도의 행에 인쇄합니다.

따라서 다음 코드 블록을 살펴보십시오. 먼저 콘솔에 무엇을 인쇄할지 추측해 보십시오. 그런 다음 시도해 보십시오.

 void setup(){ } void draw(){ int x = 0; x += 1; print(x+" "); }

"1 2 3 4..."를 추측했다면 내가 잡았습니다! 이것은 프로세싱의 혼란 중 하나입니다. 이 블록이 반복적으로 실행된다는 것을 기억하십니까? 여기에서 변수를 정의하면 각 루프에서 반복해서 정의됩니다. 각 반복에서 x는 0으로 설정되고 1씩 증가하고 콘솔에 인쇄됩니다. 따라서 우리는 "1 1 1 1…"이라는 결과를 얻습니다. 이 예는 다소 명백했지만 상황이 조금 복잡해지면 혼란스러울 수 있습니다.

우리는 x를 덮어쓰는 것을 원하지 않으므로 이것을 달성하고 "1 2 3 4…" 결과를 얻을 수 있습니까? 전역 변수 를 사용하여 . 이것은 멋진 것이 아닙니다. 각 반복에서 재정의되지 않도록 그리기 블록 외부에서만 변수를 정의합니다. 또한 스케치 전체에서 변수의 범위에 도달할 수 있습니다. 아래 코드를 참조하세요.

 int x = 0; void setup(){ } void draw(){ x += 1; print(x+" "); }

블록 외부에 정의된 변수가 어떻게 작동하는지 스스로에게 물어볼 수 있습니다. 그리고 처음에 한 번 실행되기 때문에 setup() 블록을 사용하지 않은 이유는 무엇입니까? 대답은 객체 지향 프로그래밍 및 범위와 관련되어 있습니다. 익숙하지 않은 경우 이 단락을 건너뛸 수 있습니다. 처리 코드가 Java로 변환되는 방법을 설명한 부분을 참조하십시오. Java 클래스로 어떻게 래핑되는지 기억하십니까? setup() 및 draw() 블록 외부에 작성하는 변수도 래핑되므로 코드를 래핑하는 외부 클래스의 필드 로 처리됩니다. x+=1을 사용하는 것은 this.x+=1을 사용하는 것과 같습니다. 우리의 경우에도 동일하게 작동합니다. x라는 변수는 draw() 범위에 정의되어 있지 않으며 this 범위인 외부 범위가 검색됩니다. 그리고 setup() 섹션에서 변수 x를 정의하지 않은 이유는 무엇입니까? 그렇게 했다면 x가 정의된 범위는 설정 함수의 범위가 되며 draw() 블록에서 액세스할 수 없습니다.

도형 및 텍스트 그리기

이제 우리는 설정 블록을 사용하여 스케치를 구성하는 방법과 그리기 블록이 무엇을 하는지 알고 있습니다. 이제 약간의 시각적 정보를 얻고 처리의 재미있는 부분인 모양을 그리는 방법에 대해 알아볼 시간입니다.

시작하기 전에 좌표계 를 이해해야 합니다. 처리에서는 화면에 그리는 모든 개체의 좌표를 결정합니다. 좌표계는 픽셀 단위입니다. 원점(즉, 시작점)은 왼쪽 상단 모서리이므로 해당 지점을 기준으로 좌표를 지정해야 합니다. 알아야 할 또 다른 사항은 각 모양에는 서로 다른 기준점이 있다는 것입니다. 예를 들어, rect()는 왼쪽 상단 모서리를 참조점으로 가지고 있습니다. ellipse()의 경우 중심입니다. 이러한 참조점은 rectMode() 및 ellipseMode()와 같은 메서드로 변경할 수 있으며 이는 속성 및 설정 섹션에서 설명하겠습니다. 더 나은 이해를 돕기 위해 예제 그림이 제공됩니다.

이 기사는 프로세싱의 기본 개요이므로 정점이나 3D 모양과 같은 복잡한 모양은 다루지 않을 것입니다. 기본 2D 모양은 실제로 우리 자신의 게임을 만들기에 충분할 것입니다. 그림에서 도형을 그리는 방법의 예를 볼 수 있습니다. 각 모양에는 생성할 고유한 구문이 있지만 기본 아이디어는 좌표나 크기 또는 둘 다를 제공하는 것입니다. 다음은 친숙해야 하는 몇 가지 모양입니다(아래에 제공된 모든 값에 대해 'x' 및 'y'는 픽셀 단위의 x 및 y 좌표를 의미하고 'w' 및 'h'는 픽셀 단위의 너비 및 높이 값도 의미함).

point() - 단순 점, 단일 좌표만 필요합니다. 용법:

  • 점(x, y)
  • point(x, y, z) - 3차원을 사용하는 경우.

line() - 선을 생성합니다. 시작점과 끝점만 있는 선을 만들 수 있습니다. 용법:

  • 라인(x1, y1, x2, y2)
  • line(x1, y1, z1, x2, y2, z2) - 3차원을 사용하는 경우.

삼각형() - 삼각형을 생성합니다. 사용법: 삼각형(x1, y1, x2, y2, x3, y3)

quad() - 사변형을 만들기 위한 것입니다. 사용법: 쿼드(x1, y1, x2, y2, x3, y3, x4, y4)

rect() - 직사각형을 만들기 위한 것입니다. 기준점은 기본적으로 왼쪽 상단 모서리입니다(그림 참조). 사용법은 다음과 같습니다.

  • rect(x, y, w, h)
  • rect(x, y, w, h, r) - 'r'은 모서리를 둥글게 만드는 픽셀 단위의 반경을 의미합니다.
  • rect(x, y, w, h, tl, tr, br, bl) - 각각 왼쪽 위, 오른쪽 위, 오른쪽 아래, 왼쪽 아래 모서리의 반경입니다. 이것도 픽셀 단위입니다.

ellipse() - 타원 모양을 만들기 위한 것입니다. 이것은 또한 원을 만드는 데 사용되며 동일한 너비와 높이 값을 지정해야 합니다. 이 모양의 기준점은 기본적으로 중심입니다(그림 참조). 사용법은 다음과 같습니다.

  • 타원(x, y, w, h)

arc() - 호를 그립니다. 용법:

  • arc(x, y, w, h, start, stop) - 'start'와 'stop'은 호 그리기를 시작하고 멈출 각도를 결정하는 데 사용됩니다. 값은 라디안 단위입니다. "PI, HALF_PI, QUARTER_PI 및 TWO_PI"와 같은 상수를 사용할 수 있습니다.
  • arc(x, y, w, h, start, stop, mode) - 'mode' 변수는 호(문자열)의 렌더링 스타일을 결정하는 변수입니다. 사용 가능한 옵션은 "OPEN, CHORD, PIE"입니다. OPEN은 그려지지 않은 부분을 경계선 없이 둡니다. CHORD는 그려지지 않은 부분을 테두리로 완성합니다. PIE는 호를 파이 차트처럼 보이게 합니다.

화면에 텍스트를 표시하는 것은 모양을 표시하는 것과 유사하며, 기본 아이디어는 텍스트를 표시할 좌표를 결정하는 것입니다. 그러나 텍스트를 처리하는 데 더 많은 것이 있습니다. 개체에 설정과 속성을 적용하는 방법을 배우는 속성 및 설정 섹션 이후에 텍스트를 더 많이 제어할 수 있습니다. 지금은 텍스트 표시의 기본 사항을 보여 드리겠습니다. 방법은 여러 가지가 있는데 핵심만 보여드리겠습니다.

text() - 텍스트를 표시합니다. 용법:

  • text(c, x, y) - 'c'는 문자를 의미하며 모든 영숫자 문자가 표시됩니다.
  • text(c, x, y, z) - 3차원으로 작업하는 경우.
  • text(str, x, y) - 'str'은 표시할 문자열입니다.
  • text(str, x, y, z) - 3차원으로 작업하는 경우.
  • text(num, x, y) - 'num'은 표시할 숫자 값입니다.
  • text(num, x, y, z) - 3차원으로 작업하는 경우.

속성 및 설정

이 섹션에서 가장 먼저 설명해야 할 것은 객체의 속성을 설정하는 논리입니다. 채우기 색상, 배경색, 테두리, 테두리 너비, 테두리 색상, 모양 정렬, 테두리 스타일 등이 이러한 속성의 몇 가지 예가 될 수 있습니다.

속성을 설정할 때 코드가 위에서 아래 로 실행된다는 것을 기억해야 합니다. 예를 들어 "채우기" 속성을 빨간색으로 설정하면 해당 선 아래에 그려진 모든 개체는 다른 채우기 속성으로 덮어쓸 때까지 빨간색으로 채워집니다. 다른 속성에도 동일하게 적용되지만 모든 속성이 서로 덮어쓰는 것은 아닙니다. 예를 들어 "획" 속성은 "채우기" 속성을 덮어쓰지 않고 함께 작동합니다. 논리를 이해하기 위한 시각적 표현은 다음과 같습니다.

이미지에서 볼 수 있듯이 첫 번째 줄은 채우기 색상을 빨간색으로 설정하고 두 번째 줄은 획 색상을 파란색으로 설정합니다. 이제 빨간색과 파란색 선 채우기의 두 가지 활성 설정이 있습니다. 예상대로 다음 줄에 있는 개체는 무엇이든 빨간색으로 채워지고 파란색 선이 표시됩니다(해당되는 경우). 이런 식으로 이미지를 계속 조사하면 논리를 파악할 수 있습니다.

다음은 일반적으로 사용되는 몇 가지 필수 속성 및 설정입니다.

스타일링 설정

fill() - 채우기 색상을 객체로 설정합니다. 이 설정은 텍스트에 색상을 지정하는 데에도 사용됩니다. 지금은 다음 사용법만 알면 됩니다.

  • fill(r, g, b) - 빨강, 녹색 및 파랑 값을 정수로 표시
  • fill(r, g, b, a) - 추가 알파 값, 최대값은 255

noFill() - 채우기 색상을 투명하게 설정합니다.

stroke() - 획 색상을 객체로 설정합니다. Stroke 속성은 개체 주변의 선과 테두리에 적용할 수 있습니다. 지금은 다음 사용법만 알면 됩니다.

  • stroke(r, g, b) - 빨강, 녹색 및 파랑 값을 정수로 표시합니다.
  • stroke(r, g, b, a) - 추가 알파 값, 최대값은 255

noStroke() - 획을 제거합니다.

strokeWeight() - 획의 너비를 설정합니다. 용법:

  • strokeWeight(x) - x는 정수이며 획의 너비를 픽셀 단위로 나타냅니다.

background() - 배경색을 설정합니다. 지금은 다음 사용법만 알면 됩니다.

  • background(r, g, b) - 빨강, 녹색 및 파랑 값을 정수로 표시합니다.
  • background(r, g, b, a) - 추가 알파 값, 최대값은 255

정렬 설정

ellipseMode() - 타원을 정렬하는 기준점으로 사용할 위치를 설정합니다. 용법:

  • ellipseMode(mode) - 'mode'는 매개변수이며 사용 가능한 매개변수는 다음과 같습니다.
    • CENTER(기본값): 중심을 기준점으로 삼습니다.
    • RADIUS: 또한 중심을 기준점으로 사용하지만 이 모드에서 지정한 w 및 h 값은 절반으로 처리됩니다(즉, 직경 대신 반경).
    • CORNER: 왼쪽 상단 모서리를 기준점으로 사용합니다.
    • CORNERS: 처음 두 매개변수(x 및 y)를 왼쪽 위 모서리의 위치로 설정하고 마지막 두 매개변수(w 및 h)를 타원의 왼쪽 아래 모서리 위치로 설정합니다. 따라서 이 모드 "너비"와 "높이"는 관련이 없습니다. 이 경우 타원(x_tl,y_tl,x_br,y_br)으로 생각하는 것이 더 합리적입니다.

rectMode() - 사각형을 정렬하는 기준점으로 사용할 위치를 설정합니다. 용법:

  • rectMode(mode) - 'mode'는 매개변수이며 사용 가능한 매개변수는 다음과 같습니다.
    • CENTER: 중심을 기준점으로 삼습니다.
    • RADIUS: 또한 중심을 기준점으로 사용하지만 이 모드에서 지정한 w 및 h 값은 절반으로 처리됩니다.
    • CORNER(기본값): 왼쪽 상단 모서리를 기준점으로 사용합니다.
    • CORNERS: 처음 두 매개변수(x 및 y)를 왼쪽 위 모서리의 위치로 설정하고 마지막 두 매개변수(w 및 h)를 타원의 왼쪽 아래 모서리 위치로 설정합니다. 따라서 이 모드 "너비"와 "높이"는 관련이 없습니다. 이 경우 rect(x_tl,y_tl,x_br,y_br)로 생각하는 것이 더 합리적입니다.

텍스트 관련 설정

textSize() - 텍스트의 글꼴 크기를 설정합니다. 용법:

  • textSize(size) - 원하는 크기의 정수 값입니다.

textLeading() - 텍스트의 줄 높이를 설정합니다. 용법:

  • textLeading(lineheight) - 줄 사이 공간의 픽셀 값입니다.

textAlign() - 텍스트를 정렬하는 기준점으로 사용할 위치를 설정합니다. 용법.

  • textAlign(alignX) - 'alignX'는 수평 정렬을 위한 것입니다. 사용 가능: 왼쪽, 가운데, 오른쪽
  • textAlign(alignX, alignY) - 'alignY'는 수직 정렬을 위한 것입니다. 사용 가능: 상단, 하단, 중앙, 기준선.

애니메이션

지금까지 오브젝트와 텍스트를 그리는 방법을 배웠습니다. 그러나 이들의 문제는 정적이라는 것입니다. 이제 어떻게 그들을 움직이게 만들까요? 간단합니다. 좌표를 정수로 제공하는 대신 변수를 사용하여 증가/감소할 수 있습니다 . 말이 됩니까? 다음 코드를 살펴보십시오.

 // initialize x and y as 0 int x=0; int y=0; void setup(){ size(800,600); background(255); // set background color to white } void draw(){ fill(255,0,0); // fill color red stroke(0,0,255); // stroke color blue ellipseMode(CENTER); // ref. point to ellipse is its center ellipse(x, y, 20, 20); // draw the ellipse // increment x and y x+=5; y+=5; }

우리가 애니메이션을 어떻게 관리했는지 보십니까? x와 y를 전역 변수로 설정하고 초기 값을 0으로 설정했습니다. 그리기 루프에서 타원을 만들고 채우기 색상을 빨간색으로, 획 색상을 파란색으로, 좌표를 x와 y로 설정했습니다. x와 y를 증가시키면 공은 단순히 위치를 변경합니다. 하지만 이 코드에 문제가 있습니다. 눈치채셨나요? 자신을 위한 쉬운 도전으로 문제가 무엇인지 파악하고 테스트해 보십시오. 결과는 다음과 같습니다.

이런 일이 일어나도록 하려는 의도는 Processing의 반복적인 특성이 어떻게 작동하는지 깨닫게 하는 것이었습니다. "블록 그리기" 섹션의 예를 참조하세요. "1 2 3…" 대신 "1 1 1…"이 표시된 이유를 기억하십니까? 공이 흔적을 남기는 것과 같은 이유입니다. 그리기 블록이 반복될 때마다 x와 y는 5씩 증가하므로 공은 아래쪽과 오른쪽으로 5픽셀로 다시 그려집니다. 그러나 이전 반복에서 가져온 공은 보기에 남아 있습니다. 어떻게 하면 그것들을 사라지게 할 수 있습니까? 어떤 추측?

공이 남긴 자국을 없애기 위해 설정 블록에서 background(255)를 제거하고 그리기 블록의 맨 처음 줄에 붙여넣기만 하면 됩니다. 배경 코드가 설정 블록에 있을 때 처음에 한 번 실행되어 배경을 흰색으로 만들었습니다. 하지만 그것으로 충분하지 않습니다. 이전 루프에서 가져온 공을 덮기 위해 각 루프에서 배경을 흰색으로 설정해야 합니다. 배경이 첫 번째 줄이라는 것은 먼저 실행되고 기본 레이어가 됨을 의미합니다. 각 루프에서 캔버스는 흰색으로 칠해지고 새 요소는 흰색 배경 위에 그려집니다. 그래서 우리는 흔적이 없습니다.

이것이 Processing에서 사물에 애니메이션을 적용하고 객체의 좌표를 프로그래밍 방식으로 조작하여 위치를 변경하는 것의 이면에 있는 아이디어입니다. 그러나 화면에 공을 유지하는 것과 같은 멋진 일을 어떻게 할 것입니까? 아니면 중력을 구현할까요? 이 기사의 다음 부분에서 이 작업을 수행하는 방법을 가르칠 것입니다. 우리는 시도하고 구축함으로써 배울 것입니다. 우리는 그것을 하는 방법을 배우고 즉시 게임에 적용할 것입니다. 결국 우리는 완전하고 플레이 가능하며 재미있는 게임을 갖게 될 것입니다.

키보드 및 마우스 상호 작용

Processing의 키보드 및 마우스 상호 작용은 매우 쉽고 간단합니다. 이벤트마다 호출할 수 있는 메서드가 있으며, 내부에 작성한 내용은 이벤트 발생 시 한 번만 실행됩니다. 또한 루프를 활용하기 위해 그리기 블록에서 사용할 수 있는 mousePressed 및 keyPressed와 같은 전역 변수가 있습니다. 다음은 설명이 포함된 몇 가지 방법입니다.

 void setup() { size(500, 500); } void draw() { if (mousePressed) { // Codes here will be executed as long as the mouse // button is pressed if (mouseButton == LEFT){ // This lines will be executed as long as // the clicked mouse button is the left mouse // button. } } if (keyPressed) { // Codes here will be executed as long as a key // on the keyboard is pressed if (key == CODED) { // This if statement checks if the pressed key // is recognised by Processing. if (keyCode == ENTER) { // This lines will be executed if the pressed key // is the enter key. } } else{ // This lines will be executed if the pressed key // is not recognised by processing. } } } void mousePressed() { // These codes will be executed once, when mouse // is clicked. Note that mouseButton variable is // also be used here. } void keyPressed() { // These codes will be executed once, when a key // is pressed. Note that key and keyCode variables // are also usable here. }

보시다시피 마우스가 클릭되었는지 또는 어떤 키가 눌렸는지 확인하는 것은 매우 쉽습니다. 그러나 mousePressed 및 keyCode 변수에 사용할 수 있는 옵션이 더 있습니다. mousePressed 에 대해 사용 가능한 옵션은 LEFT, RIGHT 및 CENTER입니다. keyCode 에 대해 더 많은 것을 사용할 수 있습니다. 위, 아래, 왼쪽, 오른쪽, ALT, CONTROL, SHIFT, 백스페이스, TAB, ENTER, RETURN, ESC 및 DELETE.

마우스 변수에 대해 알아야 할 한 가지, 그리고 이것을 많이 사용하게 될 것은 마우스의 좌표를 얻는 방법입니다. 커서의 정확한 좌표를 얻으려면 draw() 블록에서 직접 mouseX 및 mouseY 변수를 사용할 수 있습니다. 마지막으로 살펴봐야 할 다른 유용한 방법이 많이 있습니다. 그것들은 모두 처리 참조에 문서화되어 있습니다.

결론

지금쯤이면 Processing에 익숙해질 것입니다. 그러나 여기서 멈추면 이 모든 지식이 날아갈 것입니다. 배운 내용을 가지고 놀면서 계속 연습하는 것이 좋습니다. 연습에 도움이 되도록 두 가지 연습을 제공하겠습니다. 스스로 할 수 있도록 최선을 다해야 합니다. 막히면 Google과 Processing Reference가 가장 친한 친구가 될 것입니다. 나는 첫 번째 코드에 대한 코드를 제공할 것이지만 그것들을 보는 것이 당신이 하는 마지막 일이어야 합니다.

권장 운동 1

화면의 4개 모서리 에서 시작 하여 중앙 을 다른 속도 로 이동하는 다른 색상 의 공 4개 를 만들어야 합니다. 마우스 버튼을 클릭한 상태로 유지하면 공이 고정 되어야 합니다. 그리고 마우스를 놓으면 공이 원래 위치로 돌아가 계속 움직일 수 있습니다. 그래서, 나는 이것과 같은 것을 찾고 있습니다.

실습을 직접 시도한 후 여기에서 코드를 확인할 수 있습니다.

권장 운동 2

DVD 로고가 화면 주위를 맴도는 유명한 DVD 화면 보호기를 기억하고 우리 모두는 그것이 모퉁이에 닿기를 필사적으로 기다렸습니까? 그 스크린 세이버를 복제하기를 원하지만 DVD 로고 대신 직사각형만 사용합니다. 앱을 시작할 때 화면은 검은색이어야 하고 직사각형은 임의의 위치에서 시작해야 합니다. 사각형이 모서리에 닿을 때마다 색상(및 방향)이 변경되어야 합니다. 마우스를 움직이면 사각형이 사라지고 배경색이 흰색으로 변해야 합니다(화면 보호기 아닌가요?). 이 기사에서는 이 연습에 대한 코드를 제공하지 않습니다. 구현하기 위해 최선을 다해야 하며 코드는 이 기사의 두 번째 부분에서 제공될 것입니다.

간단한 게임을 구축하기 위한 단계별 자습서인 처리에 대한 궁극적인 가이드의 두 번째 부분이 게시되었습니다.

Toptal 엔지니어링 블로그에 대한 추가 정보:

  • 처음부터 통역사 작성에 접근하는 방법