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

Merge branch '100Rabbits'

Browse Source
This commit is contained in:
cale 2017-01-11 19:19:23 -04:00
commit b76799ac34
65 changed files with 1908 additions and 860 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -1,2 +1,3 @@
*.swp *.swp
*.swo *.swo
assets/

172
README.md
View File

@ -1,91 +1,91 @@
# Ronin # Ronin
## Basics
<img src="media/demo.jpg" width="700"> 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.
#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.
``` ```
: :
``` ```
### Loading/Saving
Requires you to run Ronin through localhost. Navigate to the Ronin folder, and run the simple http server.
```
cd /path/to/ronin/ ; Navigate to Ronin through the terminal
python -m SimpleHTTPServer 8000 ; Start localhost
http://localhost:8000/ ; Enjoy Ronin
```
### Controls
```
ctrl ; Draw Overlays
alt ; Drag Surface
shift ; Erase
shift+ctrl ; Eyedrop
shift+alt ; Move Layer
```
## Modules
### # Surface
Missing documentation.
- Parameters: `Rect` `Color` `Bang`
- Variables: `layer`
#Modules ### / FileLoad
##Canvas Missing documentation.
``` - Parameters: `Filepath` `Position` `Rect`
@ 600x400 ; New canvas of size 600w and 400h - Variables:
@ 100x100 #ff0000 ; New canvas of size 100w and 100h with red background
@ ! ; Clear canvas
```
##Save File ### $ FileSave
``` Missing documentation.
$ new_name ; Create a new file with name - Parameters: `Any`
$ 3 ; Save to temporary storage, accessible with Load - Variables:
$ ! ; Clear temporary storage
```
##Load File ### ^ History
``` Missing documentation.
/ dir/file_name.jpg 10,10 100x100 ; Load image, at 10,10 with size 100x100 - Parameters:
/ dir/file_name.jpg 10,10 100x ; Load image, at 10,10 with size 100w and auto height - Variables:
/ 3 ; Load temporary storage id
```
##Brush(Pointers) ### | Overlay
``` Missing documentation.
> 10 ; Size 10 - Parameters: `Position` `Rect`
> -4 ; Eraser, Size 4 - Variables:
> 10,0 ; Add pointer at pos
> 400x0 ; Add mirror pointer, at 400x
> 4 #ff0000 ; Red brush, Size 4
> 100,100 45' ; Radial brush from position x,y and 45 degrees
> ! ; Remove all pointers
```
##Guides ### % Render
``` Missing documentation.
| 10,10 100x100 ; Draw a guide - Parameters: `Any`
| -100,0 ; Draw a grid at every 100px - Variables:
| ! ; Remove all guides
```
##Vector(SVG) ### > Brush
``` Missing documentation.
+ M10 10 h 80 v 80 h -80 Z ; Draw a square outline - Parameters: `Position` `Rect` `Angle` `Color` `Value` `Bang`
+ M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80 ; Draw a bezier - Variables: `natural` `banking`
+ 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
```
##Stroke* ### . Eraser
``` Missing documentation.
- 0,0 0,10 10,10 10,0 0,0 ; Draw a square - Parameters: `Value`
``` - Variables:
##Filters* ### * Eye
``` Missing documentation.
: saturation 0.5 ; Set image saturation to 0.5 - Parameters:
: balance red 0.9 0.4 0.7 ; Set color balance red to 0.9 0.4 0.7 - Variables:
: 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%
: 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
```
##Translate* ### & Typographe
``` Missing documentation.
^ 0,10 ; Translate 10px vertically - Parameters: `Position` `Color` `Value`
^ 20,20 100x100 40,40 ; Translate a specific portion to a specific location - Variables: `text`
^ -1280x800 ; Flip image horizontally
```
##Zoom* ### _ Stroke
``` Missing documentation.
= 75 ; Zoom factor of 75% - Parameters: `Any`
= ! ; Zoom 100% - Variables:
```
#Units ### + Vector
Missing documentation.
- Parameters: `Any` `Position`
- Variables:
### ? Help
Missing documentation.
- Parameters:
- Variables:
## Units
``` ```
5 ; value: 5 5 ; value: 5
5,7 ; position: 5x 7y 5,7 ; position: 5x 7y
@ -93,35 +93,24 @@ $ ! ; Clear temporary storage
#ff0000 ; color: red #ff0000 ; color: red
0..5 ; random: 0.0-5.0 0..5 ; random: 0.0-5.0
45' ; degree: 45/365 45' ; degree: 45/365
rate:10 ; variable: rate = 10 rate=10 ; variable: rate = 10
"foo" ; string: foo
{40w} ; constant: 120px, 40% canvas width
``` ```
## Presets
#Constants ### Radial Brush
```
w ; percentage of canvas width
h ; percentage of canvas height
```
#Presets
##Radial Brush
``` ```
# 8 strands # 8 strands
> 600,400 45';> 600,400 90';> 600,400 135';> 600,400 180';> 600,400 225';> 600,400 270';> 600,400 315' > 600,400 45';> 600,400 90';> 600,400 135';> 600,400 180';> 600,400 225';> 600,400 270';> 600,400 315'
# 6 strands # 6 strands
> 600,400 60';> 600,400 120';> 600,400 180';> 600,400 240';> 600,400 300' > 600,400 60';> 600,400 120';> 600,400 180';> 600,400 240';> 600,400 300'
``` ```
### Symmetry Brush
##Symmetry Brush
``` ```
# XY # XY
> 400x 3 > 400x 3
# Angular brushes # Angular brushes
> 400x 1,1;> 400x 2,2;> 400x 3,3; > 1,1;> 2,2;> 3,3; > 400x 1,1;> 400x 2,2;> 400x 3,3; > 1,1;> 2,2;> 3,3;
``` ```
### Angular Brush
##Angular Brush
``` ```
# Light # Light
> 1,1;> 2,2;> 3,3;> 4,4 > 1,1;> 2,2;> 3,3;> 4,4
@ -130,3 +119,8 @@ h ; percentage of canvas height
# Symmetric Light # Symmetric Light
> 1,1 600x;> 2,2 600x;> 3,3 600x;> 4,4 600x > 1,1 600x;> 2,2 600x;> 3,3 600x;> 4,4 600x
``` ```
### Twitter export & Watermark
```
# 1280x800 ; / assets/photo.jpg 1280x 0,0 ; / assets/hundredrabbits.png 60x60 20,720
```

