It is currently Fri Jul 26, 2024 7:23 am


All times are UTC - 5 hours [ DST ]



Post new topic Reply to topic  [ 14 posts ] 
Author Message
 Post subject: Golden Ratio Grid
PostPosted: Mon Jan 08, 2018 12:26 am  (#1) 
Offline
Former Member
User avatar

Joined: Nov 17, 2010
Posts: 618
Location: Rockford, IL
Attachment:
golden-ratio-grid.png
golden-ratio-grid.png [ 18.97 KiB | Viewed 6392 times ]

A perfect representation of the Golden Ratio originally designed in Inkscape and remade in Gravit Designer!

You can view/edit the code on Codepen: https://codepen.io/michaelsboost/pen/Mr ... itors=1000

The template also comes with the Golden Ratio Spiral as well. (It's just a hidden group)

<?xml version="1.0" standalone="no"?>
  <!-- Generator: Gravit.io -->
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="0 0 610 375.38" width="610" height="375.38">
    <defs>
      <clipPath id="_clipPath_89oXeQRRVQYsYGaISvYZBERHIAh3hWZb">
        <rect width="610" height="375.38" />
      </clipPath>
    </defs>
    <g clip-path="url(#_clipPath_89oXeQRRVQYsYGaISvYZBERHIAh3hWZb)">
      <g id="Rectangles">
        <rect x="375.385" y="234.615" width="46.923" height="46.923" transform="matrix(1,0,0,1,0,0)" fill="none" vector-effect="non-scaling-stroke" stroke-width="1.303" stroke="rgb(0,0,0)" stroke-linejoin="miter" stroke-linecap="square" stroke-miterlimit="3" />
        <rect x="422.308" y="234.615" width="46.923" height="46.923" transform="matrix(1,0,0,1,0,0)" fill="none" vector-effect="non-scaling-stroke" stroke-width="1.303" stroke="rgb(0,0,0)" stroke-linejoin="miter" stroke-linecap="square" stroke-miterlimit="3" />
        <rect x="375.385" y="281.538" width="93.846" height="93.846" transform="matrix(1,0,0,1,0,0)" fill="none" vector-effect="non-scaling-stroke" stroke-width="1.303" stroke="rgb(0,0,0)" stroke-linejoin="miter" stroke-linecap="square" stroke-miterlimit="3" />
        <rect x="469.231" y="234.615" width="140.769" height="140.769" transform="matrix(1,0,0,1,0,0)" fill="none" vector-effect="non-scaling-stroke" stroke-width="1.303" stroke="rgb(0,0,0)" stroke-linejoin="miter" stroke-linecap="square" stroke-miterlimit="3" />
        <rect x="375.385" y="0" width="234.615" height="234.615" transform="matrix(1,0,0,1,0,0)" fill="none" vector-effect="non-scaling-stroke" stroke-width="1.303" stroke="rgb(0,0,0)" stroke-linejoin="miter" stroke-linecap="square" stroke-miterlimit="3" />
        <rect x="0" y="0" width="375.385" height="375.385" transform="matrix(1,0,0,1,0,0)" fill="none" vector-effect="non-scaling-stroke" stroke-width="1.303" stroke="rgb(0,0,0)" stroke-linejoin="miter" stroke-linecap="square" stroke-miterlimit="3" />
      </g>
      <g id="Circles">
        <path d=" M 375.385 258.077 C 375.385 245.128 385.897 234.615 398.846 234.615 C 411.795 234.615 422.308 245.128 422.308 258.077 C 422.308 271.026 411.795 281.538 398.846 281.538 C 385.897 281.538 375.385 271.026 375.385 258.077 Z " fill="none" vector-effect="non-scaling-stroke" stroke-width="1.303" stroke="rgb(0,0,0)" stroke-linejoin="miter" stroke-linecap="square" stroke-miterlimit="3" />
        <path d=" M 375.385 328.462 C 375.385 302.564 396.41 281.538 422.308 281.538 C 448.205 281.538 469.231 302.564 469.231 328.462 C 469.231 354.359 448.205 375.385 422.308 375.385 C 396.41 375.385 375.385 354.359 375.385 328.462 Z " fill="none" vector-effect="non-scaling-stroke" stroke-width="1.303" stroke="rgb(0,0,0)" stroke-linejoin="miter" stroke-linecap="square" stroke-miterlimit="3" />
        <path d=" M 469.231 305 C 469.231 266.154 500.769 234.615 539.615 234.615 C 578.462 234.615 610 266.154 610 305 C 610 343.846 578.462 375.385 539.615 375.385 C 500.769 375.385 469.231 343.846 469.231 305 Z " fill="none" vector-effect="non-scaling-stroke" stroke-width="1.303" stroke="rgb(0,0,0)" stroke-linejoin="miter" stroke-linecap="square" stroke-miterlimit="3" />
        <path d=" M 375.385 117.308 C 375.385 52.564 427.948 0 492.692 0 C 557.436 0 610 52.564 610 117.308 C 610 182.052 557.436 234.615 492.692 234.615 C 427.948 234.615 375.385 182.052 375.385 117.308 Z " fill="none" vector-effect="non-scaling-stroke" stroke-width="1.303" stroke="rgb(0,0,0)" stroke-linejoin="miter" stroke-linecap="square" stroke-miterlimit="3" />
        <path d=" M 0 187.692 C 0 84.102 84.102 0 187.692 0 C 291.283 0 375.385 84.102 375.385 187.692 C 375.385 291.283 291.283 375.385 187.692 375.385 C 84.102 375.385 0 291.283 0 187.692 Z " fill="none" vector-effect="non-scaling-stroke" stroke-width="1.303" stroke="rgb(0,0,0)" stroke-linejoin="miter" stroke-linecap="square" stroke-miterlimit="3" />
        <path d=" M 422.308 258.077 C 422.308 245.128 432.82 234.615 445.769 234.615 C 458.718 234.615 469.231 245.128 469.231 258.077 C 469.231 271.026 458.718 281.538 445.769 281.538 C 432.82 281.538 422.308 271.026 422.308 258.077 Z " fill="none" vector-effect="non-scaling-stroke" stroke-width="1.303" stroke="rgb(0,0,0)" stroke-linejoin="miter" stroke-linecap="square" stroke-miterlimit="3" />
      </g>
      <g id="Spirals">
        <path d=" M 440.046 266.185 C 442.763 266.185 444.968 268.391 444.968 271.107" fill="none" vector-effect="non-scaling-stroke" stroke-width="1.303" stroke="rgb(0,0,0)" stroke-linejoin="miter" stroke-linecap="square" stroke-miterlimit="3" />
        <path d=" M 432.079 274.153 C 432.079 269.756 435.649 266.186 440.046 266.186" fill="none" vector-effect="non-scaling-stroke" stroke-width="1.303" stroke="rgb(0,0,0)" stroke-linejoin="miter" stroke-linecap="square" stroke-miterlimit="3" />
        <path d=" M 444.968 287.042 C 437.854 287.042 432.079 281.267 432.079 274.153" fill="none" vector-effect="non-scaling-stroke" stroke-width="1.303" stroke="rgb(0,0,0)" stroke-linejoin="miter" stroke-linecap="square" stroke-miterlimit="3" />
        <path d=" M 465.826 266.185 C 465.826 277.697 456.48 287.042 444.969 287.042" fill="none" vector-effect="non-scaling-stroke" stroke-width="1.159" stroke="rgb(0,0,0)" stroke-linejoin="miter" stroke-linecap="square" stroke-miterlimit="3" />
        <path d=" M 432.079 231.279 C 450.704 231.279 465.826 246.401 465.826 265.026" fill="none" vector-effect="non-scaling-stroke" stroke-width="1.159" stroke="rgb(0,0,0)" stroke-linejoin="miter" stroke-linecap="square" stroke-miterlimit="3" />
        <path d=" M 376.469 285.875 C 376.469 255.743 400.932 231.279 431.064 231.279" fill="none" vector-effect="non-scaling-stroke" stroke-width="1.159" stroke="rgb(0,0,0)" stroke-linejoin="miter" stroke-linecap="square" stroke-miterlimit="3" />
        <path d=" M 464.811 375.385 C 416.053 375.385 376.469 335.8 376.469 287.042" fill="none" vector-effect="non-scaling-stroke" stroke-width="1.159" stroke="rgb(0,0,0)" stroke-linejoin="miter" stroke-linecap="square" stroke-miterlimit="3" />
        <path d=" M 607.748 232.447 C 607.748 311.337 543.7 375.385 464.811 375.385" fill="none" vector-effect="non-scaling-stroke" stroke-width="1.159" stroke="rgb(0,0,0)" stroke-linejoin="miter" stroke-linecap="square" stroke-miterlimit="3" />
        <path d=" M 376.469 0 C 504.115 0 607.748 103.633 607.748 231.279" fill="none" vector-effect="non-scaling-stroke" stroke-width="1.159" stroke="rgb(0,0,0)" stroke-linejoin="miter" stroke-linecap="square" stroke-miterlimit="3" />
        <path d=" M 2.252 374.217 C 2.252 167.681 169.933 0 376.469 0" fill="none" vector-effect="non-scaling-stroke" stroke-width="1.159" stroke="rgb(0,0,0)" stroke-linejoin="miter" stroke-linecap="square" stroke-miterlimit="3" />
      </g>
    </g>
  </svg>


SVG file is also available for download:


Attachments:
golden-ratio-grid.zip [1.76 KiB]
Downloaded 405 times


Last edited by mikethedj4 on Tue Jan 23, 2018 7:55 pm, edited 5 times in total.
Share on Facebook Share on Twitter Share on Orkut Share on Digg Share on MySpace Share on Delicious Share on Technorati
Top
 Post subject: Re: Golden Ratio Grid
PostPosted: Mon Jan 08, 2018 2:38 am  (#2) 
Offline
Script Coder
User avatar

Joined: Oct 25, 2010
Posts: 4759
It cannot be "perfect" if you have the two equal smaller circles (which are each one half of the immediately bigger circle, while one should be 0.618 times that).

_________________
Image


Top
 Post subject: Re: Golden Ratio Grid
PostPosted: Mon Jan 08, 2018 9:19 am  (#3) 
Offline
Script Coder
User avatar

Joined: Oct 25, 2010
Posts: 4759
ofnuts wrote:
It cannot be "perfect" if you have the two equal smaller circles (which are each one half of the immediately bigger circle, while one should be 0.618 times that).


Btw, your graphic a good visual proof that
1/ϕ=ϕ⁰+ϕ²+ϕ⁴+ϕ⁶+....

_________________
Image


Top
 Post subject: Re: Golden Ratio Grid
PostPosted: Mon Jan 08, 2018 10:21 am  (#4) 
Offline
GimpChat Member

Joined: Sep 23, 2016
Posts: 316
ofnuts wrote:
It cannot be "perfect" if you have the two equal smaller circles


I think having two equal smaller circles is correct.

See here:
https://www.mathsisfun.com/numbers/fibo ... uence.html
0, 1, 1, 2, 3, 5, 8, 13, 21, 34


Top
 Post subject: Re: Golden Ratio Grid
PostPosted: Mon Jan 08, 2018 12:00 pm  (#5) 
Offline
Script Coder
User avatar

Joined: Oct 25, 2010
Posts: 4759
Blighty II wrote:
ofnuts wrote:
It cannot be "perfect" if you have the two equal smaller circles


I think having two equal smaller circles is correct.

See here:
https://www.mathsisfun.com/numbers/fibo ... uence.html
0, 1, 1, 2, 3, 5, 8, 13, 21, 34


There should be no end... Each time you have a rectangle (which is 1:1.618..), you cut a square out of it, and you are left with a smaller rectangle which is itself 1:1.618, in which you cut a square, etc... and you repeat ad nauseam (of course, with bitmaps you stop when the rectangle is about one pixel...) (because one property of the Golden Ratio is that 1/ϕ=ϕ+1).

_________________
Image


Top
 Post subject: Re: Golden Ratio Grid
PostPosted: Mon Jan 08, 2018 12:23 pm  (#6) 
Offline
GimpChat Member

Joined: Sep 23, 2016
Posts: 316
ofnuts wrote:
Each time you have a rectangle (which is 1:1.618..), you cut a square out of it


I think it works the other way round. Start with a small square and keep increasing (which is what the OP has done). But early in the sequence you get 2 squares of equal size.

The ratio of 1.618 only appears after several iterations.


Attachments:
Fibonacci1.png
Fibonacci1.png [ 9.6 KiB | Viewed 6295 times ]
Top
 Post subject: Re: Golden Ratio Grid
PostPosted: Mon Jan 08, 2018 2:44 pm  (#7) 
Offline
GimpChat Member
User avatar

Joined: Mar 23, 2012
Posts: 7316
Location: Göteborg at last!
I'm out of my depth with the maths but the way I understand it from my art college teaching is that the page is divided so that the smaller part is to the larger what the larger is to the whole. This division of a page suggests to me that Ofnuts is correct and you in fact subtract.


Top
 Post subject: Re: Golden Ratio Grid
PostPosted: Mon Jan 08, 2018 3:39 pm  (#8) 
Offline
Script Coder
User avatar

Joined: May 07, 2014
Posts: 4041
Location: Canada
I looked up Golden Ratio on wikipedia, and it seems ofnuts is correct. Because what the OP has is the Fibonacci Spiral which approximates the golden spiral (which starts with 2 equal squares and not a golden ratio every step along the way) (not exact, therefore not "perfect").

_________________
TinT


Top
 Post subject: Re: Golden Ratio Grid
PostPosted: Mon Jan 08, 2018 4:58 pm  (#9) 
Offline
Script Coder
User avatar

Joined: May 07, 2014
Posts: 4041
Location: Canada
Here's a more "perfect" golden ratio grid (of course only accurate to 3 decimal places as Inkscape allows).
Image

zipped .svg (with guides accurate to 3 decimal places).
Attachment:
golden_ratio_grid.zip [1.97 KiB]
Downloaded 249 times

_________________
TinT


Top
 Post subject: Re: Golden Ratio Grid
PostPosted: Mon Jan 08, 2018 7:20 pm  (#10) 
Offline
Script Coder
User avatar

Joined: Oct 25, 2010
Posts: 4759
trandoductin wrote:
Here's a more "perfect" golden ratio grid (of course only accurate to 3 decimal places as Inkscape allows).
[ Image ]

zipped .svg (with guides accurate to 3 decimal places).
Attachment:
golden_ratio_grid.zip

I'm pretty sure you know enough Python to script that down to sub-pixel squares. You only need log(1000)/log(ϕ)≈15 iterations.

_________________
Image


Top
 Post subject: Re: Golden Ratio Grid
PostPosted: Mon Jan 08, 2018 8:40 pm  (#11) 
Offline
GimpChat Member
User avatar

Joined: Nov 04, 2015
Posts: 1366
Good on mikethedj for this code and graphic. Seems that the 'golden ratio' or phi is an irrational number so the discussion cannot be decided mathematically. Agree with ofnuts that it doesn't look right. It would have to be a recursive representation of circles going on to infinity.
Could be a Droste effect like this:

Image


Top
 Post subject: Re: Golden Ratio Grid
PostPosted: Mon Jan 08, 2018 11:37 pm  (#12) 
Offline
Script Coder
User avatar

Joined: May 07, 2014
Posts: 4041
Location: Canada
but i wanted to try out inkscape.

_________________
TinT


Top
 Post subject: Re: Golden Ratio Grid
PostPosted: Tue Jan 09, 2018 8:47 am  (#13) 
Offline
Script Coder
User avatar

Joined: Oct 25, 2010
Posts: 4759
trandoductin wrote:
but i wanted to try out inkscape.


That can be scripted in Python too :)

_________________
Image


Top
 Post subject: Re: Golden Ratio Grid
PostPosted: Tue Jan 09, 2018 2:12 pm  (#14) 
Offline
GimpChat Member

Joined: Sep 23, 2016
Posts: 316
Curiosity got the better of me so I decided to check out the difference between Fibonnaci and Golden Ratio. Ofnuts was correct.

I constructed a Fibonnaci spiral and a Golden Ratio spiral. (I used Inkscape Spiro Path to draw the curves - this is slightly off but the same error for both spirals.) I then superimposed the 2 spirals.

On a low res bitmap image like I created there is no perceptible difference. Mathematically the 2 are different but as a layout tool for an artist they can be considered the same.


Attachments:
FibonnaciGoldenSuperimposed1.png
FibonnaciGoldenSuperimposed1.png [ 23.1 KiB | Viewed 1882 times ]
GoldenRatioSpiral01.png
GoldenRatioSpiral01.png [ 28.5 KiB | Viewed 1882 times ]
FibonnaciSpiral01.png
FibonnaciSpiral01.png [ 29.31 KiB | Viewed 1882 times ]
Top
Post new topic Reply to topic  [ 14 posts ] 

All times are UTC - 5 hours [ DST ]


   Similar Topics   Replies 
No new posts Attachment(s) Initial Zoom Ratio = Show entire image?

4

No new posts Attachment(s) tiny text, aspect ratio, batch watermarking, instagram/twitter

1

No new posts Attachment(s) Using the Grid

6

No new posts Attachment(s) Quickly get a themed grid background/art

12

No new posts Spin-art Grid kind'a like Kandinsky's circles but for any image

1



* Login  



Powered by phpBB3 © phpBB Group