p5.js에서 반응형 대응의 간단한 그림 앱

body {
 background: linear-gradient(-45deg, rgba(120,20,80,.5), rgba(35,95,228,.4)),url(https://git.io/fjsnV) center center / cover no-repeat;
}

/*
p5.jsを読み込んでおく => CodePenでは左上の歯車マークから設置出来ます
CodePenでjs新規設置する時は、Searchに「p5」っていれたら自動で検索結果が出てきます
=> 今回設置のバージョン https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.min.js
*/

function setup() {
 //画面いっぱいにカンバスエリアを作製する
 createCanvas(windowWidth, windowHeight);
 // カンバス基準値を一応中央に
 rectMode(CENTER);
 // 背景を黒に => 背景はCSS側に任せた
 // background(0);
}

function draw() {
 // マウスが押された状態であるか無いかのコンソール表示
 console.log(mouseIsPressed);
 if (mouseIsPressed) {
  // もし マウスを押したら
  // 黄色を出す。cssのrgbaと同じ。最後は透明度、０−１００の範囲
  fill(random(250, 255), random(0, 255), 0, 80);
  // 円の大きさ
  // 円弧の形を作る
  arc(mouseX, mouseY, 50, 50, radians(-45), radians(235));
  // ellipse(mouseX, mouseY, random(20, 50), random(20, 50));
  // 線の太さ。円の線は無し
  noStroke();
  // 描画速度 遅め
  frameRate(15);
 } else {
  // もし マウスを押さなければ、
  //ランダムにcssのrgbaに値する、rgbを最低値１5０と最高値２５５の範囲で出す
  fill(random(150, 255), random(150, 255), random(150, 255), 70);
  // 円の大きさ
  ellipse(mouseX, mouseY, 120, 120);
  noStroke();
  // 描画速度 早め
  frameRate(25);
 }
}

// 画面がリサイズされた時はカンバスもリサイズさせる
function windowResized() {
 resizeCanvas(windowWidth, windowHeight);
}