From 5ca4979c3829f98811956ee58888d8049da753e8 Mon Sep 17 00:00:00 2001
From: Devine Lu Linvega <aliceffekt@gmail.com>
Date: Tue, 26 Sep 2017 14:09:26 +1300
Subject: [PATCH] Added grid
---
sources/index.html | 1 +
sources/links/main.css | 2 ++
sources/scripts/grid.js | 61 ++++++++++++++++++++++++++++++++
sources/scripts/keyboard.js | 9 +++++
sources/scripts/module.js | 4 ++-
sources/scripts/modules/brush.js | 22 ++++++------
sources/scripts/modules/frame.js | 2 ++
sources/scripts/render.js | 7 +++-
sources/scripts/ronin.js | 3 ++
9 files changed, 99 insertions(+), 12 deletions(-)
create mode 100644 sources/scripts/grid.js
diff --git a/sources/index.html b/sources/index.html
index 0b1dad2..af236e7 100644
--- a/sources/index.html
+++ b/sources/index.html
@@ -5,6 +5,7 @@
<script type="text/javascript" src="scripts/modules/brush.js"></script>
<script type="text/javascript" src="scripts/modules/eraser.js"></script>
+ <script type="text/javascript" src="scripts/grid.js"></script>
<script type="text/javascript" src="scripts/io.js"></script>
<script type="text/javascript" src="scripts/query.js"></script>
<script type="text/javascript" src="scripts/keyboard.js"></script>
diff --git a/sources/links/main.css b/sources/links/main.css
index 6457d72..51ee013 100644
--- a/sources/links/main.css
+++ b/sources/links/main.css
@@ -4,6 +4,8 @@ body { margin:0px; padding:0px; overflow:hidden; font-family:"input_mono_medium"
yu { display:block; }
#ronin { background:#eee; height: 100vh; width:100vw; }
+#grid { z-index:1;position: fixed; }
+#render { z-index:800; position: fixed; }
#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: black; margin-left:20px; }
#hint { position: fixed; bottom:15px; left:5px; width:100vw; height:20px; line-height: 20px; font-size: 11px;color: #999; margin-left:20px; }
diff --git a/sources/scripts/grid.js b/sources/scripts/grid.js
new file mode 100644
index 0000000..419e8ca
--- /dev/null
+++ b/sources/scripts/grid.js
@@ -0,0 +1,61 @@
+function Grid()
+{
+ this.el = document.createElement('canvas'); this.el.id = "grid";
+
+ this.install = function()
+ {
+ ronin.el.appendChild(this.el);
+ }
+
+ this.update = function()
+ {
+ this.el.width = window.innerWidth * 2;
+ this.el.height = window.innerHeight * 2;
+ this.el.style.width = (window.innerWidth)+"px";
+ this.el.style.height = (window.innerHeight)+"px";
+
+ this.draw();
+ }
+
+ this.draw = function()
+ {
+ var size = 60;
+ var x = 1;
+ while(x < this.el.width/size){
+ var y = 1;
+ while(y < (this.el.height/size)-1){
+ this.draw_vertex(x * size,y * size)
+ y += 1;
+ }
+ x += 1;
+ }
+ }
+
+ this.draw_vertex = function(x,y)
+ {
+ var ctx = this.context();
+ var r = 1.5;
+ ctx.beginPath();
+ ctx.arc(x, y, 1.5, 0, 2 * Math.PI, false);
+ ctx.fillStyle = '#ccc';
+ ctx.fill();
+ }
+
+ this.context = function()
+ {
+ return this.el.getContext('2d');
+ }
+
+ this.resize_to = function(size)
+ {
+ this.el.width = size.width * 2;
+ this.el.height = size.height * 2;
+ this.el.style.width = size.width+"px";
+ this.el.style.height = size.height+"px";
+ }
+
+ this.clear = function()
+ {
+ ronin.render.context().clearRect(0, 0, this.el.width, this.el.height);
+ }
+}
\ No newline at end of file
diff --git a/sources/scripts/keyboard.js b/sources/scripts/keyboard.js
index 01913c6..056d27e 100644
--- a/sources/scripts/keyboard.js
+++ b/sources/scripts/keyboard.js
@@ -8,20 +8,29 @@ function Keyboard()
this.key_down = function(e)
{
if(e.key == "Enter"){
+ e.preventDefault();
ronin.commander.validate();
}
if(e.key == "Escape"){
+ e.preventDefault();
ronin.commander.input_el.blur();;
}
if(e.key == "]"){
+ e.preventDefault();
ronin.brush.mod_size(1);
}
if(e.key == "["){
+ e.preventDefault();
ronin.brush.mod_size(-1);
}
+ if(e.key == "n" && (e.ctrlKey || e.metaKey)){
+ e.preventDefault();
+ ronin.render.clear();
+ }
+
ronin.hint.update(e);
}
}
\ No newline at end of file
diff --git a/sources/scripts/module.js b/sources/scripts/module.js
index 326e9d7..48c0e83 100644
--- a/sources/scripts/module.js
+++ b/sources/scripts/module.js
@@ -16,9 +16,11 @@ function Module(name)
for(route_id in this.routes){
var route_val = this.routes[route_id];
- html += route_val+"->"+route_id;
+ html += route_val+"->"+route_id+" ";
}
+ console.log(this.name,this.settings);
+
return html.trim() != "" ? "<b>"+this.name+"</b> "+html.trim() : "";
}
}
\ No newline at end of file
diff --git a/sources/scripts/modules/brush.js b/sources/scripts/modules/brush.js
index c24feb7..fd94ac0 100644
--- a/sources/scripts/modules/brush.js
+++ b/sources/scripts/modules/brush.js
@@ -6,18 +6,19 @@ function Brush()
this.pointers = [
new Pointer({offset:{x:0,y:0}}),
- new Pointer({offset:{x:2,y:2}}),
- new Pointer({offset:{x:4,y:4}}),
+ new Pointer({offset:{x:1,y:0}}),
+ new Pointer({offset:{x:-1,y:0}}),
+ new Pointer({offset:{x:0,y:1}}),
+ new Pointer({offset:{x:0,y:-1}}),
];
- // brush speed->blue speed->thickness noise->green
-
this.ports.speed = 0;
this.ports.distance = 0;
this.ports.red = 255;
this.ports.green = 0;
this.ports.blue = 0;
this.ports.alpha = 1;
+ this.ports.x = 1;
this.ports.noise = 0;
this.thickness = function(line)
@@ -31,7 +32,7 @@ function Brush()
this.offset = function(line)
{
if(this.ports[this.routes.offset]){
- return this.ports[this.routes.offset] * this.settings.size;
+ return this.ports[this.routes.offset];
}
return 1;
}
@@ -47,7 +48,6 @@ function Brush()
this.green = function(line)
{
if(this.ports[this.routes.green]){
- console.log(this.ports[this.routes.green])
return this.ports[this.routes.green] * 255;
}
return this.ports.green;
@@ -63,7 +63,10 @@ function Brush()
this.alpha = function(line)
{
- return 1;
+ if(this.ports[this.routes.alpha]){
+ return this.ports[this.routes.alpha];
+ }
+ return this.ports.alpha;
}
this.stroke = function(line)
@@ -72,7 +75,8 @@ function Brush()
this.ports.speed = distance_between(line.from,line.to)/15.0;
this.ports.distance += this.ports.speed;
- this.ports.noise = Math.random(255);
+ this.ports.noise = Math.random(255/255.0);
+ this.ports.x = line.from.x/2;
for(pointer_id in this.pointers){
this.pointers[pointer_id].stroke(line);
@@ -122,8 +126,6 @@ function Pointer(options)
ctx.strokeStyle = "rgba("+clamp(parseInt(ronin.brush.red()),0,255)+","+clamp(parseInt(ronin.brush.green()),0,255)+","+clamp(parseInt(ronin.brush.blue()),0,255)+","+ronin.brush.alpha()+")";
ctx.stroke();
ctx.closePath();
-
- console.log("rgba("+clamp(parseInt(ronin.brush.red()),0,255)+","+clamp(parseInt(ronin.brush.green()),0,255)+","+clamp(parseInt(ronin.brush.blue()),0,255)+","+ronin.brush.alpha()+")");
}
function clamp(v, min, max)
diff --git a/sources/scripts/modules/frame.js b/sources/scripts/modules/frame.js
index 5e1ca3d..214dc9f 100644
--- a/sources/scripts/modules/frame.js
+++ b/sources/scripts/modules/frame.js
@@ -1,4 +1,6 @@
function Frame()
{
Module.call(this,"frame");
+
+ this.settings = {width:200,height:200};
}
\ No newline at end of file
diff --git a/sources/scripts/render.js b/sources/scripts/render.js
index 69f8591..1adb7f5 100644
--- a/sources/scripts/render.js
+++ b/sources/scripts/render.js
@@ -1,6 +1,6 @@
function Render()
{
- this.el = document.createElement('canvas');
+ this.el = document.createElement('canvas'); this.el.id = "render";
this.install = function()
{
@@ -27,4 +27,9 @@ function Render()
this.el.style.width = size.width+"px";
this.el.style.height = size.height+"px";
}
+
+ this.clear = function()
+ {
+ ronin.render.context().clearRect(0, 0, this.el.width, this.el.height);
+ }
}
\ No newline at end of file
diff --git a/sources/scripts/ronin.js b/sources/scripts/ronin.js
index 672f67f..a988253 100644
--- a/sources/scripts/ronin.js
+++ b/sources/scripts/ronin.js
@@ -3,6 +3,7 @@ function Ronin()
this.el = document.createElement('yu');
this.el.id = "ronin";
+ this.grid = new Grid();
this.io = new IO();
this.keyboard = new Keyboard();
this.commander = new Commander();
@@ -24,6 +25,7 @@ function Ronin()
{
document.body.appendChild(this.el);
+ this.grid.install();
this.render.install();
this.commander.install();
this.hint.install();
@@ -43,6 +45,7 @@ function Ronin()
console.log("Ronin","Started");
this.render.update();
+ this.grid.update();
}
this.resize_to = function(size)