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…

I didn't know I can use raw (non-escaped) svg for css background. background-image: url('data:image/svg+xml;utf8,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><circle cx="25" cy="25" r="25" fill="blue" /><circle cx="75" cy="25" r="25" fill="blue" /></circle></circle></svg>

Hello. My name is Kitasenjudesign. I do creative coding, mainly with HTML/CSS. HTML SKETCHES - https://000690273.codepen.website/ I think these are unique bcause they are creative coding with almost no programming language. (HTML is calle…

English article is here こんにちわ。北千住デザインと申します。アドベントカレンダー2023のための記事です。 私はHTML／CSSを主としたクリエーティブコーディングを行なっています。 HTML SKETCHES - https://000690273.codepen.website/ これらはほぼプ…

HTML Creative Codingを楽しむためのTipsをお伝えします。 アニメーション CSSにはアニメーションの機能があり、多くのパラメータをアニメーションさせることが可能です。アニメーションさせることでグラフィックデザイン的な静的なものだけでなく、モーショ…

はじめに Newスーパーマリオから10年以上経って出た2Dマリオの新作 マリオメーカーが登場し素人が作った多様なステージが遊べるようになった。 ３Dマリオ（3Dワールドやマリオオデッセイ）も2D的要素が意識的に入れられていて、どのように差別化するか気にな…

chrome://settings/content/sound にドメイン追加でいける。展示などの際に使いたいとき。

// オリジナルの console.log を保存 let originalConsoleLog = console.log; // console.log をオーバーライド console.log = function(message) { originalConsoleLog(message); // 通常のコンソールにも出力 let logDiv = document.getElementById('logOu…

リアルタイム通信に。WebSocketサービスまとめ - FJCT_ニフクラ mobile backend（mBaaS）お役立ちブログ

function hexToRgb(hex) { // '#'を取り除く hex = hex.replace(/^#/, ""); // 3桁の場合は6桁に拡張 if (hex.length === 3) { hex = hex.split('').map(char => char + char).join(''); } // 6桁の16進数表現を捕捉する正規表現 let result = /^([a-f\d]{2}…

重い処理を別スレッドにまかせ、メインスレッドを軽くする 使い方 別スレッドで動くjsファイルを別で定義する webpack等を使ってる場合はエントリーポイントをメイン以外にも用意し、webworker用のjsを書き出せるようにする メインスレッド postMessageで別…

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…

// pathモジュールの読み込み const path = require("path"); module.exports = { // モードを開発モードにする //mode: "production", mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',//"development", // 入力ファイル設定 …

extension marketplace.visualstudio.com 書き方 以下のように書ける。少し独特だけど・・ ファイル右クリックで「copy relative path」 // project://src/myp5/BitmapData.ts // project://src/main/hoge.ts#47 //↑47行目

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] = []; } …

親をdisplay: flex 親をalignItems: center, justifyContent: center. dom.style.color = "#fff"; dom.style.position="relative"; dom.style.display = "flex"; dom.style.alignItems = "center"; dom.style.justifyContent = "center"; let dom2 = documen…

rgbやcmykをチャンネルごとの白黒画像にすること チャンネルタブを開く（レイヤータブにくっついてると思う） 任意のチャンネルだけをオンにする 全選択してコピー 新しいレイヤーにペースト で、任意のチャンネルを白黒画像にしたものをレイヤーに顕在化で…

マックでだすには→ shift+option+"-" 正しいダッシュ記号の使い方・意味 | 伸ばし棒・ハイフンとの違い | wordrabbit

I could not find any function like "clearRect" on p5js. Maybe I have to use "erase" function in p5js. But you can use "clearRect" with context2D easily. with context2D let ctx:CanvasRenderingContext2D = this._p5.drawingContext; ctx.clearRe…

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

I wanted to use Lab color space for making a gradient between two color. so I used chroma.js. chroma.js api docs! npm install chroma-js npm install @types/chroma-js //import import chroma from 'chroma-js'; //definition let color1:chroma.Co…

参考サイト kyndinfo.notion.site scrtwpns.com chromajs gka.github.io lab色空間で色を混ぜる chroma.mix('red', 'blue', 0.5, 'lab'); mixboxでグラデーションのテスト グラデが綺麗と言われているoklabとの比較もできる oklabは白っぽくなりがちだけど、…

observablehq.com

import * as THREE from 'three'; export class ExCamera{ public oCamera:THREE.OrthographicCamera; public pCamera:THREE.PerspectiveCamera; public target:THREE.Vector3 = new THREE.Vector3(0,0,0); public amp:number = 1500; public radX:number = …

https://zenn.dev/ajitama_tkd/articles/fbc7bc6066bfbe

github.com

textAlign(CENTER, CENTER); text('word', 10, 30);//(10,30)を中心にしたテキスト

code https://codepen.io/kitasenjudesign/pen/XWoBNaY ref. medium.com

👉 lil-gui 0.18.2 //myNumber:number; gui.add( this, 'myNumber', { Label1: 0, Label2: 1, Label3: 2 } );

How to customize fog in threejs. use "onBeforeCompile" !!!!! https://stackoverflow.com/questions/52425575/is-it-possible-to-let-fog-interact-with-the-materials-opacity three.js/src/renderers/shaders/ShaderChunk/fog_fragment.glsl.js at dev…