スキップしてメイン コンテンツに移動

投稿

ラベル（javascript）が付いた投稿を表示しています

ダイクストラ法

 chat-gptにコーディングしてもらったダイクストラ 「クラスカルでパスファインダーを」ってリクエストしたら ダイクストラを勧められた クラスカルが作るのは経路でなくツリーなのだ     参考動画 <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 = [];   }   addVertex(x, y) {     this.vertices.push({ x, y, edges: [] });   }   addEdge(source, destination, weight) {     if (this.vertices[source] && this.vertices[destination]) {       this.vertices[source].edges.push({ target: destination, weight });       this.vertices[destination].edges.push({ target: source, weight });  ...
コメントを投稿
続きを読む

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で作る　ループ有り

 ループ有りの迷路が作れたので残しておく ゲームだと背後に回り込むとかできるので 使えそう <!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]) ...
コメントを投稿
続きを読む

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...
コメントを投稿
続きを読む