KITASENJU DESIGN BLOG

memo, html, javascript, unity

Entries from 2022-12-01 to 1 month

fontのアウトライン座標を取る

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

近い方の角度を計算する

角度1=0〜360度 角度2=0〜360度 →この時、近い方の角度の差をもとめたい 具体的に考えると 角度1が10度 角度2が350度 だったとする。その差は近い方でいうと20度になるだろう、しかし 角度の差=(角度2)ー(角度1)=340度 角度の差…

色に関する疑問

輝度 赤色(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 モ…

svg filterで反転

bias1にしてコンボルーションフィルタの中心を-1 <filter id="filter" x="-20%" y="-20%" width="140%" height="140%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="linearRGB"> </filter>

feColorMatrix on svg filter

svg

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

俺俺DOMラッパークラス

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

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…

fbm

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

"FOOTER"