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

Implemented basic brush

Browse Source
This commit is contained in:
Devine Lu Linvega 2017-09-26 09:50:08 +13:00
parent 70758cb11a
commit c23b96ca3a
10 changed files with 167 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
sources/index.html
View File

@ -4,6 +4,9 @@
<script type="text/javascript" src="scripts/query.js"></script>
<script type="text/javascript" src="scripts/keyboard.js"></script>
<script type="text/javascript" src="scripts/cursor.js"></script>
<script type="text/javascript" src="scripts/brush.js"></script>
<script type="text/javascript" src="scripts/eraser.js"></script>
<script type="text/javascript" src="scripts/hint.js"></script>
<script type="text/javascript" src="scripts/render.js"></script>
<script type="text/javascript" src="scripts/commander.js"></script>
<script type="text/javascript" src="scripts/ronin.js"></script>

5
sources/links/main.css
View File

@ -4,5 +4,6 @@ body { margin:0px; padding:0px; overflow:hidden; font-family:"input_mono_medium"
yu { display:block; }
#ronin { background:#444; height: 100vh; width:100vw; }
#commander { position: fixed; bottom:0px; left:0px; width:100vw; height:30px; line-height: 30px; -webkit-user-select: none;-webkit-app-region: drag; }
#commander input { background: transparent;width: calc(100vw - 30px);padding: 0px 15px;display: block;line-height: 30px;font-size: 11px;color: white; margin-left:30px; }
#commander { position: fixed; bottom:15px; left:5px; width:100vw; height:20px; line-height: 20px; -webkit-user-select: none;-webkit-app-region: drag; z-index:900;}
#commander input { background: transparent;width: calc(100vw - 30px);display: block;line-height: 20px;font-size: 11px;color: white; margin-left:20px; }
#hint { position: fixed; bottom:15px; left:5px; width:100vw; height:20px; line-height: 20px; font-size: 11px;color: white; margin-left:20px; }

36
sources/scripts/brush.js Normal file
View File

@ -0,0 +1,36 @@
function Brush()
{
this.settings = {size:10,color:"#f00"};
this.thickness = function(line)
{
var ratio = 1 - (distance_between(line.from,line.to)/15.0);
return this.settings.size * ratio;
}
this.stroke = function(line)
{
ronin.commander.blur();
var ctx = ronin.render.context();
ctx.beginPath();
ctx.globalCompositeOperation="source-over";
ctx.moveTo(line.from.x * 2,line.from.y * 2);
ctx.lineTo(line.to.x * 2,line.to.y * 2);
ctx.lineCap="round";
ctx.lineWidth = this.thickness(line);
ctx.strokeStyle = this.settings.color;
ctx.stroke();
ctx.closePath();
}
this.mod_size = function(mod)
{
this.settings.size += mod;
}
function distance_between(a,b)
{
return Math.sqrt( (a.x-b.x)*(a.x-b.x) + (a.y-b.y)*(a.y-b.y) );
}
}

31
sources/scripts/commander.js
View File

@ -3,7 +3,7 @@ function Commander()
this.el = document.createElement('yu');
this.el.id = "commander";
this.input_el = document.createElement('input');
this.input_el.value = "rescale s:0.5 rect:300x300";
this.input_el.value = "";
this.install = function()
{
@ -16,8 +16,33 @@ function Commander()
{
var q = new Query(query_str);
if(!ronin.modules[q.module]){ console.log("Unknown module"); return; }
if(!ronin.modules[q.module]){ console.log("Unknown module",q); return; }
ronin.modules[q.module].run(q)
// Update settings
for(setting_id in q.settings){
var setting_value = q.settings[setting_id];
if(!ronin.modules[q.module].settings[setting_id]){ console.log("Missing setting",setting_id); return; }
ronin.modules[q.module].settings[setting_id] = setting_value;
}
// Run methods
for(method_id in q.methods){
var method_param = q.methods[method_id];
if(!ronin.modules[q.module][method_id]){ console.log("Missing method",method_id); return; }
ronin.modules[q.module][method_id].run(method_param);
}
ronin.commander.input_el.value = "";
ronin.hint.update();
}
this.on_input = function(e)
{
ronin.hint.update();
}
this.blur = function()
{
this.input_el.blur();
}
}

27
sources/scripts/cursor.js
View File

@ -1,31 +1,31 @@
function Cursor(rune)
{
this.line = {from:null,to:null};
this.is_down = false;
this.mouse_down = function(e)
{
e.preventDefault();
ronin.cursor.is_down = true;
var ctx = ronin.render.context();
ctx.beginPath();
ctx.rect(e.clientX * 2, e.clientY * 2, 5, 5);
ctx.fillStyle = "red";
ctx.fill();
ronin.cursor.line.from = {x:e.clientX,y:e.clientY};
}
this.mouse_move = function(e)
{
e.preventDefault();
if(!ronin.cursor.is_down){ return; }
if(!ronin.cursor.line.from){ return; }
var ctx = ronin.render.context();
ctx.beginPath();
ctx.rect(e.clientX * 2, e.clientY * 2, 5, 5);
ctx.fillStyle = "red";
ctx.fill();
ronin.cursor.line.to = {x:e.clientX,y:e.clientY};
if(e.altKey){
ronin.eraser.stroke(ronin.cursor.line);
}
else{
ronin.brush.stroke(ronin.cursor.line);
}
ronin.cursor.line.from = {x:e.clientX,y:e.clientY};
}
this.mouse_up = function(e)
@ -33,5 +33,6 @@ function Cursor(rune)
e.preventDefault();
ronin.cursor.is_down = false;
ronin.cursor.line = {};
}
}

