金曜日, 8月 22, 2025

TCDW8501 
本気で食べるならフライパンを外に出しておけば

Baby Alien 130
タコもどき(^o^)
いや〜マジで車のボンネットで目玉焼きを作りたくなりました。いや、本気で食べるならフライパンを外に出しておけばいいんですよね。衝動的にやってしまいそう・・・。

木曜日, 8月 21, 2025

modo〜blender互換考 08 
実ポリゴンとスムーズ表示の差異

modoを2006年リリースのV2.0から使っているので,その世界からなかなか抜けないのでBlenderでもモデリングで時々混乱します。ということで、実ポリゴンとスムーズ表示の差異を整理してみました。

TCDW8462の実データで比較してみます。

[TAB]キーでサブディビジョン設定した状態

サブディビジョン設定せずに[D]キーでポリゴン密度を倍にした状態

ポリゴン密度を倍にした状態で、[TAB]キーでサブディビジョン設定した状態

元データをOBJ形式でかきだし、Blenderにインポートした状態で、右クリック[フラッドシェード]の状態

Blenderにインポートした状態で、右クリック[スムースシェード]の状態

[フラッドシェード]の状態で[モディファイヤー]>[生成]>[サブディビジョンサーフェース]にて[ビューポートのレベル数]を[1]とした状態 

[スムースシェード]の状態で[モディファイヤー]>[生成]>[サブディビジョンサーフェース]にて[ビューポートのレベル数]を[1]とした状態 
 
さて、私が混乱するのはBlenderがオブジェクトモードと編集モードで処理と表示が異なる点です。上はオリジナルをインポートし、[スムースシェード]の状態で編集モードに入った画面です。

上は[スムースシェード]の状態で[モディファイヤー]>[生成]>[サブディビジョンサーフェース]にて[ビューポートのレベル数]を[1]とした状態で編集モードに入った画面です。

modoほ、このモードの区別が無いのでBlenderで混乱するわけです。勿論どちらが良い悪いという話しではありません。慣れによる躓きですね。

modo 17.1v1
Blender 4.5.0

TCDW8500 
早朝を狙うにしても4時ぐらいでないと意味ない

Baby Alien 129
末端肥大系(^o^)
やっぱり・・・この季節の散歩は危険ですね。早朝を狙うにしても4時ぐらいでないと意味ない。結局引きこもり確定〜の危険な一日・・・。

水曜日, 8月 20, 2025

JavaScriptでAI遊び 62 
Illustratorでカラー設定の色相を反転

特に目的は無いのですが、色相・彩度・明度の反転実験の色相版です。
CMYKでもRGBでも使えます。

#target illustrator

function invertHue() {
var doc = app.activeDocument;
var selection = doc.selection;

if (!selection.length) {
alert("オブジェクトを選択してください。");
return;
}

for (var i = 0; i < selection.length; i++) {
var obj = selection[i];

if (obj.typename === "PathItem") {
// 塗りの色を反転
if (obj.filled) {
obj.fillColor = invertColor(obj.fillColor);
}
// 線の色を反転
if (obj.stroked) {
obj.strokeColor = invertColor(obj.strokeColor);
}
}
}

alert("選択したオブジェクトの色相を反転しました。");
}

// 色を反転する関数
function invertColor(color) {
if (color.typename === "RGBColor") {
// RGBの色相を180度反転
// RGBカラーの場合:
        // 色相(Hue)を 180° 反転し、新しい RGB 値を設定
var hsb = rgbToHsb(color.red, color.green, color.blue);
hsb[0] = (hsb[0] + 180) % 360;
var invertedRgb = hsbToRgb(hsb[0], hsb[1], hsb[2]);

var newColor = new RGBColor();
newColor.red = invertedRgb[0];
newColor.green = invertedRgb[1];
newColor.blue = invertedRgb[2];
return newColor;

} else if (color.typename === "CMYKColor") {
// CMYKの色相を180度反転
// CMYKカラーの場合:
        // C, M, Y の値を 100 から引いて反転(黒 K は変更なし)
var newColor = new CMYKColor();
newColor.cyan = 100 - color.cyan;
newColor.magenta = 100 - color.magenta;
newColor.yellow = 100 - color.yellow;
newColor.black = color.black; // 黒(K)はそのまま保持
return newColor;
}

return color; // 変更なし
}

