const canvas = document.querySelector('canvas')
const c = canvas.getContext('2d')
canvas.width = 2048
canvas.height = 1152
const tileSize = 2
function Vector(){
return {x: 0, y: 0}
}
function CreateTile(tile){
const randomNumber = Math.random()
const lineStart = new Vector()
const lineEnd = new Vector()
if (randomNumber > 0.75) {
lineStart.x = tile.x
lineStart.y = tile.y + tileSize
lineEnd.x = tile.x + tileSize
lineEnd.y = tile.y
} else if ( randomNumber > 0.5 && randomNumber < 0.75){
lineStart.x = tile.x
lineStart.y = tile.y
lineEnd.x = tile.x + tileSize
lineEnd.y = tile.y + tileSize
} else if ( randomNumber > 0.25 && randomNumber < 0.5){
lineStart.x = tile.x
lineStart.y = tile.y
lineEnd.x = tile.x
lineEnd.y = tile.y + tileSize
} else {
lineStart.x = tile.x
lineStart.y = tile.y
lineEnd.x = tile.x + tileSize
lineEnd.y = tile.y
}
//drawLine (lineStart.x, lineStart.y, lineEnd.x, lineEnd.y)
c.beginPath();
c.moveTo(lineStart.x,lineStart.y);
c.lineTo(lineEnd.x,lineEnd.y);
c.stroke();
}
function CreateArt(){
for (let i = 0; i < canvas.width; i += tileSize) {
for (let j = 0; j < canvas.height; j += tileSize){
const tile = new Vector()
tile.x = i
tile.y = j
CreateTile(tile)
}
}
}
CreateArt()
Leave a Reply