1.8.4

changelog.html

@@ -105,6 +105,19 @@
 <p>The original <a href="https://sandboxels.r74n.com/changelog.txt">plain text version</a> of this is still maintained.</p>
 </div>
 
+<h2 id="1.8.4">[Version 1.8.4 - July 11, 2023]</h2>
+<ul>
+<li>+ Image placing<ul>
+<li>+ Image tool in Special</li>
+<li>+ Select any image from your computer</li>
+<li>+ Place it on the canvas at any scale</li>
+<li>+ Choose its element or disable smoothing in Settings</li>
+<li>+ Burn it, blow it up, or make it a powder!</li></ul></li>
+<li>[Stay tuned for bigger updates in the coming months!]</li>
+<li>[Bug Fixes]</li>
+<li>~ Fixed: Old browsers that don't support ECMAScript 2016 crash</li>
+</ul>
+
 <h2 id="1.8.3">[Version 1.8.3 - May 16, 2023 - Deserted Update]</h2>
 <ul>
 <li>+ Cactus</li>

changelog.txt

@@ -7,6 +7,17 @@ See sneak peaks for upcoming updates on the Discord: https://discord.gg/ejUc6YPQ
 
 A fancier version of this changelog can be found here: https://sandboxels.r74n.com/changelog
 
+[Version 1.8.4 - July 11, 2023]
+    + Image placing
+        + Image tool in Special
+        + Select any image from your computer
+        + Place it on the canvas at any scale
+        + Choose its element or disable smoothing in Settings
+        + Burn it, blow it up, or make it a powder!
+   [Bug Fixes]
+    ~ Fixed: Old browsers that don't support ECMAScript 2016 crash
+   Stay tuned for bigger updates in the coming months!
+
 [Version 1.8.3 - May 26, 2023 - Deserted Update]
     + Cactus
     + Fancy Changelog and Controls pages

index.html

@@ -44,7 +44,7 @@
     <meta name="twitter:creator:id" content="1436857621827530753">
 
     <script> // versioning info
