一昨日の夜半から利用しているサーバーが落ちてしまったようで、サイトがダウンしています。メールは使えている（※）のですが、チョット意味不明です（>_<）が、大規模障害の対策に追われているという情報があるので、スタッフを信じて待つことに・・・。
※メールも10日昼前からダウンしました（>_<）
金曜日, 10月 10, 2025
木曜日, 10月 09, 2025
Let's start JavaScript 84
HTML上で指定画像の色相反転
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 {
font-family: Arial, sans-serif;
text-align: center;
margin: 10px;
background-color: black;
color: white;
}
#imageContainer img {
max-width: 100%;
height: auto;
transition: 0.5s; /* なめらかに変化 */
}
</style>
</head>
<body>
<h3>画像の色相反転</h3>
<input type="file" id="imageInput" accept="image/*">
<button onclick="toggleHue()">色相反転</button>
<div id="imageContainer"></div>
<script>
let currentImage = null;
document.getElementById("imageInput").
addEventListener("change", function(event) {
const file = event.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function(e) {
const img = document.createElement("img");
img.src = e.target.result;
img.id = "selectedImage";
img.style.filter =
"hue-rotate(0deg)"; // 初期状態は通常色
document.getElementById("imageContainer").
innerHTML = "";
document.getElementById("imageContainer").
appendChild(img);
currentImage = img;
};
reader.readAsDataURL(file);
}
});
function toggleHue() {
if (currentImage) {
let currentFilter = currentImage.style.filter;
currentImage.style.filter = (currentFilter ===
"hue-rotate(180deg)") ? "hue-rotate(0deg)" :
"hue-rotate(180deg)";
}
}
</script>
</body>
</html>
実行したら、処理したい画像ファイルを選択します。
ファイルを表示したら［色相反転］をクリックすると・・・
色相が反転されます。ここで再度［色相反転］をクリックすると・・・
元のイメージに戻ります。
TCDW8549
踏み台から落ちて転けてしまいました
Baby Alien 155
日本髪のオバサン系（^o^）
水曜日, 10月 08, 2025
Photoshopで背景画像はメインから使い回しも芸
Photoshopで背景画像に悩んでいるときは、意外にもメイン画像からの使い回しという手も芸の内です。
用意した画像です。
レイヤーの複製を2つ作成し、下のレイヤーに対して［フィルター］＞［ぼかし］＞［ぼかし（放射状）］などで適宜調整します。
［フィルター］＞［ぼかし］＞［ぼかし（放射状）］の処理結果。
これだけでもいい感じですが・・・
2つ作成した複製レイヤーの真ん中のレイヤーを［イメージ］＞［色調補正］＞［彩度を下げる］でグレースケール化し・・・
レイヤーマスクで足下だけを残します。
これだけでイメージが格段に向上します。
ここまでの段階でのレイヤーの状態。
ここで、更にアレンジとして［フィルター］＞［Camera Raw］にて［効果］＞［周辺光量補正］で適宜調整し・・・
合成すればいい感じに馴染みます。
更に調整してたければ、任意の円形グラデーションの描画モードを変更するだけでも深みが増します。
ここでは［ハードライト:100%］としました。
最終的なレイヤーの状態です。
TCDW8548
その頃の色々な思い出がぶち壊されてしまいます
15年ほど前に、子供の頃住んでいた町を車で偶然通過したことがありました。アレはダメですね。景観の激変により、その頃の色々な思い出がぶち壊されてしまいます（>_<）
火曜日, 10月 07, 2025
Illustratorでの作図基本 26
最前面のオブジェクトで作成はハンドルが命
質問がありましたので・・・
任意にオブジェクトを有機的な形状に貼り付けたように変更したい場合は、オブジェクトの上に形状データを配置し、両方を選択して［オブジェクト］＞［エンベロープ］＞［最前面のオブジェクトで作成］を実行しますが、その際にハンドルの有無や長さが決め手になります。
例えば上の様なデータ（※）を変形させます。
※線だけのデータです。
変形したい形状を作成します。ハンドルを含むのは中心のアンカーポイントだけです。
サンプルデータの上に変形したい形状を配置し、両者を選択して［オブジェクト］＞［エンベロープ］＞［最前面のオブジェクトで作成］を実行すると・・・
一見上手くいった感じになりますが摩周の箸が潰れた感じになってし舞います。これは四隅のアンカーポイントにハンドルがありません。
そこで四隅のアンカーポイントにハンドルを追加しますが、上の様に類直方向にもでたらめな長さのハンドルを設定すると・・・
ハンドルの長さに影響し、結果は歪んでしまいます。
結果として上の様なハンドル状態にすれば・・・
いい感じに収まります。
処理後でもハンドルの微調整は可能です。
月曜日, 10月 06, 2025
JavaScriptでAI遊び 72
Illustratorで曲線の長さを求める
クローズドパス（※）やガイド、クリッピングパスなどは無視します。
「カーブを直線にしたときの長さ（アンカー間）」です。
ベジェ曲線そのものの長さではありません。
※一箇所に切り込みを入れて見かけ上はクローズドパスでも実質オープンパスにすれば処理可能です。
if (app.documents.length ===
0 || app.activeDocument.selection.length === 0) {
alert("オープンパスを1つ以上選択してください。");
} else {
var doc = app.activeDocument;
var sel = doc.selection;
var ptToMm = 0.35278; // 1ポイント = 約0.35278mm
// オープンパス（!item.closed）のみ対象
for (var i = 0; i < sel.length; i++) {
var item = sel[i];
if (item.typename === "PathItem" && !item.closed) {
var points = item.pathPoints;
var total = 0;
// アンカーポイントの anchor 同士の距離を
// √(dx² + dy²) で算出
for (var j = 0; j < points.length - 1; j++) {
var pt1 = points[j].anchor;
var pt2 = points[j + 1].anchor;
var dx = pt2[0] - pt1[0];
var dy = pt2[1] - pt1[1];
total += Math.sqrt(dx * dx + dy * dy);
}
// Illustrator の単位である ポイント（pt）を
// ミリメートル（mm）に換算
var lengthMM = total * ptToMm;
alert("オープンパス " + (i + 1) +
" の直線化した長さ: " + lengthMM.toFixed(2) + " mm");
}
}
}
直径80mmの円を作成します。円周は251.20mmになりますが、左端のアンカーポイントをハサミツールで切り込だ状態では226.28mmとなりました。
アンカーポイントを追加を1回実行して処理すると・・・
244.92mmとなりました。
アンカーポイントを追加を2回実行して処理すると・・・
249.75mmとなりました。
アンカーポイントを追加を3回実行して処理すると・・・
250.96mmとなりました。
ちなみに、アンカーポイントを追加を4回実行して処理すると・・・
251.26mmとなり、結果オーバとなりましたました。正確な値を求める訳ではな区、あくまでも目安なのでアンカーポイントを追加は3回あたりが妥当ですね。
TCDW8546
スーパーでバナナを買おうと思ったら・・・
スーパーでバナナを買おうと思ったら・・・バナナコーナーは、ひと房ずつ物色している四婆に阻まれて購入を一時断念。血眼になって物色する姿は、もはや妖怪ですね。
日曜日, 10月 05, 2025
Blender Study Notes 63
ブリッジ処理は反対方向になる場合がある？
前回の続きです。ふざけ半分に作成していて気がつきました。
ベースは前回と同じです。まず、［オブジェクトモード］で事前に両方のオブジェクトを選択し、右クリックで表示されるメニューから［統合（※）］を実行します。
macOS: command J
あとは［編集モード］に切り替え、ブリッジ面を選択してから右クリックで表示されるメニューの［面をブリッジ］を選び、［分割数］を3としました。ここまでは前回と同じです。問題はここからです。
続けて上図のように面を選択してブリッジを行います。
上は処理結果です。
ここで上の様に面を選択してブリッジを実行すると・・・
こんな感じになるのですが・・・
反対側も同じように処理すると・・・
裏返ってしまいます。パラメーターで修正は出来ない感じ。
こんな時はオブジェクトの複製をミラー配置し・・・
余分なパーツを削除してから・・・
右クリックで［辺から面を作成］を実行し・・・
両方のオブジェクトを選択後に右クリックで表示されるメニューから［統合（※）］を実行します。
コレで求める変な形状が完成しました。
［モディファイアー］＞［モディファイアーを追加］＞［生成］＞［サブディビジョンサーフェス］を設定した状態です。
Blender 4.5.0
登録:
投稿 (Atom)
