blog.s0014.com
## fx(params) types The following fx(params) types are available. All types share the same attributes but have different options available to e.g. constrain your parameters to your needs. The available fx(params) types are: - `number`: `Nu…
let ww:number = document.body.clientWidth; let hh:number = window.innerHeight; this.camera.aspect = ww / hh;//window.innerHeight; this.camera.updateProjectionMatrix(); this.renderer.setSize(ww, hh);
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){ …
https://editor.p5js.org/julians_booleans/sketches/NaUYSCDfo
/* <system section="theme" selected="life"> */ @import "/css/theme/life/life.css"; /* </system> */ /* <system section="background" selected="pattern-06"> */ body{ background-image: url('/images/theme/backgrounds/2014/pattern-06.png'); background-repeat: repeat; background-attachment: fixed; backgrou…</system>
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>
gltf-transform on command line GitHub - donmccurdy/glTF-Transform: glTF 2.0 SDK for JavaScript and TypeScript, on Web and Node.js. gltf to glb gltf-transform copy a.gltf output.glb I don't know this is correct, but It seems to work optimiz…
Check when you want to make shader by myself. github.com
projectionMatrixはビュー座標系（カメラからみた座標系）からクリップ座標系（-1から1におさまる座標系に変換) ただ一気にクリップ座標系になるのではなく、vertexShader上では-1から1に変換する前まで。 gl_Positionに代入する値はまだ-1から1になってなく…
glslsandbox.com #extension GL_OES_standard_derivatives : enable precision highp float; uniform float time; uniform vec2 mouse; uniform vec2 resolution; float rand(vec2 co) { float a = fract(dot(co, vec2(2.067390879775102, 12.45116866290824…
●glbにまとめるサイト sbtron.github.io blenderからglbを書き出したとき、glTFを直接編集したり、テクスチャの圧縮具合が調整できない。 そこでblenderの設定からバラバラで書き出すようにし、上記のサイトでglbにまとめた。 ●glbを確認するサイト gltf-vie…
fx hashにて作品を投稿する際、 gpu使う時ここにチェック入れたほうが、キャプチャがミスらないような・・ gpuをバリバリ使ってる作品に限ると思うが。 ↓
はじめに WebAR（＝スマホのブラウザ上で行うAR）において、WebXRというオープンな仕様（＝ネイティブのARの機能をブラウザから使える）をsafariが採用してない。（chromeは採用してるらしい） よって万人に質の高いARを提供するのは難しい WebXR APIが使え…
このサイトで使用 HTML SKETCHES 簡単にできた。便利。 window.history.replaceState({page: idx}, "HTML SKETCHES #"+idx, "?p="+idx);
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 = …
mode: process.env.NODE_ENV === 'production' ? 'production' : 'development', $ npx webpack --watch --env development $ npx webpack --watch --env production
さくっとpugやscssをかきたい。 そういう中で重宝するがvscodeのエクステンション、FormatterHero。 pugをhtmlに変換する方法の紹介！VScodeやブラウザのツール、npmを使った書き出し方法 書き出し先などはエクステンションのタブでFormatterHeroを選び右ク…
こんなエラー npx hardhat verify CONTRACT_ADDRESS --network mumbai Nothing to compile No need to generate any newer typings. An unexpected error occurred: [Error: ENOENT: no such file or directory, open '/Users/XXX/XXX/XXX/XXX/XXX/mynft/art…
@keyframes anim { 0%{ opacity: 0; } 100% { opacity: 1;} } <svg width="100%" height="200"> <style> @keyframes anim { 0%{ opacity: 0; } 100% { opacity: 1;} } </style> <rect width="100%" height="200" style="fill:red;"></rect> </svg>
/* RGB 0〜1 Y: 0〜1 I: 約-0.5957〜約0.5957 Q: 約-0.5226〜約0.5226 */ function yiqToRgb(y, i, q) { let r = y + 0.956*i + 0.621*q; let g = y - 0.272*i - 0.647*q; let b = y - 1.106*i + 1.703*q; // Clamp values if they are out of range r = Mat…
Xorshiftアルゴリズムを使用した疑似乱数生成器 (PRNG) chatGPTに聞きました export class Xorshift { private state: number; constructor(seedHash: string) { this.state = this.hashStringToInt32(seedHash); } public hashStringToInt32(str: string): …
import * as THREE from 'three'; import vert from "./line/line.vert"; import frag from "./line/line.frag"; import glslify from 'glslify'; export class MyLine extends THREE.Object3D{ numParticles:number=5000; strokes:THREE.Line; counter=0; p…
lil-gui.georgealways.com 以下のようにcolorFormatsオブジェクトを作り、その中にさらに名前付きの変数を入れる。 colorFormats = {r:1,g:1,b:1} みたいなのはダメ！もう一個入れ子にしないと。 //https://lil-gui.georgealways.com/# const colorFormats =…
// 勾配計算関数 vec2 gradient(sampler2D pTex, vec2 texCoord, vec2 resolution, float scale) { vec2 pixelSize = scale / resolution; vec2 leftOffset = vec2(-pixelSize.x, 0.0); vec2 rightOffset = vec2(pixelSize.x, 0.0); vec2 upOffset = vec2(0.…
import * as THREE from 'three'; import { Scene, OrthographicCamera, WebGLRenderer, Vector3, MeshBasicMaterial, Texture } from 'three'; export class FilpFlopSceneBase{ scene :Scene; camera :OrthographicCamera; renderTarget1 :THREE.WebGLRend…
宣言 // BufferGeometryを使って四角形を作成 const geometry = new THREE.BufferGeometry(); // 頂点データを定義 const vertices = new Float32Array([ -1.0, -1.0, 0.0, // 左下 1.0, -1.0, 0.0, // 右下 1.0, 1.0, 0.0, // 右上 -1.0, 1.0, 0.0 // 左上 …
主に東アジアのデザイナーやデザイン会社を以下のページにまとめています scrapbox.io
targetTransform.worldToLocalMatrixをc#で得て、shaderに渡す shaderの中で mul(unity_ObjectToWorld, v.vertex)で一回ワールド座標系に ワールド座標系から対象の座標系にmul(worldToLocal,vertex)
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…