p5.js로 마우스 클릭 시 랜덤한 모양 생성하기

p5.js를 사용하여 마우스를 클릭할 때마다 랜덤한 모양을 생성해보겠습니다. 이 튜토리얼을 통해 p5.js의 기본 사용법과 인터랙티브한 그래픽 생성 방법을 배울 수 있습니다. 

p5.js로 마우스 클릭 시 랜덤한 모양 생성하기

 

p5.js로 마우스 클릭 시 랜덤한 모양 생성하기

1. 랜덤 색상 및 모양 생성

2. 마우스 클릭 이벤트 구현

3. 입력하기

4. 입력하기

추천글

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

 

랜덤 색상 및 모양 생성

랜덤 함수를 사용하여 각기 다른 색상과 크기의 원, 사각형, 삼각형을 생성하는 코드를 살펴봅니다.

  // 랜덤한 색상
  let r = random(255);
  let g = random(255);
  let b = random(255);
  fill(r, g, b);

  // 랜덤한 모양 선택 (1: 원, 2: 사각형, 3: 삼각형)
  let shapeType = int(random(1, 4));

  // 랜덤한 위치와 크기
  let x = random(width);
  let y = random(height);
  let size = random(20, 100);

  if (shapeType === 1) {
    ellipse(x, y, size, size);
  } else if (shapeType === 2) {
    rect(x, y, size, size);
  } else if (shapeType === 3) {
    let x1 = x;
    let y1 = y - size / 2;
    let x2 = x - size / 2;
    let y2 = y + size / 2;
    let x3 = x + size / 2;
    let y3 = y + size / 2;
    triangle(x1, y1, x2, y2, x3, y3);
  }

 

마우스 클릭 이벤트 구현

마우스 클릭 시 랜덤한 모양을 생성하는 이벤트를 구현하는 방법을 설명합니다. 이를 통해 사용자와의 인터랙션을 강화할 수 있습니다.

function setup() {
  createCanvas(500, 500);
  background(255); // 하얀 배경
}

function draw() {
  // 매 프레임마다 그리진 않음
}

function mousePressed() {
  // 랜덤한 색상
  let r = random(255);
  let g = random(255);
  let b = random(255);
  fill(r, g, b);

  // 랜덤한 모양 선택 (1: 원, 2: 사각형, 3: 삼각형)
  let shapeType = int(random(1, 4));

  // 랜덤한 위치와 크기
  let x = random(width);
  let y = random(height);
  let size = random(20, 100);

  if (shapeType === 1) {
    ellipse(x, y, size, size);
  } else if (shapeType === 2) {
    rect(x, y, size, size);
  } else if (shapeType === 3) {
    let x1 = x;
    let y1 = y - size / 2;
    let x2 = x - size / 2;
    let y2 = y + size / 2;
    let x3 = x + size / 2;
    let y3 = y + size / 2;
    triangle(x1, y1, x2, y2, x3, y3);
  }
}

 

 

이번 글에서는 p5.js를 사용하여 마우스를 클릭할 때마다 랜덤한 모양을 생성하는 방법을 배웠습니다. 이를 통해 p5.js의 기본 사용법과 함께 인터랙티브 그래픽을 쉽게 구현할 수 있습니다. 

 

 

추천글

 

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

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

클릭하면 변하는 버튼: p5.js로 색상 변경하기

클릭하면 변하는 버튼: p5.js로 색상 변경하기