I interested, how can i draw 3d image in runtime using PHP,JS. (or what other programming language suggested for this..)
Specfically: I have a database-table with two filed. user and candle. For example Michael,100 means that Michael has 100 candle.
If i have a 10x10 candle image how can i use this image to draw a "3d candle image", something like this
So i have for exapmle a 300x300 DIV and i would like to fill in with the candle.png in 3d style. If the user have 3 candle in the database, then fill in with 3 candle randomly, if user have 30 then fill in with 30 candles..
Please help me how can i start this?
Rendering 3d graphics, while possible, is not really what php and javascript are created for.
If you are looking for a method of outputting pre-rendered images of candles to your page, then this is very easy with these languages, however I think you need to make your question more specific for a useful answer.
If you can run arbitrary code on your server, I recommend creating a program using something like http://liballeg.org/ that runs with CGI and querying it from within javascript. I think you are looking for what is called an affine transformation; look it up; I believe that allegro supports them.
How to approach this depends on how you want it displayed to the user, for example, if the user should be able to rotate the image then it would need to be done close to the user, ie on the browser.
If it is just a static bitmap is the final outcome then doing it on the server may be best, for performance.
Either way, it is a great deal of math involved, but I will assume you know the mathematics.
In order to do it in PHP you can use gdlib to save the image, and look for any examples in C on doing raytracing. It will be slow, and will be a performance hit on your webserver, but there are solutions to that.
If you want to do it in javascript, then your best bet would be to use the 3D canvas (https://wiki.mozilla.org/Canvas:3D), but this has very limited browser support at the moment, but it does give you access to an openGL API.
Related
I have an Italian map, and I need to color some regions programmatically.
This is the image:
As you can see there are few regions with a different color (orange).
I have a page where I need to highlight the areas of user, so I need to color those areas differently. The base is grey and the selected must be orange.
Now, How could I do it programmatically?
I would like to avoid creating one image for each user.
Any Ideas?
I still prefer creating "one image per user". It's actually not per user. Make your variations of the image already created, and load them by your server-side logic. I mean, something like sprites. Have every part both colorized and non-colorized.
Have you considered jQuery powered interactive maps like this one:
Link 1
Alternatively, if you get really stuck you could look at something like this (paid plugin!)
Link 2
I don't think php's GD or imagick libraries are so powerful, and if so, it won't be that easy to do, and the resulting image could lose quite a lot of quality, as the borders of the map are even antialiased.
I would suggest you to Google for "interactive maps", normally you have the vectorized images and use Javascript and CSS to achieve what you are trying to do. Maybe there are already something for Italy.
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
I have a project to draw relationships between different elements determined on a sheet.
When the user has finished making the plan, it can export it to a txt file that contains the links.
A bit like MS Visio but with only three or four elements draguable.
Does anyone have an idea of this project using web languages (php, js) ?
Thank you in advance.
I am not so sure of your question but if you want to draw graphs using php variables with javascript, then the html5 canvas is probably your best bet in terms or proffessionality with design and implementation.
Only downside is it is javascript only, and the user must have a browser that supports canvas.
Take a look at Raphael, you can make your users draw anything you want, export the structure as JSON,for example, and treat it with any language you want
Take a look at this Raphael example to see an interconnected graph
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 am looking to generate transport maps in a style similar to the iconic London underground [tube] map.
These maps will change from time to time and many will be required so instead of drawing them up manually in inkscape [or similar] I am hoping to have them generated dynamically from a db or dataset.
Does anyone know if there is any library apis etc. out there that would help with this task, or any suggestions in general of how [or how not] to go about this ?
I am thinking svg's would be the best way to go with this, plus there may be need for basic interactivity down the line.
I am working in php so otherwise it's GDlib, ImageMagick ?
Thanks in advance.
.k
Well, the answer really isnt in how to use GD or ImageMagick, there are manuals for that. As for helper libraries, most libraries focus on graphing, anything else you will have to write yourself. Your best bet as a solution would be to have your admin interface generate the images when data in the backend changes and cache the images, since there's no reason to build the image every time someone accesses it.
For generating maps, i think your best bet would be defining stations with one or many 'lines' which determine some sort of indicator of relationship to the stations around, and an x,y. You'd probably only need to determine a 'parent' station since you're just drawing lines from a-b. That way you can position them in the same manner as they're typically rendered on the actual trains, use the lines and surrounding stations to draw mappings.
Doesn't sound like too difficult a problem. 3 tables:
stations [stationid,name,x,y,meta1,meta2],
placements [placementid,stationid,lineid,parentstationid],
lines [lineid,name,meta1,meta2,colour,etc].
SVG would be pretty good at this sort of thing, and you would avoid the whole image building and caching process, but be wary of browser support issues.
Sounds like a pretty interesting project though, good luck :)
One strategy I use when I need to generate graphs from data in a db is to extract the data in some kind of XML way (e.g. Oracle SQLX or Cocoon XSP/ESQL or eXist-db XQuery) and process it through an XSLT to generate SVG. Good old Cocoon is fine for this kind of job if you don't want to write any code (except the XSL of course ;-).
The SVG itself can be loaded in some graphic tools to reprocess.
These maps will change from time to
time and many will be required so
instead of drawing them up manually in
inkscape [or similar] I am hoping to
have them generated dynamically from a
db or dataset.
If I were in your shoes, the very first thing I'd do is try to prove that the Google Maps API won't work for your application. Then, maybe, prove that ArcGIS won't work. (Even if they don't work, they're widely used, and you get to add lines to your CV.)