先日にボールを壁に反射させるのを作った。 コレ、ボールが反射するときに弾ませてみたら面白いかなーと思い、弾ませる方法を考えてみた。 作成物 // Canvas 紐づけ要素 ID const BASE_ID = "canvas_base"; // 描画エリアサイズ const WIDTH = 540; const HEIGHT = 480; //////////////////// // // 描画する点 // 物理法則に従って落下させる // class Point { constructor(x, y, ts) { // 初期位置およびタイムスタンプ this.x = x this.y = …

前回まではベストエフォートで常に更新処理終わったら描画の更新をかける方針でした。 そうではなく「一定のタイミングで更新」かける方式の描画についても試してみます。 ライフゲームはよく作っていて分かりやすいのでこれで。 作成物 // Canvas 紐づけ要素 ID const BASE_ID = "canvas_base"; // セル1辺サイズ (pixel) const CELL_SIZE = 6; // 区切り線の太さ (pixel) const LINE_WIDTH = 1; // 横方向および縦方向のセル個数 const H_CELL_COUNT = 80; const V_CELL_C…

やりたいこと canvasを使った文字の描画で、特定の幅で文字を折り返して表示したかった。 何も処理しないと↓みたいに文字が詰まって表示される 実装 ①文字を任意の文字数ごとに分割して配列に入れていく // 表示したいテキスト const src = "あ".repeat(30); const results = []; let tmp = ""; src.split("").map((row) => { tmp = tmp + row; // 16文字の場合に配列に入れる if (tmp.length === 16) { results.push(tmp); // 文字カウント用の変数をクリ…

