p5js 체험기(마우스에서 떨어지는 도형 만들기)

https://p5js.org/

p5.js

 

p5.js는 예술, 시각화, 인터랙티브 미디어, 교육을 목적으로 사용하는 오픈 소스 자바스크립트 라이브러리

https://openprocessing.org/

OpenProcessing - Creative Coding for the Curious Mind

커뮤니티가 만든 p5.js 스케치들을 볼 수 있는 사이트로, 다양한 작품들을 참고할 수 있습니다.

마우스를 캔버스에 올리면 비가 내리게 만드는 방법

      

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

function draw() {
  background(255);
  
  if (mouseX) {
    // 마우스 위치를 기준으로 사각형 생성
    let rectCount = random(1, 6); // 한 번에 생성되는 사각형 개수
    let rectSize = 20; // 사각형 크기

    for (let i = 0; i < rectCount; i=i+10) {
      let rectX = mouseX + random(-20, 20); // x 좌표 범위
      let rectY = mouseY + random(10); // y 좌표
      
      // 생성된 사각형을 저장하는 객체
      let rectangle = {
        x: rectX,
        y: rectY,
        speed: random(5)// 사각형의 떨어지는 속도
      };
      
      // 생성된 사각형을 배열에 추가
      rectangles.push(rectangle);
    }
  }
  
  // 생성된 모든 사각형을 업데이트하고 그리기
  for (let i = 0; i < rectangles.length; i=i+5) {
    let rectangle = rectangles[i];
    
    // 중력에 의해 사각형이 아래로 떨어짐
    rectangle.y += rectangle.speed;
    rectangle.speed += 0.09; // 중력 가속도
       fill(0);
    // 사각형 그리기
    rect(rectangle.x, rectangle.y, 10,30, 10);
  }
}

// 생성된 사각형을 저장하는 배열
let rectangles = [];