sigonasr2/pixel-art-maker
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add smoother line drawing algorithm, to fill in "skipped" pixels

Browse Source
This commit is contained in:
Joshua Sigona 2020-06-14 22:55:16 +09:00
parent d34b4f8347
commit 53518eb8fd
1 changed files with 106 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

94
canvas.js
View File

@ -18,6 +18,8 @@ FILL //Fill was done. A color is provided by "backcolor" and a pixel containing
var pixelStates = []; //Last 20 pixel states stored here. var pixelStates = []; //Last 20 pixel states stored here.
var currentPixelState = -1; //Which pixel state we're on. Max out at 20. var currentPixelState = -1; //Which pixel state we're on. Max out at 20.
var lastDrawPoint = null;
document.addEventListener("DOMContentLoaded",()=>{ document.addEventListener("DOMContentLoaded",()=>{
var undoButton = document.createElement("button") var undoButton = document.createElement("button")
var redoButton = document.createElement("button") var redoButton = document.createElement("button")
@ -35,6 +37,12 @@ document.addEventListener("DOMContentLoaded",()=>{
this.y = y; this.y = y;
} }
} }
class Point{
constructor(x,y) {
this.x = x;
this.y = y;
}
}
//Returns a coordinate class. //Returns a coordinate class.
var getCoordinates = (box)=>{ var getCoordinates = (box)=>{
@ -130,6 +138,8 @@ document.addEventListener("DOMContentLoaded",()=>{
if (e.target.tagName==="TH") { if (e.target.tagName==="TH") {
if (mouseState>=0) { if (mouseState>=0) {
var mycoords = getCoordinates(e.target) var mycoords = getCoordinates(e.target)
if (lastDrawPoint===null) {
lastDrawPoint = new Point(mycoords.x,mycoords.y);
if (!(e.target.id in changedPixels)) { if (!(e.target.id in changedPixels)) {
if ("PIXELS" in changedPixels) { if ("PIXELS" in changedPixels) {
changedPixels["PIXELS"]+=","+mycoords.x+","+mycoords.y changedPixels["PIXELS"]+=","+mycoords.x+","+mycoords.y
@ -146,6 +156,89 @@ document.addEventListener("DOMContentLoaded",()=>{
} }
changedPixels["STEPTYPE"]="ADD" changedPixels["STEPTYPE"]="ADD"
} }
} else {
//SMOOTH DRAWING
//Draw pixels for each point in
//between both positions. That
//way there's no skipped points.
var slopeX = mycoords.x - lastDrawPoint.x
var slopeY = mycoords.y - lastDrawPoint.y
//Whichever is larger is the one
//we increment by 1 pixel each turn.
if (Math.abs(slopeY)>Math.abs(slopeX)) {
//Y increases by 1.
var Xincr = slopeX/Math.abs(slopeY);
var Yincr = Math.sign(slopeY)*1;
var currX = Number(lastDrawPoint.x)
var currY = Number(lastDrawPoint.y)
var iterations=0;
while (Math.floor(currY)!==Math.floor(mycoords.y)) {
currY+=Yincr;
currX+=Xincr;
if (iterations>=1) {
console.log("X:"+currX+","+currY+"/"+lastDrawPoint.x+","+lastDrawPoint.y+"/"+mycoords.x+","+mycoords.y)
}
var target = document.getElementById("pos_"+Math.ceil(currX)+"_"+currY);
if (!(target.id in changedPixels)) {
if ("PIXELS" in changedPixels) {
changedPixels["PIXELS"]+=","+Math.ceil(currX)+","+currY
} else {
changedPixels["PIXELS"]=Math.ceil(currX)+","+currY
}
changedPixels["old_"+target.id]=target.style.background;
if (mouseState<2) {
target.style.background=selectedColor;
changedPixels[target.id]=selectedColor;
} else {
target.style.background="white";
changedPixels[target.id]="white";
}
changedPixels["STEPTYPE"]="ADD"
}
if (currX>COLS || currY>ROWS || currX<0 || currY<0) {
new Error("Rip")
break;
}
iterations++;
}
} else {
var Xincr = Math.sign(slopeX)*1;
var Yincr = slopeY/Math.abs(slopeX);
var currX = Number(lastDrawPoint.x)
var currY = Number(lastDrawPoint.y)
var iterations=0;
while (Math.floor(currX)!==Math.floor(mycoords.x)) {
currY+=Yincr;
currX+=Xincr;
if (iterations>=1) {
console.log("Y:"+currX+","+currY+"/"+lastDrawPoint.x+","+lastDrawPoint.y+"/"+mycoords.x+","+mycoords.y)
}
var target = document.getElementById("pos_"+currX+"_"+Math.ceil(currY));
if (!(target.id in changedPixels)) {
if ("PIXELS" in changedPixels) {
changedPixels["PIXELS"]+=","+currX+","+Math.ceil(currY)
} else {
changedPixels["PIXELS"]=currX+","+Math.ceil(currY)
}
changedPixels["old_"+target.id]=target.style.background;
if (mouseState<2) {
target.style.background=selectedColor;
changedPixels[target.id]=selectedColor;
} else {
target.style.background="white";
changedPixels[target.id]="white";
}
changedPixels["STEPTYPE"]="ADD"
}
iterations++;
if (currX>COLS || currY>ROWS || currX<0 || currY<0) {
new Error("Rip")
break;
}
}
}
lastDrawPoint = new Point(mycoords.x,mycoords.y);
}
} }
} }
} }
@ -197,6 +290,7 @@ document.addEventListener("DOMContentLoaded",()=>{
var MouseStateDown = (e)=>{ var MouseStateDown = (e)=>{
e.preventDefault(); e.preventDefault();
mouseState = e.button; mouseState = e.button;
lastDrawPoint = null;
if (!fillTool) { if (!fillTool) {
if (e.target.tagName==="TH") { if (e.target.tagName==="TH") {
var mycoords = getCoordinates(e.target) var mycoords = getCoordinates(e.target)