𓅹 kitasenju design blog 𓅸

humans are imperfect

js

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を使いつつ、処理を出し分けたい時に使った。 I used it when I wanted to use the same js but separate the processes. <article id="electric-cars" data-columns="3" data-index-number="12314" data-parent="cars"> ... </article> const article = document.getElementById('electric-cars'); article.dataset.columns // "3" article.…

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〠