From 550784be54772b33fe3562d2014c251b016442b3 Mon Sep 17 00:00:00 2001 From: Devine Lu Linvega Date: Tue, 30 Jul 2019 16:09:01 +0900 Subject: [PATCH] Changed the pixels and convolve param order --- README.md | 8 ++++---- WORKSHOP.md | 15 ++++++--------- desktop/main.js | 2 +- desktop/sources/scripts/library.js | 8 ++++---- desktop/sources/scripts/surface.js | 2 +- 5 files changed, 16 insertions(+), 19 deletions(-) diff --git a/README.md b/README.md index 96dafb6..b232f6c 100644 --- a/README.md +++ b/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)` diff --git a/WORKSHOP.md b/WORKSHOP.md index 2d50dab..35aa200 100644 --- a/WORKSHOP.md +++ b/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 - (rect 100 100 200 200) saturation 10) +(pixels 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 - (frame) saturation 0.5) +(pixels 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 - (frame) sharpen) +(convolve sharpen $rect) ``` 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 - (frame) blur) +(convolve blur) ``` ## Events diff --git a/desktop/main.js b/desktop/main.js index 9d04d15..16eb20f 100644 --- a/desktop/main.js +++ b/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() diff --git a/desktop/sources/scripts/library.js b/desktop/sources/scripts/library.js index 5e35cf6..9a60fa2 100644 --- a/desktop/sources/scripts/library.js +++ b/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) diff --git a/desktop/sources/scripts/surface.js b/desktop/sources/scripts/surface.js index 14a1cf7..0445146 100644 --- a/desktop/sources/scripts/surface.js +++ b/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')