52
index.html
View File

@ -1,6 +1,6 @@
<html> <html>
<head> <head>
<script type="text/javascript" src="scripts/unit.js"></script> <script type="text/javascript" src="scripts/units/unit.js"></script>
<script type="text/javascript" src="scripts/units/rect.js"></script> <script type="text/javascript" src="scripts/units/rect.js"></script>
<script type="text/javascript" src="scripts/units/color.js"></script> <script type="text/javascript" src="scripts/units/color.js"></script>
<script type="text/javascript" src="scripts/units/position.js"></script> <script type="text/javascript" src="scripts/units/position.js"></script>
@ -9,34 +9,62 @@
<script type="text/javascript" src="scripts/units/value.js"></script> <script type="text/javascript" src="scripts/units/value.js"></script>
<script type="text/javascript" src="scripts/units/filepath.js"></script> <script type="text/javascript" src="scripts/units/filepath.js"></script>
<script type="text/javascript" src="scripts/units/any.js"></script> <script type="text/javascript" src="scripts/units/any.js"></script>
<script type="text/javascript" src="scripts/units/variable.js"></script>
<script type="text/javascript" src="scripts/units/range.js"></script>
<script type="text/javascript" src="scripts/module.js"></script> <script type="text/javascript" src="scripts/modules/module.js"></script>
<script type="text/javascript" src="scripts/modules/canvas.js"></script>
<script type="text/javascript" src="scripts/modules/filter.js"></script>
<script type="text/javascript" src="scripts/modules/stroke.js"></script> <script type="text/javascript" src="scripts/modules/stroke.js"></script>
<script type="text/javascript" src="scripts/modules/vector.js"></script> <script type="text/javascript" src="scripts/modules/vector.js"></script>
<script type="text/javascript" src="scripts/modules/overlay.js"></script> <script type="text/javascript" src="scripts/modules/overlay.js"></script>
<script type="text/javascript" src="scripts/modules/brush.js"></script> <script type="text/javascript" src="scripts/modules/brush.js"></script>
<script type="text/javascript" src="scripts/modules/brush.pointer.js"></script> <script type="text/javascript" src="scripts/modules/brush.pointer.js"></script>
<script type="text/javascript" src="scripts/modules/file.js"></script> <script type="text/javascript" src="scripts/modules/file.load.js"></script>
<script type="text/javascript" src="scripts/modules/hint.js"></script> <script type="text/javascript" src="scripts/modules/file.save.js"></script>
<script type="text/javascript" src="scripts/modules/help.js"></script>
<script type="text/javascript" src="scripts/modules/history.js"></script>
<script type="text/javascript" src="scripts/modules/eraser.js"></script>
<script type="text/javascript" src="scripts/modules/surface.js"></script>
<script type="text/javascript" src="scripts/modules/surface.layer.js"></script>
<script type="text/javascript" src="scripts/modules/eye.js"></script>
<script type="text/javascript" src="scripts/modules/typographe.js"></script>
<script type="text/javascript" src="scripts/modules/render.js"></script>
<script type="text/javascript" src="scripts/keyboard.js"></script> <script type="text/javascript" src="scripts/filters/filter.js"></script>
<script type="text/javascript" src="scripts/command.js"></script> <script type="text/javascript" src="scripts/filters/stencil.js"></script>
<script type="text/javascript" src="scripts/commander.js"></script> <script type="text/javascript" src="scripts/filters/rotate.js"></script>
<script type="text/javascript" src="scripts/ronin.js"></script> <script type="text/javascript" src="scripts/filters/invert.js"></script>
<script type="text/javascript" src="scripts/filters/chromatic.js"></script>
<!-- Need to migrate
<script type="text/javascript" src="scripts/filters/saturation.js"></script>
<script type="text/javascript" src="scripts/filters/offset.js"></script>
<script type="text/javascript" src="scripts/filters/balance.js"></script>
-->
<script type="text/javascript" src="scripts/core/keyboard.js"></script>
<script type="text/javascript" src="scripts/core/cursor.js"></script>
<script type="text/javascript" src="scripts/core/command.js"></script>
<script type="text/javascript" src="scripts/core/commander.js"></script>
<script type="text/javascript" src="scripts/core/commander.hint.js"></script>
<script type="text/javascript" src="scripts/core/ronin.js"></script>
<script type="text/javascript" src="scripts/core/widget.js"></script>
<link rel="stylesheet" type="text/css" href="links/reset.css"/>
<link rel="stylesheet" type="text/css" href="links/fonts.css"/>
<link rel="stylesheet" type="text/css" href="links/main.css"/> <link rel="stylesheet" type="text/css" href="links/main.css"/>
<title>Ronin</title>
</head> </head>
<body> <body>
<div id='ronin'> <div id='ronin'>
<div id='surface'>
<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> </div>
<div id='widget'>Loading..</div>
<div id ='commander'> <div id ='commander'>
<div id='commander_hint'></div> <div id='commander_hint'></div>
<input id='commander_input'/> <input id='commander_input'/>
</div> </div>
</div> </div>
<script type="text/javascript" src="scripts/init.js"></script> <script type="text/javascript" src="scripts/core/init.js"></script>
</body> </body>
</html> </html>

