KITASENJU DESIGN BLOG

memo, html, javascript, unity

js

webaudioでmp3再生

js

export default class SoundPlayer { constructor() { this.audioContext = new (window.AudioContext || window.webkitAudioContext)(); this.audioBuffer = null; this.sourceNode = null; this.gainNode = this.audioContext.createGain(); this.isPlayin…

window.open

js

古の、jsでwindowopen。 なぜかpugです。 a(href='javascript:window.open("https://000690273.codepen.website/","HTML SKETCHES","width=1280,height=720,menubar=0,toolbar=0,locationbar=0")') open!!!!!

console.logをdivにそのまま出す

js

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

hex文字列をrgb値に

js

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}…

WebWorkerを使う

js

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

jsで中心にdivを置くdivを生成

親を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…

playing AR Quick Look automatically

I checked inside of mode-viewer.js. The AR Quick Look code was inside it. <model-viewer> <html> <head> <meta charset="utf-8"> <title>test</title> <script> window.onload=()=>{ const modelUrl = new URL("g5.usdz", self.location.toString()); /* if (this.arScale === 'fixed') { if (modelUr…</meta></head></html></model-viewer>

URLクエリを動的に変更

js

このサイトで使用 HTML SKETCHES 簡単にできた。便利。 window.history.replaceState({page: idx}, "HTML SKETCHES #"+idx, "?p="+idx); クエリ取得 window.location.search

lil-guiで色を使う時

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

jsでBitmapData(途中)

js

import { inherits } from "util"; export class BitmapData{ private _context:CanvasRenderingContext2D; private _imageData:ImageData; private _img:HTMLImageElement; private _width:number; private _height:number; private _mean:number=0; privat…

console.logに色を付ける

js

console.log('%c赤いログ, 'color: red');

クワイン

js

<html id="hoge"> <head> </head> <body> <div id="fuga"></div> <script> window.addEventListener('DOMContentLoaded', function(){ document.getElementById('hoge').style.fontSize="25px"; document.getElementById('hoge').style.background="#000"; document.getElementById('hoge').style.color="#fff"; document.g…</body></html>

数字を二進数に

js

function convertToBinary(x) { let bin = 0; let rem, i = 1, step = 1; while (x != 0) { rem = x % 2; console.log( `Step ${step++}: ${x}/2, Remainder = ${rem}, Quotient = ${parseInt(x/2)}` ); x = parseInt(x / 2); bin = bin + rem * i; i = i * …

clock 時計

js

時計 AddZero(n){ if(n<10)return "0"+n; return n; } Hoge(){ const d = new Date();//Date.now(); let yy = this.AddZero(d.getYear()%100); let mo = this.AddZero(d.getMonth()+1); let dd = this.AddZero(d.getDate()); let hh = this.AddZero(d.getHou…

1文字ずつspan

js

hirakublog.com

jsでkeydownイベント

js

document.addEventListener('keydown', (event) => { const keyName = event.key; if(keyName=="d"){ if(this.gui){ if(this.gui.domElement.style.display=="none"){ this.gui.domElement.style.display="block"; this.stats.domElement.style.display="blo…

HTMLのタグにデータを仕込む

同じjsを使いつつ、処理を出し分けたい時に使った。 注意!タグに書くのは小文字、大文字を書いても小文字になる。ただマイナスを入れるとjs側はマイナスのところは大文字になる(キャメルケースがケバブケースになる) I used it when I wanted to use the …

Webページをpause

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

how to escape SPACE

js

let hoge = "&nbspSLIT";

p5 + es6

HTML <html lang="en"> <title>p5</title> <head> <link rel="stylesheet" href="./style.css" /> </head> <body> <script src="./p5.min.js"></script> <script src="./index.js" type="module"></script> </body> </html> main import {Hoge} from './Hoge.js'; new p5(function(p5){ p5.setup=function(…

p5でcanvas直書きグラデ

p5.js Web Editor function setup() { frameRate(2); createCanvas(windowWidth, windowHeight); } function draw() { background(220); for(let i=0;i<40;i++){ drawBall(windowWidth*random(),windowHeight*random(),100*random()); } } function drawBall…

Mapping function - マッピング関数

js function map (value, fromMin, fromMax, toMin, toMax){ return (value - fromMin) / (fromMax - fromMin) * (toMax - toMin) + toMin; } glsl float map (float value, float fromMin, float fromMax, float toMin, float toMax){ if(value<fromMin)value=fromMin; if(value>fromMax)valu</frommin)value=frommin;>…

shader on p5js

I made https://editor.p5js.org/kitasenjudesign/sketches/vCGvyK5Ag referance p5.js shaders 違う方法 https://editor.p5js.org/haschdl/sketches/KIv7nuGx7 js // a shader variable let theShader; function preload(){ // load the shader theShader =…

アニメgifのリスタート

how to restart animated gifs 複数gifのスライドショーそれぞれ最初から再生させる。 <html> <head> <style> body{ margin: 0px; padding: 0px; color: #000; background-color: #008800; } .container { width: 100%; height: 100%; image-rendering: pixelated; } .bg0{ back</head></html>…

simple ik

js + p5 https://editor.p5js.org/kitasenjudesign/sketches/43JWJ7gZw var balls = []; function setup() { createCanvas(window.innerWidth, window.innerHeight); for(var i=0;i<10;i++){ var b = new Ball(); balls.push(b); } } function draw() { back…

jQueryで複製

複製する $(function() { $(document).on('click', '#button', function() { $('#sample li').clone().appendTo($('#sample')); }); });

"FOOTER"