Wolfram Archive
Wolfram Programming Lab is a legacy product.
All the same functionality and features, including access to Programming Lab Explorations, are available with Wolfram|One.
Start programming now. »

Spiraling Squares

Make an app for creating spiral designs by incrementally rotating squares in a stack.

Run the code to rotate a square by 30 degrees. Try different angles (e.g. 45 degrees):

SHOW/HIDE DETAILS

This draws a default rectangle, which is a horizontal square:

In[1]:=1
Graphics[Rectangle[]]
Out[1]=1

This draws the square rotated:

In[2]:=2
Graphics[Rotate[Rectangle[], 30 Degree]]
Out[2]=2

HIDE DETAILS
In[1]:=1
Graphics[Rotate[Rectangle[], 30 Degree]]
Out[1]=1

Create an interface with a slider to rotate the square. Try angle ranges other than 360:

SHOW/HIDE DETAILS

You can make anything interactive in the Wolfram Language with Manipulatefor example, this code:

In[1]:=1
Graphics[Rotate[Rectangle[], 30 Degree]]

First replace the numeric angle value with a variable named angle:

In[2]:=2
Graphics[Rotate[Rectangle[], angle Degree]]

Then wrap the expression with Manipulate and specify the range of the variable. Manipulate automatically constructs an interface with a slider that controls the value of the angle:

In[3]:=3
Manipulate[ Graphics[Rotate[Rectangle[], angle Degree]], {angle, 0, 360} ]
Out[3]=3

HIDE DETAILS
In[1]:=1
Manipulate[ Graphics[Rotate[Rectangle[], angle Degree]], {angle, 0, 360} ]
Out[1]=1

Make a stack of 10 squares rotated in 5-degree increments. Try other increments or other numbers of squares:

SHOW/HIDE DETAILS

Table makes lists of elements, one for each value of a variable in a specified range. For example, this makes a list of even numbers:

In[1]:=1
Table[2 r, {r, 0, 10}]
Out[1]=1

This uses Table to make a stack of rectangles, each one rotated 5 degrees more than the one below it. It doesnt look like a stack of rectangles because you cant see their edges:

In[2]:=2
Graphics[{Table[Rotate[Rectangle[], r 5 Degree], {r, 0, 10}]}]
Out[2]=2

Make the edges white so you can see the individual rectangles in the stack:

In[3]:=3
Graphics[{EdgeForm[White], Table[Rotate[Rectangle[], r 5 Degree], {r, 0, 10}]}]
Out[3]=3

HIDE DETAILS
In[1]:=1
Graphics[{EdgeForm[White], Table[Rotate[Rectangle[], r 5 Degree], {r, 0, 10}]}]
Out[1]=1

Create an interface for changing the rotation increment between 0 and 45 degrees:

SHOW/HIDE DETAILS

This draws a stack of rectangles:

In[1]:=1
Graphics[{EdgeForm[White], Table[Rotate[Rectangle[], r 5 Degree], {r, 0, 10}]}]
Out[1]=1

Make that expression interactive with Manipulate. Replace the numeric angle value with a variable named angle:

In[2]:=2
Graphics[{EdgeForm[White], Table[Rotate[Rectangle[], r angle Degree], {r, 0, 10}]}]

Then wrap the expression with Manipulate and specify the range of the angle variable:

In[3]:=3
Manipulate[ Graphics[{EdgeForm[White], Table[Rotate[Rectangle[], r angle Degree], {r, 0, 10}]}], {angle, 0, 360} ]
Out[3]=3

HIDE DETAILS
In[1]:=1
Manipulate[ Graphics[{EdgeForm[White], Table[Rotate[Rectangle[], angle r Degree], {r, 0, 10}]}], {angle, 0, 45} ]
Out[1]=1

Add another control for changing the number of squares:

SHOW/HIDE DETAILS

The number of squares in this expression is determined by the value 10:

In[1]:=1
Manipulate[ Graphics[{EdgeForm[White], Table[Rotate[Rectangle[], angle r Degree], {r, 0, 10}]}], {angle, 0, 45} ]
Out[1]=1

Replace 10 by the variable n, and specify that n goes from 1 to 100 in steps of 1:

In[2]:=2
Manipulate[ Graphics[{EdgeForm[White], Table[Rotate[Rectangle[], angle r Degree], {r, 0, n}]}], {angle, 0, 45}, {n, 1, 100, 1} ]
Out[2]=2

HIDE DETAILS
In[1]:=1
Manipulate[ Graphics[{EdgeForm[White], Table[Rotate[Rectangle[], angle r Degree], {r, 0, n}]}], {angle, 0, 45}, {n, 1, 100, 1} ]
Out[1]=1

Make a sequence of progressively smaller squares. Try increments other than 5 degrees:

SHOW/HIDE DETAILS

This draws a stack of squares rotated in 5-degree increments:

In[1]:=1
Graphics[{EdgeForm[White], Table[Rotate[Rectangle[], 5 r Degree], {r, 0, 10}]}]
Out[1]=1

This uses Scale to scale down the squares as they rotate. The scale factor is 1-r/10, which goes from 1 to 0 as r goes from 0 to 10. The effect is to scale the squares from full-sized down to nothing:

In[2]:=2
Graphics[{EdgeForm[White], Table[Scale[Rotate[Rectangle[], 5 r Degree], 1 - r/10], {r, 0, 10}]}]
Out[2]=2

HIDE DETAILS
In[1]:=1
Graphics[{EdgeForm[White], Table[Scale[Rotate[Rectangle[], 5 r Degree], 1 - r/10], {r, 0, 10}]}]
Out[1]=1

Put everything together. Find flower-like and other patterns:

SHOW/HIDE DETAILS

Add scaling so that the rectangles get smaller as they rotate. Now you have a complete interface for exploring spiral designs:

In[1]:=1
Manipulate[ Graphics[{EdgeForm[White], Table[Scale[Rotate[Rectangle[], angle r Degree], 1 - r/n], {r, 0, n}]}], {angle, 0, 45}, {n, 1, 100} ]
Out[1]=1

HIDE DETAILS
In[1]:=1
Manipulate[ Graphics[{EdgeForm[White], Table[Scale[Rotate[Rectangle[], angle r Degree], 1 - r/n], {r, 0, n}]}], {angle, 0, 45}, {n, 1, 100} ]
Out[1]=1

Share Itmake an interactive website for exploring spiral designs:

SHOW/HIDE DETAILS

Deploy the Manipulate to the Wolfram Cloud, where anyone with a browser can use it:

In[1]:=1
CloudDeploy[ Manipulate[ Graphics[{EdgeForm[White], Table[Scale[Rotate[Rectangle[], angle r Degree], 1 - r/n], {r, 0, n}]}], {angle, 0, 45}, {n, 1, 100} ], Permissions -> "Public" ]
Out[1]=1

Click the link in the output to visit the site.

Tell the world about your creation by sharing the link via email, tweet or other message.

HIDE DETAILS
In[1]:=1
CloudDeploy[ Manipulate[ Graphics[{EdgeForm[White], Table[Scale[Rotate[Rectangle[], angle r Degree], 1 - r/n], {r, 0, n}]}], {angle, 0, 45}, {n, 1, 100} ], Permissions -> "Public" ]
Out[1]=1