15
links/fonts.css Normal file
View File

@ -0,0 +1,15 @@
/* Input Mono */
@font-face {
font-family: 'input_mono_regular';
src: url('../media/fonts/input_mono_regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'input_mono_medium';
src: url('../media/fonts/input_mono_medium.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

29
links/main.css
View File

@ -1,20 +1,33 @@
body { margin:0px; padding:0px; overflow:hidden;} body { margin:0px; padding:0px; overflow:hidden; font-family:"input_mono_medium",courier,monospace;}
*:focus {outline: none; } *:focus {outline: none; }
canvas:hover { cursor: crosshair;} canvas:hover { cursor: crosshair;}
#overlay { position:fixed; z-index:1000;} #ronin { width:100%; height:100%; overflow:hidden; background:#ccc; background-image:url(../media/grid_20.png); background-position: center center; }
#surface { width:50vw; height:50vh; overflow:hidden; position:fixed; left:50%; top:50%; background:#efefef; border-radius:3px;}
#surface .layer { position:absolute; top:0px; left:0px; width:100%; height:100%;}
#overlay { position:absolute; z-index:1000;}
#widget { color:#fff; position:absolute; font-size:10px; padding-top:10px;}
#widget .module { float:left; margin-right:10px; }
#widget .module .highlight { color:#e7fff8; }
#widget .cursor { float:right; text-align: right}
#widget .layer:hover { cursor:pointer;}
#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:none; padding:10px; position:fixed; bottom:0; color:white; font-size:11px; left:0; border:0; width:calc(100vw); cursor:pointer; display:block; height:35px;}
#commander input:before { content:"input"; color:e7fff8;}
#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: #000;position: fixed;bottom: 0px;left:0px;padding: 10px;font-size: 11px;width: calc(100vw - 20px);color: #999; height:15px;}
#commander_hint .module { color:#ffffff; display:inline-block; margin-right:10px;} #commander_hint .rune { color:#e7fff8; display:inline-block; margin-right:10px;}
#commander_hint .module { color:#ccc; display:inline-block; margin-right:10px;}
#commander_hint .command { color:#fff; display:inline-block; margin-right:10px;}
#commander_hint .param { font-style: italic;} #commander_hint .param { font-style: italic;}
#commander_hint .param:after { content:", "; } #commander_hint .param:after { content:" "; }
#commander_hint .param:last-child:after { content:"";} #commander_hint .param:last-child:after { content:"";}
#commander_hint .value { color:#ff0000;} #commander_hint .value { color:#e7fff8;}
#commander_hint .value:after { content:", "; color:#999; } #commander_hint .value:after { content:" "; color:#999; }
#commander_hint .value:last-child:after { content:"";} #commander_hint .value:last-child:after { content:"";}
#commander_hint .variable_key { color:#aaa; font-weight:bold;}
#commander_hint .variable_value { color:#aaa;}

1
links/reset.css Normal file
View File

@ -0,0 +1 @@
* { margin:0;padding:0;border:0;outline:0;text-decoration:none;font-weight:inherit;font-style:inherit;color:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;list-style:none;border-collapse:collapse;border-spacing:0; -webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}

23
main.js
View File

@ -1,23 +0,0 @@
/**
* Listens for the app launching then creates the window
*
* @see http://developer.chrome.com/apps/app.runtime.html
* @see http://developer.chrome.com/apps/app.window.html
*/
chrome.app.runtime.onLaunched.addListener(function() {
// Center window on screen.
var screenWidth = screen.availWidth;
var screenHeight = screen.availHeight;
var width = 500;
var height = 300;
chrome.app.window.create('index.html', {
id: "helloWorldID",
outerBounds: {
width: width,
height: height,
left: Math.round((screenWidth-width)/2),
top: Math.round((screenHeight-height)/2)
}
});
});

15
manifest.json
View File

@ -1,15 +0,0 @@
{
"manifest_version": 2,
"name": "Ronin",
"version": "1.1",
"minimum_chrome_version": "23",
"icons": {
"16": "media/icon_16.png",
"128": "media/icon_128.png"
},
"app": {
"background": {
"scripts": ["main.js"]
}
}
}

BIN
media/fonts/input_mono_medium.ttf Normal file
View File

Binary file not shown.

BIN
media/fonts/input_mono_regular.ttf Normal file
View File

Binary file not shown.

BIN
media/grid_20.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 105 B

BIN
media/icon_128.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.7 KiB

BIN
media/icon_16.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 886 B

140
scripts/commander.js
View File

@ -1,140 +0,0 @@
function Commander(element,element_input)
{
this.element = element;
this.element_input = element_input;
this.cmd = null;
this.storage = [];
this.storage_index = 0;
this.always_show = false;
this.show = function()
{
this.element.setAttribute('class','visible');
this.element_input.focus();
}
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];
}
this.active = function(content)
{
this.storage.push(content.join(" "));
this.storage_index = this.storage.length;
var key = content[0];
content.shift();
var cmd = new Command(content);
switch(key) {
case "~":
this.always();
break;
case "@":
ronin.canvas.active(cmd);
break;
case "$":
ronin.file.save(cmd);
break;
case "/":
ronin.file.active(cmd);
break;
case ">":
ronin.brush.active(cmd);
break;
case "|":
ronin.overlay.active(cmd);
break;
case "-":
ronin.stroke.active(cmd);
break;
case "^": // TODO
ronin.translate.active(cmd);
break;
case "=": // TODO
ronin.zoom.active(cmd);
break;
case "#": // TODO
ronin.layers.active(cmd);
break;
case ":":
ronin.filter.active(cmd);
break;
case "+":
ronin.vector.active(cmd);
break;
}
this.hide();
}
this.passive = function(content)
{
var key = content[0];
content.shift();
this.cmd = new Command(content);
ronin.module = null;
switch(key) {
case "@":
ronin.canvas.passive(this.cmd);
ronin.module = ronin.canvas;
break;
case "/":
ronin.file.passive(this.cmd);
ronin.module = ronin.file;
break;
case ">":
ronin.brush.passive(this.cmd);
ronin.module = ronin.brush;
break;
case "|":
ronin.overlay.passive(this.cmd);
ronin.module = ronin.overlay;
break;
case "^": // TODO
ronin.translate.passive(this.cmd);
ronin.module = ronin.translate;
break;
case "=": // TODO
ronin.zoom.passive(this.cmd);
ronin.module = ronin.zoom;
break;
case "$":
ronin.module = ronin.file;
break;
case ":":
ronin.filter.passive(this.cmd);
ronin.module = ronin.filter;
break;
case "+":
ronin.vector.passive(this.cmd);
ronin.module = ronin.vector;
break;
}
}
}

44
scripts/command.js → scripts/core/command.js
View File

@ -1,39 +1,6 @@
function Command(content) function Command(content)
{ {
this.content = raster(content); this.content = content;
// Raster
function raster(array) // @ {50w}x100
{
var str = array.join(" ");
var m = str.replace(/(\{(.*)\})/g, function(a) {
var parts = a.split(/[{}]/);
for(var e = 0; e < parts.length; e++) {
if(str.indexOf("{"+parts[e]+"}") == -1){ continue; }
str = str.replace("{"+parts[e]+"}",converter(parts[e]));
}
});
return str.split(" ");
}
function converter(str)
{
var unit = str.charAt(str.length - 1);
var value = parseFloat(str.replace(unit,''));
switch(unit) {
case "w":
return ronin.canvas.element.width * (value/100);
break;
case "h":
return ronin.canvas.element.height * (value/100);
break;
}
return str;
}
// Parser // Parser
@ -46,7 +13,7 @@ function Command(content)
this.rect = function() this.rect = function()
{ {
for (i = 0; i < this.content.length; i++) { for (i = 0; i < this.content.length; i++) {
if(this.content[i].indexOf("x") >= 0){ return new Rect(this.content[i]); } if(this.content[i].indexOf("x") >= 0 && this.content[i].indexOf("/") < 0){ return new Rect(this.content[i]); }
} }
return null; return null;
} }
@ -111,7 +78,12 @@ function Command(content)
this.variable = function(name) this.variable = function(name)
{ {
for (i = 0; i < this.content.length; i++) { for (i = 0; i < this.content.length; i++) {
if(this.content[i].indexOf(name+":") >= 0){ return Variable(this.content[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; return null;
} }

38
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
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
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
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
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
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
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();
}
}

46
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
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
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);
}

43
scripts/filters/chromatic.js Normal file
View File

@ -0,0 +1,43 @@
function Filter_Chromatic()
{
Filter.call(this);
this.parameters = [];
// var pixels = this.pixels();
// var s;
// if(p.length === 0)
// s = {r:2,g:2,b:2};
// else if(p.length < 3)
// s = {r:parseFloat(p[0]), g:parseFloat(p[0])*.5, b:0};
// else
// s = {r:parseFloat(p[0]), g:parseFloat(p[1]), b:parseFloat(p[2])};
// var hw = pixels.width*.5;
// var hh = pixels.height*.5;
// var maxLength = Math.sqrt(hw*hw+hh*hh);
// var output = new ImageData(pixels.width, pixels.height);
// for (var i=0; i<pixels.width; i++) {
// for(var j=0; j<pixels.height; j++){
// var x = i-hw;
// var y = j-hh;
// 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+hw;
// y = Math.sin(a)*f+hh;
// var r = this.get_color_bilinear(pixels, x, y);
// f = (d-s.g*d/maxLength);
// x = Math.cos(a)*f+hw;
// y = Math.sin(a)*f+hh;
// var g = this.get_color_bilinear(pixels, x, y);
// f = (d-s.b*d/maxLength);
// x = Math.cos(a)*f+hw;
// y = Math.sin(a)*f+hh;
// var b = this.get_color_bilinear(pixels, 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(output, c, i,j);
// }
// }
// ronin.canvas.clear();
// ronin.surface.context().putImageData(output, 0, 0, 0, 0, pixels.width, pixels.height);
}

60
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
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
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
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();
}
}

17
scripts/init.js
View File

@ -1,17 +0,0 @@
var ronin = new Ronin();
ronin.canvas.element = document.getElementById('workspace');
ronin.overlay.element = document.getElementById('overlay');
ronin.hint.element = document.getElementById('commander_hint');
var commander = new Commander(document.getElementById("commander"),document.getElementById("commander_input"));
// Interactive
document.addEventListener('mousemove', function(e) { ronin.brush.draw(e); ;
}, 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); };

114
scripts/keyboard.js
View File

@ -1,114 +0,0 @@
function Keyboard()
{
this.is_locked = false;
this.cmd = function()
{
var val = commander.element_input.value;
if(val.indexOf(";") > 0){
var cmds = val.split(";");
var vals = [];
for (i = 0; i < cmds.length; i++) {
val = cmds[i].replace(/^\s+|\s+$/g, '');
vals.push(val.split(" "));
}
return vals;
}
else{
return [val.split(" ")];
}
}
this.lock = function()
{
this.is_locked = true;
interface.actions_panel.style.color = "red";
}
this.unlock = function()
{
this.is_locked = false;
interface.actions_panel.style.color = "black";
}
this.listen = function(event)
{
if(this.is_locked === true){ return; }
switch (event.keyCode)
{
case 9: this.key_tab(); break;
case 13: this.key_enter(); break;
case 32: this.key_space(); break;
case 38: this.key_arrow_up(); break;
case 40: this.key_arrow_down(); break;
case 37: this.key_arrow_left(); break;
case 39: this.key_arrow_right(); break;
case 186: this.key_colon(); break;
case 190: if (event.shiftKey) this.key_colon(); break;
case 27: this.key_escape(); break;
}
// Passive
var cmd = commander.element_input.value;
commander.passive(cmd.split(" "));
ronin.hint.update();
};
this.key_tab = function()
{
}
this.key_enter = function()
{
var cmd = commander.element_input.value;
if(cmd.indexOf(";") > 0){
var multi = cmd.split(";");
var i = 0;
while(i < 100){
if(multi[i]){commander.active(multi[i].split(" "));}
else{ break; }
i += 1;
}
}
else{
commander.active(cmd.split(" "));
}
}
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();
}
}

