Init

.gitignore

@@ -0,0 +1,2 @@
+.idea
+

project.json

@@ -0,0 +1,6 @@
+{
+    "display_name": "Colorpicker",
+    "info_text": "Tool for determining color codes in HSB, RGB and HEX.",
+    "visible": true,
+    "tags": ["Tool"]
+}

public/data/scripts/events.js

@@ -0,0 +1,23 @@
+function keyPressed(){
+	switch(keyCode){
+		
+	}
+}
+
+function keyReleased(){
+	switch(keyCode){
+		
+	}
+}
+
+function mouseDragged(){
+	colorPicker.mouseDragged();
+}
+
+function mousePressed(){
+	colorPicker.mousePressed();
+}
+
+function mouseReleased(){
+	colorPicker.mouseReleased();
+}

public/data/scripts/lib/benjo_library.js

@@ -0,0 +1,669 @@
+let TOP = 1,
+	RIGHT = 2,
+	BOTTOM = 3,
+	LEFT = 4,
+	TOP_RIGHT = 5,
+	BOTTOM_RIGHT = 6,
+	BOTTOM_LEFT = 7,
+	TOP_LEFT = 8;
+
+function collisionDetection(obj0, obj1){
+	
+	let sp = strokePadding;
+	if (sp == null) sp = 0;
+	
+	if (obj0.isEllipse && obj1.isRectangle){
+		
+		//Ball
+		let b = obj0;
+		
+		//Rectangle
+		let r = obj1;
+
+		for (let i = 0; i < TWO_PI; i += PI / 32){
+			
+			/* Check every borderpoint of the ball beginning
+			at the top in clock direction up to top again */
+
+			// Ball Center X
+			let bcx = b.x;
+			
+			// Ball Center Y
+			let bcy = b.y;
+			
+			// Ball Border X
+			let bbx = b.x + sin(i) * b.r;
+			
+			// Ball Border Y inverted because Y = 0 is the TOP of the screen
+			let bby = b.y - cos(i) * b.r;
+			
+			// Rectangle Width
+			let rW = r.width + 2 * sp;
+			
+			// Rectangle Height
+			let rH = r.height + 2 * sp;
+			
+			// Rectangle Border X
+			let rX = r.x - sp;
+			
+			// Rectangle Border Y
+			let rY = r.y - sp;
+			
+			// Objects touch
+			if (bbx > rX && bbx < rX + rW
+			   && bby > rY && bby < rY + rH){
+				
+				// STRAIGHT FACES //
+				
+				//Top/Bottom touch
+				if (bcx > rX && bcx < rX + rW){ 
+					
+					//Top touch
+					if (b.v.y > 0) return {isTouching: true, location: TOP};
+					
+					//Bottom touch
+					if (b.v.y < 0) return {isTouching: true, location: BOTTOM};
+				}
+				
+				//Left/Right touch
+				if (bcy > rY && bcy < rY + rH){
+					
+					//Left touch
+					if (b.v.x > 0) return {isTouching: true, location: LEFT};
+					
+					//Right touch
+					if (b.v.x < 0) return {isTouching: true, location: RIGHT};
+
+				}
+				
+				// CORNERS //
+				
+				// BOTTOM Left/Right
+				if (i > 0 && i <= PI / 2) return {isTouching: true, location: BOTTOM_LEFT};
+
+				//LEFT Bottom/Top
+				if (i > PI / 2 && i <= PI) return {isTouching: true, location: TOP_LEFT};
+
+				//TOP Left/Right
+				if (i > PI && i <= PI + PI / 2) return {isTouching: true, location: TOP_RIGHT};
+				
+				//RIGHT Bottom/Top
+				if (i > PI + PI / 2 && i <= TWO_PI) return {isTouching: true, location: BOTTOM_RIGHT};
+			}
+		}
+		
+	}
+	
+	if (obj0.isEllipse && obj1.isEllipse){
+		
+		//Ball 1
+		let b1 = obj0;
+		
+		//Ball 2
+		let b2 = obj1;
+		
+		//Balls are close to each other
+		if (b1.x + b1.r > b2.x - b2.r
+		   && b1.x - b1.r < b2.x + b2.r
+		   && b1.y + b1.r > b2.y - b2.r
+		   && b1.y - b1.r < b2.y + b2.r){
+			
+			let distance = sqrt(pow(b1.x - b2.x, 2) + pow(b1.y - b2.y, 2));
+			
+			if (distance < b1.r + b2.r) return {isTouching: true};
+		}
+	}
+	return {isTouching: false, location: 0};
+}
+
+function performCollision(obj0, obj1, collision){
+	if (obj0.isEllipse){
+		
+		let ball = obj0;
+		
+		//Ball collides with frameborder
+		if (obj1.isFrameborder){
+			switch (collision.location){
+				case BOTTOM:
+					ball.v.y *= -1;
+					break;
+				case LEFT:
+				case RIGHT:
+					ball.v.x *= -1;
+					break;
+			}
+			if (testMode && collision.location == TOP) ball.v.y *= -1;
+			ball.move();
+		}
+		
+		//Ball collides with any brick
+		if (obj1.isBrick){
+			let cornerX, cornerY;
+			switch (collision.location){
+				case TOP:
+				case BOTTOM:
+					ball.v.y *= -1;
+					ball.move();
+					return;
+				case LEFT:
+				case RIGHT:
+					ball.v.x *= -1;
+					ball.move();
+					return;
+				case TOP_LEFT:
+					cornerX = obj1.x;
+					cornerY = obj1.y;
+					break;
+				case TOP_RIGHT:
+					cornerX = obj1.x + obj1.width;
+					cornerY = obj1.y;
+					break;
+				case BOTTOM_LEFT:
+					cornerX = obj1.x;
+					cornerY = obj1.y + obj1.height;
+					break;
+				case BOTTOM_RIGHT:
+					cornerX = obj1.x + obj1.width;
+					cornerY = obj1.y + obj1.height;
+					break;
+			}
+			
+			let nx = ball.x - cornerX;
+			let ny = ball.y - cornerY;
+			let length = sqrt(nx * nx + ny * ny);
+			nx /= length;
+			ny /= length;
+
+			let projection = ball.v.x * nx + ball.v.y * ny;
+			ball.v.x = ball.v.x - 2 * projection * nx;
+			ball.v.y = ball.v.y - 2 * projection * ny;
+			
+			ball.move();
+
+		}
+		
+		//Ball collides with paddleboard
+		if (obj1.isPaddle){
+			let cornerX, cornerY;
+			switch (collision.location){
+				case TOP:
+				case TOP_LEFT:
+				case TOP_RIGHT:
+					ball.v.x = ball.calcVelocityX(obj1, ball.v.x);
+					ball.v.y = -ball.calcVelocityY();
+					ball.move();
+					return;
+				case LEFT:
+				case RIGHT:
+					ball.v.x *= -1;
+					ball.move();
+					return;
+				case BOTTOM_LEFT:
+					cornerX = obj1.x;
+					cornerY = obj1.y + obj1.height;
+					break;
+				case BOTTOM_RIGHT:
+					cornerX = obj1.x + obj1.width;
+					cornerY = obj1.y + obj1.height;
+					break;
+			}
+			let nx = ball.x - cornerX;
+			let ny = ball.y - cornerY;
+			let length = sqrt(nx * nx + ny * ny);
+			nx /= length;
+			ny /= length;
+
+			let projection = ball.v.x * nx + ball.v.y * ny;
+			ball.v.x = ball.v.x - 2 * projection * nx;
+			ball.v.y = ball.v.y - 2 * projection * ny;
+			
+			ball.move();
+		}
+		
+		//Ball collides with other ball
+		if (obj1.isEllipse){
+			
+			//Ball 1
+			let b1 = obj0;
+			
+			//Ball 2
+			let b2 = obj1;
+			
+			//Set mass equal to radius of each ball
+			b1.mass = b1.r;
+			b2.mass = b2.r;
+			
+			//Colliding angle of ball 1 to ball 2 using arc tan of both x and y differences
+			let collisionAngle = atan2((b2.y - b1.y), (b2.x - b1.x));
+			
+			//Converting directions of velocity vector of balls into angles
+			let d1 = atan2(b1.v.y, b1.v.x);
+			let d2 = atan2(b2.v.y, b2.v.x);
+			
+			//Ignoring mass effects new velocites are simply magnitude multiplied with value of angle differences
+			let newXspeed1 = b1.v.mag * cos(d1 - collisionAngle);
+			let newYspeed1 = b1.v.mag * sin(d1 - collisionAngle);
+			let newXspeed2 = b2.v.mag * cos(d2 - collisionAngle);
+			let newYspeed2 = b2.v.mag * sin(d2 - collisionAngle);
+		
+			//According to the principle of linear momentum, kinetic energy stays the same after collision, so velocities are now related to masses
+			let finalXspeed1 = ((b1.mass - b2.mass) * newXspeed1 + b2.mass * 2 * newXspeed2) / (b1.mass + b2.mass);
+			let finalYspeed1 = newYspeed1;
+			let finalXspeed2 = (b1.mass * 2 * newXspeed1 + (b2.mass - b1.mass) * newXspeed2) / (b1.mass + b2.mass);
+			let finalYspeed2 = newYspeed2;
+			
+			//Values of collisionAngle
+			let cosAngle = cos(collisionAngle);
+			let sinAngle = sin(collisionAngle);
+			
+			//To also keep velocites relative to pure collisionAngle, subtract sin*x from cos*x and add sin*y to cos*y because coordSystem has y = 0 on the top
+			let u1x = cosAngle * finalXspeed1 - sinAngle * finalYspeed1;
+			let u1y = sinAngle * finalXspeed1 + cosAngle * finalYspeed1;
+			let u2x = cosAngle * finalXspeed2 - sinAngle * finalYspeed2;
+			let u2y = sinAngle * finalXspeed2 + cosAngle * finalYspeed2;
+			
+			//Set new velocities to both balls
+			b1.v.x = u1x;
+			b1.v.y = u1y;
+			b2.v.x = u2x;
+			b2.v.y = u2y;
+			
+		    //Update magnitude
+			b1.v.mag = sqrt(pow(b1.v.x, 2) + pow(b1.v.y, 2));
+			b2.v.mag = sqrt(pow(b2.v.x, 2) + pow(b2.v.y, 2));
+			
+			
+			//Move balls one vx/vy forward to avoid double inverting collision detection
+			b1.x += b1.v.x;
+			b1.y += b1.v.y;
+			b2.x += b2.v.x;
+			b2.y += b2.v.y;
+		}
+	}
+}
+
+
+
+function toTimeString(time, hoursWanted){
+	
+	time = floor(time / 10);
+	
+	let hs = String(floor(time % 100));
+	let fs = String(floor((time / 100) % 60));
+	
+	if (hoursWanted){
+		let min = String(floor(((time / 100) / 60) % 60));
+		let hr = String(floor(((time / 100) / 60) / 60));
+		
+		if (hs.length < 2) hs = "0" + hs;
+		if (fs.length < 2) fs = "0" + fs;
+		if (min.length < 2) min = "0" + min;
+		if (hr.length < 2) hr = "0" + hr;
+		
+		let timeString = hr + ":" + min + ":" + fs + ":" + hs;
+	} else {
+		let min = String(floor(((time / 100) / 60) % 60));
+		
+		if (hs.length < 2) hs = "0" + hs;
+		if (fs.length < 2) fs = "0" + fs;
+		if (min.length < 2) min = "0" + min;
+		
+		let timeString = min + ":" + fs + ":" + hs;
+	}
+		
+	
+
+	return timeString;
+}
+
+
+function setCookie(name, value, years){
+	let expires = "";
+	if (years){
+		let date = new Date();
+		date.setTime(date.getTime() + (years * 365 * 24 * 60 * 60 * 1000));
+		expires = "; expires=" + date.toUTCString();
+	}
+	document.cookie = name + "=" + value + expires + "; path=/";
+}
+
+function getCookie(name){
+	let nameEQ = name + "=";
+	let ca = document.cookie.split(';');
+	for (let i = 0; i < ca.length; i++){
+		let c = ca[i];
+		while (c.charAt(0) == ' ') c = c.substring(1, c.length);
+		if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
+	}
+	return null;
+}
+
+function deleteCookies(){
+	for (let i = 0; i < arguments.length; i++) setCookie(arguments[i], "", -1);
+}
+
+function deleteAllCookies(){
+	let cookies = document.cookie.split(";");
+	for (let i = 0; i < cookies.length; i++) deleteCookies(cookies[i].split("=")[0]);
+}
+
+Array.prototype.shuffle = function(){
+	let currentIndex = this.length, temporaryValue, randomIndex;
+	while (0 != currentIndex){
+    	randomIndex = floor(random() * currentIndex);
+    	currentIndex -= 1;
+    	temporaryValue = this[currentIndex];
+    	this[currentIndex] = this[randomIndex];
+    	this[randomIndex] = temporaryValue;
+  	}
+}
+
+Array.prototype.clone = function(){
+	return this.slice(0);
+};
+
+Array.prototype.partitiate = function(dimensions){
+	if (dimensions == 0) return this;
+	let parts = [];
+	while(this.length) parts.push(this.splice(0, round(pow(this.length, 1 / (1 + 1 / dimensions)))).partitiate(dimensions - 1));
+	return parts;
+}
+
+String.prototype.isValidHEX = function(){
+	return /(^#[0-9A-Fa-f]{6}$)|(^#[0-9A-Fa-f]{3}$)/i.test(this);
+}
+
+function debugInformation(){
+	let x = viewPort.x,
+		y = viewPort.y;
+	textSize(12);
+	textStyle(NORMAL);
+	stroke(255);
+	strokeWeight(1);
+	fill(255);
+	text("FPS : " + round(frameRate()), 10 + x, 10 + textAscent("FPS : ") + y);
+	text("MouseX : " + round(mouseX + x), 10 + x, 10 + textAscent("FPS : ") + 10 + textAscent("MouseX : ") + y);
+	text("MouseY : " + round(-mouseY - y), 10 + x, 10 + textAscent("FPS : ") + 10 + textAscent("MouseX : ") + 10 + textAscent("MouseY : ") + y);
+}
+
+
+
+function ColorPicker(editor) {
+	this.movingObject = "";
+	
+	this.updateFromGraphical = function(){
+		this.h = (1 - $("#hue_picker").position().top / $("#hue").height()) * 360;
+		this.s = ($("#sb_picker").position().left + 8) / $("#saturation").width() * 100;
+		this.v = (1 - ($("#sb_picker").position().top + 8) / $("#value").height()) * 100;
+		
+		this.r = HSVtoRGB(this.h, this.s, this.v).r;
+		this.g = HSVtoRGB(this.h, this.s, this.v).g;
+		this.b = HSVtoRGB(this.h, this.s, this.v).b;
+		
+		this.hex = RGBtoHEX(this.r, this.g, this.b);
+		
+		this.updateInterface();
+	}
+	
+	this.updateFromHSV = function(){
+		this.h = $($("#color_picker_hsv input")[0]).val();
+		this.s = $($("#color_picker_hsv input")[1]).val();
+		this.v = $($("#color_picker_hsv input")[2]).val();
+		
+		this.r = HSVtoRGB(this.h, this.s, this.v).r;
+		this.g = HSVtoRGB(this.h, this.s, this.v).g;
+		this.b = HSVtoRGB(this.h, this.s, this.v).b;
+		
+		this.hex = RGBtoHEX(this.r, this.g, this.b);
+		
+		this.updateFromHEX(null, true);
+		
+		this.updateInterface();
+	}
+	
+	this.updateFromRGB = function(){
+		this.r = $($("#color_picker_rgb input")[0]).val();
+		this.g = $($("#color_picker_rgb input")[1]).val();
+		this.b = $($("#color_picker_rgb input")[2]).val();
+		
+		this.h = RGBtoHSV(this.r, this.g, this.b).h;
+		this.s = RGBtoHSV(this.r, this.g, this.b).s;
+		this.v = RGBtoHSV(this.r, this.g, this.b).v;
+		
+		this.hex = RGBtoHEX(this.r, this.g, this.b);
+		
+		this.updateFromHEX(null, true);
+		
+		this.updateInterface();
+	}
+	
+	this.updateFromHEX = function(input, otf){
+		if (!otf){ //Not on the fly
+			if ($(input).val().isValidHEX()) this.hex = $(input).val();
+			else {
+				alert("Error!");
+				return;
+			}
+		}
+		
+		this.r = HEXtoRGB(this.hex).r;
+		this.g = HEXtoRGB(this.hex).g;
+		this.b = HEXtoRGB(this.hex).b;
+		
+		this.h = RGBtoHSV(this.r, this.g, this.b).h;
+		this.s = RGBtoHSV(this.r, this.g, this.b).s;
+		this.v = RGBtoHSV(this.r, this.g, this.b).v;
+		
+		this.updateInterface();
+	}
+	
+	this.updateInterface = function(){
+		
+		let r = $($("#color_picker_rgb input")[0]),
+			g = $($("#color_picker_rgb input")[1]),
+			b = $($("#color_picker_rgb input")[2]),
+			h = $($("#color_picker_hsv input")[0]),
+			s = $($("#color_picker_hsv input")[1]),
+			v = $($("#color_picker_hsv input")[2]),
+			hex = $("#color_picker_hex"),
+			final = $("#color_picker_final"),
+			bgColor;
+		
+		r.val(round(this.r));
+		g.val(round(this.g));
+		b.val(round(this.b));
+		h.val(round(this.h));
+		s.val(round(this.s));
+		v.val(round(this.v));
+		bgColor = color(this.r, 0, 0);
+		r.css({
+			"background-color": bgColor.toString(),
+			"color": fontColor(bgColor)
+		});
+		bgColor = color(0, this.g, 0);
+		g.css({
+			"background-color": bgColor.toString(),
+			"color": fontColor(bgColor)
+		});
+		bgColor = color(0, 0, this.b);
+		b.css({
+			"background-color": bgColor.toString(),
+			"color": fontColor(bgColor)
+		});
+		colorMode(HSL);
+		bgColor = color(this.h, 100, 50);
+		h.css({
+			"background-color": bgColor.toString(),
+			"color": fontColor(bgColor)
+		});
+		bgColor = color(this.h, this.s, 100 - this.s / 2);
+		s.css({
+			"background-color": bgColor.toString(),
+			"color": fontColor(bgColor)
+		});
+		bgColor = color(this.h, 100, this.v / 2);
+		v.css({
+			"background-color": bgColor.toString(),
+			"color": fontColor(bgColor)
+		});
+		colorMode(RGB);
+		hex.val(this.hex);
+		hex.css({
+			"background-color": this.hex,
+			"color": fontColor(color(this.hex))
+		});
+		final.css({
+			"background-color": this.hex
+		});
+		
+		
+		let sRGB = HSVtoRGB(this.h, 100, 100);
+		let saturationBackground = "linear-gradient(to right, #FFF 0%, rgb(" 
+									+ sRGB.r + "," 
+									+ sRGB.g + "," 
+									+ sRGB.b + ") 100%)";
+		$("#hue_picker").css("top", (1 - this.h / 360) * $("#hue").height());
+		$("#sb_picker").css({
+			"left": this.s / 100 * $("#saturation").width() - 8,
+			"top": (1 - this.v / 100) * $("#value").height() - 8
+		});
+		$("#saturation").css("background", saturationBackground);
+		
+	}
+	
+	this.mousePressed = function(){
+		let x = winMouseX - $("#saturation").offset().left;
+		let y = winMouseY - $("#value").offset().top;
+		if (x > 0 && x < $("#saturation").width() && y > 0 && y < $("#value").height()){
+			this.movingObject = "sb";
+		}
+		if (x > $("#saturation").width() + 6 && x < $("#saturation").width() + 6 + $("#hue").width() && y > 0 && y < $("#hue").height()){
+			this.movingObject = "hue";
+		}
+		this.mouseDragged();
+	}
+	
+	this.mouseDragged = function(){
+		if (this.movingObject == "hue"){
+			let objH = $("#hue");
+			let picker = $("#hue_picker");
+			let h = winMouseY - objH.offset().top;
+			if (h > 0 && h < objH.height()){
+				picker.css("top", h - 1);
+			} else if (h > objH.height()){
+				picker.css("top", objH.height() - 1);
+			} else if (h < 0){
+				picker.css("top", -1);
+			}
+		}
+		
+		if (this.movingObject == "sb"){
+			let objS = $("#saturation");
+			let objV = $("#value");
+			let picker = $("#sb_picker");
+			let s = winMouseX - objS.offset().left;
+			let v = winMouseY - objV.offset().top;
+			if (s > 0 && s < objS.width()){
+				picker.css("left", s - 8);
+			} else if (s < 0){
+				picker.css("left", -8);
+			} else if (s < objS.width()){
+				picker.css("left", objS.width() - 8);
+			}
+			if (v > 0 && v < objV.height()){
+				picker.css("top", v - 8);
+			} else if (v < 0){
+				picker.css("top", -8);
+			} else if (v > objV.height()){
+				picker.css("top", objV.height() - 8);
+			}
+		}
+		
+		this.updateFromGraphical();
+	}
+	
+	this.mouseReleased = function(){
+		this.movingObject = "";
+	}
+	
+	this.getColor = function(){
+		return this.hex;
+	}
+}
+
+function fontColor(color){
+	//https://www.nbdtech.com/Blog/archive/2008/04/27/Calculating-the-Perceived-Brightness-of-a-Color.aspx
+	let o = Math.round((red(color) * 299 + (green(color) * 587) + (blue(color) * 114)) / 1000);
+  	return (o > 125) ? "#000" : "#CCC";
+}
+
+//www.stackoverflow.com -->
+function RGBtoHEX(r, g, b) {
+	let rgb = b | (g << 8) | (r << 16);
+    return '#' + (0x1000000 + rgb).toString(16).slice(1);
+}
+
+function HEXtoRGB(hex) {
+    let shorthandRegex = /^#?([a-fA-F\d])([a-fA-F\d])([a-fA-F\d])$/i;
+    hex = hex.replace(shorthandRegex, function(m, r, g, b) {
+        return r + r + g + g + b + b;
+    });
+    let result = /^#?([a-fA-F\d]{2})([a-fA-F\d]{2})([a-fA-F\d]{2})$/i.exec(hex);
+    return result ? {
+        r: parseInt(result[1], 16),
+        g: parseInt(result[2], 16),
+        b: parseInt(result[3], 16)
+    } : null;
+}
+
+function HSVtoRGB(h, s, v) {
+    let r, g, b, i, f, p, q, t;
+    if (arguments.length === 1) {
+        s = h.s, v = h.v, h = h.h;
+    }
+	h /= 360;
+	s /= 100;
+	v /= 100;
+    i = Math.floor(h * 6);
+    f = h * 6 - i;
+    p = v * (1 - s);
+    q = v * (1 - f * s);
+    t = v * (1 - (1 - f) * s);
+    switch (i % 6) {
+        case 0: r = v, g = t, b = p; break;
+        case 1: r = q, g = v, b = p; break;
+        case 2: r = p, g = v, b = t; break;
+        case 3: r = p, g = q, b = v; break;
+        case 4: r = t, g = p, b = v; break;
+        case 5: r = v, g = p, b = q; break;
+    }
+    return {
+        r: r * 255,
+        g: g * 255,
+        b: b * 255
+    };
+}
+
+function RGBtoHSV(r, g, b) {
+    if (arguments.length === 1) {
+        g = r.g, b = r.b, r = r.r;
+    }
+    let max = Math.max(r, g, b), min = Math.min(r, g, b),
+        d = max - min,
+        h,
+        s = (max === 0 ? 0 : d / max),
+        v = max / 255;
+
+    switch (max) {
+        case min: h = 0; break;
+        case r: h = (g - b) + d * (g < b ? 6: 0); h /= 6 * d; break;
+        case g: h = (b - r) + d * 2; h /= 6 * d; break;
+        case b: h = (r - g) + d * 4; h /= 6 * d; break;
+    }
+
+    return {
+        h: h * 360,
+        s: s * 100,
+        v: v * 100
+    };
+}

public/data/scripts/sketch.js

@@ -0,0 +1,17 @@
+let debug = false,
+	viewPort = {x: 0, y: 0, v: 0};
+
+let colorPicker = null;
+
+function setup(){
+	noCanvas();
+	colorPicker = new ColorPicker(null);
+	colorPicker.hex = "#F00";
+	colorPicker.updateFromHEX(null, true);
+}
+
+function draw(){
+	
+	
+	if (debug) debugInformation();
+}

public/data/styles/OFL.txt

@@ -0,0 +1,93 @@
+Copyright 2016 The Cabin Project Authors (impallari@gmail.com)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

public/data/styles/color_picker.css

@@ -0,0 +1,106 @@
+/*Colorpicker graphical*/
+
+#color_picker_holder{
+	float: left;
+	display: inline;
+	width: 70%;
+	height: 100%;
+}
+
+#color_picker{
+	position: relative;
+	width: calc(100% - 10px);
+	height: calc(100% - 10px);
+	border: 5px solid #000;
+	background-color: #000;
+	-webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+#saturation{
+	position: relative;
+	width: calc(100% - 50px - 5px);
+	height: 100%;
+	background: linear-gradient(to right, #FFF 0%, #F00 100%);
+	float: left;
+}
+#value{
+	width: 100%;
+	height: 100%;
+	background: linear-gradient(to top, #000 0%, rgba(255,255,255,0) 100%);
+}
+#hue{
+	width: 50px;
+	height: 100%;
+	border-left: 5px solid #000;
+	position: relative;
+	float: left;
+	background: linear-gradient(to bottom, #F00 0%, #F0F 17%, #00F 34%, #0FF 50%, #0F0 67%, #FF0 84%, #F00 100%);
+}
+#sb_picker{
+	border: 2px solid;
+	border-color: #FFF;
+	position: absolute;
+	width: 14px;
+	height: 14px;
+	border-radius: 10px;
+	bottom: 50px;
+ 	left: 50px;
+	box-sizing: border-box;
+	z-index: 10;
+}
+#hue_picker {
+	position: absolute;
+	background: #000;
+	border-bottom: 2px solid #000;
+	top: 0;
+	width: 50px;
+	height: 2px;
+}
+
+/*Colorpicker numeric*/
+
+#color_picker_numeric_holder{
+	float: left;
+	display: inline;
+	width: 30%;
+	height: 100%;
+	background-color: #888;
+}
+
+#color_picker_numeric{
+	position: relative;
+	width: 90%;
+	padding: 5%;
+	background-color: #888;
+}
+#color_picker_rgb, #color_picker_hsv{
+	position: relative;
+	display: table;
+	width: 100%;
+	margin-bottom: 100px;
+	color: #000;
+	text-align: center;
+}
+#color_picker_rgb input, #color_picker_hsv input{
+	display: table-cell;
+	width: 25%;
+	margin: 2%;
+	border: 2px solid;
+	font-size: 25px;
+}
+#color_picker_hex{
+	width: 50%;
+	height: 30px;
+	font-size: 25px;
+	margin: 10% 25% 0 25%;
+}
+
+#color_picker_final{
+	width: 80%;
+	height: 400px;
+	margin: 10%;
+	border: 3px solid #000;
+}

