I want to draw an irregular circle entirely with php (or another programming option) but without photoshop. The circle I'm trying to draw should be slightly irregular and I think the line thickness should vary slightly to give the impression of an authorized seal. I don't mind suggestions for a graphics package, as long as it uses code (not image manipulation for artists). Any code has been written for this? How can I get to a similar effect?
I would highly recommend raphael.js
Right on their home page they show you how to draw a circle, but you can draw paths as well with vector lines, which would allow you to create an irregular circle. Plus,it works on IE6+, as well as Firefox, Safari, Chrome.
Try using cos(x) for the x value and sin(y) for the y value in JavaScript with short paths and a random number for irregularity.
If you just want to texture a circle, a simple Bump map/Displacement map may do the trick. You'll still need to use some source image for the map.
The next trick is to find a package that supports a displacement map. SVG has a displacement map filter, but I'm sure there're php libs with a nice set of filters if you're concerned about SVG's browser support.
maybe you could use SVG. Graphics can be describe as text and rendered at runtime.
Related
I want to have a map (which is image-mapped) show green in areas where some criteria applies, yellow in some other areas and red in other areas.
The goal is to display a clickable image which will will colour certain states which match certain criteria. I was previously considering flash but the owner simply doesn't want flash. One possible alternative would be to display 'clickable' coloured labels on the map but I don't know how to do this either. Does anyone know how I can solve this? Any help will be much appreciated. Thanks!
Check out Raphael: http://raphaeljs.com/
So this is what I finally did.
I found an svg map of Nigeria on wikipedia (which has the svg maps of
almost every country).
I downloaded InkScape and cut out the parts I didn't need from
the map.
I used the Raphael SVG to HTML Converter tool to convert it to
code usable by raphael.
From here it was quite very easy, I could use path.fill to 'colorify'
the image and it was easy to set different functions for clicking any
part. Scaling was also not an issue as the image could be scaled
dynamically based on the container.
Thanks to everyone especially Olle for pointing me in the right direction!
jQuery Vector Map http://jqvmap.com/
or
JVectorMap
JVectorMap comes with more pre-generated maps than jqvmap. But you should be able to generate your own.
Take a look at jQuery. PHP is not where you will do this, its going to be client side Javascript to manipulate an html image map using either overlay images or a change in CSS via the Javascript.
For what its worth, this can be done in php using the gd extensions. Essentially what you do is load an all white version of the image, and then using coordinates on the image, fill the image with a given color using imagefilltoborder (http://www.php.net/manual/en/function.imagefilltoborder.php) .
However, to make it clickable, you would need to use an image map or javascript on the clientside anyway.
I am looking to achieve:
http://i53.tinypic.com/2gule04.jpg
I have tried the answers mentioned at Curving an image that starts as a rectangle (uploaded by user), preferably using Canvas or JS
Based on the answers there, I have tried pixel wise transformation which didn't work. To understand a mesh based approach, you will need a skill set of 3d-2d developer which I don't possess.
I am a PHP developer and I am looking for an answer in either PHP or HTML5. I have tried number of things ranging from HTML5 canvas to splitting the image into smaller parts and then joining them however those don't seem to work.
A help in the right direction will be greatly appreciated.
If you can use ImageMagick, the Circular and Radial Distortion Methods examples should come pretty close.
I don't know whether the PHP ImageMagick extension (as opposed to calling ImageMagick from the command line) supports this as well, but it might.
To achieve a similar effect you want to try texture mapping and you need some 2d-3d subdivision and math skills. Basically the idea is to subdivide the texture in triangles and map them to the 2d coordinate using a transformation matrix. It's simplier to start with rectangles first and then use your curved form but I'm new to this too, so I don't know really if texture mapping is used at all to curve an image. Here is an example of a simple texture mapping: Image manipulation and texture mapping using HTML5 Canvas?.
In the aforementioned link there is this sub function:
n the following code I assume you have a picture object texture and 4 corners each of
which is an object with fields x,y,u,v where x,y are pixel coordinates on the target canvas and u,v are pixel coordinates on texture:
IMO this is information enough to start with texture mapping.
A posibility is to use rotoscopic animation instead of mathematical tweening. In other words, you can achieve such transformation with 5 or 6 (or as many as you want) frames that are sequentially drawn on the HTML5 canvas at your desired frame-rate.
You can easily draw each frame using Canvas native API. In your case, you just need to draw Text and then a closed path like:
ctx.beginPath();
ctx.moveTo(...);
ctx.arc(...);
ctx.lineTo(...);
ctx.arc(...);
ctx.lineTo(...);
ctx.closePath();
and just adjust the corresponding values for each frame.
It should be pretty easy!
I need to create a PNG radial gradient with opacity. I've looked through GDLib but I can't see a way to generate radial gradients. Does anyone know of a way with GDlib or any other graphics library for PHP?
I suppose worst-case I could generate it pixel-by-pixel using GDLib but how does one even start to do the math on that?
The goal is to generate sexy lighting effect background PNGs for web pages. An example of the effect can be seen on the header here which uses this background image. I've tried generic white lighting effect PNGs but it doesn't look anywhere near as good as tinted lighting, so my generated PNGs will take into account the website's color scheme.
I assume server-side is the way to go because browser support for CSS radial gradients is so patchy.
Why not use a combination of imagecolorallocatealpha() and imageellipse() or imagefilledellipse()?
Edit:
See this class for an example of what I mean. You should be able to extend this to support alpha.
Edit2:
I have made some modifications to the class above to yield alpha support. It's not perfect, but it works for ellipses and such:
http://codepad.org/1eZ3Km0J
the classic video game trick is to apply a gradient texture, rather than compute the light. this is a perfect use for the technique.
make a grayscale gradient at a large-ish pixel dimension (2048px square is common) and several smaller ones (1024,512,256px etc) pick the closest one for your need (scaling up may exaggerate banding, scaling down may introduce moire).
use php gd function such as imagecopymerge. depending on intent, you could store the result on first use.
I suppose worst-case I could generate
it pixel-by-pixel using GDLib but how
does one even start to do the math on
that?
The math is easy, alpha = max_alpha - (distance_to_center / radius) where the distance is Euclidean, i.e. sqrt( (x1-x2)^2 + (y1-y2)^2 ).
I was wondering if it was possible if I had an image like:
I would be able to change certain parts of the images colors. For example if I wanted the bow green and the present red with yellow stripes, would I have to make a new image that had that or is there a way to program something (elegantly) along the lines of that? I'm just asking to see if its possible and if it is, what language would be best to do this?
Keep in mind this would be a feature on a website.
That's not going to be easy the way the image is. You have no way to tell the computer which part is the bow, which part is the stripes, and which part is the box. However, if you pre-colored them, you could do a color replace using GD library or imagemagick pretty easily. You'd do this in PHP. Here are some examples of how you could do it, I'd personally go the imagemagick route.
How can I replace one color with another in a png 24 alpha transparent image with GD
http://www.imagemagick.org/Usage/color_basics/#replace
(this example even has a similar gift box as the usage case, hehe)
Try leaving the parts you want changable transparent. Then, give the div it's in a hover state with the second background color.
You could:
Use an indexed-color image and change the colors in the palette.
Use #MT's suggestion, though it kinda gets out of hand with multiple colors and jagged regions.
Pick control points and fill ("floodfill") the image through them - programmatic version of using the bucket tool.
Use #profitphp's suggestion, which is really better my last one.
Abandon compatibility and use the new canvas element while it still has the "cool" factor :)
i presume this is a web-based painting application; you'll require a human to tell you what the parts are, and where they want the coloring to be.
The issue then becomes how to perform a flood fill at the user's request.
The best i can suggest is perform the flood fill server-side, using an image processing library - handing back the image to the user:
There is no javascript ability to access pixel data of an image.
Edit: Performing flood fill with HTML Canvas
I have a whole bunch of images of illustrations that I would like to crop to a smaller preview size.
The problem is that I want to crop them to show an "interesting" part of the illustration (ie avoid areas of whitespace).
The images typically have a flat color or a subtle gradient for the background. They are mostly vector style artwork with fairly distinct shapes.
Here are some examples: link ;-)
I've been thinking about using some sort of image feature detection algorithm with a sliding window to find the area with the greatest number of features.
I'm implementing this in PHP, but I don't mind implementing it myself if there isn't a library or extension available.
Ideas?
ImageMagick has a trim operation. It's available as a library but I don't know how hard it is to use from PHP. There are some PHP interfaces.
OK, so here's what I would've done, after looking at the examples:
Sum all rows and all columns of each image. You'll get two arrays, both looking like this:
/-----\ /--\
_/ -- |
___- \_________
By looking at these arrays for a few images, find a suitable threshold (probably something just above zero). Then the leftmost and the rightmost crossing of this threshold is where you have to crop. I hope I've managed to make it clear enough, if not -- ask!
Here's a fairly simple approach using an edge-detection filter, and then cropping around the center-of-edginess of the image to generate a thumbnail. It works pretty well on most images, but not if there are more than one subject. I'm open to suggestions on other ways of identifying the "interesting" points in a source image.
Well, you might want to consider just using an edge detection algorithm. Pick the area with the largest number of edges. Give higher weight to edges that are not blurry (as they may be from the background).
ImageMagick for PHP has automated generation of thumbnails. This SO question has a link to an ImageMagick auto-crop operator, and I'm not sure, but I think this is the PHP interface to it.
From the link:
bool Imagick::trimImage ( float
$fuzz )
Remove edges that are
the background color from the image.
For more general "interestingness", maybe try an inverse of seam carving (to find the highest energy, rather than lowest energy areas).
A CLI program using http://pecl.php.net/package/imagick:
<?php
dl('imagick.so');
$img = new Imagick();
$img->readImage($argv[1]);
# (* 0.0: exact match; * 1.0: crop entire image)
$fuzz = current($img->getQuantumRange()) * 0.25;
$img->trimImage($fuzz);
$img->writeImage($argv[2]);
?>
It should work good enough, as long as the image doesn't have a frame around its border.
Drupal has a project called smartcrop, which has PHP code to find highest entropy and "interesting" areas in images. See the output examples.
You should be able to use the functions in the module and the library in none-Drupal projects too.