19
scripts/module.js
View File

@ -1,19 +0,0 @@
function Module()
{
this.parameters = [];
this.active = function(cmd)
{
console.log("Nothing to do.");
}
this.passive = function(cmd)
{
console.log("Nothing to do.");
}
this.hint = function(cmd)
{
return "unknown";
}
}

107
scripts/modules/brush.js
View File

@ -1,12 +1,11 @@
function Brush() function Brush(rune)
{ {
Module.call(this); Module.call(this,rune);
this.parameters = [Position,Rect,Angle,Color,Value,Bang]; this.parameters = [Position,Rect,Angle,Color,Value,Bang];
this.pointers = [new Pointer(new Position())]; this.variables = {"natural" : false,"banking" : false};
this.pointers = [];
this.position = new Position();
this.is_drawing = false;
this.size = 1; this.size = 1;
this.opacity = 1; this.opacity = 1;
this.color = new Color(); this.color = new Color();
@ -17,30 +16,20 @@ function Brush()
{ {
if(cmd.bang()){ this.pointers = []; } if(cmd.bang()){ this.pointers = []; }
var pointer = new Pointer(); // Pointer
if(cmd.rect() || cmd.position() || cmd.angle()){
this.add_pointer(cmd);
}
if(cmd.position()){ // Global
pointer.offset = cmd.position();
}
if(cmd.rect()){
pointer.mirror = cmd.rect();
}
if(cmd.variable("osc_scale") && cmd.variable("osc_rate")){
pointer.osc_rate = parseFloat(cmd.variable("osc_rate"));
pointer.osc_scale = parseFloat(cmd.variable("osc_scale"));
}
if(cmd.angle()){
pointer.angle = cmd.angle();
}
if(cmd.rect() || cmd.position() || cmd.variable("osc_rate") || cmd.angle()){
this.add_pointer(pointer);
}
if(cmd.color()){ if(cmd.color()){
this.color = cmd.color(); this.color = cmd.color();
} }
if(cmd.value()){ if(cmd.value()){
this.size = cmd.value().float; this.size = cmd.value().float;
} }
this.update_variables(cmd);
} }
this.passive = function(cmd) this.passive = function(cmd)
@ -56,40 +45,82 @@ function Brush()
} }
} }
this.add_pointer = function(pointer) 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.pointers.push(pointer);
} }
// Draw this.widget_cursor = function()
this.draw = function(e)
{ {
if(this.is_drawing === false){return;}
this.position = new Position(e.clientX,e.clientY); var s = "> "+this.size+"<br />";
for (i = 0; i < this.pointers.length; i++) { for (i = 0; i < ronin.brush.pointers.length; i++) {
this.pointers[i].draw(); s += ronin.brush.pointers[i].widget();
} }
return s;
return this.pointers.length > 0 ? "Brush "+this.size+", "+this.pointers.length+" pointers" : "No Pointers";
} }
this.draw_start = function(e) // Cursor
this.is_drawing = false;
this.mouse_down = function(position)
{ {
this.is_drawing = true; this.is_drawing = true;
for (i = 0; i < this.pointers.length; i++) { for (i = 0; i < ronin.brush.pointers.length; i++) {
this.pointers[i].start(); ronin.brush.pointers[i].start();
}
} }
this.draw_stop = function(e) 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; this.is_drawing = false;
for (i = 0; i < this.pointers.length; i++) { for (i = 0; i < ronin.brush.pointers.length; i++) {
this.pointers[i].stop(); ronin.brush.pointers[i].stop();
}
} }
ronin.stroke.save_stroke("brush");
}
} }

