// @ts-ignore をかく // @ts-ignore let example = 2; example = "型チェックを無視";

export class BitmapData{ private _context:CanvasRenderingContext2D; private _imageData:ImageData; private _img:HTMLImageElement; private _width:number; private _height:number; private _mean:number=0; private _canvas:HTMLCanvasElement; priv…

export class JsonLoader { load(url: string, callback: (data: any) => void, errorCallback?: (error: any) => void) { const xhr = new XMLHttpRequest(); xhr.onreadystatechange = () => { if (xhr.readyState === 4) { // 4 means the request is don…

EventDispatcher export class EventDispatcher { private listeners: { [event: string]: Array<(data?: any) => void> } = {}; on(event: string, listener: (data?: any) => void): void { if (!this.listeners[event]) { this.listeners[event] = []; } …

let scenes: SceneA[] = [ new SceneA(),//SceneA extends SceneBase new SceneB()//SceneB extends SceneBase ]; 本当はSceneBaseの配列にしたかったのだけど、間違ってSceneAの配列としてしていた。 ただ最初はなぜかエラーはでなかった。メンバー変数や関…

Please make a dummy object for updating matrices of InstancedMesh Please code "mesh.instanceMatrix.needsUpdate = true;" import { Mesh } from "three"; import * as THREE from 'three'; import { InstancedBall } from './InstancedBall'; export c…

import p5 from "p5"; export class p5Main{ public _width :number = 512; public _height :number = 512; private _p5 :p5; private _dom :HTMLElement; private _bg :number=0; private _callback :()=>void; constructor(){ } init(callback:()=>void){ …

export class LabColor { /** * * @param l 0 to 100 * @param a -128 to 127 * @param b -128 to 127 * @returns */ labToRgb(l: number, a: number, b: number): {r:number, g:number, b:number} { let y = (l + 16) / 116; let x = a / 500 + y; let z = …

Xorshiftアルゴリズムを使用した疑似乱数生成器 (PRNG) chatGPTに聞きました export class Xorshift { private state: number; constructor(seedHash: string) { this.state = this.hashStringToInt32(seedHash); } public hashStringToInt32(str: string): …

dat.guiの後継lil-guiにて。 lil-gui.georgealways.com 以下のようにcolorFormatsオブジェクトを作り、その中にさらに名前付きの変数を入れる。 colorFormats = {r:1,g:1,b:1} みたいなのはダメ！もう一個入れ子にしないと。 //https://lil-gui.georgealways…

import * as THREE from 'three'; import { MeshBasicMaterial, BoxGeometry, Object3D, Shape, Vector3 } from 'three'; import { SVGLoader } from 'three/examples/jsm/loaders/SVGLoader'; export class MySVGLoader extends Object3D{ loader :SVGLoade…

import * as THREE from 'three'; export class Lines extends THREE.Object3D{ numParticles:number=4000; strokes:THREE.Line; counter:number=0; countMax:number=0; positions :number[]; scales :number[]; geo :THREE.BufferGeometry; private mode :s…

npm install npm install glslify npm install glsl-random @types/glslifyがなかったのでつくる chatGPTに教えてもらった。 glslify.d.tsというファイルを glslを入れてるフォルダに入れた // glslify.d.ts declare module 'glslify' { interface GlslifyOp…

正式になんて言うのかわからない。 クラスを定義するほどでないときに使っている。 以下ではrgbの変数を持っているものを配列として定義 public colors:{r:number,g:number,b:number}[];

AdobeAnimateからhtml5書き出しするとcreatejsと共に書き出される createjsはActionScriptのFlash PlayerのAPIに似せて作ったAPI。 Animateで作ったtimelineがMovieClipクラスのインスタンスになる stageにそのインスタンスがaddChildされてる tickがupdate…

seedで数値が固定される乱数が欲しい。 sbfl.net ↑こちらを参考にさせていただき、 Math.random()の代替となるようvalue()関数を新設しました export class SRandom { x:number=0; y:number=0; z:number=0; w:number=0; public static instance:SRandom; pub…

export class AbsDOM{ public dom:HTMLElement; constructor( dom:HTMLElement, parentDom:HTMLElement, zIndex:number ){ this.dom = dom; this.dom.style.position="absolute"; this.dom.style.zIndex = ""+zIndex; parentDom.append(this.dom); } show(){…

以下のようなクラスを継承して使った import p5 from 'p5'; import * as THREE from 'three'; export class p5MainBase { public _canvasTex:THREE.CanvasTexture; public canvasElement:HTMLCanvasElement; public _width:number = 512; public _height:num…

VSCodeでTypeScript(or JavaScript)の色がおかしくなった JavaScript and TypeScript Nightly というアドオンのせいだった（disabledにすると治る)。 何かアップデートされて変わってしまったのかもしれない。 とりあえずdisabledにした。何のために入れてた…

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls' this.control = new OrbitControls(this.camera, domElement); this.control?.update();

preserveDrawingBuffer : trueが必要 let dom = document.getElementById("webgl"); this.renderer = new THREE.WebGLRenderer({ canvas: dom,//document.querySelector('#webgl'), antialias: true, preserveDrawingBuffer : true }); document.addEventLis…

threejs で 画像ロードマネージャー import * as THREE from 'three'; import { ImageLoader } from 'three'; interface ImgData { name : string; url : string; tex : THREE.Texture; } export class ImageManager { public static LOGO1:string="LOGO1"; …

// インスタンスを保存するためのstatic変数 private static instance: Singleton; // constructorをprivateにすることで、外部からの新しいインスタンス作成を制限 private constructor() { // 初期化処理 } // インスタンスを取得するためのstaticメソッド…

import * as THREE from 'three'; import { Matrix4, Mesh, Texture, TextureLoader, Vector3 } from 'three'; import waveRender_vert from "../glsl/waveRender.vert"; import waveRender_frag from "../glsl/waveRender.frag"; import { CircleObj } from…

オフスクリーンレンダリング github.com typescript 昔は material.map = this.renderTarget; で行けたきがするがいつからから material.map = this.renderTarget.texture; になった模様 import * as THREE from 'three'; import { Camera, Matrix4, Object3…

エラーが消えない時に使った。 let hoge:string = fuga as any;

import * as THREE from 'three'; import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls' import Stats from 'three/examples/jsm/libs/stats.module' import { GUI } from 'lil-gui' import { TorusGeometry, MeshPhongMaterial, Dir…

// ウィンドウをフォーカスしたら指定した関数を実行 window.addEventListener('focus', ()=>{ console.log('onFocus'); }, false); // ウィンドウからフォーカスが外れたら指定した関数を実行 window.addEventListener('blur', ()=>{ console.log("onBlur")…

brink with gasp. i dont know this way is correct. this.count=0; gsap.to(this,{ duration:0.3, onUpdate:()=>{ this.count++; if(this.count%2==0) this.hoge.style.opacity="0"; else this.hoge.style.opacity="100%"; }, onComplete:()=>{ this.hoge.s…

setCenter(dom:HTMLElement,zIndex:number){ dom.style.position = "absolute"; dom.style.zIndex= ""+zIndex; let tgW = dom.clientWidth; let tgH = dom.clientHeight; dom.style.left = (window.innerWidth/2-tgW/2)+"px"; dom.style.top = (window.inner…