effects.js 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337
  1. import { NativeDynamicBlurEffect } from '../effects/native_dynamic_gaussian_blur.js';
  2. import { NativeStaticBlurEffect } from '../effects/native_static_gaussian_blur.js';
  3. import { GaussianBlurEffect } from '../effects/gaussian_blur.js';
  4. import { MonteCarloBlurEffect } from '../effects/monte_carlo_blur.js';
  5. import { ColorEffect } from '../effects/color.js';
  6. import { NoiseEffect } from '../effects/noise.js';
  7. import { CornerEffect } from '../effects/corner.js';
  8. import { DownscaleEffect } from './downscale.js';
  9. import { UpscaleEffect } from './upscale.js';
  10. import { PixelizeEffect } from './pixelize.js';
  11. import { DerivativeEffect } from './derivative.js';
  12. import { RgbToHslEffect } from './rgb_to_hsl.js';
  13. import { HslToRgbEffect } from './hsl_to_rgb.js';
  14. // We do in this way because I've not found another way to store our preferences in a dictionnary
  15. // while calling `gettext` on it while in preferences. Not so pretty, but works.
  16. export function get_effects_groups(_ = _ => "") {
  17. return {
  18. blur_effects: {
  19. name: _("Blur effects"),
  20. contains: [
  21. "native_static_gaussian_blur",
  22. "gaussian_blur",
  23. "monte_carlo_blur"
  24. ]
  25. },
  26. texture_effects: {
  27. name: _("Texture effects"),
  28. contains: [
  29. "downscale",
  30. "upscale",
  31. "pixelize",
  32. "derivative",
  33. "noise",
  34. "color",
  35. "rgb_to_hsl",
  36. "hsl_to_rgb"
  37. ]
  38. },
  39. shape_effects: {
  40. name: _("Shape effects"),
  41. contains: [
  42. "corner"
  43. ]
  44. }
  45. };
  46. };
  47. export function get_supported_effects(_ = () => "") {
  48. return {
  49. native_dynamic_gaussian_blur: {
  50. class: NativeDynamicBlurEffect
  51. },
  52. native_static_gaussian_blur: {
  53. class: NativeStaticBlurEffect,
  54. name: _("Native gaussian blur"),
  55. description: _("An optimized blur effect that smoothly blends pixels within a given radius."),
  56. is_advanced: false,
  57. editable_params: {
  58. unscaled_radius: {
  59. name: _("Radius"),
  60. description: _("The intensity of the blur effect."),
  61. type: "float",
  62. min: 0.,
  63. max: 100.,
  64. increment: 1.0,
  65. big_increment: 10.,
  66. digits: 0
  67. },
  68. brightness: {
  69. name: _("Brightness"),
  70. description: _("The brightness of the blur effect, a high value might make the text harder to read."),
  71. type: "float",
  72. min: 0.,
  73. max: 1.,
  74. increment: 0.01,
  75. big_increment: 0.1,
  76. digits: 2
  77. },
  78. }
  79. },
  80. gaussian_blur: {
  81. class: GaussianBlurEffect,
  82. name: _("Gaussian blur (advanced effect)"),
  83. description: _("A blur effect that smoothly blends pixels within a given radius. This effect is more precise, but way less optimized."),
  84. is_advanced: true,
  85. editable_params: {
  86. radius: {
  87. name: _("Radius"),
  88. description: _("The intensity of the blur effect. The bigger it is, the slower it will be."),
  89. type: "float",
  90. min: 0.,
  91. max: 100.,
  92. increment: .1,
  93. big_increment: 10.,
  94. digits: 1
  95. },
  96. brightness: {
  97. name: _("Brightness"),
  98. description: _("The brightness of the blur effect, a high value might make the text harder to read."),
  99. type: "float",
  100. min: 0.,
  101. max: 1.,
  102. increment: 0.01,
  103. big_increment: 0.1,
  104. digits: 2
  105. },
  106. }
  107. },
  108. monte_carlo_blur: {
  109. class: MonteCarloBlurEffect,
  110. name: _("Monte Carlo blur"),
  111. description: _("A blur effect that mimics a random walk, by picking pixels further and further away from its origin and mixing them all together."),
  112. is_advanced: false,
  113. editable_params: {
  114. radius: {
  115. name: _("Radius"),
  116. description: _("The maximum travel distance for each step in the random walk. A higher value will make the blur more randomized."),
  117. type: "float",
  118. min: 0.,
  119. max: 10.,
  120. increment: 0.01,
  121. big_increment: 0.1,
  122. digits: 2
  123. },
  124. iterations: {
  125. name: _("Iterations"),
  126. description: _("The number of iterations. The more there are, the smoother the blur is."),
  127. type: "integer",
  128. min: 0,
  129. max: 50,
  130. increment: 1
  131. },
  132. brightness: {
  133. name: _("Brightness"),
  134. description: _("The brightness of the blur effect, a high value might make the text harder to read."),
  135. type: "float",
  136. min: 0.,
  137. max: 1.,
  138. increment: 0.01,
  139. big_increment: 0.1,
  140. digits: 2
  141. },
  142. use_base_pixel: {
  143. name: _("Use base pixel"),
  144. description: _("Whether or not the original pixel is counted for the blur. If it is, the image will be more legible."),
  145. type: "boolean"
  146. },
  147. prefer_closer_pixels: {
  148. name: _("Prefer closer pixels"),
  149. description: _("Whether or not the pixels that are closer to the original pixel will have more weight."),
  150. type: "boolean"
  151. }
  152. }
  153. },
  154. color: {
  155. class: ColorEffect,
  156. name: _("Color"),
  157. description: _("An effect that blends a color into the pipeline."),
  158. is_advanced: false,
  159. // TODO make this RGB + blend
  160. editable_params: {
  161. color: {
  162. name: _("Color"),
  163. description: _("The color to blend in. The blending amount is controled by the opacity of the color."),
  164. type: "rgba"
  165. }
  166. }
  167. },
  168. pixelize: {
  169. class: PixelizeEffect,
  170. name: _("Pixelize"),
  171. description: _("An effect that pixelizes the image."),
  172. is_advanced: false,
  173. editable_params: {
  174. factor: {
  175. name: _("Factor"),
  176. description: _("How much to scale down the image."),
  177. type: "integer",
  178. min: 1,
  179. max: 50,
  180. increment: 1
  181. },
  182. downsampling_mode: {
  183. name: _("Downsampling mode"),
  184. description: _("The downsampling method that is used."),
  185. type: "dropdown",
  186. options: [
  187. _("Boxcar"),
  188. _("Triangular"),
  189. _("Dirac")
  190. ]
  191. }
  192. }
  193. },
  194. downscale: {
  195. class: DownscaleEffect,
  196. name: _("Downscale (advanced effect)"),
  197. description: _("An effect that downscales the image and put it on the top-left corner."),
  198. is_advanced: true,
  199. editable_params: {
  200. divider: {
  201. name: _("Factor"),
  202. description: _("How much to scale down the image."),
  203. type: "integer",
  204. min: 1,
  205. max: 50,
  206. increment: 1
  207. },
  208. downsampling_mode: {
  209. name: _("Downsampling mode"),
  210. description: _("The downsampling method that is used."),
  211. type: "dropdown",
  212. options: [
  213. _("Boxcar"),
  214. _("Triangular"),
  215. _("Dirac")
  216. ]
  217. }
  218. }
  219. },
  220. upscale: {
  221. class: UpscaleEffect,
  222. name: _("Upscale (advanced effect)"),
  223. description: _("An effect that upscales the image from the top-left corner."),
  224. is_advanced: true,
  225. editable_params: {
  226. factor: {
  227. name: _("Factor"),
  228. description: _("How much to scale up the image."),
  229. type: "integer",
  230. min: 1,
  231. max: 50,
  232. increment: 1
  233. }
  234. }
  235. },
  236. derivative: {
  237. class: DerivativeEffect,
  238. name: _("Derivative"),
  239. description: _("Apply a spatial derivative, or a laplacian."),
  240. is_advanced: false,
  241. editable_params: {
  242. operation: {
  243. name: _("Operation"),
  244. description: _("The mathematical operation to apply."),
  245. type: "dropdown",
  246. options: [
  247. _("1-step derivative"),
  248. _("2-step derivative"),
  249. _("Laplacian")
  250. ]
  251. }
  252. }
  253. },
  254. noise: {
  255. class: NoiseEffect,
  256. name: _("Noise"),
  257. description: _("An effect that adds a random noise. Prefer the Monte Carlo blur for a more organic effect if needed."),
  258. is_advanced: false,
  259. editable_params: {
  260. noise: {
  261. name: _("Noise"),
  262. description: _("The amount of noise to add."),
  263. type: "float",
  264. min: 0.,
  265. max: 1.,
  266. increment: 0.01,
  267. big_increment: 0.1,
  268. digits: 2
  269. },
  270. lightness: {
  271. name: _("Lightness"),
  272. description: _("The luminosity of the noise. A setting of '1.0' will make the effect transparent."),
  273. type: "float",
  274. min: 0.,
  275. max: 2.,
  276. increment: 0.01,
  277. big_increment: 0.1,
  278. digits: 2
  279. }
  280. }
  281. },
  282. rgb_to_hsl: {
  283. class: RgbToHslEffect,
  284. name: _("RGB to HSL (advanced effect)"),
  285. description: _("Converts the image from RGBA colorspace to HSLA."),
  286. is_advanced: true,
  287. editable_params: {}
  288. },
  289. hsl_to_rgb: {
  290. class: HslToRgbEffect,
  291. name: _("HSL to RGB (advanced effect)"),
  292. description: _("Converts the image from HSLA colorspace to RGBA."),
  293. is_advanced: true,
  294. editable_params: {}
  295. },
  296. corner: {
  297. class: CornerEffect,
  298. name: _("Corner"),
  299. description: _("An effect that draws corners. Add it last not to have the other effects perturb the corners."),
  300. is_advanced: false,
  301. editable_params: {
  302. radius: {
  303. name: _("Radius"),
  304. description: _("The radius of the corner. GNOME apps use a radius of 12 px by default."),
  305. type: "integer",
  306. min: 0,
  307. max: 50,
  308. increment: 1,
  309. },
  310. corners_top: {
  311. name: _("Top corners"),
  312. description: _("Whether or not to round the top corners."),
  313. type: "boolean"
  314. },
  315. corners_bottom: {
  316. name: _("Bottom corners"),
  317. description: _("Whether or not to round the bottom corners."),
  318. type: "boolean"
  319. }
  320. }
  321. }
  322. };
  323. };