137
scripts/modules/brush.pointer.js
View File

@ -6,68 +6,106 @@ function Pointer(offset = new Position(), color = new Color('000000'))
this.angle = null; this.angle = null;
this.distance = 0; this.distance = 0;
this.osc_scale = null; // Parameters
this.osc_rate = null;
this.draw = function()
{
if(!this.position_prev){this.position_prev = this.position(); }
if(ronin.brush.size < 0){ this.erase(); return; }
var position = this.position();
this.distance += position.distance_to(this.position_prev);
// Osc experiment
if(this.osc_rate && this.osc_scale){
// position.x += (Math.sin(this.distance/(25 * this.osc_rate)) * this.osc_scale) - (this.osc_scale/2);
position.y += (Math.sin(this.distance/(25 * this.osc_rate)) * this.osc_scale) - (this.osc_scale/2);
}
ronin.canvas.context().beginPath();
ronin.canvas.context().moveTo(this.position_prev.x,this.position_prev.y);
ronin.canvas.context().lineTo(position.x,position.y);
ronin.canvas.context().lineCap="round";
ronin.canvas.context().lineWidth = this.thickness();
ronin.canvas.context().strokeStyle = ronin.brush.color.rgba();
ronin.canvas.context().stroke();
ronin.canvas.context().closePath();
this.position_prev = position;
}
this.erase = function()
{
ronin.canvas.context().clearRect(this.position().x - (ronin.brush.size/2), this.position().y - (ronin.brush.size/2), ronin.brush.size, ronin.brush.size);
}
this.thickness = function() this.thickness = function()
{ {
var ratio = 10/this.position().distance_to(this.position_prev); var ratio = 10/this.position().distance_to(this.position_prev[0]);
ratio = ratio > 1 ? 1 : ratio; ratio = ratio > 1 ? 1 : ratio;
return ronin.brush.size * 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() this.position = function()
{ {
if(this.angle){ 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 angle_radian = this.angle.degrees * Math.PI / 180;
var deltaX = ronin.brush.position.x - this.offset.x; var deltaX = ronin.cursor.position.x - this.offset.x;
var deltaY = ronin.brush.position.y - this.offset.y; var deltaY = ronin.cursor.position.y - this.offset.y;
var t = Math.atan2(deltaY, deltaX) + angle_radian; var t = Math.atan2(deltaY, deltaX) + angle_radian;
var radius = ronin.brush.position.distance_to(this.offset); var radius = ronin.cursor.position.distance_to(this.offset);
var x = Math.cos(t) * radius; var x = Math.cos(t) * radius;
var y = Math.sin(t) * radius; var y = Math.sin(t) * radius;
return new Position(x + this.offset.x,y + this.offset.y); return new Position(x + this.offset.x,y + this.offset.y);
} }
else if(this.mirror && this.mirror.width > 0){
return new Position((2 * this.mirror.width) - (ronin.brush.position.x + this.offset.x), 0 + (ronin.brush.position.y + this.offset.y));
}
else if(this.mirror && this.mirror.height > 0){
return new Position((ronin.brush.position.x + this.offset.x), (2 * this.mirror.height) - (ronin.brush.position.y + this.offset.y));
}
return new Position(ronin.brush.position.x + this.offset.x, ronin.brush.position.y + this.offset.y);
}
this.start = function() this.start = function()
{ {
@ -77,4 +115,9 @@ function Pointer(offset = new Position(), color = new Color('000000'))
{ {
this.position_prev = null; this.position_prev = null;
} }
this.widget = function()
{
return this.offset.render()+"<br />";
}
} }

49
scripts/modules/canvas.js
View File

@ -1,49 +0,0 @@
function Canvas(element)
{
Module.call(this);
this.parameters = [Rect,Color,Bang];
this.element = element;
this.active = function(cmd)
{
if(cmd.bang()){ this.clear(); }
if(cmd.rect()){
this.resize(cmd.rect());
ronin.overlay.resize(cmd.rect());
}
if(cmd.color()){
this.context().beginPath();
this.context().rect(0, 0, this.element.width, this.element.height);
this.context().fillStyle = cmd.color().hex;
this.context().fill();
}
}
this.passive = function(cmd)
{
if(cmd.rect()){
ronin.overlay.show_guide(null,cmd.rect());
}
}
//
this.resize = function(rect)
{
this.element.setAttribute('width',rect.width+"px");
this.element.setAttribute('height',rect.height+"px");
}
this.context = function()
{
return this.element.getContext('2d');
}
this.clear = function()
{
this.context().clearRect(0, 0, this.element.width, this.element.height);
}
}

79
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
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);
}
}

