dakedres/ronin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added icons

Browse Source
This commit is contained in:
Devine Lu Linvega
2017-01-12 15:37:22 -07:00
parent 2499f805ba
commit a2fed4c21e
65 changed files with 1 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
sources/scripts/Icon Normal file
View File

0
sources/scripts/core/Icon Normal file
View File

90
sources/scripts/core/command.js Normal file
View File

@@ -0,0 +1,90 @@
function Command(content)
{
this.content = content;
// Parser
this.any = function()
{
if(this.content.join() === ""){ return null; }
return new Any(this.content);
}
this.rect = function()
{
for (i = 0; i < this.content.length; i++) {
if(this.content[i].indexOf("x") >= 0 && this.content[i].indexOf("/") < 0){ return new Rect(this.content[i]); }
}
return null;
}
this.position = function()
{
for (i = 0; i < this.content.length; i++) {
if(this.content[i].indexOf(",") >= 0){ return new Position(this.content[i]); }
}
return null;
}
this.color = function()
{
for (i = 0; i < this.content.length; i++) {
if(this.content[i].indexOf("#") >= 0){ return new Color(this.content[i]); }
}
return null;
}
this.filepath = function()
{
for (i = 0; i < this.content.length; i++) {
if(this.content[i].indexOf("/") >= 0){ return new Filepath(this.content[i]); }
}
return null;
}
this.value = function()
{
for (i = 0; i < this.content.length; i++) {
var test = /[^$\-\d]/.test(this.content[i]);
if(!test && this.content[i] !== ""){ return new Value(this.content[i]); }
}
return null;
}
this.range = function()
{
for (i = 0; i < this.content.length; i++) {
if(this.content[i].indexOf("..") >= 0){ return new Range(this.content[i]); }
}
return null;
}
this.bang = function()
{
for (i = 0; i < this.content.length; i++) {
if(this.content[i].indexOf("!") >= 0){ return new Bang(); }
}
return null;
}
this.angle = function()
{
for (i = 0; i < this.content.length; i++) {
if(this.content[i].indexOf("'") >= 0){ return new Angle(this.content[i]); }
}
return null;
}
this.variable = function(name)
{
for (i = 0; i < this.content.length; i++) {
if(this.content[i].indexOf("=") >= 0){
var parts = this.content[i].split("=");
if(parts[0] == name){
return new Variable(parts[0],parts[1]);
}
}
}
return null;
}
}

38
sources/scripts/core/commander.hint.js Normal file
View File

@@ -0,0 +1,38 @@
function Hint(element)
{
Module.call(this);
this.element = element;
this.update = function(module,cmd)
{
if(module){
this.element.innerHTML = this.message(module,cmd);
this.element.style.display = "block";
}
else if(commander && commander.element_input.value != ""){
this.element.innerHTML = commander.element_input.value;
this.element.style.display = "block";
}
else{
this.element.innerHTML = this.default();
this.element.style.display = "block";
}
}
this.message = function(module,cmd)
{
return module.hint(cmd);
}
this.default = function()
{
var s = "<span class='module'>Modules</span>";
for (var key in ronin.modules){
s += "<span> <span class='value'>"+key+"</span> <span class='param'>"+ronin.modules[key].constructor.name.substr(0,2)+" ";
}
return s;
}
}

99
sources/scripts/core/commander.js Normal file
View File

@@ -0,0 +1,99 @@
function Commander(element,element_input)
{
this.element = element;
this.element_input = element_input;
this.hint = new Hint();
this.storage = [];
this.storage_index = 0;
this.always_show = false;
var queue = [];
this.query = function(input_str)
{
if(input_str.indexOf(";") > 0){
queue = input_str.split(";");
}
else{
queue.push(input_str)
}
run();
this.hide();
}
function run()
{
console.log("~ "+queue[0].trim());
active(queue[0].trim());
queue.shift();
if(queue.length > 0){
setTimeout(function(){ run(); }, 100);
}
}
function active(content)
{
var key = content[0];
var cmd = new Command(content.substring(1).trim().split(" "));
if(ronin.modules[key]){
ronin.modules[key].active(cmd);
}
ronin.history.add(content);
}
this.passive = function(content)
{
var key = content[0];
var cmd = new Command(content.substring(1).split(" "));
ronin.module = null;
if(ronin.modules[key]){
ronin.modules[key].passive(cmd);
ronin.module = ronin.modules[key];
}
this.hint.update(ronin.module,cmd);
}
//
this.show = function()
{
this.element.setAttribute('class','visible');
this.element_input.focus();
this.element_input.value = "";
}
this.always = function() {
this.always_show = !this.always_show;
}
this.hide = function()
{
if (!this.always_show) {
this.element.setAttribute('class','hidden');
}
this.element_input.value = "";
}
this.clear = function()
{
this.element_input.value = "";
}
this.next_cmd = function()
{
this.storage_index += this.storage_index < this.storage.length ? 1 : 0;
this.element_input.value = this.storage[this.storage_index] ? this.storage[this.storage_index] : "";
}
this.prev_cmd = function()
{
this.storage_index -= this.storage_index < 1 ? 0 : 1;
this.element_input.value = this.storage[this.storage_index];
}
}

45
sources/scripts/core/cursor.js Normal file
View File

@@ -0,0 +1,45 @@
function Cursor()
{
this.mode = null;
this.position = new Position();
this.update = function(event)
{
if(event.ctrltKey === true && event.altKey === true && event.shiftKey === true){ /* */ }
else if(event.shiftKey === true && event.ctrlKey === true){ this.set_mode(ronin.eye); }
else if(event.shiftKey === true && event.altKey === true){ this.set_mode(ronin.surface.active_layer); }
else if(event.ctrltKey === true && event.altKey === true){ this.set_mode(ronin.overlay.compositor); }
else if(event.ctrlKey === true){ this.set_mode(ronin.overlay); }
else if(event.altKey === true){ this.set_mode(ronin.surface); }
else if(event.shiftKey === true){ this.set_mode(ronin.eraser); }
else{ this.set_mode(ronin.brush); }
}
this.set_mode = function(mode)
{
if(this.mode == mode){ return; }
this.mode = mode;
document.body.setAttribute("class",this.mode.constructor.name);
ronin.widget.update();
}
this.mouse_down = function(position)
{
this.position = position;
this.mode.mouse_down(position);
ronin.widget.update();
}
this.mouse_move = function(position)
{
this.position = position;
this.mode.mouse_move(position);
}
this.mouse_up = function(position)
{
this.position = position;
this.mode.mouse_up(position);
ronin.widget.update();
}
}

42
sources/scripts/core/init.js Normal file
View File

@@ -0,0 +1,42 @@
var ronin = new Ronin();
ronin.element = document.getElementById('ronin');
ronin.overlay.element = document.getElementById('overlay');
ronin.surface.element = document.getElementById('surface');
ronin.widget.element = document.getElementById('widget');
ronin.cursor.mode = ronin.brush;
var commander = new Commander(document.getElementById("commander"),document.getElementById("commander_input"));
commander.hint.element = document.getElementById('commander_hint');
// Cursor
document.addEventListener('mousedown', function(e){ ronin.cursor.mouse_down(ronin.position_in_canvas(e));}, false);
document.addEventListener('mousemove', function(e){ ronin.cursor.mouse_move(ronin.position_in_canvas(e));}, false);
document.addEventListener('mouseup', function(e){ ronin.cursor.mouse_up(ronin.position_in_canvas(e));}, false);
document.addEventListener('contextmenu', function(ev){ ev.preventDefault(); return false;}, false);
window.addEventListener('resize', function(){ ronin.on_resize(); }, true);
// Keyboard
var keyboard = new Keyboard();
document.onkeyup = function myFunction(){ keyboard.listen_onkeyup(event); };
document.onkeydown = function myFunction(){ keyboard.listen_onkeydown(event); };
// Canvas
var starting_canvas = new Rect();
starting_canvas.width = window.innerWidth - 200;
starting_canvas.height = window.innerHeight - 200;
// Clamp
starting_canvas.width = parseInt(starting_canvas.width/40) * 40;
starting_canvas.height = parseInt(starting_canvas.height/40) * 40;
commander.query("~ "+ronin.timestamp());
commander.query("# "+starting_canvas.render());
commander.query("# layer=background");
commander.query("# #efefef");
commander.query("# layer=main");
commander.query("> 1 0,0 #000000");
commander.query("> 1 1,0 #000000");
commander.query("> 1 0,1 #000000");

