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

Added some basic pixel filters

Browse Source
This commit is contained in:
Devine Lu Linvega 2019-07-27 17:28:10 +09:00
parent 98e4e5a825
commit 26f77727f3
2 changed files with 26 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
README.md
View File

@ -70,9 +70,12 @@ Ronin helpers are keywords that facilitates adding coordinates from the canvas i
- `(clone a b)` - `(clone a b)`
- `(drag ~rect)` - `(drag ~rect)`
- `(theme variable ~el)` - `(theme variable ~el)`
- `(pixels rect fn q)` - `(pixels rect fn ~q)`
- `(saturation pixel ~q)` - `(saturation pixel q)` Change the saturation of pixels.
- `(contrast pixel ~q)` - `(contrast pixel q)` Change the contrast of pixels.
- `(brightness pixel q)` Change the brightness of pixels.
- `(condense pixel q)` Condense the data of pixels.
- `(balance pixel q)` Change the color balance of pixels.
- `(concat ...items)` Concat multiple strings. - `(concat ...items)` Concat multiple strings.
- `(add ...args)` Adds values. - `(add ...args)` Adds values.
- `(sub ...args)` Subtracts values. - `(sub ...args)` Subtracts values.

27
desktop/sources/scripts/library.js
View File

@ -172,30 +172,43 @@ function Library (ronin) {
// Pixels // Pixels
this.pixels = (rect, fn, q) => { this.pixels = (rect, fn, q = 1) => {
const img = ronin.surface.context.getImageData(rect.x, rect.y, rect.w, rect.h) 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) { for (let i = 0, loop = img.data.length; i < loop; i += 4) {
const pixel = { r: img.data[i], g: img.data[i + 1], b: img.data[i + 2], a: img.data[i + 3] } const pixel = { r: img.data[i], g: img.data[i + 1], b: img.data[i + 2], a: img.data[i + 3] }
const processed = fn(pixel, q) const processed = fn(pixel, q)
img.data[i] = processed[0] img.data[i] = this.clamp(parseInt(processed[0]), 0, 255)
img.data[i + 1] = processed[1] img.data[i + 1] = this.clamp(parseInt(processed[1]), 0, 255)
img.data[i + 2] = processed[2] img.data[i + 2] = this.clamp(parseInt(processed[2]), 0, 255)
img.data[i + 3] = processed[3] img.data[i + 3] = this.clamp(parseInt(processed[3]), 0, 255)
} }
ronin.surface.context.putImageData(img, rect.x, rect.y) ronin.surface.context.putImageData(img, rect.x, rect.y)
return rect return rect
} }
this.saturation = (pixel, q = 1) => { this.saturation = (pixel, q) => { // Change the saturation of pixels.
const color = 0.2126 * pixel.r + 0.7152 * pixel.g + 0.0722 * pixel.b const color = 0.2126 * pixel.r + 0.7152 * pixel.g + 0.0722 * pixel.b
return [(color * (1 - q)) + (pixel.r * q), (color * (1 - q)) + (pixel.g * q), (color * (1 - q)) + (pixel.b * q), pixel.a] return [(color * (1 - q)) + (pixel.r * q), (color * (1 - q)) + (pixel.g * q), (color * (1 - q)) + (pixel.b * q), pixel.a]
} }
this.contrast = (pixel, q = 1) => { this.contrast = (pixel, q) => { // Change the contrast of pixels.
const intercept = 128 * (1 - q) const intercept = 128 * (1 - q)
return [pixel.r * q + intercept, pixel.g * q + intercept, pixel.b * q + intercept, pixel.a] return [pixel.r * q + intercept, pixel.g * q + intercept, pixel.b * q + intercept, pixel.a]
} }
this.brightness = (pixel, q) => { // Change the brightness of pixels.
const range = 255 - -q
return [((pixel.r / 255) * range), ((pixel.g / 255) * range), ((pixel.b / 255) * range), pixel.a]
}
this.condense = (pixel, q) => { // Condense the data of pixels.
return [pixel.r + q, pixel.g + q, pixel.b + q, pixel.a]
}
this.balance = (pixel, q) => { // Change the color balance of pixels.
return [pixel.r * q[0], pixel.g * q[1], pixel.b * q[2], pixel.a]
}
// Strings // Strings
this.concat = function (...items) { // Concat multiple strings. this.concat = function (...items) { // Concat multiple strings.