zerogram

元ゲームプログラマー、内製のゲームエンジン作ってました。 JavaScriptを使った動的なWebページやアプリの制作、公開しています。 （音ゲー練習アプリ、楽器練習支援アプリなど） これまで公開してきたアプリの制作ノウハウや思いついたアイデアを投稿していく予定です。

zerogram

元ゲームプログラマー、内製のゲームエンジン作ってました。 JavaScriptを使った動的なWebページやアプリの制作、公開しています。 （音ゲー練習アプリ、楽器練習支援アプリなど） これまで公開してきたアプリの制作ノウハウや思いついたアイデアを投稿していく予定です。

Raspberry Pi Picoで動画と音声再生　multicore＋DMA⇒30fps ソースコードの残骸

昔、YouTubeで公開した動画のソースコードです。定期的にコメントがあるのでソースコードを公開します。 ただし 間違って上書きしてしまい動作しません 詳細を忘れてしまったため、質問に答えられません たぶんバグあり、たまたま動いていたかも 回路図なしで配線したので、回路図はありません

zerogram

    • JavaScript VideoDecoderを使った高機能動画再生プログラム

      標準の<video>動画再生ではできない機能を実装した動画再生プログラムです。プレーヤーアプリではないので簡易的なUIのみの実装です。 高速＆安定したシーク、複数動画の同期再生、オーディオ遅延補正、コマ送り戻し（ステップ再生）に対応、ストリーミング再生には対応していません（動画ファイルの再生のみ）。 ソースコードはすべて自作（オリジナル）、オープンソース、生成AIは使っていません。 対応ファイルとコーデック動作環境 Windows Edge/Chrome まだ一般的ではな

      ¥1,500
      zerogram

      • JavaScript Webカメラ録画アプリ リアルタイム色補正/拡大回転 アプリDIY

        録画するときに色調整、画像の拡大回転をリアルタイム処理する録画アプリが欲しかったので自分で作りました。JavaScriptではリアルタイム処理が難しいため、webGL(GPU)を利用しています。 使用例 YouTubeにアップするためのピアノ演奏動画作成に利用しています。一応30fpsで録画できているようです。カメラ解像度が1920で処理落ちしているのか時々コマ落ちしてます。PCの性能によっては、解像度を落とす、他のアプリを終了させるなどの対策が必要になります。 下手で

        ¥600
        zerogram

        • TypeScript バイナリデータ読み込み処理

          バイナリデータを少しずつ数値や文字列に変換しながら読み込んでいく処理です。以前の記事の巨大ファイルの部分読み込みと組み合わせると省メモリ＆高速なデータ解析処理が実現できます。 使い方 fetchで取得したBlobを使った例です。 let blob = await (await fetch("./data.bin")).blob();let reader = new BinaryReader(new BlobBinaryReadIF(blob), 1024);let u3

          zerogram

          JavaScript 巨大なローカルファイルの部分的な読み込み

          <input type="file">で選択したローカルファイルの部分アクセス方法 ※OS、ブラウザによっては使えない可能性があります Fileインターフェイスのslice <input>で選択した時点では、ファイルは読み込まれません。 FileはBlobの機能を備えています。slice関数を使用すれば、ローカルファイルへの部分アクセスが可能です。 // File ローカルファイルの部分アクセス let blob = file.slice(0, 1024*1024);

          zerogram

          JavaScript 巨大なローカルファイルの部分的な読み込み

          zerogram

          TypeScript VideoEncoderでwebmファイルの作成　Step（１コマずつ）録画

          MediaRecorderでのリアルタイム録画ではなく、キャンバスに描画した画像を１コマずつ録画する方法です。そのためには、動画エンコードとwebmの作成が必要になります。エンコードはAPIのVideoEncoder、webmは仕様書を見て自作しました。ソースコードは白紙から作成しています。 こいつを見てくれ 白い四角形が移動するだけの動画です。ダウンロードして見てください。 MediaRecorderと違って処理落ちてもコマ落ちしません そしてシーク可能！！（苦労しま

          ¥600
          zerogram

          TypeScript VideoEncoderでwebmファイルの作成　Step（１コマずつ）録画

          zerogram

          JavaScript カメラ画像をCanvasで加工してからMediaRecorderで録画

          コントラスト調整やキャプション追加など、カメラ画像を加工してから録画する方法です。（※画像加工プログラムは含まれません） ソースコード export async function main(){ let canvas = document.getElementById("canvas"); if(!(canvas instanceof HTMLCanvasElement))throw canvas; let ctx = canvas.getContext

          zerogram

          JavaScript カメラ画像をCanvasで加工してからMediaRecorderで録画

          zerogram

          JavaScript API VideoEncoder/Decoderの使い方

          最近（？）追加された動画用のエンコード・デコードを行うAPIを使ってみました。キャンバスの画像（2フレーム）をエンコード（録画）、デコード（再生）するプログラムです。 ソースコード export async function main(){ let canvas = document.getElementById("canvas"); if(!(canvas instanceof HTMLCanvasElement))throw canvas; let

          zerogram

          JavaScript API VideoEncoder/Decoderの使い方

          zerogram

          JavaScript async/await シグナル処理

          Promiseのthenを使用しない書き方の例です。 awaitが使えないイベントハンドラ内で使用すると便利 個人的にthen構文が苦手なのでawaitを多用しています。 とりあえずソースコード export async function main(){ let button = document.getElementById("button"); if(!button)throw "button?"; // ボタンが押されたらシグナル送信 l

          zerogram

          JavaScript async/await シグナル処理

          zerogram

          JavaScript WebWorkerでCRC32計算　スレッドによる非同期計算処理の例

          以前と投稿したCRC32計算をWebWorker（スレッド）で非同期にしたものです。計算中でもUI関連の処理が停止しないため、快適な操作を維持できます。 WebWorker async-awaitの並列処理ではなく、マルチスレッド処理を行うAPIです。 詳しくは検索で いきなりソースコード export async function main(){ let crcWorker = await CRC32Worker.open(); let d

          zerogram

          JavaScript WebWorkerでCRC32計算　スレッドによる非同期計算処理の例

          zerogram

          TypeScript zipファイルとIndexedDBを使ったインストール（ファイルキャッシュ）システムの作成

          ブラウザで動作するゲームなどが利用するデータ（画像、ポリゴンデータなど）をIndexedDBに保存する（インストール）することで、読み込み処理の高速化、サーバー負荷軽減が行えます。 使い方 zipファイル内のファイルをIndexedDBに保存、fetchなどサーバーにアクセスする前にDBを検索、あればそのデータを使いなければサーバーから取得 zipが更新されていればDBの再構築 const nameDB = "ZipFileCacheSample"; //

          ¥300
          zerogram

          TypeScript zipファイルとIndexedDBを使ったインストール（ファイルキャッシュ）システムの作成

          ¥300
          zerogram

          JavaScript IndexedDBの使い方 独自のファイルキャッシュ作成

          ブラウザのファイルキャッシュはほとんど制御できませんが、IndexedDBを使用すれば独自のファイルキャッシュシステム等が作成可能になります。 mdn web docsを参考にソースコードを作成しています。 IndexedDB Key（string number ほか）を使ってJavaScriptのオブジェクトを格納取得できるオブジェクト指向データベースです。詳しくは検索とかで。 とりあえずファイルキャッシュのようなもの そのままだと使いにくいのでラップクラス（Idd

          zerogram

          JavaScript IndexedDBの使い方 独自のファイルキャッシュ作成

          zerogram

          TypeScript zipファイルの読み込みと作成 JavaScript

          JavaScriptでzipファイルが使えると何かと便利なので作ってみました。圧縮展開はAPIを利用、ソースコードはすべて白紙の状態から作成しています。オープンソースや外部のライブラリ未使用です。 zipファイルからファイル情報取得 文章で説明するよりソースコードで 文字コード変換や圧縮展開などの実装は以前の記事または、この後の有料記事にあります。 // pkzip constantconst EOCD_SIZE = 22;//ファイルコメントなしの最小サイズconst

          ¥600
          zerogram

          TypeScript zipファイルの読み込みと作成 JavaScript

          ¥600
          zerogram

          JavaScript APIを利用したDeflate圧縮と展開 CompressionStream DecompressionStream

          zip(pkzip)やgzipの圧縮展開がJavaScript（ブラウザ）のAPIに用意されているようなので使ってみました。 //---------------------------------------// deflate展開 zip(pkzip)export async function decompressPkZipDeflate(blob : Blob){ let decomp = new DecompressionStream("deflate-raw"

          zerogram

          JavaScript APIを利用したDeflate圧縮と展開 CompressionStream DecompressionStream

          zerogram

          JavaScript CRC32の計算 ＞＞＞符号なし右シフト演算

          JavaScriptのビット演算にご用心 C言語のようにビット演算を記述すると想定外の動作になったり 符号なし右シフト演算を活用 (-1)>>>0 = 4294967295(0xffffffff) JavaScriptのビット演算は32bit class CRC32{ static table : number[] = []; constructor(){ if(CRC32.table.length > 0){ return; }

          zerogram

          JavaScript CRC32の計算 ＞＞＞符号なし右シフト演算

          zerogram

          TypeScript String(UTF-16)⇒SJIS 文字コード変換

          時々必要になるSJISコード（zipとか）。JavaScriptのAPIにSJIS⇒Stringはあるけど逆はないので作成しました。 APIのTextEncoder("sjis")を使って変換表を作成、変換処理に利用 // 文字コード変換 String(UTF-16) -> SJIS// 簡易版？　プログラム実験用　サロゲートペア未対応export class TextEncoderSJIS{ static mapping : Uint16Array; con

          zerogram

          TypeScript String(UTF-16)⇒SJIS 文字コード変換

          zerogram