80
sources/scripts/core/keyboard.js Normal file
View File

@@ -0,0 +1,80 @@
function Keyboard()
{
this.listen_onkeyup = function(event)
{
switch (event.key) {
case "Enter": this.key_enter(); break;
case "ArrowUp": this.key_arrow_up(); break;
case "ArrowDown": this.key_arrow_down(); break;
case "ArrowLeft": this.key_arrow_left(); break;
case "ArrowRight": this.key_arrow_right(); break;
// case ":": this.key_colon(); break;
case "Escape": this.key_escape(); break;
}
switch(event.which)
{
case 13: this.key_enter(); break;
case 186: if(event.shiftKey){this.key_colon();} break;
case 27: this.key_escape(); break;
case 219: ronin.brush.size_up(); break;
case 221: ronin.brush.size_down(); break;
case 38: ronin.surface.layer_up(); break;
case 40: ronin.surface.layer_down(); break;
}
// Passive
commander.passive(commander.element_input.value);
ronin.cursor.set_mode(ronin.brush);
ronin.widget.update();
};
this.listen_onkeydown = function(event)
{
ronin.cursor.update(event);
}
this.key_tab = function()
{
}
this.key_enter = function()
{
commander.query(commander.element_input.value);
}
this.key_space = function()
{
}
this.key_arrow_up = function()
{
commander.prev_cmd();
}
this.key_arrow_down = function()
{
commander.next_cmd();
}
this.key_arrow_left = function()
{
}
this.key_arrow_right = function()
{
}
this.key_colon = function()
{
commander.show();
return false;
}
this.key_escape = function()
{
commander.hide();
ronin.overlay.clear();
}
}

66
sources/scripts/core/ronin.js Normal file
View File

@@ -0,0 +1,66 @@
function Ronin()
{
this.modules = {};
this.element = null;
this.widget = new Widget();
this.surface = new Surface("#");
this.fileload = new FileLoad("/");
this.filesave = new FileSave("$");
this.history = new History("^");
this.overlay = new Overlay("|");
this.brush = new Brush(">");
this.eraser = new Eraser(".");
this.eye = new Eye("*");
this.render = new Render("%");
this.stroke = new Stroke("_");
this.vector = new Vector("+");
this.help = new Help("?");
this.typo = new Typographe("&");
this.cursor = new Cursor();
this.modules[this.surface.rune] = this.surface;
this.modules[this.fileload.rune] = this.fileload;
this.modules[this.filesave.rune] = this.filesave;
this.modules[this.history.rune] = this.history;
this.modules[this.overlay.rune] = this.overlay;
this.modules[this.render.rune] = this.render;
this.modules[this.brush.rune] = this.brush;
this.modules[this.eraser.rune] = this.eraser;
this.modules[this.eye.rune] = this.eye;
this.modules[this.typo.rune] = this.typo;
this.modules[this.stroke.rune] = this.stroke;
this.modules[this.vector.rune] = this.vector;
this.modules[this.help.rune] = this.help;
this.cursors = [];
this.position_in_canvas = function(e)
{
var x = e.clientX;
x -= (window.innerWidth - this.surface.size.width)/2;
x -= parseInt(this.surface.element.style.marginLeft) + (this.surface.size.width/2);
var y = e.clientY;
y -= (window.innerHeight - this.surface.size.height)/2;
y -= parseInt(this.surface.element.style.marginTop) + parseInt(this.surface.size.height/2);
return new Position(x,y);
}
this.position_in_window = function(p)
{
return new Position(p.x + parseInt(this.surface.element.style.marginLeft),p.y + parseInt(this.surface.element.style.marginTop));
}
this.timestamp = function()
{
var currentdate = new Date();
var date = currentdate.getFullYear()+""+(currentdate.getMonth()+1)+""+currentdate.getDate();
return date+" "+currentdate.getHours()+":"+currentdate.getMinutes()+":"+currentdate.getSeconds();
}
this.on_resize = function()
{
this.widget.on_resize();
}
}

26
sources/scripts/core/widget.js Normal file
View File

@@ -0,0 +1,26 @@
function Widget()
{
this.element = null;
this.update = function()
{
var s = "";
for (var key in ronin.modules){
s += ronin.modules[key].widget() ? "<div class='module'>"+ronin.modules[key].widget()+"</div>" : "";
}
s += "<div class='cursor'>"+ronin.cursor.mode.widget_cursor()+"</div>";
this.element.innerHTML = s;
}
this.on_resize = function()
{
this.element.style.left = (window.innerWidth/2)-(ronin.surface.size.width/2);
this.element.style.top = (window.innerHeight/2)+(ronin.surface.size.height/2);
this.element.style.width = ronin.surface.size.width+"px";
this.update();
}
}

0
sources/scripts/filters/Icon Normal file
View File

46
sources/scripts/filters/_balance.js Normal file
View File

@@ -0,0 +1,46 @@
Filter.prototype.filter_balance = function(pixels = this.pixels(),p = null)
{
// / media/filter.color.jpg
// : balance 0.5 2.4 1.2
p[0] = parseFloat(p[0]);
p[1] = p[1] ? parseFloat(p[1]) : parseFloat(p[0]);
p[2] = p[2] ? parseFloat(p[2]) : parseFloat(p[0]);
var data = pixels.data;
// Multiply
if(p[0] % 1 !== 0 && p[1] % 1 !== 0 && p[2] % 1 !== 0){
console.log("Multi");
for (var i = 0; i < data.length; i += 4) {
data[i] = data[i] * p[0]; // red
data[i + 1] = data[i + 1] * p[1]; // green
data[i + 2] = data[i + 2] * p[2]; // blue
// Clamp
data[i] = data[i] < 255 ? data[i] : 255;
data[i + 1] = data[i + 1] < 255 ? data[i + 1] : 255;
data[i + 2] = data[i + 2] < 255 ? data[i + 2] : 255;
}
}
// Add
else{
p[0] = parseInt(p[0]);
p[1] = p[1] ? parseInt(p[1]) : parseInt(p[0]);
p[2] = p[2] ? parseInt(p[2]) : parseInt(p[0]);
for (i = 0; i < data.length; i += 4) {
data[i] = data[i] + p[0]; // red
data[i + 1] = data[i + 1] + p[1]; // green
data[i + 2] = data[i + 2] + p[2]; // blue
// Clamp
data[i] = data[i] < 255 ? data[i] : 255;
data[i + 1] = data[i + 1] < 255 ? data[i + 1] : 255;
data[i + 2] = data[i + 2] < 255 ? data[i + 2] : 255;
}
}
ronin.canvas.clear();
ronin.surface.context().putImageData(pixels, 0, 0, 0, 0, pixels.width, pixels.height);
}

19
sources/scripts/filters/_offset.js Normal file
View File

@@ -0,0 +1,19 @@
Filter.prototype.filter_offset = function(pixels = this.pixels(),p = null)
{
var v = 255; // defaults to 255 if no parameter specified
if (p.length > 0 && p[0]) {
v = parseInt(p[0]);
// permissible range is 0 <= v <= 255
if (v > 255) { v = 255;}
if (v < 0) { v = 0;}
}
var d = pixels.data;
for (var i=0; i<d.length; i+=4) {
for (var j=0; j<3; j++) {
d[i+j] = v - d[i+j];
}
}
ronin.canvas.clear();
ronin.surface.context().putImageData(pixels, 0, 0, 0, 0, pixels.width, pixels.height);
}

