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;
+}