From 1c730973cb4af5f7471393111a8db37d9a08255e Mon Sep 17 00:00:00 2001 From: An Orbit <68935009+orbit-loona@users.noreply.github.com> Date: Wed, 12 Apr 2023 17:04:20 -0400 Subject: [PATCH] quick much-needed update, then back to hiatus --- mods/acidboxels.js | 156 ++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 139 insertions(+), 17 deletions(-) diff --git a/mods/acidboxels.js b/mods/acidboxels.js index c6580d71..41d8a344 100644 --- a/mods/acidboxels.js +++ b/mods/acidboxels.js @@ -6,6 +6,14 @@ function increment(){ incrementt = incrementt % (Math.PI*8.8) + (Math.PI/30); } +shapeModes = ["normal","circles","triangles"]; +settings.shapeMode ??= 0; +settings.doAcid ??= false; + +function getShapeMode() { + return shapeModes[settings.shapeMode] ?? "normal"; +}; + function drawPixels(forceTick=false) { // newCurrentPixels = shuffled currentPixels var newCurrentPixels = currentPixels.slice(); @@ -37,16 +45,6 @@ function drawPixels(forceTick=false) { pixelsFirst.push(pixel); } } - adjacentCoords = [ - [0,1], - [0,-1], - [1,0], - [-1,0] - ]; - biCoords = [ - [0,1], - [1,0] - ]; // Draw the current pixels var canvas = document.getElementById("game"); var ctx = canvas.getContext("2d"); @@ -86,21 +84,145 @@ function drawPixels(forceTick=false) { ctx.fillStyle = averageRGB(colorlist); } } - if ((view === null || view === 4) && elements[pixel.element].state === "gas") { - ctx.globalAlpha = 0.5; - ctx.fillRect((pixel.x-1)*pixelSize+(18*Math.sin((pixel.y+incrementt )/4.4)), (pixel.y)*pixelSize+(18*Math.sin((pixel.x+incrementt)/4.4)), pixelSize*3, pixelSize); - ctx.fillRect((pixel.x)*pixelSize+(18*Math.sin((pixel.y+incrementt )/4.4)), (pixel.y-1)*pixelSize+(18*Math.sin((pixel.x+incrementt)/4.4)), pixelSize, pixelSize*3); - ctx.globalAlpha = 1; + var mode = getShapeMode(); + var acidOffset1 = (settings.doAcid ?? false) * (18*Math.sin((pixel.y+incrementt)/4.4)); + var acidOffset2 = (settings.doAcid ?? false) * (18*Math.sin((pixel.x+incrementt)/4.4)); + if ((view === null || view === 4) && elements[pixel.element].isGas) { + //gas rendering + switch(mode) { + case "circles": + ctx.globalAlpha = 0.66; + ctx.beginPath(); + ctx.arc((pixel.x+0.5)*pixelSize+acidOffset1, (pixel.y+0.5)*pixelSize+acidOffset2, pixelSize, 0, 2 * Math.PI, false); + ctx.fill(); + ctx.globalAlpha = 1; + break; + case "triangles": + ctx.globalAlpha = 0.66; + ctx.beginPath(); + ctx.moveTo((pixel.x-0.75)*pixelSize+acidOffset1,(pixel.y+1.5)*pixelSize+acidOffset2); + ctx.lineTo((pixel.x+0.5)*pixelSize+acidOffset1,(pixel.y-1)*pixelSize+acidOffset2); + ctx.lineTo((pixel.x+1.75)*pixelSize+acidOffset1,(pixel.y+1.5)*pixelSize+acidOffset2); + ctx.fill(); + ctx.globalAlpha = 1; + break; + default: + ctx.globalAlpha = 0.5; + ctx.fillRect((pixel.x-1)*pixelSize+acidOffset1, (pixel.y)*pixelSize+acidOffset2, pixelSize*3, pixelSize); + ctx.fillRect((pixel.x)*pixelSize+acidOffset1, (pixel.y-1)*pixelSize+acidOffset2, pixelSize, pixelSize*3); + ctx.globalAlpha = 1; + break; + }; } else { // draw the pixel (default) - ctx.fillRect(pixel.x*pixelSize+(18*Math.sin((pixel.y+incrementt )/4.4)), pixel.y*pixelSize+(18*Math.sin((pixel.x+incrementt)/4.4)), pixelSize, pixelSize); + switch(mode) { + case "circles": + ctx.beginPath(); + ctx.arc((pixel.x+0.5)*pixelSize+acidOffset1, (pixel.y+0.5)*pixelSize+acidOffset2, pixelSize/2, 0, 2 * Math.PI, false); + ctx.fill(); + ctx.globalAlpha = 1; + break; + case "triangles": + ctx.beginPath(); + ctx.moveTo(pixel.x*pixelSize+acidOffset1,(pixel.y+1)*pixelSize+acidOffset2); + ctx.lineTo((pixel.x+0.5)*pixelSize+acidOffset1,(pixel.y)*pixelSize+acidOffset2); + ctx.lineTo((pixel.x+1)*pixelSize+acidOffset1,(pixel.y+1)*pixelSize+acidOffset2); + ctx.fill(); + ctx.globalAlpha = 1; + break; + default: + ctx.fillRect(pixel.x*pixelSize+acidOffset1, pixel.y*pixelSize+acidOffset2, pixelSize, pixelSize); + break; + }; } if (pixel.charge && view !== 2) { // Yellow glow on charge if (!elements[pixel.element].colorOn) { ctx.fillStyle = "rgba(255,255,0,0.5)"; - ctx.fillRect(pixel.x*pixelSize+(18*Math.sin((pixel.y+incrementt )/4.4)), pixel.y*pixelSize+(18*Math.sin((pixel.x+incrementt)/4.4)), pixelSize, pixelSize); + switch(mode) { + case "circles": + ctx.beginPath(); + ctx.arc((pixel.x+0.5)*pixelSize+acidOffset1, (pixel.y+0.5)*pixelSize+acidOffset2, pixelSize/2, 0, 2 * Math.PI, false); + ctx.fill(); + ctx.globalAlpha = 1; + break; + case "triangles": + ctx.beginPath(); + ctx.moveTo(pixel.x*pixelSize+acidOffset1,(pixel.y+1)*pixelSize+acidOffset2); + ctx.lineTo((pixel.x+0.5)*pixelSize+acidOffset1,(pixel.y)*pixelSize+acidOffset2); + ctx.lineTo((pixel.x+1)*pixelSize+acidOffset1,(pixel.y+1)*pixelSize+acidOffset2); + ctx.fill(); + ctx.globalAlpha = 1; + break; + default: + ctx.fillRect(pixel.x*pixelSize+acidOffset1, pixel.y*pixelSize+acidOffset2, pixelSize, pixelSize); + break; + }; } } } if ((!paused) || forceTick) {pixelTicks++}; } + +runAfterLoad(function() { + //Setting + var settingsMenu = document.getElementById("settingsMenu").getElementsByClassName("menuText")[0]; + + var settingNodes = [...settingsMenu.childNodes].filter(function(node) { return node.nodeType == 1 }); + var lastSetting = settingNodes[settingNodes.length - 1]; + //console.log(lastSetting); + //console.log(lastSetting.getAttribute("style")); + lastSetting.removeAttribute("style"); //restore padding for worldgen setting; + //console.log(lastSetting.getAttribute("style")); + + //Shape setting + var shapeSettingSpan = document.createElement("span"); + shapeSettingSpan.setAttribute("setting","shapeMode"); + shapeSettingSpan.setAttribute("class","setting-span"); + shapeSettingSpan.textContent = "Pixel Shape (laggy) "; + var settingDropdown = document.createElement("select"); + settingDropdown.setAttribute("onchange","settings.shapeMode = parseInt(this.value); saveSettings();"); + var options = { + 0: "Squares", + 1: "Circles", + 2: "Triangles" + }; + for(value in options) { + var newOption = document.createElement("option"); + if(value == "0") { + newOption.setAttribute("selected",""); + }; + newOption.setAttribute("value",value); + newOption.innerText = options[value]; + settingDropdown.appendChild(newOption); + }; + shapeSettingSpan.appendChild(settingDropdown); + settingsMenu.appendChild(shapeSettingSpan); + + //Acid setting + var acidSettingSpan = document.createElement("span"); + acidSettingSpan.setAttribute("setting","doAcid"); + acidSettingSpan.setAttribute("class","setting-span"); + acidSettingSpan.textContent = "\"Acid\" distortion "; + var settingDropdown = document.createElement("select"); + settingDropdown.setAttribute("onchange","settings.doAcid = (this.value === 'true'); saveSettings();"); + var options = { + "false": "Disabled", + "true": "Enabled" + }; + for(value in options) { + var newOption = document.createElement("option"); + if(value == "0") { + newOption.setAttribute("selected",""); + }; + newOption.setAttribute("value",value); + newOption.innerText = options[value]; + settingDropdown.appendChild(newOption); + }; + acidSettingSpan.appendChild(settingDropdown); + settingsMenu.appendChild(acidSettingSpan); + + settingNodes = [...settingsMenu.childNodes].filter(function(node) { return node.nodeType == 1 }); + lastSetting = settingNodes[settingNodes.length - 1]; + //console.log(lastSetting); + lastSetting.setAttribute("style","padding-bottom:0"); //remove padding from last setting; +});