KITASENJU DESIGN BLOG

memo, html, javascript, unity

Entries from 2023-03-01 to 1 month

threejsでsvg

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…

p5jsで背景を透過

canvasを透過で使いたい。clearでいけた _p5.clear(0,0,0,0);//r,g,b,aの値

threejsで動的な線を描く

import * as THREE from 'three'; export class Lines extends THREE.Object3D{ numParticles:number=4000; strokes:THREE.Line; counter:number=0; countMax:number=0; positions :number[]; scales :number[]; geo :THREE.BufferGeometry; private mode :s…

simplest webgl

// キャンバス要素を取得 const canvas = document.getElementById("canvas"); // WebGLコンテキストを取得 const gl = canvas.getContext("webgl"); // 頂点シェーダのソースコード const vertexShaderSource = ` attribute vec4 a_position; void main() {…

threejsでlineを描く

import * as THREE from 'three'; import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls' import Stats from 'three/examples/jsm/libs/stats.module' import { TorusGeometry, MeshPhongMaterial, DirectionalLight, MeshBasicMateri…

typescript + glslify を使う

npm install npm install glslify npm install glsl-random @types/glslifyがなかったのでつくる chatGPTに教えてもらった。 glslify.d.tsというファイルを glslを入れてるフォルダに入れた // glslify.d.ts declare module 'glslify' { interface GlslifyOp…

typescriptで構造体的な型

正式になんて言うのかわからない。 クラスを定義するほどでないときに使っている。 以下ではrgbの変数を持っているものを配列として定義 public colors:{r:number,g:number,b:number}[];

cssのスペースの意味

スペースある/なしで意味が違う csshtml.work ul.A - ulタグのクラスAを指定 ul .A - ulの子要素でのクラスA ul:first-child - 1つ目のul要素 ul :first-child - 全ての子要素

scrapbox css

/* pinnedのグループを独立させる */ .page-list-item.pin + .page-list-item:not(.pin) { clear: both; } /* ピンされたタイトル */ div.header.pinned{ background: #4c4; } /* アイテムの上のボーダー */ .grid li.page-list-item a .header{ border-top:…

p5でクラスを書く

let bugs = []; // array of Jitter objects function setup() { createCanvas(710, 400); // Create objects for (let i = 0; i < 50; i++) { bugs.push(new Jitter()); } } function draw() { background(50, 89, 100); for (let i = 0; i < bugs.length; …

AE blendMode

メモ hue - 色相を変化させる hardmix - 極端な色

AEで連番ファイルのプロパティ

連番ファイルを読み込んだが、どこのファイルを読み込んだかわからなくなってしまった。 Replace footage > Place holder で元の名前を見たり、フレームレート、画角などが変えられる pathは、projectウィンドウの右の方を見ていくと載ってる。

cursor png

simple cursor pixelart

"FOOTER"