// RGB → HSB 変換
function rgbToHsb(r, g, b) {
r /= 255; g /= 255; b /= 255;
var max = Math.max(r, g, b), min = Math.min(r, g, b);
var h, s, v = max;

var d = max - min;
s = max === 0 ? 0 : d / max;

if (max === min) {
h = 0;
} else {
switch (max) {
case r: h = (g - b) / d + (g < b ? 6 : 0); break;
case g: h = (b - r) / d + 2; break;
case b: h = (r - g) / d + 4; break;
}
h *= 60;
}
return [h, s * 100, v * 100];
}

// HSB → RGB 変換
function hsbToRgb(h, s, v) {
s /= 100; v /= 100;
var c = v * s;
var x = c * (1 - Math.abs((h / 60) % 2 - 1));
var m = v - c;

var r, g, b;
if (h < 60) { r = c; g = x; b = 0; }
else if (h < 120) { r = x; g = c; b = 0; }
else if (h < 180) { r = 0; g = c; b = x; }
else if (h < 240) { r = 0; g = x; b = c; }
else if (h < 300) { r = x; g = 0; b = c; }
else { r = c; g = 0; b = x; }

return [(r + m) * 255, (g + m) * 255, (b + m) * 255];
}

// スクリプト実行
invertHue();

左からCMYKで・・・
ベースチャート、カラー反転、カラー反転を2回実行

左からCMYKで・・・
ベースチャート、色相反転、色相反転を2回実行

左からRGBで・・・
ベースチャート、カラー反転、カラー反転を2回実行

左からRGBで・・・
ベースチャート、色相反転、色相反転を2回実行

TCDW8499 
考えただけで頭が痛くなりますね

Baby Alien 128
ウェアが派手なヘルメット小僧(^o^)
上に立つ者がクズだと、どうしようもないというネタが多すぎて疲れますね。しかし、こんなクズがどうして選ばれるのか・・・考えただけで頭が痛くなりますね。

火曜日, 8月 19, 2025

Illustratorの無駄知識28 
正方形と正円2つで30°と60°を求める

正方形と正円2つで30°と60°を求めることができます。

正方形を描き・・・

1辺を反帰依とする正円2つを正方形のコーナ0うぃ中心としてサイズします。

子で背光線と中心点を繋げると正三角形になります。よって上図のように30°と60°を求めることができます。ただしIllustratorで最大拡大すると誤差でズレが発生します。これは仕方ないですね。6400%ぐらいならズレは確認できません。

TCDW8498 
実際には逆で難儀します。何でだろう?

Baby Alien 127
顔色の悪い梅干し系(^o^)
サイズ間違えで購入したLサイズのTシャツが、ゆったりして涼しいと思うも、実際には逆で難儀します。何でだろう?

月曜日, 8月 18, 2025

Let's start JavaScript 80 
HTMLで配置画像をクリックでランダム分割

配置画像をクリック毎にランダム分割で再配置させます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ランダム分割</title>
<style>
body {
margin: 0;
background: #111;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
position: relative;
display: inline-block;
}
img, canvas {
display: block;
width: 640px;
height: auto;
cursor: pointer;
}
canvas {
position: absolute;
top: 0;
left: 0;
display: none;
pointer-events: none; /* クリックはimgにのみ反応させる */
}
</style>
</head>
<body>

<div class="container">
<!-- 表示フォントを指定 -->
<img id="sourceImage" src="links/picture.jpg"
    alt="クリックして分割">
<canvas id="canvas"></canvas>
</div>

<script>
const img = document.getElementById('sourceImage');
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

// 読み込み後、キャンバスサイズを画像に合わせる
img.onload = () => {
canvas.width = img.naturalWidth;
canvas.height = img.naturalHeight;
};

// 画像クリック時、ランダム分割表示
img.addEventListener('click', () => {
const rows = Math.floor(Math.random() * 4) + 2; // 2~5行
const cols = Math.floor(Math.random() * 4) + 2; // 2~5列

const cellW = canvas.width / cols;
const cellH = canvas.height / rows;

ctx.clearRect(0, 0, canvas.width, canvas.height);

for (let r = 0; r < rows; r++) {
for (let c = 0; c < cols; c++) {
const sx = Math.random() * (img.naturalWidth - cellW);
const sy = Math.random() * (img.naturalHeight - cellH);
const dx = c * cellW;
const dy = r * cellH;

ctx.drawImage(
img,
sx, sy, cellW, cellH,
dx, dy, cellW, cellH
);
}
}

// canvas 表示
canvas.style.display = 'block';
});
</script>

</body>
</html>


実行直後の画面

画像をクリック1回目

画像をクリック2回目

TCDW8497 
そうではない人は10年もブランクが続くと本当に忘れますね

