I am searching a tool like Tiled but allowing to make free shapes (not only rectangles or circles). Shapes with curves and such. Could you help me please?
Thank you.
I would suggest using Inkscape.
Though, if you're looking for a tool very much like Tiled but with support for curves, be sure to add a comment to the spline objects feature request and consider helping to finish this pull request.
Related
I need some help with rendering a NURBS surface in webGL.
Some days ago our professor assigned us to draw with NURBS a flag and to animate it.
We have to use webGL (and cannot trhee.js...).
I have no idea on how to proceed (even though I know the theory about NURBS and tessellation more or less).
Any hint?
Disclaimer: I'm not asking for a solution. It's against the rules and I want to get it myself. I just need to be pointed on the right direction.
Thanks in advance
Just because you can't use three.js doesn't mean you can't look at it to figure out how it works! This example renders NURBS and you can view the source code. (Hint: It uses THREE.NURBSSurface, THREE.NURBSUtils, etc... which is then plugged into a ParametricBufferGeometry)
As for the WebGL part, if you're familiar with OpenGL, it's a lot of the same stuff just cut back a bit on features. You need to make a canvas with a context WebGL, generate all your data on the CPU (definitions of the surface, tessellation, etc), and then pass all the vertex and index data to the GPU rendering it all with a shader.
I would suggest you to start with following two lectures:
Drawing Bézier Curves
Drawing Lines is Hard
and finally, use this WebGL example as starting point for your assignement:
Resolution independent rendering of Bezier curves in WebGL
Good luck and happy coding! If you achieve something good, please let us know!
Let's say I have curved path made using a serie of bezierCurveTo() calls. I'd like to make it appear progressively in an animation, by increasing the percentage of it that is drawn frame-after-frame. The problem is that I cannot find a standard way to draw only a part of a canvas path - would someon know of a good way (or even a tricky way) to achieve this?
Sure...and Simon Porritt did all the hard math for us!
jsBezier is a small lib with a function: pointAlongCurveFrom(curve, location, distance) that will let you incrementally plot each point along your Bezier curve.
jsBezier is available on GitHub: https://github.com/sporritt/jsBezier
Just found a small library that does exactly that: https://github.com/camoconnell/lazy-line-painter
It relies on the Raphael lib (http://raphaeljs.com/), and the two put together do not make too big a payload.
I just need online Canvas curves generator like https://canvature.appspot.com/ where I can set image as background, and trace curve point on it.
Thanks very much.
There are lots of sites able to generate curves, but I recommend This
I'm working on a paint application with canvas, and trying to make some better tools.
now i have one tool that only connects lines while following the mouse movement.
can you think of a good tutorial or a good idea for other tools like spary, or brush?
thanks
You might find the following resources useful:
Create a Drawing App with HTML5 Canvas and JavaScript
Create a Paint Bucket Tool in HTML5 and JavaScript
Overview of JavaScript Application Development - Case CanvasDraw
Presentation - Intro to HTML5 Canvas
Feel free to contact me if you need more specific pointers. I think those above should at least help you to get started. :)
Please have a look at this code project article.
it may be useful to you.
http://www.codeproject.com/Articles/427422/Paint-Brush-Application-Using-HTML5-Canvas
thanks
I don't have a tutorial, but I think you should simply use thicker lines to create a brush tool.
A spray tool could draw random points in a circle with random alpha(that's quite easy to implement), but that might be extremely slow on some browsers. Drawing using pre-generated images would be much better but harder to implement.
I am trying to generate some sun 'rays' which I can best describe as looking like the blade of a krisknife, such as the blade portion of this picture.
This is just an example. I only need a triangular shape with two or three waves that I can close and fill.
Better yet, is there some HTML5 app with which I can draw a complex figure and then export the javascript (moveTo, arcTo, bezierCurveTo, quadraticCurveTo, ...). Something similar to HTML5 Bezier Sketcher but which saves the javascript. Trying to draw complex figures blind is very difficult and I don't want to switch to SVG if it is not necessary.
Thanks 1,000,000
Edit: I have now also looked at all the options at this site. None will allow me to draw and fill simple curves and then see/save canvs commands. All that show commands show them in new libraries like fabric or jsDraw2D.
You can parse SVG into an html5 canvas with fabric.js.
That might do the trick for you.
https://github.com/kangax/fabric.js
Beside SVG it can help you with a nice API to canvas drawing.
I found the answer among the solutions for Convert SVG to Canvas friendly output. The author didn't think it worked for him, but I think it's as perfect as any I have seen.
Professor Cloud (...is frikkin' amazing! This isn't the first thing he's done I have found incredibly useful.) created a site to take SVG input and product Canvas output. You can see it here, at Professor Cloud SVG-to-Canvas.
Using this site, I can draw something or even take a stock vector image in AI, export as SVG, cut out the commands and past them into Prof. Clouds amazing SVG-chipper, and get Canvas code. I understand it doesn't support full SVG capabilities, but then, neither does Canvas. Great for me.
Your solution is probably best but just for the record, I tried experimenting with some graph plotting, and got some nice results:
The equations are:
sin(x)*log(2/x) + x/10
sin(x)*log(2/x) - x/10
You can plot them using: http://www.graphsketch.com/
It looks good with 0 < x < 25