Entries from 2022-01-01 to 1 year
opentype.js opentype.js – JavaScript parser/writer for OpenType and TrueType fonts. https://editor.p5js.org/kitasenjudesign/sketches/cTZFGL7Dc facetype.js gero3.github.io three.js examples three.js/webgl_geometry_text_stroke.html at master…
Humanist Serif Transitional Serif Rational Serif Contemporary Serif Inscribed/Engraved Grotesque Sans Neo-Grotesque Sans Gothic Sans Geometric Sans - Gotham, Avenir, Avant Garde Gothic, DIN, Calibre/Metric Humanist Sans Neo-Humanist Sans G…
adobe https://color.adobe.com/ja/create coolors Coolors - The super fast color palettes generator! pigment Pigment by ShapeFactory | Simple Color Palette Generator palettablle.io Palettable
角度１＝０〜３６０度 角度２＝０〜３６０度 →この時、近い方の角度の差をもとめたい 具体的に考えると 角度１が１０度 角度２が３５０度 だったとする。その差は近い方でいうと２０度になるだろう、しかし 角度の差＝(角度２)ー(角度１)＝３４０度 角度の差…
輝度 赤色(255,0,0) 緑色(0,255,0) 青色(0,0,255) を三つ並べると明るさが全然違う。 緑が一番明るくて、青が一番暗い。 輝度の式で、それはある程度、定量化できる 0.299*R+0.587*G+0.114*B 輝度の定義を仮に1:1:1としてしまったら 0.333r+0.333g+0.333b モ…
bias1にしてコンボルーションフィルタの中心を-1 <filter id="filter" x="-20%" y="-20%" width="140%" height="140%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="linearRGB"> </filter>
| R' | | r1 r2 r3 r4 r5 | | R | | G' | | g1 g2 g3 g4 g5 | | G | | B' | = | b1 b2 b3 b4 b5 | * | B | | A' | | a1 a2 a3 a4 a5 | | A | | 1 | | 0 0 0 0 1 | | 1 | R' = r1*R + r2*G + r3*B + r4*A + r5 G' = g1*R + g2*G + g3*B + g4*A + g5 B' = b1*R…
export class AbsDOM{ public dom:HTMLElement; constructor( dom:HTMLElement, parentDom:HTMLElement, zIndex:number ){ this.dom = dom; this.dom.style.position="absolute"; this.dom.style.zIndex = ""+zIndex; parentDom.append(this.dom); } show(){…
function setup() { createCanvas(400, 400); } function draw() { //background(220); noStroke(); fill(255,0,0) circle( Math.random()*width, Math.random()*height, 10 ) fill(0,0,255) circle( (Math.random()+Math.random()+Math.random())/3*width, …
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…
#define OCTAVES 6 float fbm (in vec2 st) { // Initial values float value = 0.0; float amplitud = .5; float frequency = 0.; // // Loop of octaves for (int i = 0; i < OCTAVES; i++) { value += amplitud * noise(st); st *= 2.; amplitud *= .5; }…
import * as THREE from 'three'; import { PlaneGeometry, TextureLoader } from 'three'; import shaderVert from "../glsl/shader1.vert"; import shaderFrag from "../glsl/shader1.frag"; export class MyPlane extends THREE.Mesh { constructor(){ le…
webqr.com
以下のようなクラスを継承して使った import p5 from 'p5'; import * as THREE from 'three'; export class p5MainBase { public _canvasTex:THREE.CanvasTexture; public canvasElement:HTMLCanvasElement; public _width:number = 512; public _height:num…
yoksel.github.io
www.nicovideo.jp 単位 メートル→ピクセル 秒→１フレーム 波動方程式 (1/s2) * (d2u / dt2) = Δu 1/s2 = 伝搬 uは波の高さ d2/dt2は２回微分を表す（二階微分なので変化量の変化量） つまり時間に対する変化の変化 Δはラプラス演算子（ラプラシアン） d2u/dt…
import * as THREE from 'three'; import { DataTexture, Vector2 } from 'three'; export class ParamTexture{ public dataTex:DataTexture; public size:THREE.Vector2; constructor() { let ruleTexWidth = 32; this.size = new Vector2(ruleTexWidth,rul…
https://www.modularscale.com http://simplescale.online 基本サイズ、本文等を決めて、n倍するということで良いのだと思う 基本サイズ12pt 2.0倍なら12,24,36,48 基本サイズ12pt 1.5倍なら 12,18,27 参考 web typography book.webtypography.net Vertical …
Cellular Automata rules lexicon - Life Life rules are defined in the "S/B" form, where: S - defines counts of alive neighbors necessary for a cell to survive, survive セル=1だったとき生き残る条件 B - defines counts of alive neighbors neces…
VSCodeでTypeScript(or JavaScript)の色がおかしくなった JavaScript and TypeScript Nightly というアドオンのせいだった（disabledにすると治る)。 何かアップデートされて変わってしまったのかもしれない。 とりあえずdisabledにした。何のために入れてた…
boids examples | p5.js 1.分離（Separation） 近くの仲間に対して離れる方向のベクトルを計算する それをノーマライズし、距離が離れるほど重みを変える（弱くする） そのベクトルの平均を算出 →これはコリジョンとして機能します 2.整列（Alignment） 近く…
<feBlend> - SVG: Scalable Vector Graphics | MDN</feblend>
hirakublog.com
ObjectLoaderとOBJLoaderがある。 .objを読み込みたいときはOBJ //import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js' const loader = new OBJLoader(); loader.load( url, (obj)=>{ obj.children[0] as THREE.Mesh; }
Spector.jsを使うとみれる。他にも方法はあるのかも。 chrome.google.com phongの中身 three r145で。 THREE.ShaderLib.phong - vert/frag · GitHub 参考 中身を参考にしつつ、気になる箇所は検索から探す three.js/src/renderers/shaders/ShaderChunk at de…
