覚書とメモ

投稿

11月, 2022の投稿を表示しています

p5jsの透過処理バグ回避のシェーダーの設定

2022 11/20の時点でこのバグはまだ健在 https://discourse.processing.org/t/webgl-alpha-cant-be-used-as-a-texture/35981 の解決案のソースを参考にシェーダーの今回使わないライト設定を削り createShader()したらバグが消えたようなので残しておくシェーダーの必要な部分も消えてるかもしれないので挙動が怪しい場合は上記記事から加工前のシェーダーを引っ張って来て使おう <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.js"></script> <div id="p5canvas"></div> <script> //Reference site //https://discourse.processing.org/t/webgl-alpha-cant-be-used-as-a-texture/35981 let img; let buf; let shdr; let spritedata = '00101032323255bb30b27134f8300d0000400000014000000140000001500000105000005d55000115410000d51d4011415444055d5c5405455510011555400002800000028000000a8000002aa800'; let camerax = 0; let cameray = 90; let cameraz = -300; let lookatx = 0; let lookatz = 0; let trees = [ [0, 0, 200], [-200, 0, 200], [200, 0, 20] ] //makeimage from hex strings with magnifi (1,2,4,8,16) function makeimage(hexstrings, magni) { let ix = hexs...

image 拡大問題は解決したが透過処理のバグが出てくるp5js

Base64文字列からimageを作る　...　○ image で拡大して表示 ...　△　めっちゃぼやける pixelを読み込んで拡大imageを作る .... × Base64で読み込むのがOUTぽい自前フォーマットでimageを作る ...○ pixelを読み込んで拡大imgを作る... ○ WebGL の3D のPLANEのテクスチャに設定...○ テクスチャの透過処理... × 2022 11/20時点でデフォルトのシェーダーだとこうなるこの一文が在るので　https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.js ここはこのまま、次の投稿はこの問題の解決案

1pixel 4bit color のimage のデータを文字列で出力するエディタをp5jsでつくった

Base64で読み込んだimageで.loadPixels()を呼ぶとエラーがでるので（2022 11/20現在）自前のフォーマットでimageデータ文字列を作ることにしたのでそれ用の簡易エディタを残しておく作った文字列は下記の関数でimageに変換できる引数は独自フォーマットの16進数文字列と拡大したい倍率戻り値はimage let myimage=makeimage(hexstrings, で動くはず上部左からcanvas, 色選択用のrect, カラーピッカー ,透過パレットチェックボックス中部 ”magnifi select”(倍率）これはエディタでのみでデータにはならない ”outputsize” 出力画像サイズこれで倍率を選ぶと下部のtextareaにデータが出力される下部 ”output hex” 16進数画像データ文字列, これをコピペして使う ”canvas crear ”canvasをクリアする ”input hex hera” ここに再編集したい文字列データを貼り付け hex read をクリックするとcanvasに読み込み 1pixel 3色（透過の有り）か４色が使える（透過なし）もしかしたらtextarea とかcolorpickerの表示位置がずれてるかもしれないが致し方なし。 //makeimage from hex strings with magnifi (1,2,4,8,16) function makeimage(hexstrings, magni) { let ix = hexstrings; //read header "transparent num","imagew","imageh" [0~6] (3byte) let tpc = parseInt(ix.slice(0, 2), 16); let imgw = parseInt(ix.slice(2, 4), 16); let imgh = parseInt(ix.slice(4, 6), 16); let imagemap = []; //read color palet "palet rgb(3yite)...

p5js 3d でFPSっぽいキー入力とマウス入力

いつぞやのコードが見つかったのでこちらに残す 3dでのキーとマウス入力 ”A,S,D,F"で移動、マウスドラッグで方向転換 <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.js"></script> <div id="p5canvas"></div> <script> let camerax = 0; let cameray = 700; let cameraz = -350; let lookatx = 0; let lookatz = 0; function setup() { createCanvas(700, 400, WEBGL).parent("p5canvas"); lookatz = 3.5; // PI; lookatx = 1.6; // HALF_PI; } //camera turn function mouseDragged() { lookatx += (pmouseX - mouseX) * 0.01; lookatz += (pmouseY - mouseY) * 0.01; if (lookatx > TWO_PI) lookatx -= TWO_PI; //loop if (lookatx < 0) lookatx += TWO_PI; if (lookatz > PI + QUARTER_PI) lookatz = PI + QUARTER_PI; //no loop if (lookatz < PI - QUARTER_PI) lookatz = PI - QUARTER_PI; } // camera move function keyinput() { let zx = cos(lookatx) * 5; let zz = sin(lookatx) * 5; if (keyIsDown(87)) { //w camerax += zx; cameraz += zz; }else ...

迷路作成アルゴリズム　p5jsで作る　ループ有り

ループ有りの迷路が作れたので残しておくゲームだと背後に回り込むとかできるので使えそう <!DOCTYPE html> <html lang="en"> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.js"></script> <div id="p5canvas"></div> <script> class mymaze { writex = 0; writey = 0; msize = 0; state = 0; possiblesize = 0; maze = []; xtable = [2, -2, 0, 0]; ytable = [0, 0, 2, -2]; constructor(n) { this.msize = n; } mazeloop() { switch (this.state) { //pass through candidate points case 0: this.writex += 2; if (this.writex > this.msize - 2) { this.writex = 2; this.writey += 2; } if (this.writey > this.msize - 2) this.writey = 2; if (this.maze[this.writey][this.writex] == 0) { this.maze[this.writey][this.writex] = 2; this.possiblesize--; this.state = 1; } break; case 1: let direction = parseInt(Math.random() * 4); let addx ...

クラスカル法

chat-gptにきいたらおしえてくれた参考動画 <!DOCTYPE html> <html lang="en"> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.js"></script> <div id="p5canvas"></div> <script> class Graph { constructor() { this.vertices = []; this.edges = []; } addVertex(x, y) { this.vertices.push({ x, y }); } addEdge(source, destination, weight) { if (this.vertices[source] && this.vertices[destination]) ...