SVG construction example 5 - clock or ornament


	links to this page:

Last updated at 10:14 am UTC on 16 May 2019

Lets construct a SVG skeleton for a clock or ornament. A circle with 60 dots which may be used for many exercises.

The start to calculate the position of the dots. Unit circle at the moment.

| x y phi |
Transcript clear.
0 to: 59 do: [:i | phi := i *(2* Float pi) / 12 .
	x := phi sin.
	y := phi cos.
	Transcript show: i printString, ': ', phi radiansToDegrees, 'x= ', x, ' y= ',y  ; cr]

The template from SVG construction example 1

circle := [:cx :cy :r :fill| '<circle cx="', cx printString, '" cy="', cy printString, '" r="', r printString, '" fill="', fill, '" />'].

Transcript clear.
Transcript show: '<html><svg>';cr.
1 to: 5 do: [:i |
Transcript show: (circle value: (i*50) value: 50 value: 20 value: 'black'); cr].
Transcript show: '</svg></html>';cr.

	radius := 0.01.
	i \\ 5 = 0 ifTrue: [radius := 0.02].

The two scrips combined partially

| x y phi |
Transcript clear.
radiusLargeCircle := 200.
numberOfDivisions := 24.

	
0 to: numberOfDivisions do: [:i | phi := i * (2 * Float pi) / numberOfDivisions .
	x := (radiusLargeCircle * phi sin) roundTo: 2.
	y := (radiusLargeCircle * phi cos) roundTo: 2.
	radiusOfDot := 0.01.
	i \\ 5 = 0 ifTrue: [radiusOfDot := 0.02].
	radiusLargeCircle := 200.
	
	Transcript show: i printString, ': ', ' phi= ',  (phi radiansToDegrees roundTo: 2), '   x= ', x, '   y= ',y  ; cr]

The result


0:  phi= 0   x= 0   y= 200
1:  phi= 14   x= 52   y= 194
2:  phi= 30   x= 100   y= 174
3:  phi= 46   x= 142   y= 142
4:  phi= 60   x= 174   y= 100
5:  phi= 76   x= 194   y= 52
6:  phi= 90   x= 200   y= 0
7:  phi= 106   x= 194   y= -52
8:  phi= 120   x= 174   y= -100
9:  phi= 136   x= 142   y= -142
10:  phi= 150   x= 100   y= -174
11:  phi= 166   x= 52   y= -194
12:  phi= 180   x= 0   y= -200
13:  phi= 196   x= -52   y= -194
14:  phi= 210   x= -100   y= -174
15:  phi= 224   x= -142   y= -142
16:  phi= 240   x= -174   y= -100
17:  phi= 256   x= -194   y= -52
18:  phi= 270   x= -200   y= 0
19:  phi= 286   x= -194   y= 52
20:  phi= 300   x= -174   y= 100
21:  phi= 316   x= -142   y= 142
22:  phi= 330   x= -100   y= 174
23:  phi= 344   x= -52   y= 194
24:  phi= 360   x= 0   y= 200

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform

| x y phi |
Transcript clear.
radiusLargeCircle := 200.
numberOfDivisions := 24.


circle := [:cx :cy :r :fill| '<circle cx="', cx printString, '" cy="', cy printString, '" r="', r printString, '" fill="', fill, '" />'].
	
Transcript show: '<html><svg width="600" height="600">';cr.	
Transcript show: '<g  transform="translate(300 300)">';cr.	
	
0 to: numberOfDivisions do: [:i | phi := i * (2 * Float pi) / numberOfDivisions .
	x := (radiusLargeCircle * phi sin) roundTo: 1.
	y := (radiusLargeCircle * phi cos) roundTo: 1.
	radiusOfDot := 1. colorOfDot := 'red'.
	i \\ 2 = 0 ifTrue: [radiusOfDot := 3].
	i \\ 4 = 0 ifTrue: [radiusOfDot := 5].
	
	"
	Transcript show: i printString, ': ', ' phi= ',  (phi radiansToDegrees roundTo: 2), '   x= ', x, '   y= ',y  ; cr.
	"
	
	Transcript show: (circle value: x value: y value: radiusOfDot value: colorOfDot); cr.
	
	].

Transcript show: '</g>';cr.	
Transcript show: '</svg></html>';cr.

With the following parameters

    radiusLargeCircle := 280.
...
    colorOfDot := 'blue'.

Parameters:

      radiusOfDot := 1. colorOfDot := 'green'.
	i \\ 5 = 0 ifTrue: [radiusOfDot := 3].
	i \\ 15 = 0 ifTrue: [radiusOfDot := 4].

See also