15
sources/scripts/filters/_saturation.js Normal file
View File

@@ -0,0 +1,15 @@
Filter.prototype.filter_saturation = function(pixels = this.pixels(),p = null)
{
var d = pixels.data;
for (var i=0; i<d.length; i+=4) {
var r = d[i];
var g = d[i+1];
var b = d[i+2];
// CIE luminance for the RGB
// The human eye is bad at seeing red and blue, so we de-emphasize them.
var v = 0.2126*r + 0.7152*g + 0.0722*b;
d[i] = d[i+1] = d[i+2] = v
}
ronin.canvas.clear();
ronin.surface.context().putImageData(pixels, 0, 0, 0, 0, pixels.width, pixels.height);
}

68
sources/scripts/filters/chromatic.js Normal file
View File

@@ -0,0 +1,68 @@
function Filter_Chromatic()
{
Filter.call(this);
this.parameters = [Value, Position];
//value is maximum distance pixels are shifted
//position is where the pixels are shifted from, defaults to half the image
this.render = function(cmd)
{
var position = cmd.position() ? cmd.position() : new Position(ronin.surface.size.width,ronin.surface.size.height);
var value = cmd.value() ? cmd.value().float : 5;
ronin.overlay.clear();
this.draw(this.context(),value,position);
ronin.overlay.clear();
}
this.preview = function(cmd)
{
if(cmd.position()){
ronin.overlay.clear();
ronin.overlay.draw_pointer(cmd.position());
}
}
this.draw = function(context = this.context(), value, position)
{
var w = ronin.surface.size.width;
var h = ronin.surface.size.height;
//no longer letting you set how far each chanel is shifted, not sure how to receive extra data any more
var s = {r:value,g:value*.5,b:0};
var context = ronin.surface.active_layer.context();
//now need two imagedatas to sample off of, for some reason I cant just dump the new pixels into an empty array :/
var originalData = context.getImageData(0, 0, w*2, h*2);
var imageData = context.getImageData(0, 0, w*2, h*2);
var maxLength = Math.sqrt(w*w+h*h);
for (var i=0; i<w*2; i++) {
for(var j=0; j<h*2; j++){
var x = i-position.x;
var y = j-position.y;
var a = Math.atan2(y,x);
var d = Math.sqrt(x*x+y*y);
var f = (d-s.r*d/maxLength);
x = Math.cos(a)*f+position.x;
y = Math.sin(a)*f+position.y;
var r = this.get_color_bilinear(originalData, x, y);
f = (d-s.g*d/maxLength);
x = Math.cos(a)*f+position.x;
y = Math.sin(a)*f+position.y;
var g = this.get_color_bilinear(originalData, x, y);
f = (d-s.b*d/maxLength);
x = Math.cos(a)*f+position.x;
y = Math.sin(a)*f+position.y;
var b = this.get_color_bilinear(originalData, x, y);
var c = {r:r.r, g:g.g, b:b.b,a:Math.max(r.a, Math.max(g.a,b.a))};
this.set_color(imageData, c, i,j);
}
}
ronin.surface.active_layer.clear();
context.putImageData(imageData, 0, 0);
}
}

60
sources/scripts/filters/filter.js Normal file
View File

@@ -0,0 +1,60 @@
function Filter()
{
this.name = "Unknown";
this.parameters = [];
this.render = function(cmd)
{
console.log("render: Nothing here.");
}
this.preview = function(cmd)
{
console.log("render: Nothing here.");
}
this.set_color = function(pixels, color, x, y)
{
x = Math.max(0,Math.min(x,pixels.width-1));
y = Math.max(0,Math.min(y,pixels.height-1));
var index = (x+y*pixels.width)*4;
pixels.data[index] = color.r;
pixels.data[index+1] = color.g;
pixels.data[index+2] = color.b;
pixels.data[index+3] = color.a;
}
this.get_color = function(pixels,x,y)
{
x = Math.max(0,Math.min(x,pixels.width-1));
y = Math.max(0,Math.min(y,pixels.height-1));
var index = (x+y*pixels.width)*4;
return {r:pixels.data[index], g:pixels.data[index+1], b:pixels.data[index+2], a:pixels.data[index+3]};
}
this.get_color_bilinear = function(pixels, x, y)
{
var c1 = this.get_color(pixels, Math.floor(x),Math.floor(y));
var c2 = this.get_color(pixels, Math.ceil(x),Math.floor(y));
var c3 = this.get_color(pixels, Math.floor(x),Math.ceil(y));
var c4 = this.get_color(pixels, Math.ceil(x),Math.ceil(y));
return this.lerp_color(this.lerp_color(c1,c2, x%1),this.lerp_color(c3,c4, x%1), y%1);
}
this.lerp_color = function(c1, c2, t)
{
return {r:c1.r+t*(c2.r-c1.r), g:c1.g+t*(c2.g-c1.g), b:c1.b+t*(c2.b-c1.b), a:c1.a+t*(c2.a-c1.a)};
}
//
this.context = function()
{
return ronin.surface.active_layer.context();
}
this.pixels = function()
{
return ronin.surface.active_layer.context().getImageData(0,0,ronin.surface.size.width * 2,ronin.surface.size.height * 2);
}
}

25
sources/scripts/filters/invert.js Normal file
View File

@@ -0,0 +1,25 @@
function Filter_Invert()
{
Filter.call(this);
this.parameters = [Angle];
this.render = function(cmd)
{
var imageObj = new Image();
imageObj.src = ronin.surface.active_layer.element.toDataURL('image/png');
var context = ronin.surface.active_layer.context();
var imageData = context.getImageData(0, 0, imageObj.width * 2, imageObj.height* 2);
var data = imageData.data;
for(var i = 0; i < data.length; i += 4) {
data[i] = 255 - data[i];
data[i + 1] = 255 - data[i + 1];
data[i + 2] = 255 - data[i + 2];
}
ronin.surface.active_layer.clear();
context.putImageData(imageData, 0, 0);
}
}

42
sources/scripts/filters/rotate.js Normal file
View File

@@ -0,0 +1,42 @@
function Filter_Rotate()
{
Filter.call(this);
this.parameters = [Angle,Position];
this.render = function(cmd)
{
var position = cmd.position() ? cmd.position() : new Position(ronin.surface.size.width/2,ronin.surface.size.height/2);
var angle = cmd.angle() ? cmd.angle().degrees : 90;
ronin.overlay.clear();
this.draw(this.context(),angle,position);
ronin.overlay.clear();
}
this.preview = function(cmd)
{
if(cmd.position()){
ronin.overlay.clear();
ronin.overlay.draw_pointer(cmd.position());
}
}
this.draw = function(context = this.context(), angle, position)
{
var w = ronin.surface.size.width;
var h = ronin.surface.size.height;
ronin.overlay.context().drawImage(context.canvas,0,0,w,h);
ronin.surface.active_layer.clear();
context.save();
context.translate(position.x,position.y);
context.rotate(angle*Math.PI/180);
context.drawImage(ronin.overlay.context().canvas, -position.x, -position.y,w,h)
context.rotate(-angle*Math.PI/180);
context.restore();
}
}

75
sources/scripts/filters/stencil.js Normal file
View File

