縮毛ジェネレーター

コンテンツ

1 アプリについて
2 アプリ画面
3 アプリへのリンク
4 ソースコード
5 更新履歴

アプリについて

「縮毛ジェネレーター」は、縮れた毛を生成するアプリなんだキシャー
画面下部の再生成ボタンで、何回でもランダムな縮毛を画面上に生成できるチニュー
これでお気に入りの縮毛を生成して欲しいキシャー

アプリ画面

アプリへのリンク

https://utmgs.com/pubic-hair-generator/

ソースコード

コードはすべてChatGPTで出力したキシャー
初学者用にコメントも付きキシャよ

<!DOCTYPE html>
<html>
  <head>
    <!-- p5.js ライブラリを読み込み（グラフィックスやインタラクションを簡単に作れる） -->
    <script src="https://cdn.jsdelivr.net/npm/p5@1.9.0/lib/p5.min.js"></script>
    <style>
      /* ページ全体のスタイル設定 */
      body {
        margin: 0;             /* ページの余白なし */
        overflow: hidden;      /* スクロールバーを非表示 */
        background: #fff;      /* 背景色は白 */
      }

      canvas {
        display: block;        /* キャンバスをブロック表示（ページ幅いっぱい） */
      }

      /* 再生成ボタンの見た目のスタイル */
      #regenerate {
        position: absolute;            /* 画面内の絶対位置に配置 */
        bottom: 30px;                  /* 画面の下から30ピクセルの位置 */
        left: 50%;                     /* 横幅の50%の位置（中央） */
        transform: translateX(-50%);   /* ボタンの幅の半分左にずらして中央揃え */
        padding: 10px 20px;            /* ボタンの内側の余白 */
        font-size: 16px;               /* 文字サイズ */
        background-color: #333;        /* 背景色（濃いグレー） */
        color: white;                  /* 文字色 */
        border: none;                  /* 枠線なし */
        border-radius: 8px;            /* 角を丸く */
        cursor: pointer;               /* マウスを乗せるとポインターに変化 */
        z-index: 10;                   /* 他の要素より前面に表示 */
      }

      /* ボタンにマウスを乗せた時の色変化 */
      #regenerate:hover {
        background-color: #555;
      }
    </style>
  </head>
  <body>
    <!-- 髪の毛の線を再生成するためのボタン -->
    <button id="regenerate">再生成</button>

    <script>
      // 初期設定：ページ読み込み時に一度だけ呼ばれる
      function setup() {
        createCanvas(windowWidth, windowHeight); // 画面サイズに合わせてキャンバスを作成
        background(255);                         // 背景を白で塗りつぶす
        drawRandomHair();                        // ランダムな位置に「髪の毛」を描画

        // ボタンがクリックされたときの処理
        document.getElementById('regenerate').addEventListener('click', () => {
          background(255);      // キャンバスを白でクリア
          drawRandomHair();     // 新しい「髪の毛」を描く
        });
      }

      // 髪の毛のスタート位置をランダムに決めて、カールした線を描く
      function drawRandomHair() {
        let margin = 120;           // 左右の余白
        let marginTop = 40;         // 上の余白
        let marginBottom = 450;     // 下の余白

        // ランダムな開始位置を計算（画面内に収まるように）
        let startX = random(margin, width - margin);
        let startY = random(marginTop, height - marginBottom);

        // その位置からカールした髪の毛を描画
        drawCurlyHair(startX, startY);
      }

      // カールした髪の毛のような線を描く
      function drawCurlyHair(x, y) {
        stroke(0);       // 線の色を黒に設定
        noFill();        // 図形の中は塗りつぶさない
        beginShape();    // 線の描画を開始

        let len = random(150, 250);      // 髪の毛の長さ（ランダム）
        let segments = 50;               // 線を分ける数（なめらかさの決定）
        let angle = random(TWO_PI);      // 初期の向き（角度）をランダムに
        let curlAmount = random(0.3, 1.2); // カールの強さ（大きいほどグネグネ）

        // 各セグメントごとに線を少しずつ描いていく
        for (let i = 0; i < segments; i++) {
          angle += random(-curlAmount, curlAmount); // 少しずつ角度を変化
          let dx = cos(angle) * len / segments;     // x方向の移動量
          let dy = sin(angle) * len / segments;     // y方向の移動量
          x += dx;                                   // x座標を更新
          y += dy;                                   // y座標を更新
          curveVertex(x, y);                         // なめらかな曲線の点を追加
        }

        endShape(); // 線の描画を終了
      }

      // ウィンドウサイズが変わったときにキャンバスをリサイズして再描画
      function windowResized() {
        resizeCanvas(windowWidth, windowHeight); // キャンバスを新しいサイズに調整
        background(255);                         // 背景を白でクリア
        drawRandomHair();                        // 新しい髪の毛を描く
      }
    </script>
  </body>
</html>

更新履歴

25/5/14　ページ作成