Last active
October 10, 2017 22:43
-
-
Save Ptolemy2002/b36f0088fc8fed713ec88262aed2faf8 to your computer and use it in GitHub Desktop.
The current code in my program
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// JavaScript File | |
var Canvas = document.getElementById("canvas"); | |
var label = document.getElementById("text"); | |
function componentToHex(c) { | |
var hex = c.toString(16); | |
return hex.length == 1 ? "0" + hex : hex; | |
} | |
function rgbToHex(r, g, b) { | |
return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b); | |
} | |
console.log("" + rgbToHex(255, 100, 50)); | |
var distance = function(x1, y1, x2, y2) { | |
var a = Math.pow(x2 - x1, 2); | |
var b = Math.pow(y2 - y1, 2); | |
return Math.sqrt(a + b); | |
}; | |
//Declare the Canvas Object | |
var canvasObj = function(src) { | |
//Function to see if a line is colliding with a certain point Has an accuracy of about 1 pixel | |
this.lineIsColliding = function(startX, startY, endX, endY, testX, testY) { | |
const v1 = { | |
x: endX - startX, | |
y: endY - startY | |
}; | |
const l2 = v1.x * v1.x + v1.y * v1.y; | |
if (l2 === 0) { | |
return false; | |
} // line has no length so can't be near anything | |
const v2 = { | |
x: testX - startX, | |
y: testY - startY | |
}; | |
const u = (v1.x * v2.x + v1.y * v2.y) / l2; | |
return u >= 0 && u <= 1 && Math.abs((v1.x * v2.y - v1.y * v2.x) / Math.sqrt(l2)) < 1; | |
}; | |
var self = this; | |
//The Canvas to draw on | |
this.src = src; | |
//The context of source(used for drawing) | |
this.ctx = this.src.getContext("2d"); | |
//The Mouse Move Function | |
this.showCoordinates = function(e) { | |
console.log(e); | |
label.innerHTML = "<b>x: </b>" + e.offsetX + " <b>y: </b>" + e.offsetY + ", " + self.lineIsColliding(358, 277, 365, 268, e.offsetX, e.offsetY); | |
}; | |
//Show coordinates variable | |
this.showCoordinatesBool = true; | |
//The boolean to tell if we should use stroke | |
this.useStroke = true; | |
//The fill style and stroke style(can be color, pattern, or gradient) | |
this.fillStyle = "#000000"; | |
this.strokeStyle = "#000000"; | |
//The Line cap style (can be butt, square, or round) | |
this.lineCap = "butt"; | |
//The Stroke Weight (how wide the strokes are) | |
this.strokeWeightVar = "default"; | |
//The corner style (how the corners are drawn) | |
this.cornerStyle = "miter"; | |
//The Shadow Color | |
this.shadowColorVar = "#000000"; | |
//The shadow Blur | |
this.shadowBlurVar = 0; | |
//The shadow Offsets | |
this.shadowOffsetX = 0; | |
this.shadowOffsetY = 0; | |
//The style of the current font | |
this.fontStyle = "normal"; | |
//The variant of the current font | |
this.fontVariant = "normal"; | |
//The thickness of the current font | |
this.fontThickness = "normal"; | |
//The height/size of the current font | |
this.fontSize = 10; | |
//The family of the current font | |
this.fontFamily = "sans-serif"; | |
//The boolean to tell the pen | |
this.pen = false; | |
//Function to set the fill style | |
this.fill = function(style) { | |
this.fillStyle = style; | |
this.ctx.fillStyle = style; | |
}; | |
//Function to set the stroke style | |
this.stroke = function(style) { | |
this.useStroke = true; | |
this.strokeStyle = style; | |
this.ctx.strokeStyle = style; | |
}; | |
//Function to delete the stroke | |
this.noStroke = function() { | |
this.useStroke = false; | |
}; | |
//Function to draw a rectangle | |
this.rect = function(x, y, width, height) { | |
this.ctx.fillRect(x, y, width, height); | |
if (this.useStroke) { | |
this.ctx.strokeRect(x, y, width, height); | |
} | |
}; | |
//Function to draw a corner | |
this.corner = function(style, centerX, centerY, x1, y1, x2, y2) { | |
this.ctx.lineJoin = style; | |
this.cornerStyle = style; | |
this.ctx.beginPath(); | |
this.ctx.moveTo(x1, y1); | |
this.ctx.lineTo(centerX, centerY); | |
this.ctx.lineTo(x2, y2); | |
this.ctx.stroke(); | |
}; | |
//Function to draw a hollow rectangle | |
this.hollowRect = function(x, y, width, height) { | |
this.ctx.strokeRect(x, y, width, height); | |
}; | |
//Function to set the canvas background | |
this.background = function(style) { | |
this.fillStyle = style; | |
this.ctx.fillStyle = style; | |
this.ctx.fillRect(0, 0, this.src.width, this.src.height); | |
}; | |
//Function to draw a line | |
this.line = function(startX, startY, endX, endY) { | |
this.ctx.beginPath(); | |
this.ctx.moveTo(startX, startY); | |
this.ctx.lineTo(endX, endY); | |
this.ctx.stroke(); | |
}; | |
//Function to change line style | |
this.lineCap = function(mode) { | |
this.ctx.lineCap = mode; | |
this.lineCap = mode; | |
}; | |
//Function to change stroke weight | |
this.strokeWeight = function(weight) { | |
this.useStroke = true; | |
this.ctx.lineWidth = weight; | |
this.strokeWeightVar = weight; | |
}; | |
//Function to clear a certain area | |
this.clearArea = function(x, y, width, height) { | |
this.ctx.clearRect(x, y, width, height); | |
}; | |
//Turn the show coordinate function on | |
this.enableCoordinates = function() { | |
this.showCoordinatesBool = true; | |
this.src.addEventListener("mousemove", this.showCoordinates); | |
}; | |
/*Shadows*/ | |
//Set the shadow color | |
this.shadowColor = function(color) { | |
this.shadowColorVar = color; | |
this.ctx.shadowColor = color; | |
}; | |
//Set the shadow blur | |
this.shadowBlur = function(blur) { | |
this.shadowBlurVar = blur; | |
this.ctx.shadowBlur = blur; | |
}; | |
//Set the shadow offset | |
this.shadowOffset = function(offsetX, offsetY) { | |
this.shadowOffsetX = offsetX; | |
this.shadowOffsetY = offsetY; | |
this.ctx.shadowOffsetX = offsetX; | |
this.ctx.shadowOffsetY = offsetY; | |
}; | |
//Remove shadows | |
this.noShadow = function() { | |
this.shadowOffset(0, 0); | |
this.shadowColor("#000000"); | |
this.shadowBlur(0); | |
}; | |
//Function to see if a rectangle is colliding with a specific point | |
this.rectIsColliding = function(rectX, rectY, rectWidth, rectHeight, testX, testY) { | |
this.ctx.rect(rectX, rectY, rectWidth, rectHeight); | |
return this.ctx.isPointInPath(testX, testY); | |
}; | |
//Function that returns a custom linear gradient | |
this.linearGradient = function(startX, startY, endX, endY, colorStops) { | |
var gradient = this.ctx.createLinearGradient(startX, startY, endX, endY); | |
for (var i = 0; i < colorStops.length; i++) { | |
gradient.addColorStop(colorStops[i].location, colorStops[i].color); | |
} | |
return gradient; | |
}; | |
//Function that returns a custom radial gradient | |
this.radialGradient = function(x0, y0, r0, x1, y1, r1, colorStops) { | |
var radialGradientVar = this.ctx.createRadialGradient(x0, y0, r0, x1, y1, r1); | |
for (var i = 0; i < colorStops.length; i++) { | |
radialGradientVar.addColorStop(colorStops[i].location, colorStops[i].color); | |
} | |
return radialGradientVar; | |
}; | |
//Function that allows you to create a pattern | |
this.pattern = function(image, mode) { | |
var pat = this.ctx.createPattern(image, mode); | |
return pat; | |
}; | |
//Function that allows you to make text. Optional width parameter to limit the width of the text. Optional font parameter if you would like to set it manually. | |
this.text = function(text, x, y, width, font) { | |
if (font) { | |
this.ctx.font = font; | |
} | |
else { | |
this.ctx.font = this.fontStyle + " " + this.fontVariant + " " + this.fontThickness + " " + this.fontSize + "px " + this.fontFamily; | |
console.log(this.ctx.font); | |
console.log(this.fontStyle + " " + this.fontVariant + " " + this.fontThickness + " " + this.fontSize + "px " + this.fontFamily); | |
} | |
if (width) { | |
this.ctx.fillText(text, x, y, width); | |
if (this.useStroke) { | |
this.ctx.strokeText(text, x, y, width); | |
} | |
} | |
else { | |
this.ctx.fillText(text, x, y); | |
if (this.useStroke) { | |
this.ctx.strokeText(text, x, y); | |
} | |
} | |
}; | |
//Function that allows you to make hollow text. Optional width parameter to limit the width of the text. Optional font parameter if you would like to set it manually. Font Size MUIST be an INTEGER if you do not specify the font parameter | |
this.hollowText = function(text, x, y, width, font) { | |
if (font) { | |
this.ctx.font = font; | |
} | |
else { | |
this.ctx.font = this.fontStyle + " " + this.fontVariant + " " + this.fontThickness + " " + this.fontSize + "px " + this.fontFamily; | |
console.log(this.ctx.font); | |
console.log(this.fontStyle + " " + this.fontVariant + " " + this.fontThickness + " " + this.fontSize + "px " + this.fontFamily); | |
} | |
this.ctx.strokeText(text, x, y, width); | |
}; | |
this.textWidth = function(text) { | |
return this.ctx.measureText(text).width; | |
} | |
}; | |
//The following code is for testing purposes ONLY! | |
var start = function(imageList) { | |
//Create a new canvas | |
var myCanvas = new canvasObj(Canvas); | |
//Set the Background Color | |
myCanvas.background("#ff0000"); | |
//Set the fill color | |
myCanvas.fill("#0000ff"); | |
//Set the Stroke Color | |
myCanvas.stroke("#00ff00"); | |
//Draw a rectangle | |
myCanvas.rect(164, 153, 50, 100); | |
//Draw a hollow rectangle | |
myCanvas.hollowRect(300, 300, 50, 50); | |
//Disable the Stroke | |
myCanvas.noStroke(); | |
//Draw a rectangle with no stroke | |
myCanvas.rect(21, 18, 50, 50); | |
//Change the Stroke color | |
myCanvas.stroke("#ffff00"); | |
//Change the stroke weight | |
myCanvas.strokeWeight(10); | |
//Change the line cap | |
myCanvas.lineCap("round"); | |
//Draw a line | |
myCanvas.line(350, 30, 250, 80); | |
//Draw a corner | |
myCanvas.corner("miter", 50, 135, 100, 185, 100, 110); | |
//Enable the Coordinates | |
myCanvas.enableCoordinates(); | |
//Clear a space from the canvas | |
myCanvas.clearArea(6, 245, 100, 100); | |
//Set the Shadow Color | |
myCanvas.shadowColor("black"); | |
//Set the shadow Blur | |
myCanvas.shadowBlur(20); | |
//Set the shadow offset | |
myCanvas.shadowOffset(10, 0); | |
//Set the stroke | |
myCanvas.noStroke(); | |
//Set the fill color | |
myCanvas.fill("orange"); | |
//Draw a rectangle | |
myCanvas.rect(268, 167, 30, 30); | |
//Remove the shadow | |
myCanvas.noShadow(); | |
//Test if the rectangle is colliding with a specific point | |
if (myCanvas.rectIsColliding(268, 167, 30, 30, 290, 170)) { | |
myCanvas.fill("green"); | |
myCanvas.rect(358, 0, 50, 46); | |
} | |
else { | |
myCanvas.fill("yellow"); | |
myCanvas.rect(362, 0, 50, 46); | |
} | |
//Test if a line is colliding with a certain point | |
console.log("function returned: " + myCanvas.lineIsColliding(358, 277, 365, 268, 362, 271)); | |
if (myCanvas.lineIsColliding(358, 277, 365, 268, 362, 271)) { | |
console.log("line is colliding!"); | |
myCanvas.line(358, 277, 365, 268); | |
} | |
else { | |
console.log("line is not colliding!"); | |
} | |
myCanvas.line(0, 0, 50, 10); | |
//Color stop used for creating gradients | |
var colorStop = function(location, color) { | |
this.location = location; | |
this.color = color; | |
}; | |
console.log(distance(0, 0, 50, 10)); | |
myCanvas.fill(myCanvas.linearGradient(259, 77, 359, 127, [new colorStop(0.0, "green"), new colorStop(1.0, "blue")])); | |
myCanvas.rect(259, 87, 100, 50); | |
myCanvas.fill(myCanvas.radialGradient(309, 225, 10, 309, 225, 50, [new colorStop(0.0, "yellow"), new colorStop(1.0, "green")])); | |
myCanvas.rect(259, 200, 100, 50); | |
var pattern = myCanvas.pattern(imageList[0], "repeat"); | |
myCanvas.fill(pattern); | |
myCanvas.rect(132, 33, 100, 100); | |
myCanvas.fill(rgbToHex(0, 0, 0)); | |
//Setup text | |
myCanvas.fontSize = 50; | |
myCanvas.fontStyle = "oblique"; | |
myCanvas.fontVariant = "small-caps"; | |
myCanvas.fontThickness = 900; | |
myCanvas.fontFamily = "sans"; | |
//Draw text | |
myCanvas.text("Test", 200, 200); | |
console.log(myCanvas.textWidth("Test")); | |
}; | |
//Array of existing images | |
var images = []; | |
//How many images have loaded | |
var imagesLoaded = 0; | |
//Function to add an image to que | |
var createImage = function(src) { | |
var img = document.createElement("img"); | |
img.src = src; | |
console.log(img); | |
//Add image to list | |
images.push(img); | |
//When the image loads | |
img.addEventListener("load", function() { | |
//Update imagesLoaded | |
imagesLoaded++; | |
//If all images have loaded | |
if (imagesLoaded === images.length) { | |
//Call start. Pass the array of images to the function. | |
start(images); | |
} | |
}); | |
}; | |
createImage("Images/test.png"); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment