Changed the pixels and convolve param order

README.md

@@ -53,7 +53,7 @@ Ronin helpers are keywords that facilitates adding coordinates from the canvas i
 - `(size w h)` Returns a size shape.
 - `(rect x y w h)` Returns a rect shape.
 - `(circle cx cy r)` Returns a circle shape.
-- `(ellipse cx cy rx ry)` Returns an ellipse shape.
+- `(ellipse cx cy rx ry)` Returns a ellipse shape.
 - `(line ax ay bx by)` Returns a line shape.
 - `(text x y p t ~a ~f)` Returns a text shape.
 - `(svg x y d)` Returns a svg shape.
@@ -74,9 +74,9 @@ Ronin helpers are keywords that facilitates adding coordinates from the canvas i
 - `(clone a b)` 
 - `(drag ~rect)` Drag a part of the canvas.
 - `(view a b)` View a part of the canvas.
-- `(pick shape)` Returns the color of a pixel at pos, or of the average of the pixels in rect.
+- `(pick ~shape)` Returns the color of a pixel at pos, or of the average of the pixels in rect.
 - `(theme variable ~el)` 
-- `(pixels rect fn ~q)` 
+- `(pixels fn ~q ~rect)` 
 - `(saturation pixel q)` Change the saturation of pixels.
 - `(contrast pixel q)` Change the contrast of pixels.
 - `(brightness pixel q)` Change the brightness of pixels.
@@ -125,7 +125,7 @@ Ronin helpers are keywords that facilitates adding coordinates from the canvas i
 - `(of h ...keys)` Gets object parameters with names.
 - `(keys item)` Returns a list of the object's keys
 - `(values item)` Returns a list of the object's values
-- `(convolve rect kernel)` 
+- `(convolve kernel ~rect)` 
 - `(blur)` 
 - `(sharpen)` 
 - `(edge)` 

WORKSHOP.md

@@ -145,18 +145,17 @@ First let's open an image, ideally one in color, and change every pixel of a sel
 
 ```lisp
 (open $path)
-(pixels 
+(pixels saturation 10 
-  (rect 100 100 200 200) saturation 10)
+  (rect 100 100 200 200))
 ```
 
 ### saturation
 
-In the previous example, we increased the saturation of a region of the image, to desaturate an entire image, you can first use `(frame)` which will select the entire canvas, and set the pixel filter to `saturation` and the value to `0.5`(50% saturation):
+In the previous example, we increased the saturation of a region of the image, to desaturate an entire image, you can simply omit the  `(frame)` which will select the entire canvas, and set the pixel filter to `saturation` and the value to `0.5`(50% saturation):
 
 ```lisp
 (open $path)
-(pixels 
+(pixels saturation 0.5)
-  (frame) saturation 0.5)
 ```
 
 ### convolve
@@ -167,8 +166,7 @@ Effects which use the surrounding pixels, or convolution matrix, are used with t
 
 ```lisp
 (open $path)
-(convolve 
+(convolve sharpen $rect)
-  (frame) sharpen)
 ```
 
 Custom convolve kernels can also be created like this:
@@ -180,8 +178,7 @@ Custom convolve kernels can also be created like this:
     (-1 -1 -1) 
     (-1 5 -1) 
     (-1 -1 -1)))
-(convolve 
+(convolve blur)
-  (frame) blur)
 ```
 
 ## Events

desktop/main.js

@@ -22,7 +22,7 @@ app.on('ready', () => {
     webPreferences: { zoomFactor: 1.0, nodeIntegration: true, backgroundThrottling: false }
   })
 
-  app.win.webContents.removeAllListeners('devtools-reload-page');
+  app.win.webContents.removeAllListeners('devtools-reload-page')
 
   app.win.loadURL(`file://${__dirname}/sources/index.html`)
   // app.inspect()

desktop/sources/scripts/library.js

@@ -191,7 +191,7 @@ function Library (ronin) {
     ronin.surface.context.drawImage(ronin.surface.getCrop(a), b.x, b.y, b.w, b.h)
   }
 
-  this.pick = (shape) => { // Returns the color of a pixel at pos, or of the average of the pixels in rect.
+  this.pick = (shape = this.frame()) => { // Returns the color of a pixel at pos, or of the average of the pixels in rect.
     const rect = shape.w && shape.h ? shape : this.rect(shape.x, shape.y, 1, 1)
     const img = ronin.surface.context.getImageData(rect.x, rect.y, rect.w, rect.h)
     const sum = [0, 0, 0]
@@ -211,7 +211,7 @@ function Library (ronin) {
 
   // Pixels
 
-  this.pixels = (rect, fn, q = 1) => {
+  this.pixels = (fn, q = 1, rect = this.frame()) => {
     if (!fn) { console.warn('Unknown function'); return rect }
     const img = ronin.surface.context.getImageData(rect.x, rect.y, rect.w, rect.h)
     for (let i = 0, loop = img.data.length; i < loop; i += 4) {
@@ -382,7 +382,7 @@ function Library (ronin) {
   }
 
   this.map = (arr, fn) => { // Run a function on each element in a list.
-    return Promise.all(arr.map(fn)).then( result => { return result } )
+    return Promise.all(arr.map(fn)).then(result => { return result })
   }
 
   this.filter = (arr, fn) => { // Remove from list, when function returns false.
@@ -465,7 +465,7 @@ function Library (ronin) {
 
   // Convolve
 
-  this.convolve = (rect, kernel) => {
+  this.convolve = (kernel, rect = this.frame()) => {
     const sigma = kernel.flat().reduce((a, x) => (a + x))
     const kw = kernel[0].length; const kh = kernel.length
     const img = ronin.surface.context.getImageData(rect.x, rect.y, rect.w, rect.h)

desktop/sources/scripts/surface.js

@@ -3,7 +3,7 @@ function Surface (ronin) {
   this.el.id = 'surface'
   this._guide = document.createElement('canvas')
   this._guide.id = 'guide'
-  this._guide.setAttribute('tabindex', '1'); // focus is necessary to capture keyboard events
+  this._guide.setAttribute('tabindex', '1') // focus is necessary to capture keyboard events
   this.ratio = window.devicePixelRatio
   // Contexts
   this.context = this.el.getContext('2d')