水曜日, 7月 23, 2025
火曜日, 7月 22, 2025
Illustratorの無駄知識27
長方形の組み合わせで正六角形を作成
長方形の組み合わせでも正六角形を作成することが出来ます。
正六角形の構造は内角が120°で・・・
正三角形6個の集合体です。
1つの正三角形のコーナーを正六角形の対角に延長すると・・・
90°、60°、30°の直角三角形になります。これによりピタゴラスの定理で各辺の関係は1:2:√3となります。
よって1:√3の長方形を120°回転コピーを2回行えば正六角形が作成できます。
ラベル:
Illustrator
TCDW8470
真顔でGを持って現れたときには固まりました
Baby Alien 102
モスラじゃない(^o^)
ラベル:
3D,
Baby Alien,
modo,
TCDW
月曜日, 7月 21, 2025
Let's start JavaScript 77
指定色を16進数・補色・色相反転・彩度反転
前回の拡張版です。HTML上でOSのカラーパレットで指定した色と、その補色、色相反転、彩度反転を16進表示します。
<!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;
}
.color-box {
width: 400px;
height: 50px;
border: 1px solid #000;
display: inline-block;
vertical-align: middle;
margin-left: 0px;
}
</style>
</head>
<body>
<h3>色変換(補色・色相反転・彩度反転)</h3>
<input type="color" id="colorPicker" value="#ff0000">
<p>選択色: <span id="colorValue">
#ff0000</span>
<div id="colorPreview" class="color-box"
style="background-color: #ff0000;"></div>
</p>
<p>補 色: <span id="complementaryValue">
#00ffff</span>
<div id="complementaryPreview" class="color-box"
style="background-color: #00ffff;"></div>
</p>
<p>色相反転: <span id="hueInvertedValue">
#00ff00</span>
<div id="hueInvertedPreview" class="color-box"
style="background-color: #00ff00;"></div>
</p>
<p>彩度反転: <span id="saturationInvertedValue">
#808080</span>
<div id="saturationInvertedPreview" class="color-box"
style="background-color: #808080;"></div>
</p>
<script>
const colorPicker =
document.getElementById("colorPicker");
const colorValue =
document.getElementById("colorValue");
const colorPreview =
document.getElementById("colorPreview");
const complementaryValue =
document.getElementById("complementaryValue");
const complementaryPreview =
document.getElementById("complementaryPreview");
const hueInvertedValue =
document.getElementById("hueInvertedValue");
const hueInvertedPreview =
document.getElementById("hueInvertedPreview");
const saturationInvertedValue =
document.getElementById("saturationInvertedValue");
const saturationInvertedPreview =
document.getElementById("saturationInvertedPreview");
function hexToRGB(hex) {
return [
parseInt(hex.substring(1, 3), 16),
parseInt(hex.substring(3, 5), 16),
parseInt(hex.substring(5, 7), 16)
];
}
function rgbToHex(r, g, b) {
return `#${r.toString(16).padStart(2, "0")}${
g.toString(16).padStart(2, "0")}${
b.toString(16).padStart(2, "0")}`;
}
function getComplementaryColor(hex) {
let [r, g, b] = hexToRGB(hex);
return rgbToHex(255 - r, 255 - g, 255 - b);
}
function rgbToHSL(r, g, b) {
r /= 255, g /= 255, b /= 255;
let max = Math.max(r, g, b), min = Math.min(r, g, b);
let h, s, l = (max + min) / 2;
if (max === min) {
h = s = 0; // 無彩色
} else {
let d = max - min;
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
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 = Math.round(h * 60);
}
return [h, s, l];
}
function hslToRGB(h, s, l) {
let r, g, b;
function hueToRGB(p, q, t) {
if (t < 0) t += 1;
if (t > 1) t -= 1;
if (t < 1/6) return p + (q - p) * 6 * t;
if (t < 1/2) return q;
if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
return p;
}
if (s === 0) {
r = g = b = l; // 無彩色
} else {
let q = l < 0.5 ? l * (1 + s) : l + s - l * s;
let p = 2 * l - q;
r = hueToRGB(p, q, (h + 180) / 360);
g = hueToRGB(p, q, h / 360);
b = hueToRGB(p, q, (h - 180) / 360);
}
return [Math.round(r * 255),
Math.round(g * 255), Math.round(b * 255)];
}
function getHueInvertedColor(hex) {
let [r, g, b] = hexToRGB(hex);
let [h, s, l] = rgbToHSL(r, g, b);
h = (h + 180) % 360; // 色相を180度反転
let [invR, invG, invB] = hslToRGB(h, s, l);
return rgbToHex(invR, invG, invB);
}
function getSaturationInvertedColor(hex) {
let [r, g, b] = hexToRGB(hex);
let [h, s, l] = rgbToHSL(r, g, b);
s = 1 - s; // 彩度反転
let [satR, satG, satB] = hslToRGB(h, s, l);
return rgbToHex(satR, satG, satB);
}
colorPicker.addEventListener("input", function() {
let selectedColor = colorPicker.value;
let complementaryColor =
getComplementaryColor(selectedColor);
let hueInvertedColor =
getHueInvertedColor(selectedColor);
let saturationInvertedColor =
getSaturationInvertedColor(selectedColor);
colorValue.textContent = selectedColor;
colorPreview.style.backgroundColor =
selectedColor;
complementaryValue.textContent =
complementaryColor;
complementaryPreview.style.backgroundColor =
complementaryColor;
hueInvertedValue.textContent =
hueInvertedColor;
hueInvertedPreview.style.backgroundColor =
hueInvertedColor;
saturationInvertedValue.textContent =
saturationInvertedColor;
saturationInvertedPreview.style.backgroundColor =
saturationInvertedColor;
});
</script>
</body>
</html>
実行直後の画面
カラーパレットで任意の色を選択すれば・・・
ライブでその色と補色、色相反転、彩度反転を表示します。
ラベル:
HTML,
JavaScript
日曜日, 7月 20, 2025
カメラレンズとフランジバックの関係
質問がありましたので・・・
メーカーの異なるレンズで撮影するのは?・・・ミラーレス一眼レフカメラのフランジバックが短いことで可能な処理です。
フランジバック(Flange Back)とは
レンズマウントの取り付け面から撮像素子(センサー)までの距離のこと。
この距離が、レンズ設計やマウントアダプターの可否に大きく関わります。
概ねミラーのある一眼レフ用のレンズであればミラーレス一眼レフにアダプターで装着して利用することが可能です。
主なレンズのフランジバックです。青字は所有しているレンズです。
DSLR(Digital Single Lens Reflex Camera/デジタル一眼レフカメラ)
SLR(Single Lens Reflex/フィルムカメラ)
ミラーのある一眼レフ用と、ミラーレス一眼レフのフランジバックは概ね上の様な値です。ミラーレス一眼レフ間でも、イレギュラーではありますが、私が知る限りではM4/3のレンズをEマウントに装着するアダプター(※)はあります。
※このアダプターに限り、M4/3のレンズはマニュアルレンズ専用と解釈した方がいいです。M4/3用のオートフォーカスレンズでマニュアルフォーカスも利用出来るモノであっても使い物になりません。
上は2025/06/20現在所有しているアダプター
ラベル:
Camera
土曜日, 7月 19, 2025
Illustratorでドーナッツ風シンボル作成
質問がありましたので・・・
基本図形だけでドーナッツ風のシンボル作成の手順を整理してみました。
まず円を作成します。
続けて円のコピーを上の様に配置し、2つの円の描画モードを乗算に変更します。
次に、2つの円を選択して45度回転コピーします。
上は処理直後の状態です。
そのままcommand D(※)を2回実行して上の状態を得ます。
そのまま[パスファインダー]>[分割]を実行し・・・
ダイレクト選択ツールで中心のパーツを全て削除します。これでドーナッツ形状のベースが得られます。
ここで、全体を選択し[効果]>[ぼかし]>[ぼかし(ガウズ)]にて適宜設定します。
上は処理結果です。
続けて[オブジェクト]>[ラスタライズ]でビットマップ化します。
上は処理結果です。
次に取りあえず[画像トレース]>[6色変換]を実行。[6色変換]は仮の設定です。処理結果に合わせて処理後に微修正します。
上は処理結果です。チョット細かすぎたので・・・
[4色変換]の債設定・・・
いい感じになったので・・・
[拡張]でパス化すれば完了です。
ラベル:
Illustrator
金曜日, 7月 18, 2025
手作りレンズプロジェクト 02
意外と面白いピンホールレンズ
今回は酢年前から試行錯誤(穴のサイズで混乱)していたピンホールレンズです。
M42ボディーカメラ用のボディーキャップに穴を開けて裏からピンホールを空けた色画用紙を貼り付けます。
黒の色画用紙に針で穴を開けます。穴といっても、軽くつつく感じでOKです。
フードは黒のペッとボトルキャップを加工して瞬間接着剤で接続しています。

