p5.js:HelloWorld

code:hello.js

function setup() {

alert("Hello World!!");

createCanvas(600,200); // キャンバス（描画エリア）の作成

background(255, 127, 127);　// キャンバス（背景）の色 R, G, B

noStroke();

}

function draw() {

console.log("hello world");

let s = 'hello world. ハローワールド';

fill(0,0,127); // 文字列の色 R, G, B

textSize(40); // 文字の大きさ（サイズ）

text(s, 5, 5, width - 5, height - 5 );

}

code:sketch.js

const sketch = p => {

p.setup = () => {

alert("Hello World!!");

p.createCanvas(600,200);

p.background(255, 127, 127);

p.noStroke();

}

p.draw = () => {

console.log("hello world");

let s = 'hello world. ハローワールド';

p.fill(0,127,0);

p.textSize(40);

p.text(s, 5, 5, p.width - 5, p.height - 5 );

}

}

new p5(sketch, 'editor');

p5-sketch-button.icon

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