25
scripts/modules/file.js → scripts/modules/file.load.js
View File

@ -1,14 +1,11 @@
function File() function FileLoad(rune)
{ {
Module.call(this); Module.call(this,rune);
this.parameters = [Filepath,Position,Rect,Bang]; this.parameters = [Filepath,Position,Rect];
this.storage = [];
this.active = function(cmd) this.active = function(cmd)
{ {
if(cmd.bang()){ this.storage = []; }
ronin.overlay.clear(); ronin.overlay.clear();
if(!cmd.filepath() && !cmd.value()){ return; } if(!cmd.filepath() && !cmd.value()){ return; }
@ -16,7 +13,7 @@ function File()
var position = cmd.position() ? cmd.position() : new Position(); var position = cmd.position() ? cmd.position() : new Position();
base_image = new Image(); base_image = new Image();
base_image.src = cmd.value() && this.storage[cmd.value().int] ? this.storage[cmd.value().int] : cmd.filepath().path; base_image.src = cmd.filepath().path;
base_image.src += '?' + new Date().getTime(); base_image.src += '?' + new Date().getTime();
base_image.crossOrigin = "Anonymous"; base_image.crossOrigin = "Anonymous";
@ -32,7 +29,7 @@ function File()
width = isNaN(width) && height > 0 ? (height*base_image.naturalWidth)/base_image.naturalHeight : width; 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; height = isNaN(height) && width > 0 ? (width*base_image.naturalHeight)/base_image.naturalWidth : height;
ronin.canvas.context().drawImage(base_image, position.x, position.y, width, height); ronin.surface.context().drawImage(base_image, position.x, position.y, width, height);
} }
} }
@ -49,16 +46,4 @@ function File()
ronin.overlay.draw(position); ronin.overlay.draw(position);
} }
} }
this.save = function(cmd)
{
if(cmd.value() && cmd.value().int > 0){
this.storage[cmd.value().int] = ronin.canvas.element.toDataURL("image/png");
}
else{
var d = ronin.canvas.element.toDataURL("image/png");
var w = window.open('about:blank','image from canvas');
w.document.write("<title>"+(cmd.content[0] ? cmd.content[0] : "Untitled")+"</title><img src='"+d+"' alt='from canvas'/>");
}
}
} }

