p5js
p5jsの基本
ランダムに円を描画していくだけならこんな感じ
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>p5描画メモ</title>
</head>
// p5.jsをCDNから読み込み
<script src="https://cdn.jsdelivr.net/npm/p5@0.10.2/lib/p5.js"></script>
<script>
// 最初に一回実行される
function setup(){
// キャンバスを作成
createCanvas(600,425);
// 背景色
background(255);
// 図形の線無し
noStroke();
}
// 1フレーム（1/60秒）ごとに実行される
function draw(){
// オブジェクトの色をランダム（透明度70）
fill(random(255),random(255),random(255),70);
// キャンバスにランダムの丸を描画
ellipse(random(width),random(height),random(100));
}
</script>
</html>
preloadで画像の読み込みができる
function preload() {
// preload() runs once
img = loadImage('assets/laDefense.jpg');
}
imageで画像を描画できる
image（img、x、y、[width]、[height]）
img：表示する画像
x：画像の左上隅のx座標
y：画像の左上隅のy座標
width：画像を描画する幅
heifht：画像を描画する高さ
image（img、dx、dy、dWidth、dHeight、sx、sy、[sWidth]、[sHeight]）
function draw(){
image(img, 0, 0);
}