覚書とメモ

 線と線の交差判定 <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 - ...

 以前組んだプログラムのベクトルのコードを見直した ドット積とクロス積の使いどころがわかった "白"が進行方向 "緑"がターゲットへのベクトルの時 ドット積はターゲットが前方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();...

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

ドット絵が必要になった　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上でデモ <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>

”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(); ...