やりたいこと canvasにdrawImage()で貼り付けた画像を正円で表示させたい（丸型にトリミングされたように表示させたい） やるまでは「quadraticCurveTo()でベジェ曲線使ってやらなかん感じ〜！？！？！？！数学できないよ〜！！」（数学関係あるかもわからない）って思ってたけど全然使わなかった 実装 一部抜粋 const image = new Image(); image.src = "表示したい画像"; image.onload = () => { ctx.beginPath(); // 半径40pxの正円 ctx.arc(50, 50, 40, 0, 2 * Math.…

前回 : 等速度運動。 等速度運動やったなら、斜方投射もやっておこうと物理の計算を復習。 作成物 // Canvas 紐づけ要素 ID const BASE_ID = "canvas_base"; // 描画エリアサイズ const WIDTH = 500; const HEIGHT = 500; // 反発係数 const REFLECTION = 0.8; // 反射時に速度が一定以下になったら除外 const REFLECTION_VMIN = 0.2; //////////////////// // // 描画する点 // 物理法則に従って落下させる // class Point { …

前回に下地となるクラスを作ったので、アニメーションが活かせる簡単な処理を作ってみます。 『ボールを投げて壁に反射して――』が分かり易そうなのでコレを作ってみよう。 作成物 // Canvas 紐づけ要素 ID const BASE_ID = "canvas_base"; // 描画エリアサイズ const WIDTH = 500; const HEIGHT = 500; //////////////////// // // 描画する点 // 物理法則に従って落下させる // class Point { constructor(x, y, ts) { // 初期位置およびタイムスタンプ this…

UnityでCanvasにImageを張り付けたので、その上に線を描きたい。 これが意外と大変でdraw.line()みたいな簡単に使える関数がない。三角形なら簡単にかけるので、細長い三角形を2つ書いて直線っぽくする。 1. HierarchyにあるCanvasをクリック、①のちょっと左上にある＋ボタンを押して、Create Empty Child を選んで、GameObjectを追加する。 2. GameObjectをクリックして、Inspectorを表示。 3. ②をクリックして、Shiftキーを押しながら（選択肢が変わる）Bottom, leftを選ぶ。Pos X,Y,Z を0にする。 …

こんにちは、ISID 金融ソリューション事業部の岡崎です。 今回はUE5でコリジョン（衝突）判定機能を使って、自動で開閉するドアや、NPCとの簡単な会話システムを作成してみます。 はじめに UE5ではフィールド上のさまざまなオブジェクトや、プレイヤーが操作するキャラクターにコリジョン判定機能を持たせることができます。 これにより、物体にキャラクターが当たった時や、前もって設定しておいた領域に他のオブジェクトが侵入した時などに、 任意の機能を作成できます。 今回はこのコリジョン判定機能を利用して下記2つの機能を実装します。 キャラクターが近づくと開き、遠ざかると閉じる自動ドアの機能 対象キャラク…

来週は諸事情により木曜日（6/15）更新になります。

こんにちは、フロントエンドエンジニアの堀江（@nandemo_3_）です。 前回、Babylon.jsを使って簡単に、Web上に3Dモデルを描画しました。 synamon.hatenablog.com 元々は、Web上でVRMを描画したかったので、今回はそちらにチャレンジしていきたいと思います。 VroidHubのアバタープレビュー画面ですね。 すでに、いろんな方がやられているので、そこまで真新しさはありませんが、 Next.jsでトライしてみましたので、参考になれば幸いです。 はじめに 当初は、Babylon.jsをベースに、Web上にVRMを表示しようと考えていました。 babylon-v…

ボタンをもったUIでの処理 VerseのUI機能 今回開発するもの 簡単なテキストをVerseから表示するプログラム ボタン２個とテキスト１個を表示するプログラム ボタンを押すとメッセージを表示するプログラム完成版 まとめ VerseのUI機能 VerseのUI機能は現状で決して充実しているとは言えず、今後のアップデートが期待されている項目の一つです。 今後、機能拡張があるとはいえ、基本的には現状ある機能の流れを踏襲した形になると思われ、現状の機能を理解しておくことは、今後の開発の大きな手助けになるはずです。 （また、UMG ViewModelの機能が、24.20までは使用できていたのですが、…

概要 弊社では、製造現場で使用される画像を対象とした画像処理プログラムの構築や、深層学習モデルの構築を行っています。SageMakerを使用すると、TensorFlowやPyTorchなどのフレームワークを使ったことがない方でも、手軽に深層学習モデルの構築ができ、そのモデルを利用することができます。この記事では、SageMakerを使用したモデル構築の方法や特徴について、実際の動作を確かめながら解説します。 SageMakerとは AWSが提供している、機械学習を効率的に進めるためのフルマネージドサービスです。深層学習モデルの構築、トレーニング、デプロイ等機械学習に関する様々な機能が備わってお…

NEWSのカップリング曲を年代順にまとめました。皆さんはどれだけ知っていますか？誤っている箇所や抜けている曲などあればコメントで教えてください！No曲名収録CD1ありがとう・今NEWSニッポン2Private Hearts3Stand Up!希望〜Yell〜4Good News!5LET'S GO TO THE PLANETS6忘れないさ 〜LIFE GOES ON〜紅く燃ゆる太陽7DREAMS8BEACH ANGEL9Party Timeチェリッシュ10SHOCK ME11Devil or Angel12夢の数だけ愛が生まれるTEPPEN13NANDE×2 DAME14Fiesta15Boo…

NEWSの楽曲を年代順にまとめました。（正式に音源化・リリースされている曲が対象）皆さんはどれだけ知っていますか？誤っている箇所や抜けている曲などあればコメントで教えてください！シングルカップリングソロ、またはユニット下線が引かれている曲をクリックするとYouTubeで聞くことができます！No曲名1NEWSニッポン2ありがとう・今3Private Hearts4希望〜Yell〜5Stand Up!6Good News!7LET'S GO TO THE PLANETS8紅く燃ゆる太陽9忘れないさ 〜LIFE GOES ON〜10DREAMS11BEACH ANGEL12チェリッシュ13Party…

2023年6月5日午前8:36の茅ヶ崎白樺。波数は少なかったがたまにこのくらい乗れる波が来た。 2023年6月5日の波データ 日曜日はめっちゃ波が良かったみたいですが おまけ：2年前の今日の波 2023年6月5日の波データ 場所 茅ヶ崎白樺 入水時間 ８：３８～９：３５ 人数 周りに２～３名 テイクオフ回数 １０回くらい 波数少なめ 波のサイズ ひざ～もも▼ 風 ほぼ無風な北東オフショア（風速0.5ｍ/sくらい） ボード Aviso CANVAS mini-noserider 6'12" フィン FCS FK-2 ウエット ロンスプ＋サーフキャップ 日曜日はめっちゃ波が良かったみたいですが 昨…

せっかくブログなんてやっているので日記的なものをつけてみましょう。 ただし、性格的に毎日は難しいので一週間に一回程度です。 内容はその時の出来事、お気持ち表明、新しく発見したことや楽しかったことです。 オーディオに関係ない話ばかりだと思うので、何も面白くはないと思います。 きわどいことも話すし、もちろん誤字脱字なんて気にしません。 誰が見てもいいし見なくてもいいし、自分の息抜き的なものでもあります。

今更ながら趣味でWPF(Windows Presentation Foundation)を始めました. その過程でXAML(Extensible Application Markup Language)を書き始めたのですが、かなり独特な言語だったのでその備忘録第一弾です. 開発言語はC#を想定します. XAMLとWPFの関係 XAMLを調べる前はXAML=WPFだと思っていたのですが、どうやらそうではないようです. XAMLはあくまでUI(のプロパティや他のUIとの関係)をXMLチックに書ける言語であり、XAMLを利用できる技術（環境）は以下のようなものがあります. 名称 特徴 WPF .NE…

The Room Two, Three と日本語フォントへ強制変更するコードをXUnity.AutoTranslatorへ追加するというアヤしい方法ながらも何とか日本語化(自動翻訳化)に成功しました。 そしてThe Room 4: Old Sinsです。最新作なのできっとTextMeshProが使われていて、難なくXUnity.AutoTranslatorで翻訳できるんだろうなぁ…と思っていたのですがハマりました。最終的にはOverrideFontTextMeshProで指定できるフォントを自作し日本語化(自動翻訳化)は出来たのですが、その過程でいろいろと試したことや分かったことがありますので…

オッス！オラ吐瀉夫！ クロームブック大好きブロガー胃もたれ沢 吐瀉夫！ ちなみにお絵かきも好きな人間で、普段は液タブやAndroidタブレットでお絵かきをしている僕。 下記記事でAndroidタブレットや液タブのレビューを書いていますので気になる方はどうぞ。 【液タブが今安い！】オススメ液タブ『XP-Pen Artist15.6』の評価【購入レビュー】 【Androidタブレットでデジタルイラスト】HUAWEI MediaPad M5 liteでお絵描きレビュー しかしながら、普段から使っているChromebookでお絵かきが出来たら楽だよなーと思ってのね。 以前使っていたASUSのChrom…