22
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)
{
}
}

121
scripts/modules/filter.js
View File

@ -1,121 +0,0 @@
function Filter(element)
{
Module.call(this);
this.parameters = [Text,Value];
this.active = function(cmd)
{
if(cmd.content.length < 1){ return; }
var p = cmd.content;
var filter_name = p[0];
p.shift();
switch(filter_name) {
case "saturation":
this.filter_saturation(this.pixels(),p);
break;
case "chromatic":
this.filter_chromatic(this.pixels(),p);
break;
}
}
this.passive = function(cmd)
{
}
// Filters
this.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.canvas.context().putImageData(pixels, 0, 0, 0, 0, pixels.width, pixels.height);
}
this.filter_chromatic = function(pixels = this.pixels(),p = null)
{
var s;
if(p.length == 0)
s = {r:2,g:2,b:2};
else if(p.length < 3)
s = {r:parseFloat(p[0]), g:parseFloat(p[0])*.5, b:0};
else
s = {r:parseFloat(p[0]), g:parseFloat(p[1]), b:parseFloat(p[2])};
var hw = pixels.width*.5;
var hh = pixels.height*.5;
var maxLength = Math.sqrt(hw*hw+hh*hh);
var output = new ImageData(pixels.width, pixels.height);
for (var i=0; i<pixels.width; i++) {
for(var j=0; j<pixels.height; j++){
var x = i-hw;
var y = j-hh;
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+hw;
y = Math.sin(a)*f+hh;
var r = this.get_color_bilinear(pixels, x, y);
f = (d-s.g*d/maxLength);
x = Math.cos(a)*f+hw;
y = Math.sin(a)*f+hh;
var g = this.get_color_bilinear(pixels, x, y);
f = (d-s.b*d/maxLength);
x = Math.cos(a)*f+hw;
y = Math.sin(a)*f+hh;
var b = this.get_color_bilinear(pixels, 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(output, c, i,j);
}
}
ronin.canvas.clear();
ronin.canvas.context().putImageData(output, 0, 0, 0, 0, pixels.width, pixels.height);
}
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.pixels = function()
{
return ronin.canvas.context().getImageData(0,0,ronin.canvas.element.width,ronin.canvas.element.height);
}
}

80
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;
}
}

32
scripts/modules/hint.js
View File

@ -1,32 +0,0 @@
function Hint(element)
{
Module.call(this);
this.element = element;
this.update = function()
{
if(ronin.module){
this.element.innerHTML = this.message(ronin.module,commander.cmd);
this.element.style.display = "block";
}
else{
this.element.style.display = "none";
}
}
this.message = function(module,cmd)
{
var s = "<span class='module'>"+module.constructor.name+"</span>";
var e = 0;
while(e < 10){
if(!module.parameters[e]){ break; }
var param_name = module.parameters[e].name;
s += cmd[param_name.toLowerCase()]() ? "<span class='value'>"+cmd[param_name.toLowerCase()]().render()+"</span>" : "<span class='param'>"+param_name+"</span>";
e += 1;
}
return s;
}
}

30
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
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)
{
}
}

75
scripts/modules/overlay.js
View File