Baby Alien 126
ベロベロバ〜(^o^)
実際に会わなくても、ネット上での交流(メッセージやコメント等)があれば大丈夫ですが、そうではない人は10年もブランクが続くと本当に忘れますね。

日曜日, 8月 17, 2025

modoローポリモデリング 61 
三角柱の分割は段階的にエッジ調整

マニアックなネタですが、三角柱の分割は段階的にエッジ調整を理解すると綺麗に処理出来ます。
 
エッジの状態を確認しながら処理するので、デフォルト表示とワイヤーフレーム表示を切り替えながら処理するとミスを防げます。まず立方体を作成し、エッジを1つ選択して削除します。

こうして生成した三角柱をベースとします。

三角柱の両サイドの面以外を選択し、[ループスライス]を実行して垂直面を分割します。

ここから水辺面を分割する際、どのように面を選択してもストレートにベン活することは出来ません。

そこで、まず正面と両サイドを選択して[ループスライス]を実行し、両側面に生成されたエッジを削除します。

次に背面と両サイドを選択して[ループスライス]を実行し・・・

両側面と正面に生成されたエッジを削除します。最後に正面のエッジと背面のエッジの先端を[エッジスライス]で結合すれば水平面を分割した状態を得ることが出来ます。

ここで[TAB]キーでサブディビジョン設定すると妙なポリゴンが表示されることがあります。エッジ調整のふくさんぶつなので、このポリゴンを船体削除します。

続けて[TAB]キーでサブディビジョン設定をオフにし、エッジを選択して・・・

[ポリゴン生成]を実行すれば問題は解決です。

この形状から面白い形状を作り込むことが出来ます。

modo 17.1v1 

TCDW8496 
小学生時代を思い出しました

Baby Alien 125
迷彩隈取り系(^o^)
8月も半分過ぎてしまいました。マズイ!でも、宿題は明日からやろう〜で最終日(^o^)の小学3〜4年生時代を思い出しました。

土曜日, 8月 16, 2025

JavaScriptでAI遊び 61 
IllustratorでCMYK設定を指定%刻みに変更

前回のアップデー版です。
選択したオブジェクトのCMYK設定を指定%刻みに変更します。
ただしグループ化やグラデーション、パターンなどには対応しません。
 
ベースにしたデータを選択して実行・・・


それぞれのカラー設定


#target illustrator

function roundToIncrement(value, increment) {
return Math.round(value / increment) * increment;
}

function adjustCMYKToIncrement(increment) {
var doc = app.activeDocument;
var selection = doc.selection;

if (!selection.length) {
alert("オブジェクトを選択してください。");
return;
}

if (isNaN(increment) || increment <= 0 || increment > 100) {
alert("有効な%刻み(1-100)を入力してください。");
return;
}

for (var i = 0; i < selection.length; i++) {
var obj = selection[i];

if (obj.typename === "PathItem" && obj.filled) {
var color = obj.fillColor;
if (color.typename === "CMYKColor") {
color.cyan = roundToIncrement(color.cyan, increment);
color.magenta =
                    roundToIncrement(color.magenta, increment);
color.yellow = roundToIncrement(color.yellow, increment);
color.black = roundToIncrement(color.black, increment);
obj.fillColor = color;
}
}

if (obj.stroked) {
var strokeColor = obj.strokeColor;
if (strokeColor.typename === "CMYKColor") {
strokeColor.cyan =
                    roundToIncrement(strokeColor.cyan, increment);
strokeColor.magenta =
                    roundToIncrement(strokeColor.magenta, increment);
strokeColor.yellow =
                    roundToIncrement(strokeColor.yellow, increment);
strokeColor.black =
                    roundToIncrement(strokeColor.black, increment);
obj.strokeColor = strokeColor;
}
}
}

alert("CMYKカラーが " + increment +
        "% 刻みに四捨五入されました。");
}

// ユーザー入力を取得
var userInput =
    prompt("CMYKの刻み%を入力してください(例: 5, 10, 20)", "10");
if (userInput !== null) {
adjustCMYKToIncrement(parseFloat(userInput));
}

実行すると直ぐに上のメッセージが表示されるので指定地を入力します。

すると直ぐに上のメッセージが表示され・・・

カラー設定が変更されます。

処理後のカラー設定。

TCDW8495 
とにかく見たくないCMが目白押しで疲れます

Baby Alien 124
ヒトデ系(^o^)
ネットCMで、メーカーを指定してブロックできると嬉しいです。大きな声で喚きチラス系、お菓子の押し売り系、革新的な製品と言う詐欺系、生理的に無理なタレントなど・・・とにかく見たくないCMが目白押しで疲れます(>_<)