@@ -0,0 +1,75 @@
function Filter_Stencil()
{
Filter.call(this);
this.parameters = [Angle];
this.render = function(cmd)
{
this.draw(this.context(),cmd.angle() ? cmd.angle().degrees : 20);
ronin.overlay.clear();
}
this.preview = function(cmd)
{
ronin.overlay.clear();
this.draw(ronin.overlay.context(),cmd.angle() ? cmd.angle().degrees : 20);
}
this.draw = function(context = this.context(), angle = 20)
{
var w = ronin.surface.size.width;
var h = ronin.surface.size.height;
context.translate(w/2,h/2);
context.rotate(angle*Math.PI/180);
this.line(context,-w,0,w,0);
this.line(context,w*0.4,-h,w*0.4,h);
this.line(context,-w*0.4,-h,-w*0.4,h);
this.line(context,-w,h*0.25,w,h*0.25);
this.line(context,-w,-h*0.25,w,-h*0.25);
this.line(context,w*0.1,0,w*0.1,h);
this.line(context,-w*0.1,0,-w*0.1,-h);
this.circle(context,w*0.4,-h*0.25,w*0.05,1,1.5);
this.circle(context,-w*0.4,h*0.25,w*0.05,0,0.5);
context.font = "5px Arial";
context.fillStyle = "#000000";
context.fillText("GRID",(w*0.4)+10,10);
context.font = "5px Arial";
context.fillStyle = "#000000";
context.fillText("GRID",(-w*0.4)-20,-10);
context.rotate(-angle*Math.PI/180);
context.translate(-w/2,-h/2);
}
this.line = function(context,x1,x2,y1,y2)
{
context.beginPath();
context.moveTo(x1,x2);
context.lineTo(y1,y2);
context.lineCap="round";
context.lineWidth = 0.5;
context.strokeStyle = "#000";
context.stroke();
context.closePath();
}
this.circle = function(context,x,y,r,c1,c2)
{
context.beginPath();
context.arc(x,y,r,c1*Math.PI,c2*Math.PI);
context.lineCap="round";
context.lineWidth = 0.5;
context.strokeStyle = "#000";
context.stroke();
context.closePath();
}
}

0
sources/scripts/modules/Icon Normal file
View File

126
sources/scripts/modules/brush.js Normal file
View File

@@ -0,0 +1,126 @@
function Brush(rune)
{
Module.call(this,rune);
this.parameters = [Position,Rect,Angle,Color,Value,Bang];
this.variables = {"natural" : false,"banking" : false};
this.pointers = [];
this.size = 1;
this.opacity = 1;
this.color = new Color();
// Module
this.active = function(cmd)
{
if(cmd.bang()){ this.pointers = []; }
// Pointer
if(cmd.rect() || cmd.position() || cmd.angle()){
this.add_pointer(cmd);
}
// Global
if(cmd.color()){
this.color = cmd.color();
}
if(cmd.value()){
this.size = cmd.value().float;
}
this.update_variables(cmd);
}
this.passive = function(cmd)
{
if(cmd.rect()){
var x = isNaN(cmd.rect().width) ? 0 : cmd.rect().width;
var y = isNaN(cmd.rect().height) ? 0 : cmd.rect().height;
var pos = new Position(x+","+y);
ronin.overlay.draw(pos);
}
if(cmd.angle() && cmd.position()){
ronin.overlay.draw(cmd.position());
}
}
this.size_up = function()
{
this.size -= this.size > 1 ? 1 : 0;
ronin.widget.update();
}
this.size_down = function()
{
this.size += 1;
ronin.widget.update();
}
this.add_pointer = function(cmd)
{
var pointer = new Pointer();
if(cmd.position()){
pointer.offset = cmd.position();
}
if(cmd.rect()){
pointer.mirror = cmd.rect();
}
if(cmd.angle()){
pointer.angle = cmd.angle();
}
this.pointers.push(pointer);
}
this.widget_cursor = function()
{
var s = "> "+this.size+"<br />";
for (i = 0; i < ronin.brush.pointers.length; i++) {
s += ronin.brush.pointers[i].widget();
}
return s;
return this.pointers.length > 0 ? "Brush "+this.size+", "+this.pointers.length+" pointers" : "No Pointers";
}
// Cursor
this.is_drawing = false;
this.mouse_down = function(position)
{
this.is_drawing = true;
for (i = 0; i < ronin.brush.pointers.length; i++) {
ronin.brush.pointers[i].start();
}
ronin.stroke.new_stroke();
}
this.mouse_move = function(position)
{
if(this.is_drawing === false){ return; }
for (i = 0; i < ronin.brush.pointers.length; i++) {
ronin.brush.pointers[i].draw();
}
ronin.stroke.append_stroke(position);
}
this.mouse_up = function(position)
{
this.is_drawing = false;
for (i = 0; i < ronin.brush.pointers.length; i++) {
ronin.brush.pointers[i].stop();
}
ronin.stroke.save_stroke("brush");
}
}

123
sources/scripts/modules/brush.pointer.js Normal file
View File

@@ -0,0 +1,123 @@
function Pointer(offset = new Position(), color = new Color('000000'))
{
this.offset = offset;
this.mirror = null;
this.position_prev = null;
this.angle = null;
this.distance = 0;
// Parameters
this.thickness = function()
{
var ratio = 10/this.position().distance_to(this.position_prev[0]);
ratio = ratio > 1 ? 1 : ratio;
return ronin.brush.size * ratio;
}
//
this.draw = function()
{
if(!this.position_prev){this.position_prev = [this.position()]; return; }
var position = this.position();
var position_prev = this.position_prev[0];
//remove stale previous positions
if (this.position_prev.length > 3) this.position_prev.pop();
this.distance += position.distance_to(position_prev);
ronin.surface.context().beginPath();
ronin.surface.context().globalCompositeOperation="source-over";
ronin.surface.context().moveTo(position_prev.x,position_prev.y);
//Choose direct line or curve line based on how many samples available
if(this.position_prev.length > 1 && position.distance_to(position_prev) > 13){
var d =
position.distance_to(position_prev)/
position_prev.distance_to(this.position_prev[1]);
//caluclate a control point for the quad curve
var ppx = position_prev.x - (this.position_prev[1].x - position_prev.x);
var ppy = position_prev.y - (this.position_prev[1].y - position_prev.y);
var px = (position.x + position_prev.x)/2;
var py = (position.y + position_prev.y)/2;
var tx = px + (ppx - px) * 0.2 * d;
var ty = py + (ppy - py) * 0.2 * d;
ronin.surface.context().quadraticCurveTo(tx,ty,position.x,position.y);
}
else {
ronin.surface.context().lineTo(position.x,position.y);
}
ronin.surface.context().lineCap="round";
ronin.surface.context().lineWidth = this.thickness();
ronin.surface.context().strokeStyle = ronin.brush.color.rgba();
ronin.surface.context().stroke();
ronin.surface.context().closePath();
this.position_prev.unshift(position);
}
this.position = function()
{
if(this.angle && this.offset){
return this.position_rotation();
}
else if(this.mirror && this.mirror.width > 0){
return this.position_mirror_x();
}
else if(this.mirror && this.mirror.height > 0){
return this.position_mirror_y();
}
return this.position_default();
}
// Effects
this.position_default = function()
{
return ronin.cursor.position.add(this.offset);
}
this.position_mirror_x = function()
{
return new Position((2 * this.mirror.width) - (ronin.cursor.position.x + this.offset.x), 0 + (ronin.cursor.position.y + this.offset.y));
}
this.position_mirror_y = function()
{
return new Position((ronin.cursor.position.x + this.offset.x), (2 * this.mirror.height) - (ronin.cursor.position.y + this.offset.y));
}
this.position_rotation = function()
{
var angle_radian = this.angle.degrees * Math.PI / 180;
var deltaX = ronin.cursor.position.x - this.offset.x;
var deltaY = ronin.cursor.position.y - this.offset.y;
var t = Math.atan2(deltaY, deltaX) + angle_radian;
var radius = ronin.cursor.position.distance_to(this.offset);
var x = Math.cos(t) * radius;
var y = Math.sin(t) * radius;
return new Position(x + this.offset.x,y + this.offset.y);
}
this.start = function()
{
}
this.stop = function()
{
this.position_prev = null;
}
this.widget = function()
{
return this.offset.render()+"<br />";
}
}

79
sources/scripts/modules/eraser.js Normal file
View File

