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

Added mouse drag and various minor visual changes.

Browse Source
This commit is contained in:
Devine Lu Linvega 2016-11-25 13:16:27 -06:00
parent 873fc433cc
commit ee67ec8da2
13 changed files with 116 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
README.md
View File

@ -4,7 +4,7 @@
#Starting #Starting
Ronin 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. Headings with a star are features in development. Ronin 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. Headings with a star are features in development. Mouse2 is used to drag the canvas around.
``` ```
: :
@ -74,9 +74,8 @@ $ ! ; Clear temporary storage
: saturation 0.5 ; Set image saturation to 0.5 : saturation 0.5 ; Set image saturation to 0.5
: chromatic 10 ; Shifts, from center, pixels red value by 10, green by 5, blue by 0 : chromatic 10 ; Shifts, from center, pixels red value by 10, green by 5, blue by 0
: chromatic 8 0 16 ; Shifts, from center, pixels red value by 8, green by 0, blue by 16 : chromatic 8 0 16 ; Shifts, from center, pixels red value by 8, green by 0, blue by 16
: balance 0.9 0.4 0.7 ; Set color balance to R0.9 G0.4 B0.7
: balance red 0.9 0.4 0.7 ; Set color balance red to 0.9 0.4 0.7
: balance white 0.7 0.7 0.7 ; Set color balance white to 0.7 0.7 0.7
: sharpen 0.5 ; Sharpen image to 50% : sharpen 0.5 ; Sharpen image to 50%
``` ```

4
index.html
View File

@ -38,10 +38,10 @@
<body> <body>
<div id='ronin'> <div id='ronin'>
<canvas id='overlay' width="1480" height="800"></canvas> <canvas id='overlay' width="1480" height="800"></canvas>
<canvas id="workspace" width="1480" height="800" style="background:#efefef"></canvas> <canvas id="workspace" width="1480" height="800"></canvas>
<div id ='commander'> <div id ='commander'>
<div id='commander_hint'></div> <div id='commander_hint'></div>
<input id='commander_input'/> <input id='commander_input' placeholder='~'/>
</div> </div>
</div> </div>
<script type="text/javascript" src="scripts/init.js"></script> <script type="text/javascript" src="scripts/init.js"></script>

4
links/main.css
View File

@ -3,12 +3,16 @@ body { margin:0px; padding:0px; overflow:hidden;}
canvas:hover { cursor: crosshair;} canvas:hover { cursor: crosshair;}
#ronin { width:100vw; height:100vh; overflow:hidden; background:#000; background-image:url(../media/grid_20.png);}
#overlay { position:fixed; z-index:1000;} #overlay { position:fixed; z-index:1000;}
#workspace { position:fixed; background:#efefef; border-radius:3px;}
#commander { display:none; z-index: 2000; position:fixed; } #commander { display:none; z-index: 2000; position:fixed; }
#commander.visible { display:block; } #commander.visible { display:block; }
#commander.hidden { display:none; } #commander.hidden { display:none; }
#commander input { background:black; padding:5px 15px; position:fixed; bottom:0; color:white; font-size:14px; left:0; border:0; width:calc(100vw); font-family:courier; cursor:pointer; display:block;} #commander input { background:black; padding:5px 15px; position:fixed; bottom:0; color:white; font-size:14px; left:0; border:0; width:calc(100vw); font-family:courier; cursor:pointer; display:block;}
#commander input:before { content:"input"; color:red;}
#commander_hint { background: black;position: fixed;bottom: 27px;padding: 5px 15px 0 15px;line-height: 17px;font-family: courier;font-size: 14px;width: 100vw;color: #999;} #commander_hint { background: black;position: fixed;bottom: 27px;padding: 5px 15px 0 15px;line-height: 17px;font-family: courier;font-size: 14px;width: 100vw;color: #999;}
#commander_hint .module { color:#ffffff; display:inline-block; margin-right:10px;} #commander_hint .module { color:#ffffff; display:inline-block; margin-right:10px;}

BIN
media/grid_20.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 105 B

8
scripts/commander.js
View File