public/index.html

@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+		<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.min.js" type="text/javascript"></script>
+		<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/addons/p5.dom.min.js" type="text/javascript"></script>
+		<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/addons/p5.sound.min.js" type="text/javascript"></script>
+		<script src="https://code.jquery.com/jquery-3.3.1.min.js" type="text/javascript"></script>
+		<script src="data/scripts/lib/benjo_library.js" type="text/javascript"></script>
+		<script src="data/scripts/events.js" type="text/javascript"></script>
+		<script src="data/scripts/sketch.js" type="text/javascript"></script>
+		<link href="styles.css" rel="stylesheet">
+		<link href="data/styles/color_picker.css" rel="stylesheet">
+		<link href="data/images/favicon.ico" rel="icon" type="image/x-icon">
+		<title>Colorpicker</title>
+    </head>
+    <body>
+		<div id="color_picker_holder">
+			<div id="color_picker">
+				<div id="saturation">
+					<div id="value">
+						<div id="sb_picker"></div>
+					</div>
+				</div>
+				<div id="hue">
+					<div id="hue_picker"></div>
+				</div>
+			</div>
+		</div>
+		<div id="color_picker_numeric_holder">
+			<div id="color_picker_numeric">
+				<div id="color_picker_rgb">
+					<input max="255" min="0" onchange="colorPicker.updateFromRGB()" oninput="colorPicker.updateFromRGB()" type="number"/>
+					<input max="255" min="0" onchange="colorPicker.updateFromRGB()" oninput="colorPicker.updateFromRGB()" type="number"/>
+					<input max="255" min="0" onchange="colorPicker.updateFromRGB()" oninput="colorPicker.updateFromRGB()" type="number"/>
+				</div>
+				<div id="color_picker_hsv">
+					<input max="360" min="0" onchange="colorPicker.updateFromHSV()" oninput="colorPicker.updateFromHSV()" type="number"/>
+					<input max="100" min="0" onchange="colorPicker.updateFromHSV()" oninput="colorPicker.updateFromHSV()" type="number"/>
+					<input max="100" min="0" onchange="colorPicker.updateFromHSV()" oninput="colorPicker.updateFromHSV()" type="number"/>
+				</div>
+				<input id="color_picker_hex" onchange="colorPicker.updateFromHEX(this, false)" style="background-color: #F00;" style="background-color: #F00;" type="text"/>
+				<div id="color_picker_final"></div>
+			</div>
+		</div>
+    </body>
+</html>

public/styles.css

@@ -0,0 +1,26 @@
+a:link, a:hover, a:active, a:visited{color: #000;}
+
+html, body{margin: 0; padding: 0; height: 100%; width: 100%;}
+
+canvas{margin: 0; padding: 0; border: none; display: block;}
+
+button:hover{cursor: pointer;}
+
+#canvasHolder{
+	position: absolute;
+	width: 100%;
+	height: 100%;
+}
+
+@font-face{
+	font-family: "Cabin-Medium";
+	src: url(data/styles/Cabin-Medium.ttf);
+}
+
+body{
+	overflow: hidden;
+}
+
+input{
+	font-family: "Cabin-Medium";
+}