I have application made using PIXI.js and it uses a WebGLRenderer.
I'm preserving the drawing buffer and not clearing before render:
{ preserveDrawingBuffer: true, clearBeforeRender: false }
This allows me to create trails as objects move around.
I want the trails to fade out over time, so I apply a transparent black rectangle on top over every rendering. This works, but the fade out eventually rounds off to gray. I want a complete fade to black.
I've tried using a ColorMatrixFilter filter with a lowered brightness on my root container, hoping it would cause a fade effect. It didn't cause any fade effect, instead just causing everything to be slightly darker. If that had worked, then a custom filter could help to do the job.
How can I get a slow gradual fade to complete black for the trails of my rendered objects?
EDIT: Here are a few examples of what I've tried:
// `this` being my app object.
this.fadeGraphics = new PIXI.Graphics()
this.root.addChild(this.fadeGraphics)
// Blend Mode
this.fadeGraphics.blendMode = PIXI.BLEND_MODES.MULTIPLY
this.fadeGraphics.beginFill(0xf0f0f0)
this.fadeGraphics.drawRect(0, 0, this.screenWidth, this.screenHeight)
this.fadeGraphics.endFill()
// Transparent black rectangle.
this.fadeGraphics.beginFill(0x000000, .05)
this.fadeGraphics.drawRect(0, 0, this.screenWidth, this.screenHeight)
this.fadeGraphics.endFill()
Both these methods leave me with a gray trail, the trail goes away if my values are strong enough. Though, I want a very long-term trail so I have to use small values, and possibly also apply them every nth frame.
I think a SUBTRACT blend mode might be able to do what I need.
Unfortunately it doesn't seem available in Pixi.js.
I eventually figured out that fading to white works wonderfully.
Thus, one solution is to fade to white, then invert color, and rotate hue 180 degrees.
You can do this with a CSS filter on your canvas, though it doesn't work in all browsers, has a performance hit, and all your color intensities get inverted.
Here's what I'm trying to do:
I have two circular SVG images stacked on top of each other. The top image is grayscale. The bottom image is full-color.
What I'd like to do is, via a 1-100 percentage, remove the top image like the hands sweeping the face of a clock based on number. Let's say I'm at 25%. From 12 o'clock to 3 o'clock the grayscale image would be gone like a pie wedge) revealing the identical full-color image below. (see image for more clarity).
example of radial mask concept
Is this possible to do with HTML5/CSS? JQuery? Some way else I'm not considering?
Here is a fiddle of what i came up with http://jsfiddle.net/3a5eubcv/ .Basically your background image would be the red circle and then you have 2 masks floating over it (divs with semitransparent background). Sorry for not adding the javascript for it as well, but for you 25% = transform:rotate(90deg);.When you reach 50%, the right mask should stop and the left one should continue. 75% = .circle-mask-right{transform:rotate(180deg); .circle-mask-left{transform:rotate(90deg);} .I'm sure the code can be simplified, but hopefully this could get you going.
WHAT I HAVE
I have background image with width and height equal to 100% at z-index:0. Now there is another div (#blanket) on top of that with equal height and width and has an opacity level of 0.7 to create a blur sort of effect of the image behind it ... The colour of the the div (#blanket) is set to white so the it looks like there is 70% percent white transparent sheet behind which is an image.
WHAT I WANT
Can I change or set the colour gradient of the div (#blanket) that matches the colours in the image behind it .. I first saw that in iphone the way they matched their homescreen theme according to the wallpaper. So if the wallpaper had a red and black sports car then the theme would mostly consist of two basic colours , the red and the black. Can I achieve this in my website. If So then how?
I think that css filters will help you more in this case. You can choose one from this:
blur()
brightness()
contrast()
drop-shadow()
grayscale()
hue-rotate()
invert()
opacity()
sepia()
url() - for applying SVG filters
Examples can be found here.
On iPhone, for example, the color of the icon labels changes from white to black if white is not readable on the phone wallpaper.
Well, I'd like to reproduce it in Javascript, if possibile.
I have this HTML:
<div style="background-image: url(http://just5.net/wp-content/uploads/2014/05/OneRepublic-Counting-Stars.jpg)">
<span style="color: white;">Counting Stars</span>
</div>
As you can see on this fiddle "Counting Stars" is not readable, so I'd like to change the color of the text. I'm using color-thief.js to get the dominant color of an image, but how to use it with a background-image?
Even if you can get the color from the image, there are images where neither black nor white would be readable.
I suggest that you put a faint shadow around the text, that makes it readable even when the background is white, and it doesn't affect the background much when it's dark. Example:
text-shadow: rgba(0,0,0,0.5) 0 0 2px;
Demo: http://jsfiddle.net/2WQJA/1/
You can experiment with different opacity (the 0.5 in the example) and radius (the 2px in the example).
i dont think any such method is possible, well anyhow you can do one thing, you can put the images in an array and they assign the font-color value to it with a loop.
Can anybody explain me, preferably with illustrative pictures, how do these methods work? I've looked at different examples and tutorials but can't seem to grasp the idea. I understand, that the createRadialGradient() creates two circles, but how do those two circles relate to each other and the addColorStop() method ?
Yes, I know this is necro'd... but it seems a valid question that was never snawered, so I leave this here in case someone else needs it.
================================================================================
Well, a gradient is a smooth shift from one color to another.
In any gradient, you pick a point where the colors begin, a point where the color ends, and the colors you want, and the color smoothly transitions between them.
The color stops are there to determine what colors will be a part of the gradient, and where in the gradient those colors will appear.
In a linear gradient, the color transitions from one color to the next in a straight line so that bands of color form along the line, perpendicular to the axis.
In a radial gradient, the color wraps itself around a central circle (or point, which is simply a very small circle) and transitions from that center to the edge of the gradient.
This means that the color bands that make up the gradient form into larger and larger circles as they transition from center to edge.
HEREis an example of a simple radial gradient transitioning from white in the center to black at the outside edge.
This is the origin of the syntax for createRadialGradient.
This first circle will be where the color begins, we will arbitrarily state that it starts in the center... lets say that is x:100,y:100
The second circle will be where the color ends, since we picked the center to start it, the color finishes at the outside edge of the circle (although these could just as easily be reversed).
For simplicity's sake, the center point (in this case) will remain the same: x:100,y:100
The real difference between these circles will be the radius. Since the center should be small, we will give it a radius of 1, while the larger outside radius of the circle, we will make 100.
This gives us the required parameters:
x = 100;
y = 100;
radiusStart = 1;
radiusEnd = 100;
var grad = ctx.createRadialGradient(x,y,radiusStart,x,y,radiusEnd);
However, if we try to display this code as is, we won't see anything... this is because we need the color stops.
Color stops are declared with two parameters... the position and the color of the stop.
The position is a number between 0 and 1, and represents the percentage of the distance from start to end.
If we want the color to start at white, then we would use:
grad.addColorStop(0,'#FFFFFF');
This means that we the color stop starts at 0% of the way down the line (meaning right where the gradient begins), and gives the color to paint there as white.
Similarly, the second gradient should be black, and should be placed at the very end of the gradient:
grad.addColorStop(1,'#000000');
Notice that these do not reference context directly... we referenced context to create the gradient, but we are adding stops directly to the gradient that we created.
When we are finished creating the gradient, then we can use this gradient as a fillStyle (or even a strokeStyle) for as long as the gradient that we created remains in scope.
Full code:
x = 100;
y = 100;
radiusStart = 1;
radiusEnd = 100;
var grad = ctx.createRadialGradient(x,y,radiusStart,x,y,radiusEnd);
grad.addColorStop(0,'#FFFFFF');
grad.addColorStop(1,'#000000');
ctx.beginPath();
ctx.arc(x,y,radiusEnd,0,Math.PI*2,false);
ctx.fillStyle = grad;
ctx.fill();
While you are playing with this, don't forget to experiment a bit.
Try adding more than two color stops... this means that instead of transitioning from black to white (boring), you can transition from blue to green to yellow to orange to red to purple.
Just remember to set the positions appropriately... if you have 6 colors, for example (as above), and you want them evenly spaced, then you would set the positions at .2 intervals:
grad.addColorStop(0,'#0000FF');
grad.addColorStop(.2,'#00FF00');
grad.addColorStop(.4,'#FFFF00');
grad.addColorStop(.6,'#FF8800');
grad.addColorStop(.8,'#FF0000');
grad.addColorStop(1,'#AA00AA');
Any color stops you try to place in the same position will overwrite one another.
Another cool effect is to set two different centers for the circles when creating the gradient... this lends a different effect to the gradient, and can be a worthy addition to your arsenal.
HERE are two images from the W3C specification (which itself is HERE). Both of these are radial gradient with different center points for the first and second circles.
A better example is HERE, although the code itself is written in svg for html backgrounds, the examples still show some great ways to use radial gradients with differing centers. He covers the theory of radial gradients as well as shows some very nice examples.
Finally, a tip... while it is quite possible to write gradients by hand, its kind of a pain in the butt. It is usually far easier to grab Photoshop, Illustrator, GIMP, or Inkscape, and build the gradient in one of those... then you can adjust the gradient directly until you like it. Then simply copy the color stop information over to your canvas code.
Hope some of that helps someone.