21
sources/scripts/eraser.js Normal file
View File

@ -0,0 +1,21 @@
function Eraser()
{
this.thickness = function(line)
{
return ronin.brush.thickness(line);
}
this.stroke = function(line)
{
var ctx = ronin.render.context();
ctx.beginPath();
ctx.globalCompositeOperation="destination-out";
ctx.moveTo(line.from.x * 2,line.from.y * 2);
ctx.lineTo(line.to.x * 2,line.to.y * 2);
ctx.lineCap="round";
ctx.lineWidth = this.thickness(line);
ctx.stroke();
ctx.closePath();
}
}

25
sources/scripts/hint.js Normal file
View File

@ -0,0 +1,25 @@
function Hint()
{
this.el = document.createElement('yu');
this.el.id = "hint";
this.install = function()
{
ronin.el.appendChild(this.el);
this.el.innerHTML = "";
}
this.update = function(e = null)
{
this.el.innerHTML = this.pad(ronin.commander.input_el.value)+"brush:"+ronin.brush.settings.size+"&"+ronin.brush.settings.color+"";
}
this.pad = function(input)
{
var s = "";
for (i = 0; i < input.length+1; i++){
s += "_";
}
return "<span style='color:RGBA(0,0,0,0)'>"+s+"</span>";
}
}

17
sources/scripts/keyboard.js
View File

@ -1,8 +1,8 @@
function Keyboard()
{
this.key_up = function()
this.key_up = function(e)
{
ronin.hint.update(e);
}
this.key_down = function(e)
@ -10,5 +10,18 @@ function Keyboard()
if(e.key == "Enter"){
ronin.commander.validate();
}
if(e.key == "Escape"){
ronin.commander.input_el.blur();;
}
if(e.key == "]"){
ronin.brush.mod_size(1);
}
if(e.key == "["){
ronin.brush.mod_size(-1);
}
ronin.hint.update(e);
}
}

14
sources/scripts/query.js
View File

@ -2,11 +2,21 @@ function Query(query_str)
{
this.module = query_str.split(" ")[0];
var parts = query_str.split(" ").splice(1);
this.parameters = {all:parts.join(" ")};
this.raw = parts.join(" ");
this.methods = {};
this.settings = {};
for(part_id in parts){
var part = parts[part_id];
if(part.indexOf(":") > -1){
var key = part.indexOf(":") > -1 ? part.split(":")[0] : "any";
var value = part.indexOf(":") > -1 ? part.split(":")[1] : part;
this.parameters[key] = value;
this.methods[key] = value;
}
if(part.indexOf("=") > -1){
var key = part.indexOf("=") > -1 ? part.split("=")[0] : "any";
var value = part.indexOf("=") > -1 ? part.split("=")[1] : part;
this.settings[key] = value;
}
}
}

9
sources/scripts/ronin.js
View File

@ -8,9 +8,13 @@ function Ronin()
this.commander = new Commander();
this.cursor = new Cursor();
this.render = new Render();
this.brush = new Brush();
this.eraser = new Eraser();
this.hint = new Hint();
this.modules = {
rescale : new Rescale()
rescale : new Rescale(),
brush : this.brush,
};
this.install = function()
@ -19,6 +23,7 @@ function Ronin()
this.render.install();
this.commander.install();
this.hint.install();
this.start();
}
@ -30,8 +35,8 @@ function Ronin()
ronin.render.el.addEventListener('mousedown', ronin.cursor.mouse_down);
ronin.render.el.addEventListener('mousemove', ronin.cursor.mouse_move);
ronin.render.el.addEventListener('mouseup', ronin.cursor.mouse_up);
window.addEventListener('keydown', ronin.keyboard.key_down);
ronin.commander.input_el.addEventListener('input', ronin.commander.on_input);
console.log("Ronin","Started");
this.render.update();