JavaScript – Drawing Golden Spirals on Images

Rad Len Rot Δ  ± Ä ?

x   y   width px     
Draw your spiral – select the background paper, plain color or white
Paper White Clean
pick /set #HEX ·submit·

H E L P  

A previous help section, dedicated to the first release of this console, is a­vail­a­ble at the presentation page, introducing the first and simply drawing tool.
If you got here directly by a link, you may need to acquire the basic steps, de­scribed in the chapter dedicated to the true golden spirals

After so much effort, the final realization could not be missing, the one for which each of us can put into practice how much it is possible for him to de­vel­op au­then­tic golden spirals, applying them or better, obtaining them from living creatures, instead of so many superficial mystifications.
To this end, I have taken the first model tested on the mytilus edulis and dem­on­strat­ed there with a first composition tool, to build a complete and versatile one, although still rudimentary, functional enough to allow a direct online ap­proach.
It integrates the console already proposed – but which would remain an ab­stract experience – with the addition of some commands necessary both for load­ing and positioning images on them, and for manipulating and adapting the spirals on them, until discovering the most suitable one for individual cases.
It is important to bear in mind that it is a console developed directly in HTML5 for a single web page, therefore kept essential in terms of layout and usable space. Therefore it will be necessary to pay some attention to a sequential and correct use of the same, since some parametric fields serve more than one function and will have to be updated passing from one to another; otherwise, unexpected and inconvenient results may occur (even for the writer); but the greatest risk is having to refresh the spirals, or the page.

To deal with it immediately, the already existing keyboard has been added – although ultimately – the button skew, used to incline the spirals horizontally and/or vertically; a command that should be used last and for slight adjustments to any three­-di­men­sion­al pho­to­graph­ic perspectives.
It is the most delicate and unpredictable to use, difficult but in some cases very useful, for those who have patience. Its execution draws on the pa­ram­e­ters en­tered in the x and y fields and in order not to leave too much sur­prise, it will appear bordered by a turquoise dotted line.
In some browsers it may end up overlaying the keyboard commands, making access impossible. I should have fixed it, but when in doubt I set up a curious but­ton: rear or front the skew spiral, which appears at the top right of the ti­tle and can be moved anywhere on the screen.
However, it alternates the visibility of the spirals above or below the dash­board, freeing it where necessary.

Now the image: get+ invites you to choose a file from your system or by en­ter­ing a URL. It will be placed at x:15px, y:430px of the board in its native size.
The browser may or may not supply its width in the width field, from which the size may be varied proportionally, and shifted according to the number of pixels entered in x and y; can also be rotated, by degrees, preferably at right angles.
All this with the put button, while will mirror it horizontally combined with the other parameters, in order to keep the current positioning.
For a vertical reflection just combine it with a 180° rotation [put: x=0, y=0].
After the various tests seen here, I added the possibility of inverting the motion of the spirals clockwise (on/off), using the same button above.
This option can only be applied before uploading an image; since thereafter it will only act on that one. If you change your mind, just reload the page.
To cancel horizontal inversion, click the same button.
Combining the various options is still difficult for me, so it will be necessary to choose which one will be the last to fix and not take it badly if something does not respond as expected; because it's never done with programming.
Regarding the image to be loaded, a piece of advice for the more expert would be to modify its format before uploading it, so that what would be its ideal cen­ter for the spiral is at the vertical and horizontal center of the whole picture; an example is on the side; it is not always easy to identify it on the photos, but it can make much more practicable and fruitful the options, which will act around that center and not at the random center of the image.
Here is an image tak­en from the web, re­sized with the dark back­ground to the right and be­low, show­ing its own cen­ter in white, and by the gold­en ar­rows ex­tend­ed in red the prob­a­ble cen­ter of the spi­ral, which in this pan­el is just the one at 144°, and it would be enough to rotate the shell 20 or 30 degrees on the support to see it coincide.
Further attempts at trac­ing, how­ev­er, dem­on­strate what may be o­ver­looked at first sight, name­ly that the shot, aimed at en­hanc­ing the beau­ty of the ob­ject, en­hances its ex­ter­nal part with a shot that is not fron­tal e­nough (should I say or­thog­o­nal?), which height­ens the pro­por­tions of the ex­ter­nal volute by re­duc­ing the in­ter­nal ones in per­spec­tive.
To be able to declaim instructive results, it is finally worth taking note of eve­ry­thing that can lead to misrepresentation.

In summary x, y, width and rotation will be managed together by the second row buttons, while x and y will also apply to the tilt button, so you need to up­date the contents in the rare case of switching from one to the other.
This choice bascally made it possible to keep the commands clearly visible on a contained operating space.
One or more new ver­sions, not im­prob­a­ble, could op­ti­mize eve­ry­thing; but it should be con­sid­ered that this con­sole was born and raised in a few days with on­go­ing re­search (ex­am­ple at the side), and is not in­tend­ed to re­place heav­i­er and more com­plex ap­pli­ca­tions, which re­quire spe­cif­ic in­stal­la­tion and ex­per­tise, but ra­ther to of­fer those who want it a di­rect and han­dy ac­cess, to con­front the true gold­en spi­ral in all its forms, re­plac­ing mean­ing­less graph­ic ex­pe­di­ents with a well-founded ex­per­i­men­tal path.
A print to file via a PDF print­er (which can be in­stalled vir­tu­al­ly, even with­out owning it, and ren­ders ja­vas­cript spi­rals bet­ter than a PDF print from a brows­er) will be able to save the ob­tained re­sults quite well.

Finally, some useful accessories to intervene with effects on the visibility and contrast of details, enabling or inverting the background colors, to better adapt the screen to each type of image in use.
First, three quick options: paper, white and clean, the latter uniforms the back­ground to the homogeneous paper color, thus reducing the possible problem of sep­a­rat­ing the paper background in a screenshot to be processed in a graphic ed­i­tor for some photo montage which, at least for now, seems to be the most practiced resource.
They won't be accessible anymore after using the following system ones.
The button next to pick opens an HTML window for choosing and setting a background color (which it reproduces); the #HEX field allows experts to enter a default one, in the format #FFF or #FFFFFF which, if valid, will take prec­e­dence. Clicking submit will in fact activate one or the other.
They follow as [on/off] switches: to reverse image and dashboard (e.g. with: HEX #0080C0), and to highlight the golden outline, if needed on an image.

graphic rotation of the spiral
In the early stages of this study, whatever the length of the ray, the spiral always started from the zero angle of the JavaScript, 270° in the PostScript notation I used in the images and blackboard background, 6 o'clock on the clock.
spiral rotation · 10°, 50°, 100° · radius rotation
Changing the radius rotates the spiral with respect to any previous try, in some cases disorienting the operator; since the modification intervenes on the entire placement of the spiral on a background figure, it can bring the solution closer to or further away, having to rearrange the ratio and rotation parameters which for a spiral is equivalent to a zoom.
To clarify the matter, I have therefore inserted a new mode, in addition to the first, which allows you to trace each spiral in a single way, keeping its o­ri­en­ta­tion un­changed for any radius, which will rotate by placing itself in the angle of the curve that belongs to it.
They can satisfy different needs; in this way however, once the rotation of the spi­ral has been established with respect to an image, its starting angle can be var­ied with­out having to readapt it.
The button Ä represents the state of the second (default), which alternates in Å for the first one, and vice versa.

continues… thank you for sharing;
please note that this website is non-profit, ad-free, cookie-free.
if you want to post some good result, send it with the whole dashboard to the @ If at least three people, I 'll put the figures in a gallery, with names and links