@@ -0,0 +1,79 @@
function Eraser(rune)
{
Module.call(this,rune);
this.parameters = [Value];
this.size = 5;
// Module
this.position_prev = null;
this.draw = function()
{
if(!this.position_prev){this.position_prev = ronin.cursor.position; }
if(ronin.brush.size < 0){ this.erase(); return; }
var position = ronin.cursor.position;
this.distance += position.distance_to(this.position_prev);
ronin.surface.context().beginPath();
ronin.surface.context().globalCompositeOperation="destination-out";
ronin.surface.context().moveTo(this.position_prev.x,this.position_prev.y);
ronin.surface.context().lineTo(position.x,position.y);
ronin.surface.context().lineCap="round";
ronin.surface.context().lineWidth = this.size;
ronin.surface.context().strokeStyle = new Color("#ff0000").rgba();
ronin.surface.context().stroke();
ronin.surface.context().closePath();
this.position_prev = position;
}
this.active = function(cmd)
{
if(cmd.value()){
this.size = cmd.value().float;
}
}
this.passive = function(cmd)
{
}
this.widget_cursor = function()
{
return ". "+this.size;
}
// Cursor
this.is_drawing = false;
this.mouse_down = function(position)
{
this.is_drawing = true;
this.position_prev = null;
ronin.stroke.new_stroke();
}
this.mouse_move = function(position)
{
if(this.is_drawing === false){ return; }
this.draw();
ronin.stroke.append_stroke(position);
}
this.mouse_up = function(position)
{
this.is_drawing = false;
this.position_prev = null;
ronin.stroke.save_stroke("eraser");
}
}

45
sources/scripts/modules/eye.js Normal file
View File

@@ -0,0 +1,45 @@
function Eye(rune)
{
Module.call(this,rune);
// Module
this.active = function(cmd)
{
}
this.passive = function(cmd)
{
}
this.widget_cursor = function()
{
return "Eye";
}
this.color_picker = function(position)
{
var imgData = ronin.surface.context().getImageData(position.x, position.y, 1, 1).data;
var c = new Color();
commander.show();
commander.element_input.focus();
commander.element_input.value = "> "+(c.rgb_to_hex(imgData));
}
// Cursor
this.mouse_down = function(position)
{
this.color_picker(position);
}
this.mouse_move = function(position)
{
this.color_picker(position);
}
this.mouse_up = function(position)
{
this.color_picker(position);
}
}

49
sources/scripts/modules/file.load.js Normal file
View File

@@ -0,0 +1,49 @@
function FileLoad(rune)
{
Module.call(this,rune);
this.parameters = [Filepath,Position,Rect];
this.active = function(cmd)
{
ronin.overlay.clear();
if(!cmd.filepath() && !cmd.value()){ return; }
var position = cmd.position() ? cmd.position() : new Position();
base_image = new Image();
base_image.src = cmd.filepath().path;
base_image.src += '?' + new Date().getTime();
base_image.crossOrigin = "Anonymous";
base_image.onload = function(){
var width = base_image.naturalWidth;
var height = base_image.naturalHeight;
if(cmd.rect()){
width = cmd.rect().width;
height = cmd.rect().height;
position.normalize(cmd.rect());
}
// Scale with only 1 unit
width = isNaN(width) && height > 0 ? (height*base_image.naturalWidth)/base_image.naturalHeight : width;
height = isNaN(height) && width > 0 ? (width*base_image.naturalHeight)/base_image.naturalWidth : height;
ronin.surface.context().drawImage(base_image, position.x, position.y, width, height);
}
}
this.passive = function(cmd)
{
if(!cmd.filepath() && !cmd.value()){ return; }
var position = cmd.position() ? cmd.position() : new Position();
if(position && cmd.rect()){
ronin.overlay.draw(position,cmd.rect());
}
else if(position){
ronin.overlay.draw(position);
}
}
}

22
sources/scripts/modules/file.save.js Normal file
View File

@@ -0,0 +1,22 @@
function FileSave(rune)
{
Module.call(this,rune);
this.parameters = [Any];
this.active = function(cmd)
{
var n = "Ronin Export";
var f = cmd.variable("format");
var d = ronin.surface.merge();
d = ronin.surface.active_layer.element.toDataURL('image/png');
// // ronin.surface.layers["render"].clear();
var w = window.open('about:blank','image from canvas');
// w.document.write("hello")
w.document.write("<title>"+(n ? n : "Untitled")+"</title><body><img src='"+d+"' width='"+ronin.surface.size.width+"px' height='"+ronin.surface.size.height+"px'/></body>");
}
this.passive = function(cmd)
{
}
}

80
sources/scripts/modules/help.js Normal file
View File

@@ -0,0 +1,80 @@
function Help(rune)
{
Module.call(this,rune);
this.active = function(cmd)
{
var w = window.open('about:blank','image from canvas');
var html = "";
html += this.view_intro();
html += this.view_modules();
html += this.view_units();
html += this.view_presets();
w.document.write("<title>Help</title><style>body { font-size:11px;background:#fff; color:#000; padding:10px} pre {}</style><pre>"+html+"</pre>");
}
//
this.view_intro = function()
{
var html = "# Ronin\n## Basics\nRonin is a web based drawing application and visual language. Launch index.html and press **:**(colon) to display the command prompt. Input the commands below to interface with the different tools. \n```\n:\n```\n";
html += "### Loading/Saving\nRequires you to run Ronin through localhost. Navigate to the Ronin folder, and run the simple http server.\n";
html += "```\ncd /path/to/ronin/ ; Navigate to Ronin through the terminal\npython -m SimpleHTTPServer 8000 ; Start localhost\nhttp://localhost:8000/ ; Enjoy Ronin\n```\n";
html += "### Controls\n";
html += "```\nctrl ; Draw Overlays\nalt ; Drag Surface\nshift ; Erase\nshift+ctrl ; Eyedrop\nshift+alt ; Move Layer\n```\n";
return html;
}
this.view_modules = function()
{
html = "## Modules\n";
Object.keys(ronin.modules).forEach(function (key) {
html += "### "+key+" "+ronin.modules[key].constructor.name+"\n";
html += ronin.modules[key].docs+"\n";
html += "- Parameters: ";
for (i = 0; i < ronin.modules[key].parameters.length; i++) {
html += "`"+ronin.modules[key].parameters[i].name+"` ";
}
html += "\n";
html += "- Variables: ";
for(var key in ronin.modules[key].variables){
html += "`"+key+"` ";
}
html += "\n\n";
});
return html;
}
this.view_units = function()
{
html = "## Units\n";
html += "```\n5 ; value: 5\n5,7 ; position: 5x 7y\n7x9 ; rect: 7w 9h\n#ff0000 ; color: red\n0..5 ; random: 0.0-5.0\n45' ; degree: 45/365\nrate=10 ; variable: rate = 10\n```\n";
return html;
}
this.view_presets = function()
{
html = "## Presets\n";
html += "### Radial Brush\n";
html += "```\n# 8 strands\n> 600,400 45';> 600,400 90';> 600,400 135';> 600,400 180';> 600,400 225';> 600,400 270';> 600,400 315'\n# 6 strands\n> 600,400 60';> 600,400 120';> 600,400 180';> 600,400 240';> 600,400 300'\n```\n"
html += "### Symmetry Brush\n";
html += "```\n# XY\n> 400x 3\n# Angular brushes\n> 400x 1,1;> 400x 2,2;> 400x 3,3; > 1,1;> 2,2;> 3,3;\n```\n"
html += "### Angular Brush\n";
html += "```\n# Light\n> 1,1;> 2,2;> 3,3;> 4,4\n# Hard\n> 2,2;> 4,4;> 6,6;> 8,8\n# Symmetric Light\n> 1,1 600x;> 2,2 600x;> 3,3 600x;> 4,4 600x\n```\n";
return html;
}
function pad(s,length)
{
if(!s){ return s; }
var new_string = s;
while(new_string.length < length){
new_string += " ";
}
return new_string;
}
}

