zerogram

元ゲームプログラマー、内製のゲームエンジン作ってました。 JavaScriptを使った…

zerogram

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

記事一覧

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

昔、YouTubeで公開した動画のソースコードです。定期的にコメントがあるのでソースコードを公開します。 ただし 間違って上書きしてしまい動作しません 詳細を忘れてしまっ…

zerogram
11日前
1

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

標準の<video>動画再生ではできない機能を実装した動画再生プログラムです。プレーヤーアプリではないので簡易的なUIのみの実装です。 高速&安定したシーク、複数動画の同…

1,500
zerogram
2か月前
5

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

録画するときに色調整、画像の拡大回転をリアルタイム処理する録画アプリが欲しかったので自分で作りました。JavaScriptではリアルタイム処理が難しいため、webGL(GPU)を利…

600
zerogram
4か月前
9

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

バイナリデータを少しずつ数値や文字列に変換しながら読み込んでいく処理です。以前の記事の巨大ファイルの部分読み込みと組み合わせると省メモリ&高速なデータ解析処理が…

zerogram
4か月前
1

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

<input type="file">で選択したローカルファイルの部分アクセス方法 ※OS、ブラウザによっては使えない可能性があります Fileインターフェイスのslice <input>で選択した…

zerogram
4か月前
3

TypeScript VideoEncoderでwebmファイルの作成 Step(1コマずつ)録画

MediaRecorderでのリアルタイム録画ではなく、キャンバスに描画した画像を1コマずつ録画する方法です。そのためには、動画エンコードとwebmの作成が必要になります。エン…

600
zerogram
4か月前
3

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

コントラスト調整やキャプション追加など、カメラ画像を加工してから録画する方法です。(※画像加工プログラムは含まれません) ソースコード export async function ma…

zerogram
4か月前

JavaScript API VideoEncoder/Decoderの使い方

最近(?)追加された動画用のエンコード・デコードを行うAPIを使ってみました。キャンバスの画像(2フレーム)をエンコード(録画)、デコード(再生)するプログラムです…

zerogram
5か月前

JavaScript async/await シグナル処理

Promiseのthenを使用しない書き方の例です。 awaitが使えないイベントハンドラ内で使用すると便利 個人的にthen構文が苦手なのでawaitを多用しています。 とりあえずソー…

zerogram
5か月前
1

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

以前と投稿したCRC32計算をWebWorker(スレッド)で非同期にしたものです。計算中でもUI関連の処理が停止しないため、快適な操作を維持できます。 WebWorker async-await…

zerogram
5か月前
1

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

ブラウザで動作するゲームなどが利用するデータ(画像、ポリゴンデータなど)をIndexedDBに保存する(インストール)することで、読み込み処理の高速化、サーバー負荷軽減…

300
zerogram
5か月前
1

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

ブラウザのファイルキャッシュはほとんど制御できませんが、IndexedDBを使用すれば独自のファイルキャッシュシステム等が作成可能になります。 mdn web docsを参考にソース…

zerogram
5か月前
2

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

JavaScriptでzipファイルが使えると何かと便利なので作ってみました。圧縮展開はAPIを利用、ソースコードはすべて白紙の状態から作成しています。オープンソースや外部のラ…

600
zerogram
5か月前
1

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

zip(pkzip)やgzipの圧縮展開がJavaScript(ブラウザ)のAPIに用意されているようなので使ってみました。 //---------------------------------------// deflate展開 zip(p…

zerogram
5か月前
3

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

JavaScriptのビット演算にご用心 C言語のようにビット演算を記述すると想定外の動作になったり 符号なし右シフト演算を活用 (-1)>>>0 = 4294967295(0xffffffff) JavaScrip…

zerogram
5か月前
1

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

時々必要になるSJISコード(zipとか)。JavaScriptのAPIにSJIS⇒Stringはあるけど逆はないので作成しました。 APIのTextEncoder("sjis")を使って変換表を作成、変換処理に…

zerogram
5か月前
1
Raspberry Pi Picoで動画と音声再生 multicore+DMA⇒30fps ソースコードの残骸

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

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

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

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

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

対応ファイル

もっとみる
JavaScript Webカメラ録画アプリ リアルタイム色補正/拡大回転 アプリDIY

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

録画するときに色調整、画像の拡大回転をリアルタイム処理する録画アプリが欲しかったので自分で作りました。JavaScriptではリアルタイム処理が難しいため、webGL(GPU)を利用しています。

使用例

YouTubeにアップするためのピアノ演奏動画作成に利用しています。一応30fpsで録画できているようです。カメラ解像度が1920で処理落ちしているのか時々コマ落ちしてます。PCの性能によって

もっとみる

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

バイナリデータを少しずつ数値や文字列に変換しながら読み込んでいく処理です。以前の記事の巨大ファイルの部分読み込みと組み合わせると省メモリ&高速なデータ解析処理が実現できます。

