金曜日, 8月 22, 2025
木曜日, 8月 21, 2025
modo〜blender互換考 08
実ポリゴンとスムーズ表示の差異
modoを2006年リリースのV2.0から使っているので,その世界からなかなか抜けないのでBlenderでもモデリングで時々混乱します。ということで、実ポリゴンとスムーズ表示の差異を整理してみました。
TCDW8462の実データで比較してみます。
[TAB]キーでサブディビジョン設定した状態
サブディビジョン設定せずに[D]キーでポリゴン密度を倍にした状態
ポリゴン密度を倍にした状態で、[TAB]キーでサブディビジョン設定した状態
元データをOBJ形式でかきだし、Blenderにインポートした状態で、右クリック[フラッドシェード]の状態
Blenderにインポートした状態で、右クリック[スムースシェード]の状態
[フラッドシェード]の状態で[モディファイヤー]>[生成]>[サブディビジョンサーフェース]にて[ビューポートのレベル数]を[1]とした状態
[スムースシェード]の状態で[モディファイヤー]>[生成]>[サブディビジョンサーフェース]にて[ビューポートのレベル数]を[1]とした状態
さて、私が混乱するのはBlenderがオブジェクトモードと編集モードで処理と表示が異なる点です。上はオリジナルをインポートし、[スムースシェード]の状態で編集モードに入った画面です。
上は[スムースシェード]の状態で[モディファイヤー]>[生成]>[サブディビジョンサーフェース]にて[ビューポートのレベル数]を[1]とした状態で編集モードに入った画面です。
modo 17.1v1
Blender 4.5.0
TCDW8500
早朝を狙うにしても4時ぐらいでないと意味ない
Baby Alien 129
末端肥大系(^o^)
ラベル:
3D,
Baby Alien,
modo,
TCDW
水曜日, 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回実行
ラベル:
Illustrator,
JavaScript
TCDW8499
考えただけで頭が痛くなりますね
Baby Alien 128
ウェアが派手なヘルメット小僧(^o^)
ラベル:
3D,
Baby Alien,
modo,
TCDW
火曜日, 8月 19, 2025
Illustratorの無駄知識28
正方形と正円2つで30°と60°を求める
正方形と正円2つで30°と60°を求めることができます。
正方形を描き・・・
1辺を反帰依とする正円2つを正方形のコーナ0うぃ中心としてサイズします。
子で背光線と中心点を繋げると正三角形になります。よって上図のように30°と60°を求めることができます。ただしIllustratorで最大拡大すると誤差でズレが発生します。これは仕方ないですね。6400%ぐらいならズレは確認できません。
ラベル:
Illustrator
月曜日, 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回目
ラベル:
HTML,
JavaScript
日曜日, 8月 17, 2025
modoローポリモデリング 61
三角柱の分割は段階的にエッジ調整
エッジの状態を確認しながら処理するので、デフォルト表示とワイヤーフレーム表示を切り替えながら処理するとミスを防げます。まず立方体を作成し、エッジを1つ選択して削除します。
こうして生成した三角柱をベースとします。
三角柱の両サイドの面以外を選択し、[ループスライス]を実行して垂直面を分割します。
ここから水辺面を分割する際、どのように面を選択してもストレートにベン活することは出来ません。
そこで、まず正面と両サイドを選択して[ループスライス]を実行し、両側面に生成されたエッジを削除します。
次に背面と両サイドを選択して[ループスライス]を実行し・・・
両側面と正面に生成されたエッジを削除します。最後に正面のエッジと背面のエッジの先端を[エッジスライス]で結合すれば水平面を分割した状態を得ることが出来ます。
ここで[TAB]キーでサブディビジョン設定すると妙なポリゴンが表示されることがあります。エッジ調整のふくさんぶつなので、このポリゴンを船体削除します。
続けて[TAB]キーでサブディビジョン設定をオフにし、エッジを選択して・・・
[ポリゴン生成]を実行すれば問題は解決です。
この形状から面白い形状を作り込むことが出来ます。
modo 17.1v1
連載58〜61までの公開日が前後しています。申し訳ないです。原稿執筆日時が前後している関係で、時々ズレが発生します。
modoローポリモデリング 61 三角柱の分割は段階的にエッジ調整 2025/08/17
modoローポリモデリング 60 部分的にポリゴン密度を変更 2025/07/18
modoローポリモデリング 59 四角形ポリゴンを三角形ポリゴンに変換手順 2025/08/07
modoローポリモデリング 58 99ポリゴンの人体ベース 2025/07/23
ラベル:
3D,
modo,
modo_Low_Polygon
土曜日, 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));
}
実行すると直ぐに上のメッセージが表示されるので指定地を入力します。
すると直ぐに上のメッセージが表示され・・・
カラー設定が変更されます。
処理後のカラー設定。
ラベル:
Illustrator,
JavaScript
TCDW8495
とにかく見たくないCMが目白押しで疲れます
Baby Alien 124
ヒトデ系(^o^)
ラベル:
3D,
Baby Alien,
modo,
TCDW
登録:
投稿 (Atom)