p5.js로 웃는 얼굴 그리기

이 기사에서는 p5.js 라이브러리를 사용하여 간단하지만 매력적인 그림인 웃는 얼굴을 만드는 방법을 살펴보겠습니다. p5.js는 대화형 그래픽과 애니메이션을 쉽게 만들 수 있는 JavaScript 라이브러리입니다. 코드 기반의 시각적 프로젝트를 만들고 싶은 아티스트, 디자이너, 개발자에게 이상적입니다.

p5.js란 무엇입니까?

p5.js는 시각적 프로그래밍의 세계를 접근 가능하게 만드는 것을 목표로 하는 라이브러리입니다. 간단한 방법으로 도형을 그리고, 애니메이션을 만들고, 사용자와 상호 작용할 수 있는 일련의 기능을 제공합니다. JavaScript로 작성되었지만 눈길을 끄는 비주얼을 만들기 위해 사용자가 이 언어에 대한 전문가가 될 필요는 없습니다.

p5.js의 스케치 기본 구조

p5.js의 스케치에는 두 가지 주요 기능이 있습니다.

1. setup(): 처음에 한 번 실행됩니다. 여기에서 캔버스를 초기화하고, 색상을 설정하고, 필요한 요소를 준비합니다.
2. draw(): 프레임별로 루프에서 실행됩니다. 여기에 (애니메이션처럼) 계속해서 반복하고 싶은 명령을 배치합니다. 우리의 경우 애니메이션이 필요하지 않으므로 비워 두겠습니다.

프로젝트: 웃는 얼굴

목표는 얼굴을 위한 큰 원, 눈을 위한 두 개의 작은 원, 입을 위한 호 등 간단한 모양을 사용하여 웃는 얼굴을 그리는 것입니다.

1단계: 캔버스 만들기

가장 먼저 할 일은 캔버스의 크기를 정의하는 것입니다. 이 경우에는 400x400 픽셀 크기를 사용하고 검정색 배경을 설정하겠습니다.

function setup() {
  createCanvas(400, 400);
  background(0); // Fondo negro
}

2단계: 얼굴 그리기

얼굴은 단순히 큰 원입니다. p5.js에서 원을 그리려면 중심 좌표와 너비, 높이가 필요한 ellipse() 함수를 사용합니다. 여기서는 캔버스 중앙에 직경 200픽셀의 원을 그립니다.

stroke(255); // Color de línea blanco
strokeWeight(5); // Grosor de la línea
noFill(); // Sin relleno para el círculo
ellipse(200, 200, 200, 200); // Dibuja la cara

3단계: 눈 그리기

눈은 두 개의 작은 흰색 원입니다. 동일한 ellipse() 함수를 사용할 수 있지만 이번에는 흰색 채우기를 제공하고 약간 위쪽과 얼굴 중앙 측면에 배치합니다.

fill(255); // Relleno blanco para los ojos
noStroke(); // Sin borde para los ojos
ellipse(160, 170, 20, 20); // Ojo izquierdo
ellipse(240, 170, 20, 20); // Ojo derecho

4단계: 미소 그리기

마지막으로 미소를 짓기 위해 arc() 함수를 사용합니다. 이 기능을 사용하면 이 경우 미소처럼 보이는 타원형 호를 그릴 수 있습니다. 곡선이 중앙에 위치하여 입처럼 보이도록 좌표를 조정합니다.

noFill(); // Sin relleno para la boca
stroke(255); // Líneas blancas de nuevo
arc(200, 220, 100, 80, 0, PI); // Dibuja la sonrisa

전체 코드:

function setup() {
  createCanvas(400, 400);
  background(0); // Fondo negro

  stroke(255); // Color de línea blanco
  strokeWeight(5); // Grosor de la línea
  noFill(); // Sin relleno para el círculo

  // Dibuja la cara (un círculo grande)
  ellipse(200, 200, 200, 200);

  // Ojos (dos círculos pequeños)
  fill(255); // Relleno blanco para los ojos
  noStroke(); // Sin borde para los ojos
  ellipse(160, 170, 20, 20);
  ellipse(240, 170, 20, 20);

  // Boca sonriente
  noFill(); // Sin relleno para la boca
  stroke(255); // Líneas blancas de nuevo
  arc(200, 220, 100, 80, 0, PI); // Dibuja la sonrisa
}

function draw() {
  // No se requiere animación, por lo que dejamos el draw vacío
}

결론

이 간단한 예는 p5.js를 사용하여 몇 줄의 코드로 매력적인 그래픽을 만드는 방법을 보여줍니다. 이 프로젝트는 기본이지만 여기에 사용된 원리를 확장하여 훨씬 더 복잡하고 상세한 시각적 개체를 만들 수 있습니다. 더 많은 실험을 하고 싶다면 요소 크기 조정, 색상 추가, draw()에서 애니메이션 만들기 등을 시도해 볼 수 있습니다.

이 웃는 얼굴의 자신만의 버전을 만들고 p5.js가 제공하는 기능을 살펴보세요!