𓅹 kitasenju design blog 𓅸

humans are imperfect

p5js

p5クラス化しthreejsに使う

スコープがよくわからないがとりあえず動いています import * as THREE from 'three'; import p5 from "p5"; export class p5Main { public _canvasTex:THREE.CanvasTexture; public canvasElement:HTMLCanvasElement; public isInit:boolean=false; public …

GenerativeArtの技法

参考 http://www.generative-gestaltung.de/1/code http://www.generative-gestaltung.de/2/ P1 色 P2 形 p2.1 グリッド グリッドと整列 グリッドと動き グリッドと複合モジュール p2.2 エージェント ダムエージェント(単純なエージェント) インテリジェン…

p5 + es6

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

星形を描く

function setup() { createCanvas(300, 300, WEBGL); //fill(237, 34, 93); noFill(); } function draw() { background(220); beginShape(); let nn = 15; //vertex(0,0); for(let i=0;i

color pick

let img; let dom; let isInit=false; let isDown=false; function setup() { let c = createCanvas(100, 100); c.drawingContext.imageSmoothingEnabled=false; background(200); textAlign(CENTER); text('drop image', width / 2, height / 2); c.drop(go…

p5でcanvas直書きグラデ

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…

Abstracted JohnMaeda

p5.js Web Editor

shader on p5js

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

simple ik

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…

〠FOOTER〠