@ -47,8 +47,8 @@ function Commander(element,element_input)
this.storage.push(content.join(" ")); this.storage.push(content.join(" "));
this.storage_index = this.storage.length; this.storage_index = this.storage.length;
var key = content[0]; var key = content[0][0];
content.shift(); content[0] = content[0].slice(1);
var cmd = new Command(content); var cmd = new Command(content);
switch(key) { switch(key) {
@ -94,8 +94,8 @@ function Commander(element,element_input)
this.passive = function(content) this.passive = function(content)
{ {
var key = content[0]; var key = content[0][0];
content.shift(); content[0] = content[0].slice(1);
this.cmd = new Command(content); this.cmd = new Command(content);
ronin.module = null; ronin.module = null;

23
scripts/init.js
View File

@ -7,11 +7,26 @@ var commander = new Commander(document.getElementById("commander"),document.getE
// Interactive // Interactive
document.addEventListener('mousemove', function(e) { ronin.brush.draw(e); ; document.addEventListener('mousemove', function(e) {
if(e.which == 1){ ronin.brush.draw(e); }
if(e.which == 2){ ronin.canvas.drag(e); ronin.overlay.drag(e); }
}, false);
document.addEventListener('mousedown', function(e) {
if(e.which == 1){ ronin.brush.draw_start(e); ronin.brush.draw(e); }
if(e.which == 2){ ronin.canvas.drag_start(e); ronin.canvas.drag(e); ronin.overlay.drag_start(e); ronin.overlay.drag(e); }
}, false);
document.addEventListener('mouseup', function(e) {
if(e.which == 1){ ronin.brush.draw_stop(e); }
if(e.which == 2){ ronin.canvas.drag_stop(e); ronin.overlay.drag_stop(e); }
document.getElementById("commander_input").focus();
}, false); }, false);
document.addEventListener('mousedown', function(e) { if(e.which != 1){ return; } ronin.brush.draw_start(e); ronin.brush.draw(e) }, false);
document.addEventListener('mouseup', function(e) { ronin.brush.draw_stop(e); document.getElementById("commander_input").focus();}, false);
var keyboard = new Keyboard(); var keyboard = new Keyboard();
document.onkeyup = function myFunction(){ keyboard.listen(event); }; document.onkeyup = function myFunction(){ keyboard.listen(event); };
var starting_canvas = new Rect();
starting_canvas.width = window.innerWidth - 200;
starting_canvas.height = window.innerHeight - 200;
ronin.canvas.resize(starting_canvas);
ronin.overlay.resize(starting_canvas);

2
scripts/modules/brush.js
View File

@ -67,7 +67,7 @@ function Brush()
{ {
if(this.is_drawing === false){return;} if(this.is_drawing === false){return;}
this.position = new Position(e.clientX,e.clientY); this.position = new Position(e.clientX - parseFloat(ronin.canvas.element.style.left),e.clientY- parseFloat(ronin.canvas.element.style.top));
for (i = 0; i < this.pointers.length; i++) { for (i = 0; i < this.pointers.length; i++) {
this.pointers[i].draw(); this.pointers[i].draw();

27
scripts/modules/canvas.js
View File

@ -35,6 +35,8 @@ function Canvas(element)
{ {
this.element.setAttribute('width',rect.width+"px"); this.element.setAttribute('width',rect.width+"px");
this.element.setAttribute('height',rect.height+"px"); this.element.setAttribute('height',rect.height+"px");
this.element.style.left = (window.innerWidth/2)-(rect.width/2);
this.element.style.top = (window.innerHeight/2)-(rect.height/2);
} }
this.context = function() this.context = function()
@ -46,4 +48,29 @@ function Canvas(element)
{ {
this.context().clearRect(0, 0, this.element.width, this.element.height); this.context().clearRect(0, 0, this.element.width, this.element.height);
} }
// Drag
this.drag_from = null;
this.drag_start = function(e)
{
this.drag_from = new Position(e.clientX,e.clientY);
}
this.drag = function(e)
{
if(e.which != 2){ return; }
var offset_x = this.drag_from.x - e.clientX;
this.element.style.left = parseInt(this.element.style.left) - offset_x;
var offset_y = this.drag_from.y - e.clientY;
this.element.style.top = parseInt(this.element.style.top) - offset_y;
this.drag_from = new Position(e.clientX,e.clientY);
}
this.drag_stop = function(e)
{
this.drag_from = null;
}
} }

8
scripts/modules/filter.eval.js
View File

@ -13,10 +13,10 @@ Filter.prototype.filter_eval = function(pixels = this.pixels(),p = null)
var q = (x % parseInt(p[0]) === 0 && y % parseInt(p[1]) === 0); var q = (x % parseInt(p[0]) === 0 && y % parseInt(p[1]) === 0);
if(q === true){ if(x % 20 == 0 && y % 20 == 0){
data[i] = 255; // red data[i] = 50; // red
data[i + 1] = 0; // green data[i + 1] = 50; // green
data[i + 2] = 0; // blue data[i + 2] = 50; // blue
data[i + 3] = 255; // alpha? data[i + 3] = 255; // alpha?
} }
} }

14
scripts/modules/hint.js
View File

@ -11,7 +11,8 @@ function Hint(element)
this.element.style.display = "block"; this.element.style.display = "block";
} }
else{ else{
this.element.style.display = "none"; this.element.innerHTML = this.default();
this.element.style.display = "block";
} }
} }
@ -29,4 +30,15 @@ function Hint(element)
return s; return s;
} }
this.default = function()
{
var s = "<span class='module'>Modules</span>";
for (var key in ronin.modules){
s += "<span class='param'>"+ronin.modules[key].constructor.name+"<span> <span class='value'>"+key+"</span> ";
}
return s;
}
} }

