p5.js:JavaScript

p5.jsで学ぶJavaScriptの基礎

JavaScript以前の基礎知識

p5.js:プログラム開発環境

JavaScriptの基礎知識

と、ここまでで、とりあえずスケッチは描けるはず。

JavaScriptの知識

変数定義

code:sketch.js

"use strict"

const sizeX = 500

const sizeY = 500

const radius = 20

p5.js:setup()

code:sketch.js

function setup() {

createCanvas(sizeX, sizeY) // 横500 縦500 ピクセルのキャンバスを作成する

background('#eee')　// キャンバスの色（背景色）を白に近いグレーに指定する

}

p5.js:draw()

code:sketch.js

function draw() {

stroke('#aaa') // 描画する色を指定

let posX = sizeX / 2

let posY = sizeY / 2

ellipse(posX, posY, radius, radius) // 円を描く

}

code:sketch.js

function mousePressed() {

ellipse(mouseX, mouseY, radius, radius);

// prevent default

return false;

}

実行→sketch.js

p5.js.icon

JavaScript.icon

https://img.shields.io/badge/p5.js-JavaScript-ED225D.svg?logo=p5.js&style=for-the-badge