30
sources/scripts/modules/history.js Normal file
View File

@@ -0,0 +1,30 @@
function History(rune)
{
Module.call(this,rune);
this.cmds = [];
this.active = function(cmd)
{
var w = window.open('about:blank','source');
var html = "";
for (i = 0; i < this.cmds.length; i++) {
if(this.cmds[i][0] == this.rune){ continue; }
html += this.cmds[i]+";<br />";
}
w.document.write("<title>Source</title><style>body { font-family:courier}</style>"+html+"");
}
this.add = function(content)
{
this.cmds.push(content);
}
this.widget = function()
{
if(this.cmds.length === 0){ return "";}
return "^ "+this.cmds.length+" ";
}
}

86
sources/scripts/modules/module.js Normal file
View File

@@ -0,0 +1,86 @@
function Module(rune)
{
this.rune = rune;
this.element = null;
this.parameters = [];
this.variables = {};
this.docs = "Missing documentation.";
this.active = function(cmd)
{
console.log("Nothing to do.");
}
this.passive = function(cmd)
{
console.log("Nothing to do.");
}
this.update_variables = function(cmd)
{
for (var key in this.variables){
if(!cmd.variable(key)){ continue; }
this.variables[key] = cmd.variable(key).value;
}
}
this.hint = function(cmd)
{
var s = this.pad(cmd.content.join(" "));
s += cmd.content.join(" ").length == 0 ? "<span class='module'>"+this.constructor.name+"</span>" : "";
// Params
var e = 0;
while(e < 10){
if(!this.parameters[e]){ break; }
var param_name = this.parameters[e].name;
s += cmd[param_name.toLowerCase()]() ? "" : "<span class='param'>"+param_name+"</span>";
e += 1;
}
// Variables
if(this.variables){
for (var key in this.variables){
if(cmd.variable(key)){continue;}
s += "<span class='variable_key'>"+key+"</span>=<span class='variable_value'>"+this.variables[key]+"</span> ";
}
}
return s;
}
this.pad = function(input)
{
var s = "";
for (i = 0; i < input.length+2; i++){
s += "_";
}
return "<span style='color:#000'>"+s+"</span>";
}
this.widget = function()
{
return "";
}
this.widget_cursor = function()
{
return "Missing";
}
this.mouse_down = function(position)
{
}
this.mouse_move = function(position)
{
}
this.mouse_up = function(position)
{
}
}

163
sources/scripts/modules/overlay.js Normal file
View File

@@ -0,0 +1,163 @@
function Overlay(rune)
{
Module.call(this,rune);
this.parameters = [Position,Rect];
// Module
this.passive = function(cmd)
{
this.draw(cmd.position(),cmd.rect());
}
this.active = function(cmd)
{
if(cmd.bang()){ this.guides = []; }
}
// draw
this.draw = function(position,rect)
{
this.clear();
if(!position){ position = new Position("0,0"); }
if(rect){
this.draw_rect(position,rect);
}
else if(position.x !== 0 && position.y !== 0){
this.draw_pointer(position);
}
else if(position.x !== 0 ){
this.draw_vertical_line(position);
}
else if(position.y !== 0 ){
this.draw_horizontal_line(position);
}
}
this.draw_rect = function(position,rect)
{
this.context().beginPath();
position.normalize(rect);
this.context().moveTo(position.x,position.y);
this.context().lineTo(position.x + rect.width,position.y);
this.context().lineTo(position.x + rect.width,position.y + rect.height);
this.context().lineTo(position.x,position.y + rect.height);
this.context().lineTo(position.x,position.y);
this.context().lineCap="round";
this.context().lineWidth = 1;
this.context().strokeStyle = "#ff0000";
this.context().stroke();
this.context().closePath();
}
this.draw_pointer = function(position)
{
this.context().beginPath();
this.context().moveTo(position.x,position.y);
this.context().lineTo(position.x + 10,position.y);
this.context().lineTo(position.x,position.y + 10);
this.context().lineTo(position.x,position.y);
this.context().lineCap="round";
this.context().lineWidth = 1;
this.context().strokeStyle = "#ff0000";
this.context().stroke();
this.context().closePath();
}
this.draw_vertical_line = function(position)
{
this.context().beginPath();
this.context().moveTo(position.x,0);
this.context().lineTo(position.x,this.element.height);
this.context().lineCap="round";
this.context().lineWidth = 1;
this.context().strokeStyle = "#ff0000";
this.context().stroke();
this.context().closePath();
}
this.draw_horizontal_line = function(position)
{
this.context().beginPath();
this.context().moveTo(0,position.y);
this.context().lineTo(this.element.width,position.y);
this.context().lineCap="round";
this.context().lineWidth = 1;
this.context().strokeStyle = "#ff0000";
this.context().stroke();
this.context().closePath();
}
this.resize = function(rect)
{
this.element.width = rect.width * 2;
this.element.height = rect.height * 2;
this.element.style.width = rect.width+"px";
this.element.style.height = rect.height+"px";
this.context().scale(2,2);
}
this.context = function()
{
return this.element.getContext('2d');
}
this.clear = function()
{
this.context().clearRect(0, 0, ronin.surface.size.width, ronin.surface.size.height);
}
// Cursor
this.live_draw_from = null;
this.mouse_down = function(position)
{
ronin.overlay.clear();
ronin.overlay.draw_pointer(position);
this.live_draw_from = position;
commander.show();
commander.element_input.focus();
commander.element_input.value = "| "+this.live_draw_from.render();
}
this.mouse_move = function(position)
{
if(this.live_draw_from === null){ return; }
ronin.overlay.clear();
var rect = new Rect();
rect.width = position.x - this.live_draw_from.x;
rect.height = position.y - this.live_draw_from.y;
ronin.overlay.draw_rect(this.live_draw_from,rect);
commander.element_input.value = "| "+this.live_draw_from.render()+" "+rect.render();
}
this.mouse_up = function(position)
{
this.live_draw_from = null;
commander.element_input.focus();
}
// Widget
this.widget_cursor = function()
{
return "Guide";
}
}

30
sources/scripts/modules/render.js Normal file
View File

@@ -0,0 +1,30 @@
function Render(rune)
{
Module.call(this,rune);
this.parameters = [Any];
this.collection = {};
this.collection["stencil"] = new Filter_Stencil();
this.collection["rotate"] = new Filter_Rotate();
this.collection["invert"] = new Filter_Invert();
this.collection["chromatic"] = new Filter_Chromatic();
this.active = function(cmd)
{
var name = cmd.content[0];
if(!this.collection[name]){ return; }
return this.collection[name].render(cmd);
}
this.passive = function(cmd)
{
var name = cmd.content[0];
if(!this.collection[name]){ return; }
return this.collection[name].preview(cmd);
}
}

61
sources/scripts/modules/stroke.js Normal file
View File

@@ -0,0 +1,61 @@
function Stroke(rune)
{
Module.call(this,rune);
this.parameters = [Any];
// Create a stroke
this.positions = null;
this.new_stroke = function()
{
this.positions = [];
}
this.append_stroke = function(p)
{
this.positions.push(p);
}
this.save_stroke = function(mode)
{
s = "_ module="+mode+" ";
for (i = 0; i < this.positions.length; i++) {
s += this.positions[i].render()+" ";
}
if(this.positions.length > 0){ ronin.history.add(s); }
this.positions = null;
}
// Module
this.passive = function(cmd)
{
}
this.active = function(cmd)
{
var prev = null
for (i = 1; i < cmd.content.length; i++) {
var p = new Position(cmd.content[i]);
if(prev){
this.draw(prev,p);
}
prev = p;
}
}
this.draw = function(pos1,pos2)
{
ronin.surface.context().beginPath();
ronin.surface.context().moveTo(pos1.x,pos1.y);
ronin.surface.context().lineTo(pos2.x,pos2.y);
ronin.surface.context().lineCap="round";
ronin.surface.context().lineWidth = 10;
ronin.surface.context().strokeStyle = ronin.brush.color.rgba();
ronin.surface.context().stroke();
ronin.surface.context().closePath();
}
}

