p5js
https://editor.p5js.org/kubiak200/sketches/l3cW-xhiI
I could not find any function like "clearRect" on p5js. Maybe I have to use "erase" function in p5js. But you can use "clearRect" with context2D easily. with context2D let ctx:CanvasRenderingContext2D = this._p5.drawingContext; ctx.clearRe…
textAlign(CENTER, CENTER); text('word', 10, 30);//(10,30)を中心にしたテキスト
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){ …
canvasを透過で使いたい。clearでいけた _p5.clear(0,0,0,0);//r,g,b,aの値
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; …
加算で画面を黒色にリセットにしたい時 一回BLEND（デフォルト）に戻さないとダメだ this._p5.blendMode(this._p5.BLEND); this._p5.background(0,0,0,255);//「全画面をこの色で塗る命令」なので加算だと何も色が塗られない this._p5.blendMode(this._p5.AD…
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…
以下のようなクラスを継承して使った 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…
参考 http://www.generative-gestaltung.de/1/code http://www.generative-gestaltung.de/2/ P1 色 P2 形 p2.1 グリッド グリッドと整列 グリッドと動き グリッドと複合モジュール p2.2 エージェント ダムエージェント（単純なエージェント） インテリジェン…
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
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.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…
p5.js Web Editor
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 =…
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…
