土曜日, 8月 31, 2024
TCDW8146
10数年ぶりに火傷をしてしまいました
昨日、蟹蒲チャーハン作っていて、フライパンで10数年ぶりに火傷をしてしまいました。軽い火傷だったので大したことはありませんが、チョット間抜けでした。しかし、右手でフライパンを持って居たのにフライパンの縁で右手首に火傷って自分でも謎。
ラベル:
illustration,
Photoshop,
TCDW
金曜日, 8月 30, 2024
JavaScriptでAI遊び 23
選択テキストをバラバラに分割
選択テキストをバラバラに分割します。
縦書きにも対応しますが横書きも含めて処理出来るのは1行だけです。
// Illustratorスクリプト:
//選択したテキストを
//サイズと書式を保持したまま1文字ずつバラバラに
function splitTextKeepingOrientation() {
// Illustratorで何かが選択されているか確認
if (app.selection.length === 0) {
alert("テキストフレームを選択してください。");
return;
}
// 選択されたテキストフレームに対して処理を実行
for (var i = 0; i < app.selection.length; i++) {
var selectedItem = app.selection[i];
// テキストフレームであるかを確認
if (!(selectedItem instanceof TextFrame)) {
continue; // テキストフレームでない場合はスキップ
}
var textFrame = selectedItem;
var textRange = textFrame.textRange;
var textContent = textFrame.contents;
// 横書きか縦書きかを取得
var orientation = textFrame.orientation;
// テキストフレームの位置を取得
var x = textFrame.position[0];
var y = textFrame.position[1];
var parent = textFrame.parent;
// 元のテキストフレームを削除
textFrame.remove();
// 各文字を個別のテキストオブジェクトとして追加
for (var j = 0; j < textContent.length; j++) {
var newTextFrame = parent.textFrames.add();
newTextFrame.contents = textContent[j];
// 横書きか縦書きかを設定
newTextFrame.orientation = orientation;
// 元のテキスト属性をコピー
var sourceCharacterAttributes =
textRange.characters[j].characterAttributes;
var newCharacterAttributes =
newTextFrame.textRange.characterAttributes;
newCharacterAttributes.textFont =
sourceCharacterAttributes.textFont;
newCharacterAttributes.size =
sourceCharacterAttributes.size;
newCharacterAttributes.fillColor =
sourceCharacterAttributes.fillColor;
newCharacterAttributes.tracking =
sourceCharacterAttributes.tracking;
// 文字のサイズと書式に基づいて新しい位置を設定
newTextFrame.position = [x, y];
// 横書きか縦書きかによって位置を更新
if (orientation == TextOrientation.HORIZONTAL) {
x += newTextFrame.width; // 横書きの場合、x座標を更新
} else {
y -= newTextFrame.height; // 縦書きの場合、y座標を更新
}
}
}
}
splitTextKeepingOrientation();
こんな感じです。処理後に少し広がってしまいました。要改良?ですね。
ラベル:
Illustrator,
JavaScript
TCDW8145
ルール変更時にメモしておかないと苦労します
10年以上前のデータの修正依頼が入ったので、バックアップのHDDをチェック。ところが、当時のバックアップルールを思い出す事の方に時間が掛かってしまいました。ルール変更時にメモしておかないと苦労しますね。
ラベル:
illustration,
Photoshop,
TCDW
木曜日, 8月 29, 2024
Let's start JavaScript 33
クリックで配置画像が爆発
クリックした配置画像を爆発させてみました。
ルート階層の中に・・・
picフォルダー(image.png)
という構造です。
<!-- index.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Image Explosion</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #ffd700;
overflow: hidden;
margin: 0;
}
.image-container {
position: relative;
display: inline-block;
}
img {
width: 400px; /* オリジナルの画像サイズ */
height: auto;
cursor: pointer;
}
.fragment {
position: absolute;
width: 50px;
height: 50px;
overflow: hidden;
}
.fragment img {
position: absolute;
width: 400px;
height: auto;
}
</style>
</head>
<body>
<div class="image-container">
<img id="image" src="pic/image.png" alt="Image">
</div>
<script>
//画像をクリックでclickを実行
document.getElementById('image').
addEventListener('click', function() {
const image = this;
const container = image.parentElement;
const imageWidth = image.clientWidth;
const imageHeight = image.clientHeight;
const fragmentSize = 50;
// クリックした画像を非表示
image.style.visibility = 'hidden';
// 小さな断片(fragment)を作成
// 断片はオリジナルの画像の一部を切り取ったもの
for (let y = 0; y < imageHeight; y += fragmentSize) {
for (let x = 0; x < imageWidth; x += fragmentSize) {
const fragment = document.createElement('div');
fragment.classList.add('fragment');
fragment.style.width = `${fragmentSize}px`;
fragment.style.height = `${fragmentSize}px`;
fragment.style.left = `${x}px`;
fragment.style.top = `${y}px`;
const fragmentImg = document.createElement('img');
fragmentImg.src = image.src;
fragmentImg.style.left = `-${x}px`;
fragmentImg.style.top = `-${y}px`;
fragment.appendChild(fragmentImg);
container.appendChild(fragment);
// 小さな断片(fragment)のアニメーション設定
// 各断片はランダムな方向に移動・回転してフェードアウト
setTimeout(() => {
fragment.style.transition =
'transform 1s ease-out, opacity 1s ease-out';
fragment.style.transform =
`translate(${(Math.random() - 0.5) * 400}px,
${(Math.random() - 0.5) * 400}px) scale(0.5)`;
fragment.style.opacity = '0';
}, 100);
}
}
// アニメーション終了後、断片は完全削除
setTimeout(() => {
container.innerHTML = '';
}, 1500);
});
</script>
</body>
</html>
<!-- index.html -->
実際にクリック〜爆発の流れ
ラベル:
HTML,
JavaScript
TCDW8144
未登録の番号からは絶対に取りません
Baby Alien 021
子鬼かな?(^o^)
ラベル:
3D,
Baby Alien,
modo,
TCDW
水曜日, 8月 28, 2024
HTMLとCSSの様々な表現 16
HTMLとCSSで配置画像をラセン回転
HTMLとCSSだけで配置画像をラセン回転で拡大させます。JavaScriptを未使用なのでクリックで実行・停止は制御できません。
<!-- index.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>CSSで螺旋回転アニメーション</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: turquoise;
}
/* 螺旋回転アニメーションの定義 */
@keyframes spiralRotate {
0% {
transform: rotate(0deg) scale(0.5);
}
25% {
transform: rotate(180deg) scale(1);
}
50% {
transform: rotate(360deg) scale(1.5);
}
75% {
transform: rotate(540deg) scale(2);
}
100% {
transform: rotate(720deg) scale(2.5);
}
}
/* 画像の基本スタイル */
img {
display: block;
margin: 0 auto;
cursor: pointer;
transition: transform 1s;
}
/* クリック時に螺旋回転アニメーションを適用 */
img:active {
animation: spiralRotate 1s forwards;
}
</style>
</head>
<body>
<img src="pic/image.png" alt="クリックで螺旋回転する画像">
</body>
</html>
再生結果です。画像をマウスで押しっぱなしにします。離すと動作は止まります。
火曜日, 8月 27, 2024
Excel VBA 27
入力値の最大公約数と最小公倍数を表示
Visual Studio Basicと同じ事をVBAでやってみました。
Visual Studio Basic_35 入力値から最大公約数と最小公倍数を求める 2024/07/18
-------------------
Sub CalculateGCDandLCM()
Dim inputStr As String
Dim numbers() As String
Dim numArray() As Long
Dim i As Integer
Dim gcdResult As Long
Dim lcmResult As Long
' メッセージボックスで数値を入力させる
inputStr = InputBox("数値をカンマで区切って入力してください:", "GCDとLCMの計算")
' 入力がキャンセルされた場合
If inputStr = "" Then Exit Sub
' 入力された数値をカンマで分割して配列に格納
numbers = Split(inputStr, ",")
ReDim numArray(UBound(numbers))
' 文字列配列を数値配列に変換
On Error GoTo InvalidInput
For i = 0 To UBound(numbers)
numArray(i) = CLng(Trim(numbers(i)))
Next i
On Error GoTo 0
' 最大公約数を計算
gcdResult = numArray(0)
For i = 1 To UBound(numArray)
gcdResult = Application.WorksheetFunction.Gcd(gcdResult, numArray(i))
Next i
' 最小公倍数を計算
lcmResult = numArray(0)
For i = 1 To UBound(numArray)
lcmResult = lcm(lcmResult, numArray(i))
Next i
' 結果をメッセージボックスに表示
MsgBox "最大公約数 (GCD): " & gcdResult & vbCrLf & "最小公倍数 (LCM): " & lcmResult, vbInformation, "結果"
Exit Sub
InvalidInput:
MsgBox "無効な入力です。正しい数値をカンマで区切って入力してください。", vbExclamation, "入力エラー"
End Sub
' 最小公倍数を計算する関数
Function lcm(a As Long, b As Long) As Long
lcm = a * (b / Application.WorksheetFunction.Gcd(a, b))
End Function
-------------------
-------------------
Sub CalculateGCDandLCM()
Dim inputStr As String
Dim numbers() As String
Dim numArray() As Long
Dim i As Integer
Dim gcdResult As Long
Dim lcmResult As Long
' メッセージボックスで数値を入力させる
inputStr = InputBox("数値をカンマで区切って入力してください:", "GCDとLCMの計算")
' 入力がキャンセルされた場合
If inputStr = "" Then Exit Sub
' 入力された数値をカンマで分割して配列に格納
numbers = Split(inputStr, ",")
ReDim numArray(UBound(numbers))
' 文字列配列を数値配列に変換
On Error GoTo InvalidInput
For i = 0 To UBound(numbers)
numArray(i) = CLng(Trim(numbers(i)))
Next i
On Error GoTo 0
' 最大公約数を計算
gcdResult = numArray(0)
For i = 1 To UBound(numArray)
gcdResult = Application.WorksheetFunction.Gcd(gcdResult, numArray(i))
Next i
' 最小公倍数を計算
lcmResult = numArray(0)
For i = 1 To UBound(numArray)
lcmResult = lcm(lcmResult, numArray(i))
Next i
' 結果をメッセージボックスに表示
MsgBox "最大公約数 (GCD): " & gcdResult & vbCrLf & "最小公倍数 (LCM): " & lcmResult, vbInformation, "結果"
Exit Sub
InvalidInput:
MsgBox "無効な入力です。正しい数値をカンマで区切って入力してください。", vbExclamation, "入力エラー"
End Sub
' 最小公倍数を計算する関数
Function lcm(a As Long, b As Long) As Long
lcm = a * (b / Application.WorksheetFunction.Gcd(a, b))
End Function
-------------------
実行すると表示されるパレットにベースとなる数値をカンマで区切って複数入力して[OK]で・・・
結果が表示されます。
※本当はVisual Studio Basicよりも先に手を付けたのですが、デバッグで苦しみました。
ラベル:
Excel,
VBA,
Visual Basic
月曜日, 8月 26, 2024
Illustratorでの作図基本 05
多角形の分割は整列とスナップ
多角形をピザ分割ス分場合は、分割は整列とスナップを活用です。
正偶数角形の場合として、ここでは六角形で説明します。六角形とは別に分割用の線を作図し、両方を選択してから・・・
基準となる図形(ここでは六角形)を再度クリックすると図のように太線で選択されます。コレで六角形は画面に固定されます。
あとは整列パレットにて[水平方向中央に整列]と[垂直方向中央に整列]を続けてクリックすれば・・・
ど真ん中に配置されます。
選択を分割線だけにして、回転ツールにで角度指定をして[コピー]をすれば完了です。瞬時に角度が出ない、あるいは割り切れない場合・・・例えば14角形なら(360/14)と入力すればOKです。
あとは[D]で直前の動作(回転コピー)を繰り返すだけです。
コピーを繰り返したら、全てを選択して・・・
パスファインダーの[分割]で・・・
ピザ分割は完成です。
次ぎに正奇数角形の場合として、ここでは七角形で説明します。分割線は多角形の中心点に先端をスナップさせ、そこをAlt(※)キーを併用してクリックして回転の起点とし
(360/7)と指定してコピーを行います。Abodeのツールは入寮値の部分で簡単な四則演算や、単位違いを処理してくれます。
ex) 123mm+8pt
あとは[D]で直前の動作(回転コピー)を繰り返すだけです。
コピーを繰り返したら、全てを選択し、パスファインダーの[分割]でピザ分割は完成です。
ラベル:
Illustrator
日曜日, 8月 25, 2024
土曜日, 8月 24, 2024
Let's start JavaScript 32
クリックで配置画像がラセン回転
クリックで配置画像がラセン回転する展開を整理してみました。
ルート階層の中に・・・
picフォルダー(image.png)
linksフォルダー(rule.css, script.js)
という構造です。
<!-- 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>
<link rel="stylesheet" href="links/rule.css">
</head>
<body>
<!-- 画像を配置し、container クラスを持つ div で中央に配置。
spiral-image クラスを持つ img タグを配置。 -->
<div class="container">
<img src="pic/image.png"
alt="Fish Image" class="spiral-image">
</div>
<script src="links/script.js"></script>
</body>
</html>
<!-- index.html -->
/* rule.css */
body, html {
height: 100%;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: dodgerblue;
}
.container {
display: flex;
justify-content: center;
align-items: center;
}
.spiral-image {
width: 300px;
height: auto;
cursor: pointer;
transition: transform 1s ease-in-out;
}
/* 回転のスピード設定 */.spiral-image.spinning {
animation: spin 4s infinite;
}
/* 回転の角度とサイズ設定 */@keyframes spin {
0% {
transform: rotate(0deg) scale(0.5);
}
25% {
transform: rotate(180deg) scale(1);
}
50% {
transform: rotate(360deg) scale(1.5);
}
75% {
transform: rotate(540deg) scale(2);
}
100% {
transform: rotate(720deg) scale(2.5);
}
}
/* rule.css */
/* script.js */
/* 画像をクリックすると、spinningクラスをトグルし、
螺旋回転アニメーションを実行 */
document.addEventListener('DOMContentLoaded', () => {
const image = document.querySelector('.spiral-image');
image.addEventListener('click', () => {
image.classList.toggle('spinning');
});
});
/* script.js */
画像をクリックしたら、こんな感じです。
ラベル:
HTML,
JavaScript
金曜日, 8月 23, 2024
modoローポリモデリング 49
勾玉の作成手順は頂点・境界・ポリゴンの切り替えが重要
ローポリの説明で勾玉を思い出したので整理してみました。色々なtipsがあります。
立方体を[D]でポリゴンを倍増し[Y]方向に拡大します。
次の表示を正面に切り替え、境界で中心のエッジを選択して移動ツール[W]で上に移動させます。
次ぎに底面の4つのポリゴンを選択して[R]にて縮小します。
次ぎに上図のように一番下の境界を1つおきに選択した頂点調整で境界を概ね水平に調整してから上の面を[L]キーを活用して1周選択し、ループスライスで境界を1つ追加します。
ここで水平に調整した境界を、概ね元の状態に戻してから[TAB]キーでサブディビジョン設定します。
次ぎに右面に表示を切り替え、[フォールオフ]>[リニア]に変更してから[E]の回転ツールを上図のように変形させます。
ここから境界を[E]の回転ツールで若干回転させて形状を微調整します。
中間位置の境界も[E]の回転ツールで調整を行います。
次ぎに正面表示にして[R]の拡大・縮小ツールにて[X]方向を縮小して上図のように平たくします。
ここであ名の位置の頂点を[B]のベベルにて面を作成し・・・
生成した面を削除してからブリッジで穴あき状態にします。
後は生成したあ名の形状の頂点や境界を微調整して形状と整えラバ完成です。
ラベル:
3D,
modo,
modo_Low_Polygon
登録:
投稿 (Atom)