I have 8 png images of a shoe; one for every 45 degrees. I want to be able to customize this shoe with different colors, and have the user be able to rotate the shoe 360 degrees displaying whatever custom color the user selected all around the shoe. My question is, does this mean I need a different image for EVERY different color, at every different angle? This seems like a ridiculous amount of images, especially if more customizable options are added aside from color. I'm wondering if there is anything out there that would help simplify this goal to avoid loading and interchanging a million images based on the angle and custom options selected, and I'm pretty much wondering, how someone more experienced might go about this.
Thanks for suggestions.
I'm not entirely sure what colours you are using for your shoes, but the following is something you can do. If you've got a shoe for colour #999 and one for #7B5, you could simply take the 8 different pictures of a certain colour, make the background non-transparent, then remove all parts that are the specific colour and make those transparent, then change the background-colour style of the image.
This demo uses the original image http://www.selectism.com/files/2013/05/wtaps-canvas-sneakers-02.jpg (imgur link in case that one 404s), with the colour #39476A removed from it using Chroma Key (greenscreen) effects, available in any specialised photo editor (photoshop, GIMP). Since the background is non-transparent, placing a colour behind it will fill in just that colour on the image, resulting in the effect you want.
When you've got your Chroma Keyed image, you simply place a background-color style on the <img> tag depending on the colour chosen by the user, and it'll appear as selected.
Related
I am playing around with SVG filters, and there is a problem I have thought about for a long time. I am trying to change the colors of my SVG images (which contain base64 png strings) using filters. It is working well for most objects, but as soon as the object is very dark I get into trouble. See the example below where I am trying to apply a red color filter on an object that is very dark. The dark parts still remain the same dark, but I would like for it to change color to the same red as the background.
Is there any way / formula to apply filters that take into account the darkness of the original object color?
My thoughts so far is to detect the colours in an object and apply fill instead filter if the object is "dark enough", but I really don't like that solution.
I'm posting a website where you can visualize colors on a wall by uploading a photograph of your home. They are flood filling colors on the area where I'm clicking. They are creating shapes (maybe by detecting edges) over another canvas. Can anyone tell me how they have achieved it? Link to the site: https://www.visualizecolor.com/ppgpaints#.
And suggest if any js library exists that do the same.
I can see two different ways of doing this.
First idea
You can to segment your canvas into sub areas thanks to an edge filter like Sobel or Canny filters for instance. JSFeat does the job :
sobel filter example
canny filter example
Then you fill each zone by a custom a color by converting original color to HSV, you preserve saturation and brightness but replace hue value by the new one
Second idea
You use a seeding algorithm which consists in spreading the new color to a pixel only if the distance between the original color and the targeted color (both in HSV) is under some threshold value
I'm creating a planning tool for a game. Imagine two 2D static gun emplacements with different ranges and damage per second. I want to draw these ranges with different colours according to damage, in a scale similar to this http://www.celtrio.com/support/documentation/coverazone/2.1.0/ui.viewmode.heatmapcolorscale.html
I got that part working with CSS border radiuses. My problem is that if ranges overlap, the overlapping area doesn't show the combined damage.
I found heatmap.js http://www.patrick-wied.at/static/heatmapjs/ but it doesn't allow you to set a different radius for each point. I also can't find a way to turn off the gradient... the damage of these guns at its maximum range is the same at its minimum range. I realise that's sort of the point of a heatmap normally haha but I'm not too sure what I should be googling.
I had a think about a PHP solution which would create a greyscale image using varying levels of opacity to represent different damage. I'd then loop through all the pixels and recolour them according to the scale. But that would be far too slow. It needs to update in as close to realtime as possible as the user drags the guns around the screen.
There's probably a very simple way to do this, a CSS filter maybe, but I can't find anything. Any ideas? Thanks!
CSS is the wrong tool for this job -- you really ought to be doing stuff like this using SVG or Canvas. It'll be a lot easier to achieve complex graphical effects using a proper graphics system than trying to hack it with shapes created in CSS.
For example, in SVG, you would simply need to use the fill feature to fill each area with whatever colour you wanted. See an example SVG image here. It's an SVG Venn diagram where the overlap areas are completely different colours to the parent circles. Canvas has similar functionality.
You might also want to consider using a Javascript library such as RaphaelJS or PaperJS to help you with this. (using Canvas would imply that you're using some Javascript anyway, and it will make SVG easier to work with too).
However if you must do it using CSS, if you want elements to show through so the colours are merged when they overlay each other, then you'll want to use some sort of opacity effect.
Either opacity:0.5 or an rgba colour for the background.
That's as good as you'll get with CSS; you won't be able to get arbitrary colours in the overlap portions; just a combination of colours from the layered opacity effects.
If you look at the code of heatmap.js, you'll see that it works like this:
Paint circles onto a canvas, using a radial gradient from transparent to some percent opaque (depending on the strength of the point).
Color-map that grayscale image (converting each gray value to one of an array of 256 colors).
Your problem could be solved in the same way, but painting a circle of constant opacity and variable radius in step 1.
I wonder how to imitate watercolors in JavaScript. For instance, I would like to fill a shape in the screen as if it were painted with watercolors. Is there any JavaScript library for that?
Because a "watercolor" effect can take many forms in terms of the staining and where colors become more transparent or more opaque, this could end up being quite specific to the shape in question that you want to fill.
Only solution I can think of is:
Prepare a number of scalable background images with watercolor effects. This will give you a selection to choose from which you can use to fill your shape or div.
Example tutorials are out there for Photoshop and GIMP.
Load up the background images dynamically and set the background of the shape to the relevant image when selected.
See Set an Image object as a div background image using javascript
I have been experimenting with HTML5 and gradient fades, I would like to use 3 colours and gradually fade them into each other. Currently I can only get it working using two colours.
jsFiddle
My target is something similar to this image:
The colours should slowly fade into each other, i'm happy with the fade effect I currently have working, although would like to add a third colour.
I have tried to add an array of the colours to use, but the colour function was modded from a tutorial (will add link if I can find) and am not quite sure how to do it.
Could anyone offer any adivce?
Thanks in advance.
Am not trying to get it looking exactly the same as the image, but if I could just add another colour to my current version that should be fine.
Edit: Due to the confusion: I'm not looking for a "static" graident, if you view my example closely you will see a suttle fade effect. I want to achieve the same effect, but have the gradient with 3 colours and looking similar to the image above.
It should "shimmer" and a gradually fade. Offering a bounty as I'm struggling with creating this with 3 colours, which I think will be easy for most..
Unless you need to do some complex animation, you were doing some extremely unnecessary calculations for your gradient. The point of the gradient is that you give it some seed values and it generates everything in between automatically.
I worked up a sample gradient that looks similar to your reference image: http://jsfiddle.net/ZFayC/2/
Note that it looks like your reference image might have a small amount of texture to it, and that the gradient definitely isn't linear. If you want to re-create the reference image, you'll have to use some radial gradients and possibly overlay a texture.
Also, note that you were setting the canvas width and height via CSS properties. With the canvas element, CSS width and height control the magnification of the element, while DOM-level attributes control the actual dimensions.
Edit: I completely missed the fact that you were looking to produce an animated gradient. My apologies for that.
I went back and edited my example to smoothly transition between three pre-defined colors similar to the ones in your reference image. You can view the updated example here:
http://jsfiddle.net/fkU4Q/
Is this more along the lines of what you're looking for?
Edit: Here's another update that adds full-screen support, a diagonal gradient, and a secondary radial gradient that is overlaid in the middle to help give some variety:
http://jsfiddle.net/fkU4Q/2/
You might want to customize the colors a bit more to increase the variation, but hopefully the functionality is there now.
I think by applying certain tricks it should not be a big deal using CSS3 properties here is the playground,
http://css3.mikeplate.com/