p5.jsでレスポンシブ対応の簡単お絵かきアプリ #JavaScript

作ってみました。

遊び方：

クリックも何もせずにマウスを動かすと、ランダムな淡い色で円形が描かれていきます
クリックしながらマウスを動かしていくと、チューリップ型の花が、暖色・黄色寄りのランダムな色で描画されていきます

仕様：

HTMLなし
CSSは背景色だけ
描画自体はp5.jsが自動的に仕組み作ってくれるので、jsの基礎知識だけで作れます
円弧を書く事はWebコーディングであまり無いので、チューリップの形だけちょっとはまりました
「クリックしているか or していないか」で「サークル描画 or チューリップ」の描画がスイッチします
例えばこのスイッチのトリガーを手の位置の座標、連打の速さ、方角などを取得して条件分岐に置き換えればまた違ったUXが起こるのではと思います

CSS：

背景のみ
適宜自分の好きな背景設置しましょう
ちなみにレンタルサーバーだと更新漏れなどで画像が無くなるケースも出てくるので、GithubのissueやWikiに画像倉庫として置いておくのも永続性があって良いですね。（あくまでテスト用途なので、アクセスが多いものは自身のサーバーに置きましょう）

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;
}

javaScript：

全行に解説つけてるので、興味あれば参照にしてみてください

/*
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);
}

参照：
p5.js本家リファレンス
 https://p5js.org/reference/#/p5/

実装コード：
https://codepen.io/agdg/pen/xeQWgW?editors=0110

See the Pen P5 Draw Canvas by Asagiri (@agdg) on CodePen.