覚書とメモ

投稿

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]) ...

続きを読む

2Dでの線と線の交差判定

線と線の交差判定 <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.js"></script> <div id="p5canvas"></div> <script> let lp1; //line 1 point 1 let lp2; //line 1 point 2 let lp3; //line 2 point 1 let lp4; //line 2 point 2 let lpm1;//line 3 point 1 mousexy let lpm2;//line 3 point 2 function setup() { let sqsize=50; createCanvas(400, 400).parent("p5canvas"); textSize(20); lp1=createVector(width / 2-sqsize, height / 2-sqsize); lp2=createVector(width / 2+sqsize, height / 2+sqsize); lp3=createVector(width / 2-sqsize, height / 2+sqsize); lp4=createVector(width / 2+sqsize, height / 2-sqsize); lpm1=createVector(width / 2-30, height / 2); lpm2=createVector(0,0); } function mousePressed() { lpm1.set(mouseX,mouseY); } function crosscheck( p1,p2,p3,p4) { let a1, a2; a1 = (p3.x * p2.y - p3.x * p1.y - p1.x * p2.y + p1.x * p1.y - p2.x * p3.y + p2.x * p1.y + p1.x * p3.y - p1.x * p1.y)* (p4.x * p2.y - ...

続きを読む

2D ベクトルのdot積とcloss積の使いどころ

