I wanted to try this kind of design for a while, so here it is. I know there are several examples of it already, but I need to figure it ! :)
Log in to post a comment.
// You can find the Turtle API reference here: https://turtletoy.net/syntax Canvas.setpenopacity(0.5); const gridSize = 15; //min = 1, max = 20, step = 1 const subdivisionX = 0; //min = 0, max = 20, step = 1 const subdivisionY = 15; //min = 0, max = 20, step = 1 let move = 40; //min = 0, max = 100, step = 1 //const seed = 1; //min = 1, max = 100, step = 1 const size = 160; ////min = 100, max = 200, step = 1 const turtle = new Turtle(); const columns = []; // we make the move value a percentage of the size of the tiles move = move * (size / gridSize) / 100; // A node is a point, one of the four corners of a tile. Each node knows where it's placed in the grid, which will be usefull. class Node{ constructor(x, y, line, column){ this.x = x; this.y = y; this.line = line; this.column = column; } getX(){return this.x;} getY(){return this.y;} getPos(){return [this.x, this.y];} getLine(){return this.line;} getColumn(){return this.column;} shake(distance){ this.x += Math.random() * distance * 2 - distance; this.y += Math.random() * distance * 2 - distance; } } // A tile is one base "square", with as much subdivision lines as set. class Tile{ constructor(node1, node2, node3, node4){ this.nodes = []; // nodes are distributed wlockwise, starting from top left. this.nodes.push(node1); this.nodes.push(node2); this.nodes.push(node3); this.nodes.push(node4); /* this.node1 = node1; this.node2 = node2; this.node3 = node3; this.node4 = node4; */ } // start and end point for limit lines (tile borders) : line 1 start limit, l1 end limit, l2 start lmiit, l2 end limit, subdivision wanted drawLines(a, b, c, d, sub){ // compute the delta between each start and ends,according to tiles nodes positions and number of subdivisions. let dXs = (this.nodes[b].getX() - this.nodes[a].getX()); let dYs = (this.nodes[b].getY() - this.nodes[a].getY()); let dXe = (this.nodes[d].getX() - this.nodes[c].getX()); let dYe = (this.nodes[d].getY() - this.nodes[c].getY()); if(sub != 0){ dXs /= sub; dYs /= sub; dXe /= sub; dYe /= sub; } // Set the start point, from which each line is incremented let startX = this.nodes[a].getX(); let startY = this.nodes[a].getY(); let endX = this.nodes[c].getX(); let endY = this.nodes[c].getY(); // Then walk through each point and draw lines. for(let i = 0; i < sub; i++){ turtle.jump(startX, startY); turtle.goto(endX, endY); startX += dXs; startY += dYs; endX += dXe; endY += dYe; } // the last line of the tile is never draw, as it's the first of the following one. // But if this tile is the last one, we need to draw that last line. // Of course is subdivision is 0, we dont anything : if(sub == 0) return; let drawLastLine = 0 if(this.nodes[a].line == this.nodes[b].line){ // if a and b are on the same line, we are drawing columns if(this.nodes[d].column == gridSize) drawLastLine = 1 } else { if(this.nodes[d].line == gridSize) drawLastLine = 1 } if(drawLastLine){ //the positions are already offset from the for loop above turtle.jump(startX, startY); turtle.goto(endX, endY); } } walk(){ this.drawLines(0, 1, 3, 2, subdivisionX); this.drawLines(0, 3, 1, 2, subdivisionY); } } let tileList = []; let nodeList = []; // Creating all nodes according to user parameters for(let i = 0; i < gridSize + 1; i++){ let tileSize = size / gridSize; let x; let y; y = -(size/2) + tileSize * i; for(let j = 0; j < gridSize + 1; j++){ x = -(size/2) + tileSize * j; nodeList.push(new Node(x, y, i, j)); } } // Let's pu some randomnes in it ! for(node of nodeList){ node.shake(move); } // And know, let define each tile from the nodes above. for(let i = 0; i < gridSize; i++){ for(let j = 0; j < gridSize; j++){ let n = j + i * (gridSize + 1); tileList.push(new Tile(nodeList[n], nodeList[n+1], nodeList[n+gridSize+1+1], nodeList[n+gridSize+1])); } } function walk(i) { for(tile of tileList){ tile.walk(); } return false; } /* let rand = 0; function random(){ let x = rand; x ^= x << 13; x ^= x >> 17; x ^= x << 5; return rand = x; } function randomSeed(s){ return rand = s; } randomSeed(seed); */