使い方

fetchで取得したBlobを使った例です。

let blob = await (await fetch("./data.bin")).blob();let reader = new BinaryReader(

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

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

<input type="file">で選択したローカルファイルの部分アクセス方法
※OS、ブラウザによっては使えない可能性があります

Fileインターフェイスのslice

<input>で選択した時点では、ファイルは読み込まれません。
FileはBlobの機能を備えています。slice関数を使用すれば、ローカルファイルへの部分アクセスが可能です。

// File ローカルファイルの部分ア

もっとみる
TypeScript VideoEncoderでwebmファイルの作成 Step(1コマずつ)録画

TypeScript VideoEncoderでwebmファイルの作成 Step(1コマずつ)録画

MediaRecorderでのリアルタイム録画ではなく、キャンバスに描画した画像を1コマずつ録画する方法です。そのためには、動画エンコードとwebmの作成が必要になります。エンコードはAPIのVideoEncoder、webmは仕様書を見て自作しました。ソースコードは白紙から作成しています。

こいつを見てくれ

白い四角形が移動するだけの動画です。ダウンロードして見てください。

MediaRe

もっとみる
JavaScript カメラ画像をCanvasで加工してからMediaRecorderで録画

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

コントラスト調整やキャプション追加など、カメラ画像を加工してから録画する方法です。(※画像加工プログラムは含まれません)

ソースコード

export async function main(){ let canvas = document.getElementById("canvas"); if(!(canvas instanceof HTMLCanvasElement))thro

もっとみる

JavaScript API VideoEncoder/Decoderの使い方

最近(?)追加された動画用のエンコード・デコードを行うAPIを使ってみました。キャンバスの画像(2フレーム)をエンコード(録画)、デコード(再生)するプログラムです。

ソースコード

export async function main(){ let canvas = document.getElementById("canvas"); if(!(canvas instanceof

もっとみる

JavaScript async/await シグナル処理

Promiseのthenを使用しない書き方の例です。
awaitが使えないイベントハンドラ内で使用すると便利
個人的にthen構文が苦手なのでawaitを多用しています。

とりあえずソースコード

export async function main(){ let button = document.getElementById("button"); if(!button)throw

もっとみる

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

以前と投稿したCRC32計算をWebWorker(スレッド)で非同期にしたものです。計算中でもUI関連の処理が停止しないため、快適な操作を維持できます。

WebWorker

async-awaitの並列処理ではなく、マルチスレッド処理を行うAPIです。
詳しくは検索で

いきなりソースコード

export async function main(){ let crcWorker

もっとみる

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

ブラウザで動作するゲームなどが利用するデータ(画像、ポリゴンデータなど)をIndexedDBに保存する(インストール)することで、読み込み処理の高速化、サーバー負荷軽減が行えます。

使い方

zipファイル内のファイルをIndexedDBに保存、fetchなどサーバーにアクセスする前にDBを検索、あればそのデータを使いなければサーバーから取得
zipが更新されていればDBの再構築

co

もっとみる

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

ブラウザのファイルキャッシュはほとんど制御できませんが、IndexedDBを使用すれば独自のファイルキャッシュシステム等が作成可能になります。
mdn web docsを参考にソースコードを作成しています。

IndexedDB

Key(string number ほか)を使ってJavaScriptのオブジェクトを格納取得できるオブジェクト指向データベースです。詳しくは検索とかで。

とりあえず

もっとみる

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

JavaScriptでzipファイルが使えると何かと便利なので作ってみました。圧縮展開はAPIを利用、ソースコードはすべて白紙の状態から作成しています。オープンソースや外部のライブラリ未使用です。

zipファイルからファイル情報取得

文章で説明するよりソースコードで
文字コード変換や圧縮展開などの実装は以前の記事または、この後の有料記事にあります。

// pkzip constantcons

もっとみる

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

zip(pkzip)やgzipの圧縮展開がJavaScript(ブラウザ)のAPIに用意されているようなので使ってみました。

//---------------------------------------// deflate展開 zip(pkzip)export async function decompressPkZipDeflate(blob : Blob){ let decomp

もっとみる

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

JavaScriptのビット演算にご用心
C言語のようにビット演算を記述すると想定外の動作になったり

符号なし右シフト演算を活用
(-1)>>>0 = 4294967295(0xffffffff)
JavaScriptのビット演算は32bit

class CRC32{ static table : number[] = []; constructor(){ if(CR

もっとみる

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

時々必要になるSJISコード(zipとか)。JavaScriptのAPIにSJIS⇒Stringはあるけど逆はないので作成しました。
APIのTextEncoder("sjis")を使って変換表を作成、変換処理に利用

// 文字コード変換 String(UTF-16) -> SJIS// 簡易版? プログラム実験用 サロゲートペア未対応export class TextEncoderSJIS{

もっとみる