See the above image? I want to re-create it in code. [0]
reading Pomax's guide to Processing.js. Lots of useful stuff in there. Picked up a few bugs. Also found an interesting way to capture more detail. Move the mouse with the LEFT mouse button down to capture more detail.
Lots of work done today. Try this demo. The objective is to use the mouse and trace a leaf, any leaf creating new points by LEFT clicking your mouse. (Too bad Mac users.) So run the mouse over the image.
Do you see the X and Y co-ordinates moving. Try clicking the right mouse. button to add a new point. Can you see the number of X,Y co-ordinates increasing? Continue until you cover an entire leaf. Count the number of nodes. You can see the node co-ordinates as you LEFT click.
Make a mistake?
Don't worry, just RIGHT click to clear. At some time in the future I'll add some better controls and allow you to save the shape as a list of verticies in JSON. Till then have fun.
You can read the Processing code how I achieved this at leaves-4.js. using this image, leaves-4.jpg (1000x763px at 158Kb. The code is GPL'd and the license is here.
The image below is loaded locally from the site, then displayed onto a canvas using the ProcessingJS PImage object. The original image is 150x150px and resized to 100px.
I'm starting off by reading though, 'Anatomy of a Program' [1] to model a leaf then display it, on-screen.
Here's my first throught doing some PT and thinking about it. I want to get a good approximation as possible to the shape as I can get. So why not first build a tool that shows an image and allows you to capture the data by pointing and clicking? While I can draw from the screen I want to get as close as possible to the original image.
One way to achieve this is to display an image on the screen, then with a combination of a mouse-over event and mouse-click event, when a user places the mouse over a point to capture, add a point and the x/y co-ordinates on the mouse click captured. If a geometric shape has a start and an end point, you copy the shape of the leaf. The result is a series of points outlining the leaf. This won't give the curves. Maybe if a line between Point-A to Point-B can be manipulated using continous spline curves to create the necessary outline.
A quick test to see if I can get some Processing working on neocities. Well it works. All I did was upload the latest Processing.js version and use the background sketch on Processing.js. You can read a quick explanation of how to do this here, Creating a Processing.js Web Page.
A simple tip: rename the ".pde file to .js" to upload to neocities.
[0] Processing, 'Processing is an open source programming language for visual images',
[Accessed 3oth June, 2013]
[1] Processing2, 'Anatomy of a Program',
http://processing.org/tutorials/anatomy/
[Accessed 3oth June, 2013]
