p5.js로 인터랙티브 도형 만들기 - 마우스 위치에 따라 움직이는 도형

이번에는 p5.js 라이브러리를 사용하여 마우스 위치에 따라 움직이는 인터랙티브 도형을 만드는 방법을 소개하겠습니다. p5.js는 자바스크립트 기반의 창의적인 코딩 라이브러리로, 웹 상에서 애니메이션과 시각적 효과를 쉽게 구현할 수 있습니다.

p5.js로 인터랙티브 도형 만들기 - 마우스 위치에 따라 움직이는 도형

p5.js로 인터랙티브 도형 만들기 - 마우스 위치에 따라 움직이는 도형

 

1. 도형 그리기

2. 도형 변형하기

3. 애니메이션 효과 추가하기

 

추천글

위의 목차를 클릭하면 해당 글로 자동 이동 합니다.

 

도형 그리기

현재 p5js사이트의 에디터를 사용하고 있습니다.

 

도형을 그리는 방법은 setup() 함수와 draw() 함수를 사용합니다. setup() 함수는 한 번만 실행되며, draw() 함수는 애니메이션을 위해 계속 반복 실행됩니다. 이 코드는 400x400 픽셀 크기의 캔버스를 생성하고, 회색 배경에 마우스 위치를 따라 움직이는 검은색 원을 그립니다.

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  fill(0);
  ellipse(mouseX, mouseY, 50, 50);
}

 

도형 변형하기

도형의 모양, 크기, 색상 등을 변경하여 더 다양한 효과를 낼 수 있습니다. 예를 들어, 마우스 위치에 따라 도형의 크기가 변하도록 할 수 있습니다. 이 코드는 캔버스 중심에 원을 그리며, 마우스와 중심 사이의 거리에 따라 원의 크기가 변합니다.

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  noFill();
  stroke(0);
  strokeWeight(2);
  let size = dist(mouseX, mouseY, width/2, height/2) / 2;
  ellipse(width/2, height/2, size, size);
}

애니메이션 효과 추가하기

위 코드를 합쳐서 마우스를 따라오는 원을 만들어보겠습니다. 그리고 거리가 멀어지면 줄어드는 효과를 넣어보도록 하겠습니다.

let x, y;
let size = 50; // 원래 크기

function setup() {
  createCanvas(400, 400);
  x = width / 2;
  y = height / 2;
}

function draw() {
  background(220);
  fill(0);
  let targetX = mouseX;
  let targetY = mouseY;
  x += (targetX - x) * 0.1;
  y += (targetY - y) * 0.1;

  // 마우스와 원 사이의 거리 계산
  let distance = dist(x, y, mouseX, mouseY);

  // 거리에 따라 원의 크기 조정
  size = map(distance, 0, 200, 50, 10);

  ellipse(x, y, size, size);
}

 

 

5.js를 사용하여 마우스 위치에 따라 움직이는 인터랙티브 도형을 만드는 방법을 살펴보았습니다. 도형의 모양, 크기, 색상, 애니메이션 효과 등을 변경하여 다양한 시각적 효과를 구현할 수 있습니다. p5.js는 창의적인 코딩을 위한 강력한 도구이며, 이를 활용하여 웹 상에서 흥미로운 인터랙티브 작품을 만들 수 있습니다.

 

추천글

p5.js로 실시간 사용자 입력 렌더링하기

p5.js로 실시간 사용자 입력 렌더링하기

p5.js로 구현하는 모자이크 효과 만들기

p5.js로 구현하는 모자이크 효과 만들기