js
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>
このサイトで使用 HTML SKETCHES 簡単にできた。便利。 window.history.replaceState({page: idx}, "HTML SKETCHES #"+idx, "?p="+idx);
lil-gui.georgealways.com 以下のようにcolorFormatsオブジェクトを作り、その中にさらに名前付きの変数を入れる。 colorFormats = {r:1,g:1,b:1} みたいなのはダメ！もう一個入れ子にしないと。 //https://lil-gui.georgealways.com/# const colorFormats =…
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('%c赤いログ, 'color: red');
<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>
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 * …
時計 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…
hirakublog.com
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…
同じjsを使いつつ、処理を出し分けたい時に使った。 注意！タグに書くのは小文字、大文字を書いても小文字になる。ただマイナスを入れるとjs側はマイナスのところは大文字になる（キャメルケースがケバブケースになる） I used it when I wanted to use the …
// ウィンドウをフォーカスしたら指定した関数を実行 window.addEventListener('focus', ()=>{ console.log('onFocus'); }, false); // ウィンドウからフォーカスが外れたら指定した関数を実行 window.addEventListener('blur', ()=>{ console.log("onBlur")…
let hoge = " SLIT";
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.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…
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;>…
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 =…
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>…
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…
複製する $(function() { $(document).on('click', '#button', function() { $('#sample li').clone().appendTo($('#sample')); }); });