187
sources/scripts/modules/surface.js Normal file
View File

@@ -0,0 +1,187 @@
function Surface(rune)
{
Module.call(this,rune);
this.element = null;
this.parameters = [Rect,Color,Bang];
this.variables = {"layer" : "main"};
this.layers = {};
this.active_layer = null;
this.render_layer = null;
this.size = null;
this.active = function(cmd)
{
if(cmd.rect()){
this.resize(cmd.rect(),cmd.position());
ronin.overlay.resize(cmd.rect());
}
if(cmd.color()){
this.context().beginPath();
this.context().rect(0, 0, this.active_layer.element.width, this.active_layer.element.height);
this.context().fillStyle = cmd.color().hex;
this.context().fill();
}
if(cmd.bang() && Object.keys(ronin.surface.layers).length > 1){
delete this.layers[this.active_layer.name];
this.select_any_layer();
ronin.widget.update();
}
if(cmd.variable("layer")){
var name = cmd.variable("layer").value;
if(!this.layers[name]){
this.add_layer(new Layer(name,this.size));
}
this.select_layer(this.layers[name]);
}
}
this.select_layer = function(layer)
{
console.log("Selecting layer:"+layer.name);
this.active_layer = layer;
}
this.select_any_layer = function()
{
var layer_name = Object.keys(ronin.surface.layers)[0];
this.select_layer(ronin.surface.layers[layer_name]);
}
this.add_layer = function(layer)
{
console.log("Creating layer:"+layer.name);
this.layers[layer.name] = layer;
this.active_layer = layer;
this.element.appendChild(layer.element);
this.active_layer.resize(this.size);
}
this.passive = function(cmd)
{
if(cmd.rect()){
ronin.overlay.draw(cmd.position(),cmd.rect());
}
}
this.resize = function(rect, position = null)
{
this.size = rect;
Object.keys(ronin.surface.layers).forEach(function (key) {
ronin.surface.layers[key].resize(rect);
});
ronin.surface.element.width = rect.width * 2;
ronin.surface.element.height = rect.height * 2;
ronin.surface.element.style.width = rect.width+"px";
ronin.surface.element.style.height = rect.height+"px";
ronin.surface.element.style.marginLeft = -(rect.width/2);
ronin.surface.element.style.marginTop = -(rect.height/2);
ronin.on_resize();
}
this.widget = function()
{
if(!this.active_layer){ return ""; }
var s = "";
Object.keys(ronin.surface.layers).forEach(function (key) {
s = ronin.surface.layers[key].widget()+s;
});
return "# "+this.size.render()+"<br />"+s;
}
this.widget_cursor = function()
{
return "Drag";
}
// Commands
this.layer_up = function()
{
var keys = Object.keys(ronin.surface.layers);
var loc = keys.indexOf(this.active_layer.name);
if(loc >= keys.length-1){ console.log("Reached end"); return false; }
if(keys[loc+1] != null){this.select_layer(ronin.surface.layers[keys[loc+1]]);}
}
this.layer_down = function()
{
var keys = Object.keys(ronin.surface.layers);
var loc = keys.indexOf(this.active_layer.name);
if(keys[loc-1] != null){this.select_layer(ronin.surface.layers[keys[loc-1]]);}
}
// Layers
this.context = function()
{
return this.active_layer.context();
}
this.merge = function()
{
// this.render_layer = this.layers["render"];
// var a = [];
// Object.keys(ronin.surface.layers).forEach(function (key) {
// if(key != "render"){
// a.push(ronin.surface.layers[key]);
// }
// });
// for (i = a.length; i > 0 ; i--) {
// ronin.surface.render_layer.context().drawImage(a[i-1].context().canvas,0,0,this.size.width,this.size.height);
// }
return this.context();
}
// Cursor
this.drag_from = null;
this.drag_offset_x = 0;
this.drag_offset_y = 0;
this.mouse_down = function(position)
{
this.drag_from = ronin.position_in_window(position);
}
this.mouse_move = function(position)
{
if(this.drag_from === null){ return; }
position = ronin.position_in_window(position);
var offset_x = this.drag_from.x - position.x;
var offset_y = this.drag_from.y - position.y;
this.drag_offset_x -= offset_x;
this.drag_offset_y -= offset_y;
ronin.surface.element.style.marginLeft = -(this.size.width/2) + this.drag_offset_x;
ronin.surface.element.style.marginTop = -(this.size.height/2) + this.drag_offset_y;
ronin.element.style.backgroundPosition = ((this.drag_offset_x/8))-(window.innerWidth % 20)+"px "+((this.drag_offset_y/8)-(window.innerWidth % 20))+"px";
ronin.widget.element.style.marginLeft = this.drag_offset_x;
ronin.widget.element.style.marginTop = this.drag_offset_y;
this.drag_from = new Position(position.x,position.y);
}
this.mouse_up = function(event)
{
this.drag_from = null;
}
}

82
sources/scripts/modules/surface.layer.js Normal file
View File

@@ -0,0 +1,82 @@
function Layer(name,host = "user")
{
this.name = name;
this.host = host;
this.element = document.createElement("canvas");
this.element.setAttribute("id","_"+name);
this.element.setAttribute("class","layer");
this.resize = function(rect)
{
console.log("Resize "+this.name+" to "+rect.render());
var pixels_rect = new Rect(this.element.width+"x"+this.element.height);
this.element.width = rect.width * 2;
this.element.height = rect.height * 2;
this.element.style.width = rect.width+"px";
this.element.style.height = rect.height+"px";
this.context().scale(2,2);
}
this.clear = function()
{
this.context().clearRect(0, 0, this.element.width, this.element.height);
}
this.context = function()
{
return this.element.getContext('2d');
}
this.image = function()
{
return this.element.toDataURL('image/png');
}
//
this.widget_cursor = function()
{
return "Move";
}
this.widget = function()
{
return (ronin.surface.active_layer.name == this.name) ? "<span class='highlight'>- ("+this.name+")</span><br />" : "- "+this.name+"<br />";
}
this.move_from = null;
this.mouse_down = function(position)
{
this.move_from = ronin.position_in_window(position);
ronin.stroke.new_stroke();
}
this.mouse_move = function(position)
{
if(this.move_from === null){ return; }
ronin.stroke.append_stroke(position); // Save to stroke
position = ronin.position_in_window(position);
var offset_x = this.move_from.x - position.x;
var offset_y = this.move_from.y - position.y;
var imageData = this.context().getImageData(0, 0, ronin.surface.size.width * 2, ronin.surface.size.height * 2);
this.clear();
this.context().putImageData(imageData, -offset_x * 2, -offset_y * 2);
this.move_from = new Position(position.x,position.y);
}
this.mouse_up = function(event)
{
this.move_from = null;
ronin.stroke.save_stroke("move");
}
}

39
sources/scripts/modules/typographe.js Normal file
View File

@@ -0,0 +1,39 @@
function Typographe(rune)
{
Module.call(this,rune);
this.parameters = [Position,Color,Value];
this.variables = {"text" : null};
this.active = function(cmd)
{
var target = ronin.surface.active_layer;
target.clear();
if(cmd.variable("text")){
this.add_text(target.context(),cmd);
}
}
this.passive = function(cmd)
{
var target = ronin.overlay;
target.clear();
if(cmd.variable("text")){
this.add_text(target.context(),cmd);
}
}
this.add_text = function(context,cmd)
{
var ctx = context;
var text = cmd.variable("text").value;
var position = cmd.position() ? cmd.position() : new Position(20,40);
var color = cmd.color() ? cmd.color() : new Color("#000000");
var size = cmd.value() ? cmd.value().int : 20;
ctx.font = size+"px Georgia";
ctx.fillStyle = color.hex;
ctx.fillText(text,position.x,position.y);
}
}

