풋볼러브 프론트 (1.10)

일주일에 4번 2시간씩 프로젝트를 하는데 요즘 너무 바빠서 블로그에 글을 올린건 오랜만인것같다.

 

지금 팀생성 페이지에서 꾸밈요소를 좀 만들고싶어서

 

p5.js 를 사용해서 광고판을 만들고있다.

이렇게 오렌지색 구슬 사이에 풋볼러브라고 글자가 자동으로 써지게끔 만들고있다.

이를 위해서 글자가 써지는 위치의 좌표를 얻어야하는데 처음에는, 노가다로 계산할까 했다가

생각해보니 좌표를 얻을 수 있는 방법이 있어서 그 방법을 사용했다.

 

const mouseReleased = () => {
    console.log("mouseRelease");
    console.log(JSON.stringify(xPos));
    console.log(JSON.stringify(yPos));
  };
  const mouseDragged = (p) => {
    p.stroke("black");
    p.line(p.pmouseX, p.pmouseY, p.mouseX, p.mouseY);
    xPos.push(p.mouseX);
    yPos.push(p.mouseY);
    console.log("mousepressed");
  };
  const mousePressed = () => {
    xPos = [];
    yPos = [];
  };

마우스를 드래그하면 해당 x,y 좌표가 Array 에 들어가고, 마우스를 떼면 Array 가 콘솔에 찍혀, 그 Array 그대로 복붙해서 가져다 쓰면 된다.!