Kaizu-Blog: 10/01/2025

金曜日, 10月 31, 2025

Illustratorでグラデーションもブレンド可能

質問がありましたので・・・

Illustratorでグラデーションもブレンド可能です。

例えばベースAが2ステップ、ベースBが5ステップで作成されたグラデーション間でもブレンド可能です。

カラーリングに迷ったら極端なカラーリング間でデリケートなイメージを作成出来ます。オブジェクトはグループ化してください。

けっきゃがイマイチなら、ベースオブジェクトをダイレクト選択ツールで全選択し、［編集］＞［カラーを編集］＞［オブジェクトを再配色］することで微調整が可能です。

TCDW8571　
ということは20年使っていることになります

今は無きSANYOのエネループを愛用しているのですが、最後に購入したのが12年前。勿論その前から使っているので、多分一番古いのは発売年の2005年。ということは20年使っていることになります。長持ちです。

木曜日, 10月 30, 2025

JavaScriptでAI遊び 77　
Illustratorでアンカーポイントの折れたハンドル修正

パスのアンカーポイントのハンドルが異なる向きを向いている場合に、それらを一直線に揃えてみました。

// 選択されたパスの折れたハンドルを修正して滑らかにする
(function () {
    if (app.documents.length === 0) {
        alert("ドキュメントを開いてください");
        return;
    }
    var sel = app.activeDocument.selection;
    if (sel.length === 0) {
        alert("パスオブジェクトを選択してください");
        return;
    }

    for (var i = 0; i < sel.length; i++) {
        if (sel[i].typename === "PathItem") {
            fixHandles(sel[i]);
        }
    }

    function fixHandles(path) {
        var pts = path.pathPoints;
        for (var j = 0; j < pts.length; j++) {
            var p = pts[j];
            // コーナーポイントはスキップ
            if (p.pointType === PointType.CORNER) continue;

            var anchor = p.anchor;
            var left = p.leftDirection;
            var right = p.rightDirection;

            // 方向線の角度を揃える
            var vecL = [left[0] - anchor[0], left[1] - anchor[1]];
            var vecR = [right[0] - anchor[0], right[1] - anchor[1]];

            var lenL = Math.sqrt(vecL[0] * vecL[0] + vecL[1] * vecL[1]);
            var lenR = Math.sqrt(vecR[0] * vecR[0] + vecR[1] * vecR[1]);

            // 左右の長さの平均を使って対称化
            var len = (lenL + lenR) / 2;

            // 左ハンドルの角度を基準にする（右は反対方向）
            var angle = Math.atan2(vecL[1], vecL[0]);
            if (lenL === 0 && lenR !== 0) {
                // 左がゼロなら右を基準
                angle = Math.atan2(vecR[1], vecR[0]) + Math.PI;
            }

            // 左ハンドル
            p.leftDirection = [
                anchor[0] + Math.cos(angle) * len,
                anchor[1] + Math.sin(angle) * len
            ];

            // 右ハンドル（反対方向）
            p.rightDirection = [
                anchor[0] - Math.cos(angle) * len,
                anchor[1] - Math.sin(angle) * len
            ];

            // スムーズポイントに変更
            p.pointType = PointType.SMOOTH;
        }
    }

    alert("ハンドルを修正しました");
})();

私はIllustratorもタブレットペン利用なので、ブラシで自由曲線を描くことが多いです。

生成したパスを単純化させると、ハンドルが折れて生成されることが多いので・・・

スクリプトを実行（※）すると・・・

※ハンドルがある点を滑らか化

　左右のハンドルを一直線に揃え、

　長さは左右の平均値にする

　コーナーポイントは変更しない

ハンドルは水平に変更されます。

元のパスの複製を予め作成して、ガイドに変更してから修正すれば・・・

折れてないハンドルのパスが出来ます。でも、最初からペンツールで修正した方が速かった感じですね。ちなみに、出来る時と出来ない時があり、状況整理中です（>_<）

TCDW8570　
取りあえずサイトの更新を本気モードにしないと