-        currentversion = "1.8.3"
+        currentversion = "1.8.4"
     </script>
     <style>
         .setting-span {
@@ -190,7 +190,7 @@
                 if (pixel.charge && elements[pixel.element].behaviorOn) {
                     pixelTick(pixel)
                 }
-                if (elements[pixel.element].viscosity && (!((Math.random()*100) < 100 / ((elements[pixel.element].viscosity) ** 0.25)))) {
+                if (elements[pixel.element].viscosity && (!((Math.random()*100) < 100 / Math.pow(elements[pixel.element].viscosity, 0.25)))) {
                     var move1Spots = [
                         [pixel.x, pixel.y+1]
                     ]
@@ -209,7 +209,7 @@
                     else { move1Spots.splice(move1Spots.indexOf(coords), 1); }
                 }
                 if (!moved) {
-                    if (elements[pixel.element].viscosity===undefined || !(!((Math.random()*100) < 100 / ((elements[pixel.element].viscosity) ** 0.25)))) {
+                    if (elements[pixel.element].viscosity===undefined || !(!((Math.random()*100) < 100 / Math.pow(elements[pixel.element].viscosity, 0.25)))) {
                         if (Math.random() < 0.5) {
                             if (!tryMove(pixel, pixel.x+1, pixel.y)) {
                                 tryMove(pixel, pixel.x-1, pixel.y);
@@ -1717,6 +1717,32 @@
     category: "special",
     excludeRandom: true
 },
+"image": {
+    color: ["#78bbff","#5bb81a"],
+    onSelect: function() {
+        // prompt to upload an image file, then store the image in placingImage
+        var file = document.createElement("input");
+        file.type = "file";
+        file.accept = "image/*";
+        file.onchange = function() {
+            var reader = new FileReader();
+            reader.onload = function(e) {
+                var img = new Image();
+                img.onload = function() {
+                    placingImage = img;
+                }
+                img.src = e.target.result;
+            }
+            reader.readAsDataURL(file.files[0]);
+        }
+        file.click();
+    },
+    onUnselect: function() {
+        placingImage = null;
+    },
+    tool: function() {},
+    category: "special",
+},
 "unpaint": {
     color: ["#ffffff","#000000"],
     tool: function(pixel) {
@@ -9451,7 +9477,7 @@
                     default: break;
                     case "M1":
                         if (info.viscosity !== undefined) {
-                            if (!((Math.random()*100) < 100 / ((info.viscosity) ** 0.25))) {
+                            if (!((Math.random()*100) < 100 / Math.pow(info.viscosity, 0.25))) {
                                 newCoords.x = x;
                             }
                         }
@@ -9459,7 +9485,7 @@
                         break;
                     case "M2":
                         if (info.viscosity !== undefined) {
-                            if (!((Math.random()*100) < 100 / ((info.viscosity) ** 0.25))) {
+                            if (!((Math.random()*100) < 100 / Math.pow(info.viscosity, 0.25))) {
                                 newCoords.x = x;
                             }
                         }
@@ -10420,7 +10446,7 @@
                     if (info.hardness) { // lower damage depending on hardness(0-1)
                         if (info.hardness < 1) {
                             // more hardness = less damage, logarithmic
-                            damage *= (1-info.hardness)**info.hardness;
+                            damage *= Math.pow((1-info.hardness),info.hardness);
                         }
                         else { damage = 0; }
                     }
@@ -10664,7 +10690,52 @@
             else {
                 mouseType = "left";
             }
-            if (shiftDown && e.button !== 1 && !((elements[currentElement].tool || elements[currentElement].category==="tools") && mouseType==="left")) {
+            if (e.button === 0 && placingImage) {
+                // downscale the <img to mouseSize x mouseSize and draw it
+                var canvas = document.createElement("canvas");
+                // set width or height proportional to mouseSize
+                if (placingImage.width > placingImage.height) {
+                    canvas.width = mouseSize;
+                    canvas.height = Math.round(placingImage.height/placingImage.width*mouseSize);
+                }
+                else {
+                    canvas.height = mouseSize;
+                    canvas.width = Math.round(placingImage.width/placingImage.height*mouseSize);
+                }
+                var newWidth = canvas.width;
+                var newHeight = canvas.height;
+                var ctx = canvas.getContext("2d");
+                if (settings.imagesmooth === 0) {
+                    ctx.webkitImageSmoothingEnabled = false;
+                    ctx.mozImageSmoothingEnabled = false;
+                    ctx.imageSmoothingEnabled = false;
+                }
+                ctx.drawImage(placingImage,0,0,newWidth,newHeight);
+                var newImage = ctx.getImageData(0,0,newWidth,newHeight);
+                // loop through each pixel in the ImageData
+                for (var x = 0; x < newWidth; x++) {
+                    for (var y = 0; y < newHeight; y++) {
+                        var i = (y*newWidth+x)*4;
+                        var r = newImage.data[i];
+                        var g = newImage.data[i+1];
+                        var b = newImage.data[i+2];
+                        var a = newImage.data[i+3];
+                        if (a > 0.33) {
+                            // mousePos is the center of the image
+                            var pixelX = mousePos.x - Math.round(newWidth/2) + x+1;
+                            var pixelY = mousePos.y - Math.round(newHeight/2) + y+1;
+                            if (isEmpty(pixelX,pixelY)) {
+                                var elem = (settings.imageelem || "wood");
+                                if (!elements[elem]) { elem = "wood";}
+                                createPixel(elem,pixelX,pixelY);
+                                pixelMap[pixelX][pixelY].color = pixelColorPick(pixelMap[pixelX][pixelY], RGBToHex([r,g,b]));
+                            }
+                        }
+                    }
+                }
+                return false;
+            }
+            else if (shiftDown && e.button !== 1 && !((elements[currentElement].tool || elements[currentElement].category==="tools") && mouseType==="left")) {
                 shaping = 1;
                 shapeStart = mousePos;
             }
@@ -10697,7 +10768,7 @@
             };
         }
         function mouseMove(e) {
-            if (mouseIsDown && !shaping) {
+            if (mouseIsDown && !shaping && !placingImage) {
                 mouseAction(e);
             }
             else {
@@ -10986,6 +11057,9 @@
         function selectElement(element) {
             var e1 = document.getElementById("elementButton-"+currentElement);
             if (e1 != null) { e1.setAttribute("current","false"); }
+            if (elements[currentElement].onUnselect) {
+                elements[currentElement].onUnselect();
+            }
             currentElement = element;
             if (elements[element].customColor) {
                 // show the colorSelector
@@ -10995,6 +11069,9 @@
                 // hide the colorSelector
                 document.getElementById("colorSelector").style.display = "none";
             }
+            if (elements[element].onSelect) {
+                elements[element].onSelect();
+            }
             var e2 = document.getElementById("elementButton-"+element);
             if (!e2) { return; }
             e2.setAttribute("current","true");
@@ -11980,6 +12057,7 @@ for (var k = 0; k < b0.split(" AND ").length; k++) {
         shiftDown = 0;
         shaping = 0;
         shapeStart = null;
+        placingImage = null;
         // On window load, run tick() 20 times per second
         tps = 30;
         tickInterval = window.setInterval(tick, 1000/tps);
@@ -12880,13 +12958,13 @@ for (var k = 0; k < b0.split(" AND ").length; k++) {
                     setSetting("lastversion",currentversion);
                 });
                 // wiki clicked check
-                if (!settings["clickedwiki"]) {
+                /*if (!settings["clickedwiki"]) {
                     document.getElementById("wikiButton").insertAdjacentHTML("beforeend",`<span style="color:red">(NEW)</span>`);
                 }
                 document.getElementById("wikiButton").addEventListener("click", function() {
                     document.getElementById("wikiButton").innerHTML = "Wiki";
                     setSetting("clickedwiki",true);
-                });
+                });*/
             </script>
         </div>
         <div id="infoParent">
@@ -12995,6 +13073,12 @@ Cancer, Landmine, Grenade, Smoke Grenade">?</span> <input type="button" value="O
                         </select>
                         <span onclick="clearAll();" style="font-style:italic;cursor:pointer"></span>
                     </span>
+                    <span setting="imageelem" class="setting-span multisetting" title="Default: Wood">
+                        Image Elem<input type="text" value="wood" onchange="if(this.value===''){this.value='wood'}; setSetting('imageelem',this.value.trim())">
+                    </span>
+                    <span setting="imagesmooth" class="setting-span multisetting" title="Default: ON">
+                        Smoothing<input type="button" value="ON" class="toggleInput" onclick="toggleInput(this,'imagesmooth')" state="1">
+                    </span>
                 </div>
             </div>
         </div>