Does anyone know a way to programmatically create a cold/warm front vector given a list of vertices (note the vertices do not contain the little triangles or half circles; [-105W, 40.45N],etc...)?
I'm trying to drop a "Current Front Positions" overlay on a web mapping application.
I was hoping to use PHP, Python, Javascript or even a map server to accomplish this task, but wanted to see if there were any good suggestions of where to start.
For Python;
You would have to capture the image first, e.g. using the Python Imaging Library. You could use its ImageDraw module to draw lines and arcs on the image.
If you want to draw (Bézier) curves, you would need to find a library that can handle those. E.g. cairo, with the py-cairo bindings.
Related
I want to draw a dynamically generated line that bends around n points in php, depending on input. I know I could use image arc and painstakingly get the curves to overlap at the proper angles so that multiple curves give the illusion of a single bendy line. But is there is an easier/cleaner way?
I basically want to do this:
If you wish the client side to render this I recommend using the canvas tag
See reference here: http://www.html5canvastutorials.com/tutorials/html5-canvas-bezier-curves/
Or use imagemagick backend if you with the server side to do it
look up Bezier Primitive on page http://www.imagemagick.org/Usage/draw/#bezier
You could use ImageMagick to create an image of the output you want. I've always found it pretty straightforward.
eg
http://imagemagick.org/Usage/draw/#bezier
http://php.net/manual/en/imagickdraw.bezier.php
I'm trying to generate 3D isometric views of players' heads, but I'm not sure what kind of support PHP has for this type of operation, or of any external libraries that may be better suited.
Basically I need to take a net like this (here is a diagram showing what each portion is mapped to) and make a 3D head from it. I also need to include the 'head accessory' portions, which should be slightly larger/offset from the actual head.
Does anyone know how I should go about this?
Well first it will be a complex job in my view.
The http://www.minecraftwiki.net/images/0/01/Skinzones.png file you mentioned is flat, but you have to convert that in ISOMETRIC 3D look, so you have to distort the images
For example look at the images below
So you can see that 3D box image is created from the pieces of other images, the logic is to add perspective to the flat images and join them. but as it is 2D we will call it Image Distortion.
Unfortunately GD Library which comes bundled with PHP is not advanced enough to let you do such things.
You have to use some other library like Image Magic and this link is tutorial for using distort functions http://www.imagemagick.org/Usage/distorts/
Second big thing is the processing of the images, you can process the images live but it will consume lots of resources on server, so it is suggested that you use pre processed images, and not process them every time.
To generate the Isometric image you have to write the code your self, and it may need alteration on each image character depending upon the size of the image. But when you have written a code it will be easy.
My Suggestion is to write your own code once, then alter it for every character and save the processed images in a sprite and use them when you add play functionality.
check out this link as well
http://www.fmwconcepts.com/imagemagick/index.php
is it possible to create this image in PHP using GD ? i know i need to use GD and imagecreate, imagecolorallocate, imagedestroy etc... but i have no idea how to do the curve
i need to create multiple arrows with these patterns
different type of arrows
different inclination of the curve
different colors
different length
edit: this way i don't have to look on the internet for arrows (based on a user/client specs). and then later i will add text to the image (for example: click next or follow the arrow). since im not a graphic designer, creating these iamges using gd will be easier for me.
eg:
http://kennebecvalleycoaching.com/red_arrow_curve.JPG
http://s3.amazonaws.com/satisfaction-production/s3_images/13664/curved_inline.png
thanks
Instead of doing it server side, you could investigate things like canvas, or raphael, and create the graphical elements clientside. It will be much more flexible, and less hassle.
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 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.