I'm looking for a way trough javascript find the main color from a image. Probably trough some algorithm to cluster some areas.
Problem because if I use pixel, will count more pixels used. Ex. if i have brown and very colors next to brown, then a part with white. the main color could be white. And not want color average because could not represent the real color of the image.
Any suggestion of plugins, code to implement, websites . Thanks in advance
UPDATE
Something like this :
http://www.cssdrive.com/imagepalette/
There here something explaining, not sure if i can reuse the js code.
http://harthur.wordpress.com/2009/12/18/getting-the-color-scheme-of-a-website-using-canvas-and-hierarchical-clustering/
This is tough but doable.
The first step is to get the pixel data from the image - in order to do this, you'll need to draw the image onto a canvas element and get the pixel data. Note that the Same Origin Policy applies to the image, so the image must be on the same server as the script or you'll need to use a proxy.
Now you can apply an algorithm to the pixel data to find the "main" color. The easiest option is the average, but it sounds like you don't want that. There are a lot of clustering algorithms out there; probably what you want is to perform color quantization to reduce the number of colors in the palette to some small number, then take the color that represents the most pixels in an image.
The median cut algorithm is a good, relatively simple option here, though it's still a fair amount of coding. I worked on a small hobby project to implement this algorithm in Javascript - you can see my code here. It won't work for you out of the box, but I've probably done most of the hard work for you.
May be you can try PnnQuant.js
Demo site: https://mcychan.github.io/PnnQuant.js/demo/
CIEDE2000 color difference formula is adapted by choosing radio button with Quality: High
On top of that, Web Workers is used to create a background thread to invoke long running scripts and handle computationally intensive tasks like the image quantization.
Related
I'm hoping to build out a simple landing page that is a little bit different. Here's a mockup I've quickly put together:
It's pretty simple:
A large text heading in the middle (say, the name of the website / business)
Surrounded by lots of elements, SVG images of varying size (In the mockup, represented by coloured rectangles and circles).
The first effect I'd like to add that sets this website apart is that the elements "float" they slowly move in random directions.
If they collide with each other, they change direction, such that they do not overlap.
Finally, the mouse/cursor/point has a similar displacement effect when hovering over elements.
Here is my attempt at capturing this behaviour in a gif:
I've never embarked to build something quite like this before, is there a javascript library best suited to help me achieve something like this?
In my own research I've found TwoJS who's particle sandbox demo seems to showcase somewhat of the functionality I'm looking to build.
I spent all day attempting to write a javascript which selects all white pixels in a bitmap
I used a loop within a loop to iterate through all of the pixels one by one (the outer loop went through the vertical lines and inner loop went though the horizontal ones)
and used coloursampler to detect if the pixels RGB values were close enough to 255 or not.
anyway this code took a very very long time to complete
i literally saw the colour sample cursor move over every single pixel one at a time.
I the found out that I could record an action which selects all colours within a range from the whole image and call it from my script, and this worked instantly.
I am not surprised that my way was slow.
but that raises the question
How come Photoshop is able to scan a whole document for pixels which meet certain criteria using select>range and tools such as the magic wand and quick select yet my code runs so slow
Surely photoshop must need to scan each individual pixel so achieve such effects.
For elements of Photoshop which are not directly supported by the Javascript API (color range selection is one of them) I suggest you look into using the Adobe Scripting Listener plugin, and utilize the script listener's output for the core of your script.
I have written a tutorial on how to utilize the script listener for Color selection here. The tutorials use Python, but the overall concepts are exactly the same- the scripting listener even puts out a pure JS file for you!
This will be much faster than iterating over pixels, as it gives you access to the same fast tools and actions that are core parts of the Photoshop Application.
Hope that helps out.
Do you know how this website achieves the customization effect in the gallery? When you change the color, the stones or other attributes of the ring, it looks like a new image is generated.
http://www.gemvara.com/Round-Blue-Topaz-Sterling-Silver-Ring-by-Gemvara-Essentials/jewelry/v/342899/
(click Customize)
Do you think they have thousands of images for every possible combination? Or maybe they use something to generate them?
Without examining their source code, I would say it's a near certainty that they're just loading a separate image for each ring. It's possible that the images themselves may have been processed from a single source graphic (they do look very similar), but as far as the site is concerned they're separate images.
But one technique I've used in the past to get a graphic in any colour I want is to use a greyscale overlay with transparency, and a solid background colour behind it in the colour I want.
This can work even for a full colour image with a spot-effect colour (as with the images in the example site), if you use a PNG image with an alpha channel transparency section in the area you want to colour.
Due to the grey foreground, this technique tends to produce shades that look like pastel colours, and it's only suitable for images where you don't need complex colour changes, but it can work.
On the other hand, for images like the ones on that site, it's probably better just to use a separate graphic for each product. Simpler, easier, and more honest (if you're selling a product with an photo of that product, people will trust you more if that image is actually a real photo rather than computer generated)
i am building a workout website that tracks exercises. Each exercise has a mapping to a certain part of the body (bench press --> Chest)
I am trying to figure out a way to visualize this and i thought of the idea of putting an image of a person "highlighting" the affected muscles. Sort of like This:
(source: aquaviews.net)
Assuming i have found a good picture without any areas highlighted, is there anyway to dynamically "highlight" areas in a picture (the red section) with javascript (client side) or C# (server side) or do i need a seperate picture for every exercise?
You COULD overlay the the base image with SVG or a <canvas> element.
But then you have cross-browser issues, possible alignment problems, and probably a cheesy look.
I'd have an artistically inclined person do the highlights as a separate graphic for each exercise.
But rather than have these as separate images, keep/combine them in a single file -- as a CSS Sprite. Then you get a professional appearance, great cross-browser support and easy, minimal coding.
You can use css to position your links over said muscle group and use a rollover to show the highlighed part...
Edit:
Sorry I guess I should have elaborated. You can absolutely position the elements with CSS and use an image rollover to swap out that section of the image to the highlighted section of that image. You can either do this by putting each muscle group into it's own div and putting an image of the corresponding muscle group into the background image. Then swap it out on rollow over. or you can use z-index and absolutely position the rollover elements where they need to be and change the z-index when needed.
Interestingly enough, I used to be a personal trainer and I did this same thing but did it in flash. That's my recommendation.
However, if you want to do it with JS and CSS, Brock's suggestion of the sprites is likely the way to go.
What you could do, very simply, would be to have an image map that for certain areas called a js function to swap about the background image with the same version of that image with the highlighted sections. Rather than several small images, you have the same image but with one part highlighted.
One question though, will you be doing compound exercises that would require you to have two sections highlighted? For instance, an incline press would highlight part of the chest and part of the delts. This makes the whole proposition more complicated due to the specificity of your roll overs.
i think you seeking a way to do this without requiring separate images, and if so - the answer is No - you are going to need to create separate images for at least the highlighted areas. Short of perhaps using a CANVAS element which has cross-browser issues, I don't believe there is any way to impose a filter to an arbitrary region of an image element.
And even if you Could apply an alpha filter, you would still need the geometry of every shape, so the effort/work is perhaps the same...
Once you have the various images there are sundry ways to approach the problem after that...
This is a simple implementation as i have done this highlighting with a county map. Use an image map. Then find a highlighting script like (mapper.netzgesta.de) mapper.js. All you need to do is have a properly set up image map (image must be suuounded by a div) and a link to this script. The highlighting starts immediately. Please check the license. Ther are several other that scripts that use javascript css and jquery to achieve this same effect. Just research highlight image map in google. Sorry i cant give you a link to my implementation of this as it is on a secure site for work. Good Luck.
Essentially, I had this idea in my head for a sort of evolution simulator, not exactly like Conways Game of Life, but the one part where they do match is that they will both be based on a square grid.
Now, personally, I like working in HTML+Javascript+ for simple apps, since it allows fast UI creation, and if you're not doing something computationally heavy, then JS in a browser is a decent platform.
The problem I'm trying to solve right now involves drawing and updating the grid. I might be missing something, but it seems like there is no easy AND computationally light way of doing this for an 80x40 grid. The easy way would be to generate a div with absolute position and a specific background color for any square that is NOT empty. However that can become very slow with anything more than 60-70 colored squares.
I'm definitely willing to switch to a different language if the situation calls for it, but first I just want to know I'm not stupidly missing out on an easy way to do this with HTML+JS.
Answer should include either one of the following:
a) A reasonable way to draw and update a 80x40 grid ( where the squares change color and "move" ) in HTML+JS
b) Another language that can do this reasonably fast. I would prefer to avoid having to spend a few days learning DirectDraw or something of the sort.
Why not build the grid as an HTML Table? After all this is what you want?
Give each cell a computed id and create some javascript functions to update them. Shoudlnt be a problem at all.
You could look at the new canvas tag in HTML 5 but from what you've said I dont think you need it.
<canvas> seems to be the right way to do this. A library like Raphael will help you avoid cross-platform issues. Another options is Processing.js, but it does not work in IE.
For a small grid (< 100x100), use a table and give each cell an ID for fast access.
For bigger grids, you should consider using a canvas object or embedding an Java or Flash applet.