StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Well, You could do a little hack. Create a color gradient -<img src="https://i.stack.imgur.com/GZ1By.png" alt="enter image description here"></p> <p>like this. and then add any Instagram filter upon it. Now that you have the image, you can just subtract the values from the grayscale values you already have. Plotting the rgb values on a curve adjuster would give you exactly the adjustments made. One of them are like this:</p> <pre><code>$r=[48,57,65,72,79,86,91,96,104,109,115,122,132,143,154]; $g=[10,20,34,52,73,94,117,139,157,172,192,204,214,223,229]; $b=[41,34,87,115,139,163,185,204,219,230,238,244,247,250,252]; </code></pre> <p>Sometimes effects are also achieved by multiplying a given existing image upon the original image. Look at the Additional Tips: <a href="http://docs.rainmeter.net/tips/colormatrix-guide" rel="nofollow noreferrer">http://docs.rainmeter.net/tips/colormatrix-guide</a> Now if you want to create effects on images. The concept goes like this. Take every pixel of an image, and then make some numerical manipulations on the pixels and then put them in a blank canvas in the same order of the original image.</p> <p>So lets say you have an image</p> <pre><code>+++++++++++++ |100| 80| 70| | 50| 30| 60| +++++++++++++ </code></pre> <p>For the sake of simplicity lets assume that each numbers represent a RGB value where R = G = B, so for <code>image[0][0]</code> <code>R=G=B=100</code> </p> <p>Now lets say you want to make a Grayscale image from the above. So for grayscale the formula is <code>x = 0.299r + 0.587g + 0.114b</code> (generally you can tweak the value) .. So you apply the math, get the value of <code>x</code> and substitute them. (For grayscale image R and G and B have same values).</p> <p>So in the end you new image becomes:</p> <pre><code>+++++++++++++ | x0| x1| x2| | x3| x4| x5| +++++++++++++ </code></pre> <p>Similarly for sepia, there is some formula to calculate the values of <code>r</code>, <code>g</code>, <code>b</code></p> <p>Sometimes you want to add a gaussian blur or maybe overlay images. These are all pixel manipulation. See the formula's for blend modes <a href="https://en.wikipedia.org/wiki/Blend_modes" rel="nofollow noreferrer">here</a></p> <p>I have worked on something similar year or two ago. <a href="https://github.com/argentum47/java_image_filter" rel="nofollow noreferrer">Java image applet</a> and in [javascript as well] (<a href="https://github.com/argentum47/JustBnW" rel="nofollow noreferrer">https://github.com/argentum47/JustBnW</a>)</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload