소개

이 튜토리얼에서는 p5.js를 사용하여 역동적이고 다채로운 기하학적 애니메이션을 만드는 방법을 배웁니다. 이 애니메이션은 "세상은 멋진 일을 하는 멋지고 놀라운 사람들로 가득 차 있다"는 생각을 상징합니다. 모양은 캔버스에서 무작위로 움직이며 색상을 변경하고 시각적으로 매혹적인 효과를 만들어냅니다.

1단계: 환경 설정

1. p5.js 다운로드:

   • p5.js 웹사이트로 이동하여 최신 버전의 p5.js를 다운로드하세요.
   • 또는 온라인 p5.js 편집기 editor.p5js.org를 사용하여 브라우저에서 직접 코드를 작성하고 실행할 수 있습니다.

2. 새 프로젝트 만들기:

   • 온라인 편집기를 사용하는 경우 왼쪽 상단에 있는 '새로 만들기'를 클릭하여 새 스케치를 만드세요.
   • 로컬에서 코딩하는 경우 새 HTML 파일을 만들고 p5.js 라이브러리를 연결하세요.

2단계: 기본 구조 작성

p5.js 스케치의 기본 구조를 설정하는 것부터 시작하겠습니다. 여기에는 setup() 및 draw() 함수 정의가 포함됩니다.

function setup() {
  createCanvas(windowWidth, windowHeight);
  noStroke();  // Disable stroke for the shapes
}

function draw() {
  background(30, 30, 60, 25);  // Dark background with transparency
}

설명:

createCanvas(windowWidth, windowHeight);: 브라우저 창에 맞게 캔버스 크기를 설정합니다.
noStroke();: 만들려는 모양에서 테두리를 제거합니다.
background(30, 30, 60, 25);: 배경색을 약간 투명도가 있는 진한 파란색으로 설정하여 모양에 후행 효과를 만듭니다.

3단계: 동적 기하학적 모양 추가

이제 다양한 색상, 위치, 크기로 임의의 모양을 만드는 코드를 추가해 보겠습니다.

function draw() {
  background(30, 30, 60, 25); // Dark background with transparency

  for (let i = 0; i 



설명:

• 무작위 변수:

  • x와 y는 캔버스에서 각 모양의 위치를 ​​결정합니다.
  • size는 각 도형의 크기를 제어합니다.
  • colorR, colorG, colorB는 채우기 색상의 빨간색, 녹색 및 파란색 구성 요소에 대해 임의의 값을 생성합니다.
  • fill(colorR, colorG, colorB, 150);: 채우기 색상을 약간 투명하게 설정합니다.

• 도형 유형:

  • ellipse(x, y, size, size);: 원이나 타원을 그립니다.
  • ect(x, y, size, size);: 정사각형이나 직사각형을 그립니다.
  • Triangle(x, y, x size, y, x size / 2, y - size);: 삼각형을 그립니다.

4단계: 반응형 애니메이션 만들기

캔버스의 크기가 창에 맞게 조정되도록 하려면 다음 함수를 추가하세요.

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}

5단계: 스케치 실행

• p5.js 온라인 편집기를 사용하는 경우 '재생' 버튼을 누르면 애니메이션을 볼 수 있습니다.
• 로컬에서 코딩하는 경우 웹 브라우저에서 HTML 파일을 열어 애니메이션을 확인하세요.