10/08にkaizu.comがダウンし、何が何だか解らない状態が続き、同じレジストラを利用している友人やサポートを買って出てくれた友人の協力で、それなりに行動していたのですが、何の説明もなく10/27に復活していました。サイトはほとんど放置状態だったのですが、兎に角メインメールが使えない3週間は本当に難儀しました。復活も完全なのか謎のまま。調べたら25年以上利用していたので、まさに「青天の霹靂」でした。取りあえずサイトの更新を本気モードにしないと・・・。

水曜日, 10月 29, 2025

Let's start JavaScript 85　
指定画像をヴェイパーウェーブ風画像変換

指定画像をヴェイパーウェーブ風画像に変換します。あくまでも「〜風」です（^o^）

<!-- index.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" 
    content="width=device-width, initial-scale=1.0">
<title>ヴェイパーウェーブ風画像変換</title>
<style>
  body {
    background-color: #111;
    color: #fff;
    font-family: "Poppins", sans-serif;
    text-align: center;
  }
  canvas {
    margin-top: 20px;
    max-width: 90%;
    border: 2px solid #ff66cc;
    box-shadow: 0 0 20px #ff00ff;
  }
  input {
    margin-top: 20px;
  }
</style>
</head>
<body>
  <h2>ヴェイパーウェーブ風画像変換</h2>
  <canvas id="canvas"></canvas><br>
  <input type="file" accept="image/*" id="imageInput">
    <!-- 
        input type="file"で
        ［ファイルを選択］選択されていません 。Google Crome
        ［参照］ファイルが選択されていません 。firefox
        など、ブラウザに寄り異なります。
    -->
  
  <script>
    const fileInput = document.getElementById('imageInput');
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');

    fileInput.addEventListener('change', (e) => {
      const file = e.target.files[0];
      if (!file) return;

      const img = new Image();
      img.onload = () => {
        canvas.width = img.width;
        canvas.height = img.height;
        ctx.drawImage(img, 0, 0);

        // ピクセルデータを取得
        const imageData = ctx.getImageData
            (0, 0, canvas.width, canvas.height);
        const data = imageData.data;

        // コントラスト・彩度調整 + ピンク・シアン調色
        for (let i = 0; i < data.length; i += 4) {
          let r = data[i];
          let g = data[i + 1];
          let b = data[i + 2];

          // コントラスト強調
          const contrast = 1.4;
          r = ((r - 128) * contrast + 128);
          g = ((g - 128) * contrast + 128);
          b = ((b - 128) * contrast + 128);

          // 彩度アップ（簡易）
          const avg = (r + g + b) / 3;
          r = r + (r - avg) * 0.5;
          g = g + (g - avg) * 0.5;
          b = b + (b - avg) * 0.5;

          // ヴェイパーウェーブ調の色合い
          r += 20;
          g += 0;
          b += 40;

          // 範囲制限
          data[i] = Math.min(255, Math.max(0, r));
          data[i + 1] = Math.min(255, Math.max(0, g));
          data[i + 2] = Math.min(255, Math.max(0, b));
        }

        ctx.putImageData(imageData, 0, 0);

        // グラデーションオーバーレイ
        const gradient = ctx.createLinearGradient
            (0, 0, canvas.width, canvas.height);
        gradient.addColorStop(0, 'rgba(255,0,255,0.2)');
        gradient.addColorStop(1, 'rgba(0,255,255,0.2)');
        ctx.fillStyle = gradient;
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        // ノイズ追加
        const noiseDensity = 0.03;
        const noise = ctx.getImageData
            (0, 0, canvas.width, canvas.height);
        const nData = noise.data;
        for (let i = 0; i < nData.length; i += 4) {
          if (Math.random() < noiseDensity) {
            const v = (Math.random() - 0.5) * 60;
            nData[i] += v;
            nData[i + 1] += v;
            nData[i + 2] += v;
          }
        }
        ctx.putImageData(noise, 0, 0);
      };
      img.src = URL.createObjectURL(file);
    });
  </script>
</body>
</html>
<!-- index.html -->