以前組んだプログラムのベクトルのコードを見直したドット積とクロス積の使いどころがわかった "白"が進行方向 "緑"がターゲットへのベクトルの時ドット積はターゲットが前方180°以内にあれば正後方だと負になるようだクロス積はターゲットが右に居るか左に居るかで正負が分かれるようだ vector に.dot()があるが.closs()がvectorオブジェクトを返してくるので計算式にした(計算結果は同じだった） <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.js"></script> <div id="p5canvas"></div> <script> let posmouse; //mouse position let postarget; //target position let v1; //mouse to target let v2; //mouse move direction let vdot; //dot product function setup() { createCanvas(400, 400).parent("p5canvas"); postarget = createVector(width / 2, height / 2); posmouse = createVector(mouseX,mouseY); v1=createVector(0,1); v2=createVector(1,0); textSize(20); } function mousePressed() { v2=p5.Vector.sub(postarget,posmouse); v2.normalize(); } function draw() { background(100); posmouse.set(mouseX,mouseY); v1=p5.Vector.sub(postarget,posmouse); v1.normalize();...

続きを読む

p5jsでpngをBase64文字列にしてコードに埋め込んでspriteに

Display String Blogger上でp5jsでsprites用の画像を扱うのが面倒そうなので文字列にして埋め込んでみる変換コードもコピペしたので残す imageで読み込む際に文字列の頭にこれをつける'data:image/png;base64,' <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.js"></script> <div id="p5canvas"></div> <script> let img; let spx=10; let spy=10; let timer=0; function setup() { createCanvas(400, 200).parent("p5canvas"); frameRate(30); img = loadImage('data:image/png;base64,'+ 'iVBORw0KGgoAAAANSUhEUgAAACAAAAAQCAMAAABA3o1rAAADAFBMVEUAiACIAIi7u7uqzO4AAAAzIiJEMzOId2aZiIi7qqrdzLv/7t3///9VEQB3EQCqIgDMMwD/RAD/dxH/uxH/3SL/7ncRIndEVf9mzP+I3f+7//+ZzO677v8zRBEzZhGI3QC7/wARmXciAEREEVXMZojumar/zN27RFXuu8x3MyKZRETMd2b/mZkzIhFVMyKIVUSZd1W7iGbMqnfuzKr/3cwiEQBEIhGqZiLMdzPdiETumVX/u2b/3Yjd3VURMzMRd3cRu7sR//93ZruZd+4zM2ZmZpmZiLvMu+7//+6ZmaqIiIj/AP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AA...

続きを読む

Dall-EとMidjourneyにスプライト用ドット絵を作ってもらう

ドット絵が必要になった　AIがに試しに描いてもらったキーワードはこれ ”pixelart table fantasy cute characters sprites girls cats half Roguelike maid quarter view” Dall-E NES寄りなドットを作ってくれる Midjourney pixelart 寄りなドット絵ができるつかえそうドット絵にする際に使用した image to pixel のサイト https://giventofly.github.io/pixelit/#tryit

続きを読む

Blogger で p5js textarea scrollbar

この間のスクロールバー云々をBlogger上でデモ <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.js"></script><div id="p5canvas"></div> <script> let myTextArea; function setup() { createCanvas(400, 300).parent("p5canvas"); // init textarea myTextArea = createElement('textarea').parent("p5canvas"); myTextArea.attribute("rows","5"); myTextArea.attribute("cols","20"); myTextArea.value('0\n1\n2\n3\n4\n5\n6\n7\n0\n1\n2\n3\n4\n5\n6\n7'); myTextArea.position(20,20); } function draw() { background(220); text(" scrollTop "+myTextArea.elt.scrollTop ,20,280); } </script>

続きを読む

Blogger でp5jsがつかえた

”HTMLビュー”でHTMLを編集　 divとcanvasを関連付ければ良いみたい（div id="p5canvas とcreateCanvasの.parent("p5canvas");） p5js本体はCDNを参照（https://cdnjs.com/libraries/p5.js）コードはP5サイトのEXAMPLEから（https://p5js.org/examples/3d-geometries.html） <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.js"></script> <div id="p5canvas"></div> <script> function setup() { createCanvas(710, 400, WEBGL).parent("p5canvas"); } function draw() { background(250); translate(-240, -100, 0); normalMaterial(); push(); rotateZ(frameCount * 0.01); rotateX(frameCount * 0.01); rotateY(frameCount * 0.01); plane(70); pop(); translate(240, 0, 0); push(); rotateZ(frameCount * 0.01); rotateX(frameCount * 0.01); rotateY(frameCount * 0.01); box(70, 70, 70); pop(); translate(240, 0, 0); push(); rotateZ(frameCount * 0.01); rotateX(frameCount * 0.01); rotateY(frameCount * 0.01); cylinder(70, 70); pop(); ...

続きを読む

p5js textarea scrollbar ではまったので残しておく

20220928 p5jsでtextareaをつかいたかったのとスクロールバーのスクロール具合を知りたかったので調べたら２日ほど潰れてくやしいので記録しておく scrollTopの前にeltをつければ良いみたい正道かどうかは不明ブラウザのデバッグモードの要素のイベントリスナーの blurのwindowのhandlerの[[scopes]]のスクリプトのmyTxtareaの eltでその他のメンバーが見られるので必要がアレば探そう p5js　ウェブエディターで以下のコードで検証 let myTextArea; let btnname=['A','B']; let butn=[]; function aset(){ myTextArea.elt.rows=5; myTextArea.elt.scrollTop=50; } function bset(){ myTextArea.elt.rows=10; myTextArea.elt.scrollTop=100; } function setup() { createCanvas(400, 550); // init textarea myTextArea = createElement('textarea'); myTextArea.attribute("rows","10"); myTextArea.attribute("cols","50"); myTextArea.value('0\n1\n2\n3\n4\n5\n6\n7\n0\n1\n2\n3\n4\n5\n6\n7'); myTextArea.position(20,20); //init buttons for(let i=0;i<btnname.length;i++){ butn[i] = createButton(btnname[i]); butn[i].position(20+i*50, 230); } butn[0].mouse...

続きを読む

ubuntuの再インストールの覚書

2022 06 09 Firefox からgoogle chrome をダウンロード　＜　失敗 ubuntu software から　web をダウンロード web でgoogle chrome をダウンロード NVIDIA　のサイトに行き　ドライバ　NVIDIA-Linux-x86_64-515.48.07.run　をダウンロードしてインストール　<　失敗ドライバーはCUDA Toolkitでインストールすると良いらしいので NVIDIA の CUDA Toolkit のサイトに行きselect target platform の質問に答えてでてきた指示をコピペしてインストール途中で終了したっぽいがコンソールで sudo dpkg --configure -a と入力するとGPUドライバのインストールは完了したっぽい 2022 06 10 ”アプリケーションがデフォルトのキーリング　〜　”のダイアログを消したい passwords and keys が　入ってないみたいなので sudo apt install seahorse でインストール seahorse を起動すると”パスワードと鍵”がでてるくので ”ログイン”のパスワードには空白を設定して ”デフォルトのキーリング”は設定を削除（chrome などがあった）設定　＞　プライバシー　＞　画面で　”自動画面ロック”以下のスイッチをオフにする ”ブランクスクリーン”は５分のまま動画コーデックのインストールはコレだけで済むらしい sudo apt install ubuntu-restricted-extras 済まなかったのでコレも追加 sudo apt-get install -y gstreamer1.0-plugins-bad sudo のパスワード入力を省略したいコンソールで sudo visudo エディタに入り hoge ALL=(ALL:ALL) NOPASSWD: ALL を最後に追加 hogeはユーザー名まとめてzip find * -maxdepth 0 -type d |xargs -l1 -i zip -r {}.zip {}

続きを読む

Ubuntuでトラックボールのボタンのリマッピング設定の保存

xinputでトラックボールのボタンの設定の変更 xinput list ,xinput get-button-map,xinput query-state, xinput set-button-map,xinput --get-button-map とかを使って設定を決める /usr/share/X11/xorg.conf.d/40-libinput.conf ファイルの下の方に設定を書き込む自分の場合はこれ Section "InputClass" Identifier "ELECOM TrackBall Mouse HUGE TrackBall" MatchProduct "ELECOM TrackBall Mouse HUGE TrackBall" Driver "libinput" Option "ButtonMapping" "1 2 3 4 5 6 7 9 8 10 11 2 2" EndSection

続きを読む

ubuntu20で古いスキャナを使う

断舎利のため古くなった本を自炊スキャナはCANNON DR-C125　前はWINDOWS今はubuntuなのでハマったがなんとかしたらなんとかなったまずsane は入ってたから、libsane1, libsane-common, sane-utilsをインストール sudo apt update sudo apt install libsane1 sudo apt-get update sudo apt-get install libsane-common sudo apt-get update sudo apt-get install sane-utils どれが必要あるのか無いのかわからなかったので全部入れてみた ubntu用ドライバは以下のサイトから https://www.canon.co.uk/support/products/document-scanners/dr-series/imageformula-dr-c125.html?type=drivers&language=&os=linux ダウンロードしたのがこれ　d1224mux_dr125_lnx_drv010.zip　解凍して　cndrvsane-drc125_1.00-0.1_i386.deb　をインストールの途中でエラーで止まる詳細は以下のサイトに書いてあるようなことらしい https://bugs.launchpad.net/ubuntu/+source/sane-backends/+bug/1728012 ubuntuのバージョンアップでsanaのディレクトリの構成が変わったからみたいなので /usr/ lib/sane を作りもう一度インストールすると成功したディレクトリのなかにはファイルが３つそれらを usr/lib/x86_64-linux-gnu/sane に移動　 /usr/ lib/sane　は削除以上でドライバのインストールは出来たこれだけが原因なら他の古いスキャナのドライバのインストールもできるんじゃないかしら WINDOWS には CaptureOnTouch なるソフトがあったがubuntuにはないので　xsane を導入 sudo apt-get upd...

続きを読む