34
sources/scripts/modules/vector.js Normal file
View File

@@ -0,0 +1,34 @@
function Vector(rune)
{
Module.call(this,rune);
this.parameters = [Any,Position];
// Module
this.passive = function(cmd)
{
ronin.overlay.clear();
ronin.overlay.context().lineCap="round";
ronin.overlay.context().lineWidth = ronin.brush.size;
ronin.overlay.context().strokeStyle = "red";
ronin.overlay.context().stroke(new Path2D(cmd.content.join(" ")));
}
this.active = function(cmd)
{
ronin.overlay.clear();
ronin.surface.context().lineCap="round";
ronin.surface.context().lineWidth = ronin.brush.size;
ronin.surface.context().strokeStyle = ronin.brush.color.rgba();
ronin.surface.context().stroke(new Path2D(cmd.content.join(" ")));
}
// + M 100, 100 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0 ; Draw a circle
// M100,100 h200 a20,20 0 0 1 20,20 v200 a20,20 0 0 1 -20,20 h-200 a20,20 0 0 1 -20,-20 v-200 a20,20 0 0 1 20,-20 z
// Large 128
// @ 128x128;> 2 #ffffff;+ M 64, 64 m -50, 0 a 50,50 0 1,0 100,0 a 50,50 0 1,0 -100,0;+ M 64, 64 m -45, 0 a 45,45 0 1,0 90,0 a 45,45 0 1,0 -90,0;+ M 64, 64 m -40, 0 a 40,40 0 1,0 80,0 a 40,40 0 1,0 -80,0;+ M 64, 64 m -35, 0 a 35,35 0 1,0 70,0 a 35,35 0 1,0 -70,0;+ M 64, 64 m -30, 0 a 30,30 0 1,0 60,0 a 30,30 0 1,0 -60,0;+ M 64, 64 m -25, 0 a 25,25 0 1,0 50,0 a 25,25 0 1,0 -50,0;+ M 64, 64 m -20, 0 a 20,20 0 1,0 40,0 a 20,20 0 1,0 -40,0;+ M 64, 64 m -15, 0 a 15,15 0 1,0 30,0 a 15,15 0 1,0 -30,0;+ M 64, 64 m -10, 0 a 10,10 0 1,0 20,0 a 10,10 0 1,0 -20,0;+ M 64, 64 m -5, 0 a 5,5 0 1,0 10,0 a 5,5 0 1,0 -10,0;$ logo
// Icon 128
// @ 128x128;> 4 #ffffff;+ M 64, 64 m -50, 0 a 50,50 0 1,0 100,0 a 50,50 0 1,0 -100,0;+ M 64, 64 m -40, 0 a 40,40 0 1,0 80,0 a 40,40 0 1,0 -80,0;+ M 64, 64 m -30, 0 a 30,30 0 1,0 60,0 a 30,30 0 1,0 -60,0;+ M 64, 64 m -20, 0 a 20,20 0 1,0 40,0 a 20,20 0 1,0 -40,0;+ M 64, 64 m -10, 0 a 10,10 0 1,0 20,0 a 10,10 0 1,0 -20,0;$ logo
}

0
sources/scripts/units/Icon Normal file
View File

13
sources/scripts/units/angle.js Normal file
View File

@@ -0,0 +1,13 @@
function Angle(angle_str = "0'")
{
Unit.call(this);
this.example = "45'";
this.degrees = parseFloat(angle_str.replace('\'',''));
this.render = function()
{
return this.degrees+"'";
}
}

12
sources/scripts/units/any.js Normal file
View File

@@ -0,0 +1,12 @@
function Any(str)
{
Unit.call(this);
this.example = "";
this.string = str;
this.render = function()
{
return this.string;
}
}

11
sources/scripts/units/bang.js Normal file
View File

@@ -0,0 +1,11 @@
function Bang()
{
Unit.call(this);
this.example = "";
this.render = function()
{
return "BANG";
}
}

32
sources/scripts/units/color.js Normal file
View File

@@ -0,0 +1,32 @@
function Color(hex = '#000000')
{
Unit.call(this);
this.example = "#ff0000";
this.hex = hex;
this.rgb = function()
{
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(this.hex);
return result ? {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16)
} : null;
}
this.rgba = function()
{
return "rgba("+this.rgb().r+","+this.rgb().g+","+this.rgb().b+",1)";
}
this.render = function()
{
return this.hex;
}
this.rgb_to_hex = function(rgb)
{
return "#"+("0" + parseInt(rgb[0],10).toString(16)).slice(-2)+("0" + parseInt(rgb[1],10).toString(16)).slice(-2)+("0" + parseInt(rgb[2],10).toString(16)).slice(-2);
}
}

12
sources/scripts/units/filepath.js Normal file
View File

@@ -0,0 +1,12 @@
function Filepath(path_str)
{
Unit.call(this);
this.example = "assets/demo.png";
this.path = path_str;
this.render = function()
{
return this.path;
}
}

42
sources/scripts/units/position.js Normal file
View File

@@ -0,0 +1,42 @@
function Position(position_str = "0,0",y = null)
{
Unit.call(this);
this.example = "100,150";
this.position_str = position_str;
this.x = y != null ? position_str : parseFloat(this.position_str.split(",")[0]);
this.y = y != null ? y : parseFloat(this.position_str.split(",")[1]);
this.add = function(position)
{
return new Position(this.x + position.x, this.y + position.y);
}
this.is_equal = function(target)
{
if(target.x == this.x && target.y == this.y){ return true; }
return null;
}
this.distance_to = function(target)
{
if(!target){ return 0; }
return Math.sqrt( (this.x-target.x)*(this.x-target.x) + (this.y-target.y)*(this.y-target.y) );
}
this.normalize = function(rect)
{
if(this.x < 0){
this.x = ronin.canvas.element.width - rect.width - Math.abs(this.x);
}
if(this.y < 0){
this.y = ronin.canvas.element.height - rect.height - Math.abs(this.y);
}
}
this.render = function()
{
return (isNaN(this.x) ? 0 : this.x)+","+(isNaN(this.y) ? 0 : this.y);
}
}

15
sources/scripts/units/range.js Normal file
View File

@@ -0,0 +1,15 @@
function Range(range_str)
{
Unit.call(this);
this.example = "10..50";
this.range_str = range_str;
this.from = parseFloat(this.range_str.split("..")[0]);
this.to = parseFloat(this.range_str.split("..")[1]);
this.render = function()
{
return this.from+".."+this.to;
}
}

15
sources/scripts/units/rect.js Normal file
View File

@@ -0,0 +1,15 @@
function Rect(rect_str)
{
Unit.call(this);
this.example = "200x300";
this.rect_str = rect_str;
this.width = rect_str ? parseFloat(this.rect_str.split("x")[0]) : 0;
this.height = rect_str ? parseFloat(this.rect_str.split("x")[1]) : 0;
this.render = function()
{
return (isNaN(this.width) ? 0 : this.width)+"x"+(isNaN(this.height) ? 0 : this.height);
}
}

9
sources/scripts/units/unit.js Normal file
View File

@@ -0,0 +1,9 @@
function Unit()
{
this.example = "unknown";
this.render = function()
{
return "[MISSING]";
}
}

14
sources/scripts/units/value.js Normal file
View File

@@ -0,0 +1,14 @@
function Value(value_str)
{
Unit.call(this);
this.example = "20";
this.value = value_str;
this.float = parseFloat(this.value);
this.int = parseInt(this.value);
this.render = function()
{
return this.value;
}
}

16
sources/scripts/units/variable.js Normal file
View File

@@ -0,0 +1,16 @@
function Variable(key,value)
{
Unit.call(this);
this.candidates = [];
this.key = key;
if(value == "true"){ this.value = true; }
else if(value == "false"){ this.value = false; }
else{ this.value = value; }
this.render = function()
{
return this.key+"="+this.value;
}
}