commodore
/
sandboxels
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

more functionality

This commit is contained in:
slweeb 2023-07-11 15:24:12 -04:00
parent 444d8c1823
commit 214d093869
4 changed files with 98 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
changelog.html
View File

@ -113,6 +113,7 @@
<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>+ Paste or Drag-and-Drop images!</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>

1
changelog.txt
View File

@ -14,6 +14,7 @@ A fancier version of this changelog can be found here: https://sandboxels.r74n.c
+ 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!
+ Paste or Drag-and-Drop images!
[Bug Fixes]
~ Fixed: Old browsers that don't support ECMAScript 2016 crash
Stay tuned for bigger updates in the coming months!

1
controls.html
View File

@ -101,6 +101,7 @@
<tr><td>Smooth view (Low performance)</td> <td><kbd>4</kbd></td></tr>
<tr><td>Toggle GUI</td> <td><kbd>F1</kbd></td></tr>
<tr><td>Capture screenshot</td> <td><kbd>C</kbd> or <kbd>F2</kbd></td></tr>
<tr><td>Paste Image</td> <td><kbd>Ctrl</kbd> + <kbd>V</kbd> or Drag and Drop</td></tr>
</table>
<h2>Button Info</h2>

137
index.html
View File

@ -10692,48 +10692,7 @@
}
if ((e.button === 0 || e.touches) && placingImage) {
if (e.touches) { mouseMove(e); }
// 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]));
}
}
}
}
placeImage();
return false;
}
else if (shiftDown && e.button !== 1 && !((elements[currentElement].tool || elements[currentElement].category==="tools") && mouseType==="left")) {
@ -10743,6 +10702,51 @@
mouseMove(e);
return false;
}
function placeImage(placementX,placementY,scale) {
if (!scale) { scale = mouseSize }
// 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 = (placementX||mousePos.x) - Math.round(newWidth/2) + x+1;
var pixelY = (placementY||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]));
}
}
}
}
}
function mouseUp(e) {
mouseIsDown = false;
if (shaping) {
@ -12627,6 +12631,55 @@ for (var k = 0; k < b0.split(" AND ").length; k++) {
if (e.touches) e = e.touches[0];
return false;
}
gameCanvas.addEventListener("dragenter", function(e){e.stopPropagation(); e.preventDefault();})
gameCanvas.addEventListener("dragover", function(e){e.stopPropagation(); e.preventDefault();})
gameCanvas.addEventListener("drop", function(e){
e.stopPropagation();
e.preventDefault();
var url = e.dataTransfer.getData('text/plain');
if (url) {
var img = new Image();
img.onload = function(){placingImage = img; placeImage(); placingImage = null;}
img.src = url;
// for img file(s), read the file & draw to canvas
} else {
console.log(e.dataTransfer.files)
if (!e.dataTransfer.files || e.dataTransfer.files.length === 0) { return; }
var file = e.dataTransfer.files[0];
if (file.type.indexOf('image/') === -1) { return; }
var img = document.createElement("img");
img.classList.add("obj");
img.file = file;
var reader = new FileReader();
reader.onload = (function(aImg){
return function(e) {
aImg.onload=function(){
placingImage = aImg;
placeImage();
placingImage = null;
}
// e.target.result is a dataURL for the image
aImg.src = e.target.result;
};
})(img);
reader.readAsDataURL(file);
}
}, false);
// if pasted image, draw to canvas
window.addEventListener("paste", function(e){
if (e.clipboardData) {
var items = e.clipboardData.items;
if (!items) { return; }
var item = items[items.length-1];
if (item.type.indexOf('image/') === -1) { return; }
var blob = item.getAsFile();
var URLObj = window.URL || window.webkitURL;
var source = URLObj.createObjectURL(blob);
var img = new Image();
img.onload = function(){placingImage = img; placeImage(); placingImage = null;}
img.src = source;
}
}, false);
window.onbeforeunload = function(){ // Confirm leaving page if there are pixels on-screen
if (currentPixels.length > 0){
return 'Are you sure you want to leave?';