@ -1,9 +1,8 @@
function Overlay(element) function Overlay(rune)
{ {
Module.call(this); Module.call(this,rune);
this.parameters = [Position,Rect]; this.parameters = [Position,Rect];
this.element = element;
// Module // Module
@ -23,7 +22,7 @@ function Overlay(element)
{ {
this.clear(); this.clear();
if(!position){ return; } if(!position){ position = new Position("0,0"); }
if(rect){ if(rect){
this.draw_rect(position,rect); this.draw_rect(position,rect);
@ -104,26 +103,11 @@ function Overlay(element)
this.resize = function(rect) this.resize = function(rect)
{ {
this.element.setAttribute('width',rect.width+"px"); this.element.width = rect.width * 2;
this.element.setAttribute('height',rect.height+"px"); this.element.height = rect.height * 2;
} this.element.style.width = rect.width+"px";
this.element.style.height = rect.height+"px";
this.show_guide = function(position,rect) this.context().scale(2,2);
{
this.clear();
this.context().beginPath();
this.context().moveTo(0,0);
this.context().lineTo(rect.width,0);
this.context().lineTo(rect.width,rect.height);
this.context().lineTo(0,rect.height);
this.context().lineTo(0,0);
this.context().lineCap="round";
this.context().lineWidth = 1;
this.context().strokeStyle = "#ff0000";
this.context().stroke();
this.context().closePath();
} }
this.context = function() this.context = function()
@ -133,6 +117,47 @@ function Overlay(element)
this.clear = function() this.clear = function()
{ {
this.context().clearRect(0, 0, ronin.canvas.element.width, ronin.canvas.element.height); 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
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);
}
}

63
scripts/modules/stroke.js
View File

@ -1,9 +1,33 @@
function Stroke(element) function Stroke(rune)
{ {
Module.call(this); Module.call(this,rune);
this.parameters = [Any]; 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 // Module
this.passive = function(cmd) this.passive = function(cmd)
@ -12,23 +36,26 @@ function Stroke(element)
this.active = function(cmd) this.active = function(cmd)
{ {
// TODO 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;
}
}
var origin = new Position(cmd.content[0]); this.draw = function(pos1,pos2)
var destination = new Position(cmd.content[1]); {
ronin.surface.context().beginPath();
var e = {}; ronin.surface.context().moveTo(pos1.x,pos1.y);
e.clientX = origin.x; ronin.surface.context().lineTo(pos2.x,pos2.y);
e.clientY = origin.y; ronin.surface.context().lineCap="round";
ronin.surface.context().lineWidth = 10;
ronin.brush.is_drawing = true; ronin.surface.context().strokeStyle = ronin.brush.color.rgba();
ronin.brush.draw(e); ronin.surface.context().stroke();
ronin.surface.context().closePath();
e.clientX = destination.x;
e.clientY = destination.y;
ronin.brush.draw(e);
ronin.brush.is_drawing = false;
} }
} }

187
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
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
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);
}
}

12
scripts/modules/vector.js
View File

@ -1,6 +1,6 @@
function Vector() function Vector(rune)
{ {
Module.call(this); Module.call(this,rune);
this.parameters = [Any,Position]; this.parameters = [Any,Position];
@ -18,10 +18,10 @@ function Vector()
this.active = function(cmd) this.active = function(cmd)
{ {
ronin.overlay.clear(); ronin.overlay.clear();
ronin.canvas.context().lineCap="round"; ronin.surface.context().lineCap="round";
ronin.canvas.context().lineWidth = ronin.brush.size; ronin.surface.context().lineWidth = ronin.brush.size;
ronin.canvas.context().strokeStyle = ronin.brush.color.rgba(); ronin.surface.context().strokeStyle = ronin.brush.color.rgba();
ronin.canvas.context().stroke(new Path2D(cmd.content.join(" "))); 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 // + 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

11
scripts/ronin.js
View File

@ -1,11 +0,0 @@
function Ronin()
{
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();
}

7
scripts/unit.js
View File

@ -1,7 +0,0 @@
function Unit()
{
this.render = function()
{
return "HEY!";
}
}

4
scripts/units/angle.js
View File

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

1
scripts/units/any.js
View File

@ -2,6 +2,7 @@ function Any(str)
{ {
Unit.call(this); Unit.call(this);
this.example = "";
this.string = str; this.string = str;
this.render = function() this.render = function()

2
scripts/units/bang.js
View File

@ -2,6 +2,8 @@ function Bang()
{ {
Unit.call(this); Unit.call(this);
this.example = "";
this.render = function() this.render = function()
{ {
return "BANG"; return "BANG";

6
scripts/units/color.js
View File

@ -2,6 +2,7 @@ function Color(hex = '#000000')
{ {
Unit.call(this); Unit.call(this);
this.example = "#ff0000";
this.hex = hex; this.hex = hex;
this.rgb = function() this.rgb = function()
@ -23,4 +24,9 @@ function Color(hex = '#000000')
{ {
return this.hex; 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);
}
} }

1
scripts/units/filepath.js
View File

@ -2,6 +2,7 @@ function Filepath(path_str)
{ {
Unit.call(this); Unit.call(this);
this.example = "assets/demo.png";
this.path = path_str; this.path = path_str;
this.render = function() this.render = function()

10
scripts/units/position.js
View File

@ -2,10 +2,16 @@ function Position(position_str = "0,0",y = null)
{ {
Unit.call(this); Unit.call(this);
this.example = "100,150";
this.position_str = position_str; this.position_str = position_str;
this.x = y ? position_str : parseFloat(this.position_str.split(",")[0]); this.x = y != null ? position_str : parseFloat(this.position_str.split(",")[0]);
this.y = y ? y : parseFloat(this.position_str.split(",")[1]); 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) this.is_equal = function(target)
{ {

15
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;
}
}

5
scripts/units/rect.js
View File

@ -2,10 +2,11 @@ function Rect(rect_str)
{ {
Unit.call(this); Unit.call(this);
this.example = "200x300";
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()
{ {

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

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

1
scripts/units/value.js
View File

@ -2,6 +2,7 @@ function Value(value_str)
{ {
Unit.call(this); Unit.call(this);
this.example = "20";
this.value = value_str; this.value = value_str;
this.float = parseFloat(this.value); this.float = parseFloat(this.value);
this.int = parseInt(this.value); this.int = parseInt(this.value);

16
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;
}
}