Baby Alien 081
ヘドロ系・・・いやモチ系（^o^）
火曜日, 4月 29, 2025
TCDW8386
英語だとスラッジ（Sludge）だそうです
月曜日, 4月 28, 2025
Let's start JavaScript 64
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 {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 80vh;
background: #000;
}
canvas {
background: #000000;
border: 1px solid #808080;
}
button {
margin-top: 10px;
padding: 3px 20px;
font-size: 16px;
cursor: pointer;
}
</style>
</head>
<body>
<h2><font color= "#ffffff">Random Concentration Line</font></h2>
<canvas id="speedLinesCanvas"></canvas>
<button onclick="drawSpeedLines()">再描画</button>
<script>
function drawSpeedLines() {
const canvas =
document.getElementById("speedLinesCanvas");
const ctx = canvas.getContext("2d");
// キャンバスサイズを設定
canvas.width = 500;
canvas.height = 500;
// 中心座標
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
// 設定値
const lineCount = 100; // 線の本数
const minLength = 50; // 最短の線の長さ
const maxLength = 200; // 最長の線の長さ
const lineWidth = 2; // 線の太さ
const lineColor = "yellow"; // 線の色（黒）
// 背景クリア
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 線の描画
ctx.strokeStyle = lineColor;
ctx.lineWidth = lineWidth;
for (let i = 0; i < lineCount; i++) {
const angle = Math.random() * Math.PI * 2;
// 0〜360°のランダム角度
const length = minLength + Math.random() *
(maxLength - minLength); // ランダムな長さ
const endX = centerX + Math.cos(angle) * length;
const endY = centerY + Math.sin(angle) * length;
ctx.beginPath();
ctx.moveTo(centerX, centerY);
ctx.lineTo(endX, endY);
ctx.stroke();
}
}
// 初回描画
drawSpeedLines();
</script>
</body>
</html>
実行直後の状態です。
［再描画］でランダム描画を繰り返します。
TCDW8385
このバラツキは誤差の範囲を超えています
iPhone用の露出計は手頃で便利ですが、チョット気になって調べて見たら・・・
手持ちの露出計（ハードウエア）で（ISO400・F2.0・1/125）のシーンが
A露出計（ISO400・F2.0・1/125）
B露出計（ISO400・F2.0・1/80）
C露出計（ISO400・F2.0・1/180）
このバラツキは誤差の範囲を超えていますので、もう少し実験してみます。
測光シーンは室内の固定照明。ちなみにA露出計は入手時は無料でしたが、現在は1000円でした。それ以外は無料版です。
日曜日, 4月 27, 2025
HTMLとCSSの様々な表現 21
指定画像をパースでグリグリ動かす
指定画像をパース表示し、それをグリグリ動かします。以下も参考にしてください。
HTMLとCSSの様々な表現 01 HTMLとCSSだけで画像の変形表示 2023/10/07
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>画像にパースを付けて表示</title>
<style>
body {
background: lemonchiffon;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
perspective: 300px;
/* パースの強さ（視点の距離）
遠近感の強さ（小さいほど強くなる） */
}
/*.image-wrapper に rotateY() や rotateX() を使ってパースを表現*/
.image-wrapper {
width: 400px;
transform: rotateY(25deg) rotateX(5deg);
transform-style: preserve-3d;
transition: transform 0.5s ease;
}
/*:hover で元の向きに戻すアニメーション*/
.image-wrapper:hover {
transform: rotateY(0deg) rotateX(0deg);
}
img {
width: 100%;
display: block;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
border-radius: 8px;
}
</style>
</head>
<body>
<div class="image-wrapper">
<img src="links/image.jpg" alt="指定画像">
</div>
</body>
</html>
実行するとパースが掛かった状態で表示されますが・・・
mouseでパースの状態を変更できます。
TCDW8384
不織布に適量入れてクリップで留めています
チョット質問があったので・・・・
昨日のシリカゲルネタで、その小分け方法ですが・・・お茶を入れるときに使う不織布に適量入れてクリップで留めています。なかなかいい感じです。袋は100均でゲット出来ます。
土曜日, 4月 26, 2025
Excelでオートフィルのスマートな使い方
質問がありましたので・・・
Excelでオートフィルのスマートな使い方を整理しました。
例えば1年間のデータ用に日付も1年分作りたいとき、手動のフィル処理は気津市ですね。そんなときはスタートの日付を入れたセルを選択し、［ホーム］＞［フィル］＞［連像データの作成］と進み・・・
範 囲：列
停止値：最終的な値（ここでは日付）
これで一気にフィル処理が完了します。
ちゃんと2026/12/31まで作成されています。
連番の数値も同様です。ここでは1〜100としてみました。スタートの数値を入れたセルを選択し、［ホーム］＞［フィル］＞［連像データの作成］と進み・・・
範 囲：列
停止値：最終的な値（ここでは100）
これで一気にフィル処理が完了します。
ちゃんと100まで作成されています。
TCDW8383
再生不可製品もあるらしいですが、もしかしたらソレかも
毎年シリカゲルを1〜2kg買い込んでカメラケースなどのシリカゲルと交換する時期になりました。シリカゲルは天日やレンジなどで元に戻せると言われていますが、色々やりましたが、戻っても直ぐにへたれてしまいます。専門的な道具が必要なのかもしれませんね。業務用を購入しているのですが、再生不可製品もあるらしいですが、もしかしたらソレかも。
金曜日, 4月 25, 2025
JavaScriptでAI遊び 45
円の円周を指定して合致した正円を描画（CMYK）
円の円周を指定して合致した正円を描画させます。（CMYK版）
function mmToPoints(mm) {
return mm * 2.83465; // 1 mm ≈ 2.83465 pt
}
function createCenteredCircleByUserInput() {
if (app.documents.length === 0) {
alert("ドキュメントを開いてください。");
return;
}
var userInput =
prompt("円周をmm単位で入力してください:", "300");
if (!userInput) return; // キャンセル時は終了
var circumferenceMM = parseFloat(userInput);
if (isNaN(circumferenceMM) || circumferenceMM <= 0) {
alert("有効な数値を入力してください。");
return;
}
var doc = app.activeDocument;
// アートボードの中心座標を取得
var artboard =
doc.artboards[doc.artboards.getActiveArtboardIndex()];
var artboardBounds = artboard.artboardRect;
var centerX = (artboardBounds[0] + artboardBounds[2]) / 2;
var centerY = (artboardBounds[1] + artboardBounds[3]) / 2;
var circumferencePt = mmToPoints(circumferenceMM);
var radiusPt = circumferencePt / (2 * Math.PI);
var diameterPt = radiusPt * 2;
// 円をアートボード中心に描画
var circle = doc.pathItems.ellipse(centerY +
radiusPt, centerX - radiusPt, diameterPt, diameterPt);
// ランダムなCMYK色を適用
var fillColor = new CMYKColor();
fillColor.cyan = Math.random() * 100;
fillColor.magenta = Math.random() * 100;
fillColor.yellow = Math.random() * 100;
fillColor.black = Math.random() * 0;
circle.filled = true;
circle.fillColor = fillColor;
circle.stroked = true;
// 黒いCMYK枠線を設定
var strokeColor = new CMYKColor();
strokeColor.cyan = 0;
strokeColor.magenta = 0;
strokeColor.yellow = 0;
strokeColor.black = 100;
circle.strokeColor = strokeColor;
circle.strokeWidth = 1;
}
createCenteredCircleByUserInput();
実行したら、円周の長さを指定すれば・・・
描画します。色はCMYKのランダム色で生成されます。
なお、CMYでのランダム色で黒は使いません。
TCDW8382
修復するのにえらく時間を取られてしまいました
Baby Alien 080
ダンゴムシ系かな（^o^）
日本語入力システムは長年ATOKをWindowsとmacOSで使って居ます。頻繁に入るアップデートは必要最低限にしていたのですが、ウッカリmacOS側で必要を感じないモノを間違ってアップデートしたら・・・環境設定を勝手に変更されてしまい、修復するのにえらく時間を取られてしまいました。勘弁してほしいです（>_<）
木曜日, 4月 24, 2025
Photoshopのフォントサイズは解像度に連動
解像度とサイズ（mm）は以下で整理しましたが、フォントサイズは連動して変更されるので要注意です。
Web用画像のサイズと解像度の誤解と現実 2025/03/11
1280×960pxで・・・
72ppiの画像に150pointでテキストを入力し・・・
解像度を350ppiに変更すると・・・
テキストのサイズは30.86ポイントとなります。
計算式は・・・
新しいサイズ = 元のサイズ / (新しい解像度/ 元の解像度)
新しいサイズ = 150/（350/72）= 30.86
水曜日, 4月 23, 2025
Blender Study Notes 56
巻き貝のようなスパイラル形状の作り方
巻き貝のようなスパイラル形状の作り方を整理しました。これがベストとは限りませんが、色々な形状制作に応用できます。
この連載は以下を参照してください。
ベースとなる画像をIllustratorなどで用意しpng形式で書き出してからBlenderに読み込みます。読込手順については以下を参照してください。
続けて［追加］＞［メッシュ］ ＞［円］ をベースに6〜8角形に変更し・・・
スパイラルのスタート位置の配置します。
ここから［E］キーで押し出しを行い・・・
［R］キーで角度調整を行い・・・
それを繰り返しながら、［S］キーでサイズ調整と［G］キーの移動でスパイラルを作り込みます。ただし、この段階ではあまり神経質に行わなくて大丈夫です。
おおむね形状が完成したら・・・
右側のツールからスパナアイコンの［モディファイアー］＞［モディファイアーを追加］＞［生成］＞［サブディビジョンサーフェース］で・・・
［ビューポートのレベル数］を［1］で丸め込みをおこない・・・
確定せずに編集モードにて微調整を行います。
調整が完了したら、［サブディビジョンサーフェース］を確定し、再度［サブディビジョンサーフェース］にて［ビューポートのレベル数］を［1］として更に丸め込みをおこない・・・
最終調整を行ったら・・・
いい感じのイメージになりました。
Blender 4.4.0 macOS
火曜日, 4月 22, 2025
Let's start JavaScript 63
HTML上でスピログラフを描画（改良版）
前回のスピログラフ改良版です。余計なラインが出ないようにしてみました。
■スピログラフのパラメータ
外側の固定円（半径 R）
内側の回転円（半径 r）
描画点の距離 d（内円の中心からの距離）
ステップ数 s（1ユニットのプロット数）
角度 θ（回転角）
■スピログラフの方程式
スピログラフの曲線 (x, y) は、以下のパラメータ方程式で表されます。
基本形（ハイポサイクロイド）
x(θ)=(R-r)cos(θ)+d cos(((R-r)r)θ)
y(θ)=(R-r)sin(θ)-d sin(((R-r)r)θ)
ここで：
θ は回転角（0 から 2π × ループ回数 まで変化）
(R - r) の比が整数であれば閉じた軌跡になる
<!-- 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 {
text-align: center;
background-color: #333;
font-family: Arial, sans-serif;
}
canvas {
border: 1px solid #000;
background-color: #000;
margin-top: 10px;
}
input {
margin: 5px;
text-align: right;
width: 40px;
}
.controls {
margin-bottom: 10px;
}
</style>
</head>
<body>
<font color="white">
<h2>スピログラフ描画</h2>
</font>
<div class="controls">
<font color="white">
<label>外円の半径 (R): <input type="number"
id="R" value="150"></label>
<label>内円の半径 (r): <input type="number"
id="r" value="70"></label>
<label>ペンの距離 (d): <input type="number"
id="d" value="100"></label>
<label>ステップ数: <input type="number"
id="steps" value="200"></label>
<label>回転数: <input type="number"
id="rotations" value="10"></label>
<button onclick="drawSpirograph()">描画</button>
</font>
</div>
<canvas id="spiroCanvas" width="550" height="550"></canvas>
<script>
function drawSpirograph() {
// ユーザー入力を取得
let R = parseFloat(document.getElementById('R').value);
let r = parseFloat(document.getElementById('r').value);
let d = parseFloat(document.getElementById('d').value);
let steps = parseInt(document.getElementById('steps').
value, 10);
let rotations = parseInt(document.getElementById('rotations').
value, 10);
// Canvas の設定
let canvas = document.getElementById('spiroCanvas');
let ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.strokeStyle = 'yellow';
ctx.lineWidth = 2;
// 中心座標
let centerX = canvas.width / 2;
let centerY = canvas.height / 2;
// スピログラフの描画
ctx.beginPath();
for (let i = 0; i <= steps * rotations; i++) {
let theta = (Math.PI * 2 * i) / steps;
let x = (R - r) * Math.cos(theta) +
d * Math.cos(((R - r) / r) * theta);
let y = (R - r) * Math.sin(theta) -
d * Math.sin(((R - r) / r) * theta);
if (i === 0) {
ctx.moveTo(centerX + x, centerY + y);
} else {
ctx.lineTo(centerX + x, centerY + y);
}
}
ctx.stroke();
}
// 初回描画
drawSpirograph();
</script>
</body>
</html>
<!-- index.html -->
実行直後の状態です。
パラメーター変更例（その1）
パラメーター変更例（その2）
パラメーター変更例（その3）
TCDW8379
ペンチで自分の指を挟んでしまいました
不覚にも、ペンチで自分の指を挟んでしまいました。上手く説明出来ないのですが、ジョイント部分の下の隙間に持ち手の人差し指を挟んだわけです。大した怪我（軽い痛みだけで外傷なし）ではないのですが、オマヌケでした（^o^）
月曜日, 4月 21, 2025
Wordで図形に対して正確に画像を埋め込む
Wordで図形に対して正確に画像を埋め込む方法を整理しました。今までちゃんと解説していなかった事を今頃気がついたので・・・。ちなみに以下の手順はイマイチなので今回の手順が完璧です・・・多分。
Wordで図形に画像を正確に合わせるにはトリミングの活用 2023/05/15
用意した画像。
wordに貼り付けるので解像度はこんな感じにしました。W
最初に図形を配置します。
続けて画像を配置します。配置直後は［レイアウトオプション］で ［テキストの全面に移動］偽呈します。
［図の形式］＞［図の書式設定］＞［図］で透明度を適当に調整して下の図形が確認できるようにします。
ここで図形に表示したい位置とサイズを調整し、その時のサイズをメモします。
透明度を元に戻し画像と図形の位置関係を入れ替えます。
ここで図形を選択し［図形の書式］＞［図形の書式設定］＞［塗りつぶしと線］＞［塗りつぶし（図またはテクスチャ）］を選択するとデフォルトのテクスチャで」塗り潰されますが・・・［挿入する］で、画像を指定して読み込みます。
画像は読みこんが直が葉図形に自動的に収まってしまうので残念な結果になりますが・・・
［図形の書式］＞［図形の書式設定］＞［図］で不透明度を調整し、めっおしておいたサイズを［トリミング］＞［画像の位置］の調整し、画面でズレが発生しない状態を確認できたら透明度を戻して完成です。
背面の画像を削除すればもて盛るサイズとレイアウトで図形の中に画像が埋め込まれていることを確認できます。
登録:
投稿 (Atom)
