Random Tiling achieved

2022-04-19 17:44:33 -04:00 · 2022-04-19 17:44:33 -04:00 · 5e00218427
commit 5e00218427
11 changed files with 1677 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1 @@
 *node_modules/*
--- a/City.png
+++ b/City.png
--- a/background.png
+++ b/background.png
--- a/grass.png
+++ b/grass.png
--- a/hills.png
+++ b/hills.png
--- a/index.html
+++ b/index.html
@ -0,0 +1,14 @@
 <!DOCTYPE html>
 <html>
 <head>
    <title>Add Image to Canvas Using image() Object</title>
    <link rel="stylesheet" href="style.css">
 </head>
 <body>
    <canvas id="canvas">
        Sorry. Your browser does not support HTML5 canvas element.
    </canvas>
 </body>
 <script src="script.js"></script>
 </html>
--- a/index.js
+++ b/index.js
@ -0,0 +1,12 @@
 var liveServer = require("live-server");
 var params = {
 	port: 8181, // Set the server port. Defaults to 8080.
 	host: "0.0.0.0", // Set the address to bind to. Defaults to 0.0.0.0 or process.env.IP.
 	file: "index.html", // When set, serve this file (server root relative) for every 404 (useful for single-page applications)
 	wait: 10, // Waits for all changes, before reloading. Defaults to 0 sec.
 	mount: [['/components', './node_modules']], // Mount a directory to a route.
 	logLevel: 2, // 0 = errors only, 1 = some, 2 = lots
 	middleware: [function(req, res, next) { next(); }] // Takes an array of Connect-compatible middleware that are injected into the server middleware stack
 };
 liveServer.start(params);
--- a/package-lock.json
+++ b/package-lock.json
--- a/script.js
+++ b/script.js
@ -0,0 +1,49 @@
 window.onload = function () {
    // GET THE IMAGE.
    var img = new Image();
    img.src = 'City.png';
    var background = new Image();
    var grass = new Image();
    grass.src = 'grass.png'
    var sea = new Image();
    sea.src = 'sea.png'
    var hills = new Image();
    hills.src = 'hills.png'
    tiles = [grass,hills,sea];
    background.src = 'background.png';
    // WAIT TILL IMAGE IS LOADED.
    img.onload = function () {
        fill_canvas(img);       // FILL THE CANVAS WITH THE IMAGE.
    }
    function fill_canvas(img) {
        // CREATE CANVAS CONTEXT.
        var canvas = document.getElementById('canvas');
        canvas.width = 384;
        canvas.height = 384;
        var ctx = canvas.getContext('2d');
        ctx.drawImage(background, 0, 0);       // DRAW THE IMAGE TO THE CANVAS.
        ctx.drawImage(img, 0, 0);
        let x, y = 0
        for(x = 0; x < getBlockDimensions()[0]; x++){
          for(y = 0; y < getBlockDimensions()[1]; y++){
          ctx.drawImage(tiles[randomNumber(0,3)], x*24,y*24)
          }
        }
    }
 }
 function getBlockDimensions(){
 return [canvas.width/24, canvas.height/24]
 }
 function randomNumber(min, max) {
    return Math.floor(Math.random() * (max - min) + min);
 }
--- a/sea.png
+++ b/sea.png
--- a/style.css
+++ b/style.css
@ -0,0 +1,8 @@
 canvas {
  /* width: 512px;
  height: 512px; */
  image-rendering: -moz-crisp-edges;
  image-rendering: -webkit-crisp-edges;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
 }