27
scripts/modules/overlay.js
View File

@ -106,6 +106,8 @@ function Overlay(element)
{ {
this.element.setAttribute('width',rect.width+"px"); this.element.setAttribute('width',rect.width+"px");
this.element.setAttribute('height',rect.height+"px"); this.element.setAttribute('height',rect.height+"px");
this.element.style.left = (window.innerWidth/2)-(rect.width/2);
this.element.style.top = (window.innerHeight/2)-(rect.height/2);
} }
this.show_guide = function(position,rect) this.show_guide = function(position,rect)
@ -135,4 +137,29 @@ function Overlay(element)
{ {
this.context().clearRect(0, 0, ronin.canvas.element.width, ronin.canvas.element.height); this.context().clearRect(0, 0, ronin.canvas.element.width, ronin.canvas.element.height);
} }
// Drag
this.drag_from = null;
this.drag_start = function(e)
{
this.drag_from = new Position(e.clientX,e.clientY);
}
this.drag = function(e)
{
if(e.which != 2){ return; }
var offset_x = this.drag_from.x - e.clientX;
this.element.style.left = parseInt(this.element.style.left) - offset_x;
var offset_y = this.drag_from.y - e.clientY;
this.element.style.top = parseInt(this.element.style.top) - offset_y;
this.drag_from = new Position(e.clientX,e.clientY);
}
this.drag_stop = function(e)
{
this.drag_from = null;
}
} }

12
scripts/ronin.js
View File

@ -1,11 +1,21 @@
function Ronin() function Ronin()
{ {
this.modules = {};
this.hint = new Hint();
this.canvas = new Canvas(); this.canvas = new Canvas();
this.overlay = new Overlay(); this.overlay = new Overlay();
this.brush = new Brush(); this.brush = new Brush();
this.file = new File(); this.file = new File();
this.hint = new Hint();
this.filter = new Filter(); this.filter = new Filter();
this.stroke = new Stroke(); this.stroke = new Stroke();
this.vector = new Vector(); this.vector = new Vector();
this.modules["@"] = this.canvas;
this.modules["|"] = this.overlay;
this.modules[">"] = this.brush;
this.modules["/"] = this.file;
this.modules[":"] = this.filter;
this.modules["-"] = this.stroke;
this.modules["+"] = this.vector;
} }

4
scripts/units/rect.js
View File

@ -4,8 +4,8 @@ function Rect(rect_str)
this.rect_str = rect_str; this.rect_str = rect_str;
this.width = parseFloat(this.rect_str.split("x")[0]); this.width = rect_str ? parseFloat(this.rect_str.split("x")[0]) : 0;
this.height = parseFloat(this.rect_str.split("x")[1]); this.height = rect_str ? parseFloat(this.rect_str.split("x")[1]) : 0;
this.render = function() this.render = function()
{ {