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
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
: 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
: 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%
```

4
index.html
View File

@ -38,10 +38,10 @@
<body>
<div id='ronin'>
<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_hint'></div>
<input id='commander_input'/>
<input id='commander_input' placeholder='~'/>
</div>
</div>
<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;}
#ronin { width:100vw; height:100vh; overflow:hidden; background:#000; background-image:url(../media/grid_20.png);}
#overlay { position:fixed; z-index:1000;}
#workspace { position:fixed; background:#efefef; border-radius:3px;}
#commander { display:none; z-index: 2000; position:fixed; }
#commander.visible { display:block; }
#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: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 .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_index = this.storage.length;
var key = content[0];
content.shift();
var key = content[0][0];
content[0] = content[0].slice(1);
var cmd = new Command(content);
switch(key) {
@ -94,8 +94,8 @@ function Commander(element,element_input)
this.passive = function(content)
{
var key = content[0];
content.shift();
var key = content[0][0];
content[0] = content[0].slice(1);
this.cmd = new Command(content);
ronin.module = null;

23
scripts/init.js
View File

@ -7,11 +7,26 @@ var commander = new Commander(document.getElementById("commander"),document.getE
// 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);
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();
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;}
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++) {
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('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()
@ -46,4 +48,29 @@ function Canvas(element)
{
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);
if(q === true){
data[i] = 255; // red
data[i + 1] = 0; // green
data[i + 2] = 0; // blue
if(x % 20 == 0 && y % 20 == 0){
data[i] = 50; // red
data[i + 1] = 50; // green
data[i + 2] = 50; // blue
data[i + 3] = 255; // alpha?
}
}

14
scripts/modules/hint.js
View File

@ -11,7 +11,8 @@ function Hint(element)
this.element.style.display = "block";
}
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;
}
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('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)
@ -135,4 +137,29 @@ function Overlay(element)
{
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()
{
this.modules = {};
this.hint = new Hint();
this.canvas = new Canvas();
this.overlay = new Overlay();
this.brush = new Brush();
this.file = new File();
this.hint = new Hint();
this.filter = new Filter();
this.stroke = new Stroke();
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.width = parseFloat(this.rect_str.split("x")[0]);
this.height = parseFloat(this.rect_str.split("x")[1]);
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()
{