Has anyone used the photo filter in Photoshop? Edit > Adjustments > Photo Filter...
It produces a really nice image tint that I've been unable to reproduce with blending modes. Has anyone got any idea of the pixel maths behind this filter? - So I can build a shader based on it.
It seems to basically be a luminosity preserving colour tint.
Has variables: Color, Amount and Preserve Luminosity.
Any ideas?
Filters (in light) are multiplicative, as in:
red_filter = ( 1 , 0 , 0 ) * color
I don't think any blend-modes exist for it, since any transparent overlay with that system would darken the image to some degree.
It's incredibly simple, but if anyone wants the hlsl code for this:
// Photoshop PhotoFilter style effect.
// Input filter color.
float4 FilterColor;
// Implicit texture sampler.
sampler TextureSampler : register(s0);
float4 PhotoFilter(float4 color : COLOR0, float2 texCoord : TEXCOORD0) : COLOR0
{
return tex2D(TextureSampler, texCoord) * FilterColor;
}
technique GeneralEffect
{
pass Pass1
{
PixelShader = compile ps_2_0 PhotoFilter();
}
}
Related
it's been years since I coded anything, and now I need to pick up p5.js. As practice I was trying to make a simple drawing program - I want my program to draw in black by default, and switch the color to red when I click on the red rectangle in the corner of the screen. I had the following very sloppy code (I know the mouse-press doesn't exactly line up with the red rectangle, the 'drawing' mechanism isn't the best, etc. I'm just messing around with it atm)
function setup() {
createCanvas(600, 600);
fill ('red');
rect(570,20,5,5);
//creates red rectangle at top right corner of screen
}
var color = 0;
function mousePressed(){
if ( mouseX > 570) {
if( mouseY > 20){
color = 4;
ellipse (10,20,50,50);
}
}
}
function draw() {
stroke(color);
if (mouseIsPressed) {
ellipse(mouseX, mouseY, 1, 1)
//creates colored dot when mouse is pressed
}
}
function keyTyped(){
if (key === 'c'){
clear();
}
}
If I don't use the 'color' variable and instead just set the stroke to 0, I can draw in black well enough. And the mousePressed function seems to work - when I press the rectangle, it draws the ellipse that I put in to test. However, I can't seem to reference var 'color' in my draw function - it's probably a silly problem, but I admit to being stumped! What am I doing wrong?
You have to be careful when naming variables. Specifically, you shouldn't name them the same thing as existing functions!
From the Processing.js help articles:
One of the powerful features of JavaScript is its dynamic, typeless nature. Where typed languages like Java, and therefore Processing, can reuse names without fear of ambiguity (e.g., method overloading), Processing.js cannot. Without getting into the inner-workings of JavaScript, the best advice for Processing developers is to not use function/class/etc. names from Processing as variable names. For example, a variable named line might seem reasonable, but it will cause issues with the similarly named line() function built-into Processing and Processing.js.
Processing.js is JavaScript, so functions can be stored in variables. For example, the color variable is the color() function! So when you create your own color variable, you're overwriting that, so you lose the ability to call the color() function.
The simplest fix is to just change the name of your color variable to something like myColor.
So I thought I could do a smart manipulation of the color of a random shaped PNG image, by actually having 4 images of the same shape, but in Red, Green, Blue and Black, then set then on top of each other and manipulate their opacities.
I tried using the formula channelOpacity = channelVal / 255 / 3;
Well, it's not really that easy, it turns out. Has anyone attempted similar things and what would be a solution? Thank you.
It's an interesting idea. However, opacity alone doesn't seem to accomplish your objective, because the order in which the PNGs are defined will affect the color of their combination.
For example, if you have a red PNG, a green PNG, then a blue PNG, all with opacity 0.33, you'll get something like this:
If you rearrange their order as green, red, then blue, you'll get this:
Green, blue, then red will give you this:
There may be a way to take the order into account in your calculations, which could make your idea really useful.
Here's a snippet that sets the opacity of stacked red, green, and blue circles, based on the normalized rgb hex values from a color picker. It does a decent job for colors that are primarily red, green, or blue, but it suffers from the issue I've described:
var colorPicker= document.getElementById('colorPicker');
colorPicker.oninput= function() {
var red = document.getElementById('red');
var green= document.getElementById('green');
var blue = document.getElementById('blue');
var r= parseInt(this.value.substr(1,2),16);
var g= parseInt(this.value.substr(3,2),16);
var b= parseInt(this.value.substr(5,2),16);
var factor = 1/(r+g+b);
red.style.opacity = r * factor;
green.style.opacity= g * factor;
blue.style.opacity = b * factor;
}
colorPicker.oninput();
img {
position: absolute;
}
Choose color: <input id="colorPicker" type="color" value="#ff0000">
<hr>
<img id="red" src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/e2/Bullet-red.png/240px-Bullet-red.png">
<img id="green" src="http://upload.wikimedia.org/wikipedia/commons/thumb/6/68/Bullet-green.png/240px-Bullet-green.png">
<img id="blue" src="http://upload.wikimedia.org/wikipedia/commons/thumb/f/f7/Bullet-blue.png/240px-Bullet-blue.png">
I found a way to do it through canvas, here: permadi.com
Given that Firefox has also added support (v34) for the methods involved, this solution should work fine. Careful, there are a lot of mistakes in the code at the above link (I corrected them below), but the idea is awesome. Here's what it's about, roughly:
// image is an html image element
var myCanvas=document.createElement("canvas");
var myCanvasContext=myCanvas.getContext("2d");
var imgWidth=image.width;
var imgHeight=image.height;
// You'll get some string error if you fail to specify the dimensions
myCanvas.width= imgWidth;
myCanvas.height=imgHeight;
// alert(imgWidth);
myCanvasContext.drawImage(image,0,0);
// This function cannot be called if the image is not rom the same domain.
// You'll get security error if you do.
var imageData=myCanvasContext.getImageData(0,0, imgWidth, imgHeight);
// This loop gets every pixels on the image and
for (i=0; i<imageData.height; i++)
{
for (j=0; j<imageData.width; j++)
{
var index;
index=(i*4)*imageData.width+(j*4);
// then access your data and set it like this:
// imageData.data[index+0]; // red
// imageData.data[index+0]; // green
// imageData.data[index+0]; // ... till alpha
}
}
myCanvasContext.putImageData(imageData,0,0,0,0, imageData.width, imageData.height);
return myCanvas.toDataURL();
I have a QImage in a QGraphicsView which I need to show images continously. Some times I need to show the inverted images continuously. For this I use
img.invertPixels(QImage::InvertRgba);
But at this time, the display is flickering due to the continuous inverting process. How can I implement the inverting process without affecting the performance? The display seems to be smooth without invert. `
QImage img(byImageBuf, width, height, QImage::Format_Indexed8);
scene->clear();
if(bInvertPixel)
{
/* Inverted image */
img.invertPixels(QImage::InvertRgba);
}
scene->addPixmap(QPixmap::fromImage(img));
view->fitInView(0, 0, width, height, Qt::IgnoreAspectRatio);
view->update();`
Since you are using an indexed image type (QImage::Format_Indexed8) you can invert the color table and just toggle that:
if(bInvertPixel)
{
/* Inverted image */
img.setColorTable( invertedColorTable );
}
else
{
img.setColorTable( standardColorTable );
}
standardColorTable and invertedColorTable are arrays of QRgb values.
The beauty of the color table is that you do not have to update it every time you display your image; just set it once and forget about it. Connect a signal from a button for inverting the colors and set the color table there.
I'm working on a game using PlayN, and there's a bit where I would like to take an image (which is currently in PNG format, with 8-bit alpha already) and I would like to multiply the image by an additional alpha factor, based on a value from my code.
Specifically, I have a picture of a face that currently lives in an ImageLayer, and the effect that I would like would be to have something like this:
void init() {
faceImage = assetManager().getImage("images/face.png");
graphics().rootLayer().add(faceImage);
}
void update(float deltaMilliseconds) {
// start at fully transparent, fade to fully opaque
float transparency = calcTransparency(deltaMilliseconds);
faceImage.setTransparency(transparency);
}
I expect that there's some way to do some trickiness with GroupLayers and blend modes, perhaps blending the image with a CanvasLayer painted with a solid white rectangle with transparency controlled by my code, but it's not obvious to me if that's the best way to achieve what seems like a pretty common effect.
If you just want to fade the image in from fully-transparent to fully-opaque, then just do the following:
ImageLayer faceLayer;
void init() {
Image faceImage = assetManager().getImage("images/face.png");
faceLayer = graphics().createImageLayer(faceImage);
graphics().rootLayer().add(faceLayer);
}
void update(float delta) {
float alpha = calcAlpha(delta);
faceLayer.setAlpha(alpha);
}
Where alpha ranges from 0 (fully transparent) to 1 (fully opaque).
I'd like to remove all of the black from a picture attached to a sprite so that it becomes transparent.
I'll copy and paste in case that link dies:
" I used a 'Color Matrix' patch, setting 'Alpha Vector (W)' and 'Bias Vector(X,Y,Z)' to 1 and all other to 0.
You will then find the alpha channel from the input image at the output."
I found this before, but I can't figure out exactly how to do it.
I found another solution using core image filter:
kernel vec4 darkToTransparent(sampler image)
{
vec4 color = sample(image, samplerCoord(image));
color.a = (color.r+color.g+color.b) > 0.005 ? 1.0:0.;
return color;
}
This looks like it'll do the trick:
http://www.quartzcompositions.com/phpBB2/viewtopic.php?t=281