M42マウントレンズをSONY Eマウントカメラに接続する薄手のマウントアダプターにKAZNEX 50mm F167を接続した状態です。
撮影に関しては ISO6400で手持ち撮影が可能でした。なお、謎の黒いゴミ?が映り込んでいて、原因を究明中ですが、通常のレンズでは発生しないので、ピンホールに原因がありそうです。
SONY α NEX-6
KAZNEX 50mm F167
SONY α NEX-6
KAZNEX 50mm F167
ということで・・・
KAZNEX 50mm F167
の完成です。
なお、画角と絞り値は以下の計算で割り出しました。
■ピンホールのF値の計算式:
F = f / d
F:F値(絞り値)
f:ピンホールから撮像面までの距離(=焦点距離)
d:ピンホールの直径
■ピンホールレンズの画角
例:ピンホールの直径:0.3mm
焦点距離(撮像面までの距離):50mm
F = 50 / 0.3 = 約167
よって・・・
KAZNEX 50mm F167
です。
modoローポリモデリング 60
部分的にポリゴン密度を変更
均一なポリゴン状態でのモデリングに拘る必要はありません。もちろん均一な方が便利なのですが、リトポロジー処理をすれば問題ないです。ただっし、リトポロジー処理は根気が必要です。取りあえずローポリでのモデリングなら部分的にポリゴン密度を調整ッしても大きな問題にはなりません。
立方体を作成し、[D]キーで選択したジオメトリを細分割します。続けて帳面部分の4つのポリゴンを選択し・・・
[D]キーで選択したジオメトリを細分割します。[Tab]キーでサブディバイドすると若干形状が崩れますが、誤差と思って無視します。
続けて目の位置のエッジをベベル書影をおこないポリゴンを生成します。
そのままポリゴンを選択して[B]キーにてベベルを二重に設定し、奥に引き込みます。
口の部分も目の処理と同様にポリゴンを作成して[B]キーにてベベルを二重に設定し、奥に引き込みます。
[Tab]キーでサブディバイドすればこんな感じになりますが、目の周りがちょっち気になるので・・・
[Tab]キーでサブディバイドを外し、目の余分なエッジを選択&削除します。
これで良い感じになります。
ラベル:
3D,
modo,
modo_Low_Polygon
登録:
投稿 (Atom)