p5.js 입문

13056 단어 processingp5.js

소개



이 기사는 후쿠오카 아키타코 클럽 Advent Calendar 2019의 첫 번째 기사입니다.

할 일



사실은 processing을 사용하여 mac에서 실행되는 그래픽 앱을 만들고 싶었습니다.
processing이 잘 작동하지 않았기 때문에 익숙한 의미도 담고 p5.js를 만져 보았습니다.

우선 만들어 본 것이 이쪽입니다.


  • 분홍색 원을 클릭하면 선택 상태가되고 녹색으로 바뀝니다
  • 적절한 위치를 두 번 클릭하면 거기에 새 원을 만들고 선택한 원과 만든 원을 선으로 연결합니다

    • 환경


  • macOS 10.15.1
  • p5.js 버전 0.9.0

    • 준비


  • 적절한 디렉토리에 index.html 및 sketch.js 파일 만들기
  • index.html의 내용은 다음과 같습니다.
  • CDN은 여기


    • index.html
    <!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>p5.js test</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.min.js"></script>
  <script src="./sketch.js"></script>
</head>
<body>
</body>
</html>

    만들기



    여기에서 sketch.js에 설명 된 내용

    준비



    먼저 setup 및 draw라는 함수를 준비합니다.
  • setup : 열 때 첫 번째 실행
  • draw : setup 후에 여러 번 반복 실행되는 처리
  • 한 프레임에서 한 번 실행되므로 초당 60 번 실행됩니다
  • 움직이는 것과 같은 처리는 여기에 구현된다 

    • // 最初に１回だけ実行される処理
function setup() {
}

// setup後に繰り返し実行される処理（フレーム単位）
function draw() {
}

    캔버스 만들기


    setup 내에 캔버스를 만드는 프로세스를 작성합니다. 이 캔버스의 영역이 도형 등을 그리는 영역이 됩니다.
    const canvasX = 1000;
const canvasY = 1000;

const canvasColor = 'skyblue';

function setup() {
  // キャンバスの作成
  createCanvas(canvasX, canvasY);
  // 背景色の設定
  background(canvasColor);
}
    index.html를 브라우저에서 열면 1000px × 1000px의 밝은 파란색 캔버스가 그려집니다.



    도형 그리기



    시험에 몇 가지 도형을 그려 보겠습니다.


    기능
    내용


    circle(x, y, d)
    x, y 좌표를 중심으로 직경 dpx의 원을 그립니다.

    aquare(x, y, s)
    x, y 좌표를 정사각형의 좌상점의 기준으로서 1변 spx의 정사각형을 렌더링 한다(그 외에 인수 있음)

    
function setup() {
  // キャンバスの作成
  createCanvas(canvasX, canvasY);
  // 背景色の設定
  background(canvasColor);

  // 円の描画
  circle(100, 100, 100);
  // 正方形の描画
  square(250, 100, 200);
}

    그러면 이렇게 됩니다.



    또한 채우기나 선은 아래와 같이 설정할 수 있습니다.
    function setup() {
  // キャンバスの作成
  createCanvas(canvasX, canvasY);
  // 背景色の設定
  background(canvasColor);

  // 図形をピンクで塗りつぶす
  fill('pink');
  // 線の色を赤にする
  stroke('red');

  // 円の描画
  circle(100, 100, 100);

  // 塗りつぶさない（透明になる）
  noFill();

  // 正方形の描画
  square(250, 100, 200);
}


    fill 나 stroke 등은, 그 이후에 묘화되는 도형에 적응되므로, 각각 별도의 설정을 하고 싶은 경우, 확실히 설정할 필요가 있습니다.

    (이 경우 stroke('red')가 정사각형에도 적용됩니다.)

    자세한 내용은 공식 참조에 나와 있으므로 그곳을 참조하십시오.

    그리기에서 도형 그리기


    draw 펑션에서는 애니메이션을 붙이는 것과 같은 드로잉을 작성할 수 있습니다.

    시험에 원이 비스듬하게 움직이는 구현을 해보겠습니다.
    let circleX = 100;
let circleY = 100;

function setup() {
  // キャンバスの作成
  createCanvas(canvasX, canvasY);
}

function draw() {
  background(canvasColor);
  fill('pink');
  noStroke();

  circle(circleX, circleY, 100);

  circleX++;
  circleY++;
}



    ※gif 이미지이므로 바삭바삭하고 있습니다만, 실제로는 부드럽게 이동하고 있습니다.

    circleX, circleY를 단순히 +1하고 있을 뿐이므로 화면 밖으로 나가 사라집니다.

    이벤트 처리


    p5.js에는 마우스 조작과 같은 이벤트에 대한 콜백이 있습니다.
    function setup() {
  // 省略
}

function draw() {
  // 省略

  // mouseIsPressedはクリックされている間trueを返す
  if (mouseIsPressed) {
    console.log("クリックされ続けている");
  }  
}

// クリックされた際に実行される
function mousePressed() {
  console.log("クリックされた！");

  // mouseButtonでクリックの種類がわかる
  // draw内などでも使用可能
  console.log(mouseButton);

  if (mouseButton === LEFT) {
    console.log('左クリック');
  }

  if (mouseButton === RIGHT) {
    console.log('右クリック');
  }

  // マウスの座標を取得
  console.log(mouseX);
  console.log(mouseY);  
}

// ダブルクリックされた際に実行される
function doubleClicked() {
  console.log('ダブルクリック');
}

    마지막으로



    이번은 간단하게 p5.js 에 접할 뿐의 내용이 됩니다.

    다음 번은 원을 클릭했을 때의 색의 변경이나, 더블 클릭해 원을 추가하는 처리 등, 최초의 화상이 될 때까지의 구현을 실시합니다.
    Processing으로 인스타그램 스타일 그라데이션 그리기
    Processing 텍스트 표시 메모

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage