JSFiddle - React, Tailwind, and code Playground

by jcubed111

HTML

<canvas id='canvas' width='960' height='540'></canvas>

CSS

body {
    background:#EEE;
}
canvas {
    width:960px;
    height:540px;
    background:#FFF;
    border:1px solid #CCC;
}

JavaScript

// triangle sky generator

ctx = document.getElementById('canvas').getContext('2d');

var width = 960;
var height = 540;

var xSize = 170;
var ySize = 75;

var points = [];

var polygons = [];

function Polygon(points, color) {
    this.points = points;
    this.color = color;
}

function Point(x, y) {
    this.x = x;
    this.y = y;
}


for (var x = 0; x < width / xSize + 3; x++) {
    points[x] = [];
    for (var y = 0; y < height / ySize + 2; y++) {
        points[x][y] = new Point((x - 1) * xSize - (y % 2 * 0.5 * xSize), (y - 1) * ySize);
    }
}

for (var x = 0; x < width / xSize + 2; x++) {
    for (var y = 0; y < height / ySize + 1; y++) {
        if (y % 2 == 0) {
            polygons.push(new Polygon([points[x][y], points[x][y + 1], points[x + 1][y + 1]], 0));
            polygons.push(new Polygon([points[x][y], points[x + 1][y + 1], points[x + 1][y]], 0));
        } else {
            polygons.push(new Polygon([points[x][y], points[x][y + 1], points[x + 1][y]], 0));
            polygons.push(new Polygon([points[x][y + 1], points[x + 1][y + 1], points[x + 1][y]], 0));
        }
    }
}


//randomize
for (var x = 0; x < points.length; x++) {
    for (var y = 0; y < points[0].length; y++) {
        points[x][y].x += (Math.random()-0.5)*xSize*.4;
        points[x][y].y += (Math.random()-0.5)*ySize*.5;
    }
}


// draw polygons
for (var i = 0; i < polygons.length; i++) {
    ctx.beginPath();
    ctx.moveTo(polygons[i].points[0].x, polygons[i].points[0].y);
    for (var j = 1; j < polygons[i].points.length; j++) {
        ctx.lineTo(polygons[i].points[j].x, polygons[i].points[j].y);
    }
    ctx.lineTo(polygons[i].points[0].x, polygons[i].points[0].y);
    ctx.stroke();
}