-
Notifications
You must be signed in to change notification settings - Fork 3
/
spirals.html
176 lines (141 loc) · 7.09 KB
/
spirals.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mesmerizing Spirals: A Colorful Turtle Art Adventure</title>
<link rel="stylesheet" href="./prism.css">
<link rel="stylesheet" href="./styles.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://kit.fontawesome.com/ca5bd151a9.js" crossorigin="anonymous"></script>
<script defer src="./styles.js"></script>
<script defer src="./prism.js"></script>
</head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<top-section class="top-nav">
<div>
<img src="./exmo.png" height="47px" top="10px">
</div>
<input id="menu-toggle" type="checkbox" />
<label class='menu-button-container' for="menu-toggle">
<div class='menu-button'></div>
</label>
<ul class="menu">
<!--add links-->
<li><a href="./SHM.html">An Artistic Exploration of Simple Harmonic Motion with Python Turtle</a></li>
<li><a href="./turtles1.html">Exploring Colorful Patterns with Python's Turtle Graphics</a></li>
<li><a href="./spirals.html" >Mesmerizing Spirals: A Colorful Turtle Art Adventure</a></li>
<li><a href="./Circular.html">Colorful Spiral Art with Python Turtle</a></li>
<li><a href="./ImageTracing.html">Drawing from an Image using OpenCV and Turtle</a></li>
<li><a href="./Spirograph.html">Spirograph Art with Python Turtle</a></li>
<li><a href="./gravity.html">Planetary motion</a></li>
<li><a href="./Functions.html">Visualizing Complex-Valued Functions</a></li>
<li><a href="./pendulum.html">Double Pendulum Simulation with Python Turtle</a></li>
<li><a href="./concentricCircle.html">Colorful Concentric Circles with Python Turtle</a></li>
<li><a href="./heart.html">Heart Shape with Python Turtle</a></li>
<li><a href="./clock.html">Python Turtle Clock</a></li>
</ul>
</top-section>
<body>
<script>/*<![CDATA[*/ /* Codebox Script by Fineshop Design */ function copyC(e,t){var o=document.getElementById(e),n=document.getElementById(t),e=getSelection(),t=document.createRange();e.removeAllRanges(),t.selectNodeContents(n),e.addRange(t),document.execCommand("copy"),e.removeAllRanges(),o.classList.add("copied"),document.getElementById("toastNotif").innerHTML="<span>Copied to Clipboard!</span>",setTimeout(()=>{o.classList.remove("copied")},3e3)} /*]]>*/</script>
<div id="content" >
<h1>Mesmerizing Spirals: A Colorful Turtle Art Adventure</h1>
<section>
<div>
<h2>Introduction:</h2>
<p>In this blog post, we will explore a captivating Python turtle program that creates mesmerizing spirals with a burst of colors on a black background. Utilizing the turtle graphics library and the colorsys module, the code elegantly combines mathematical patterns with artistic flair. Brace yourself for a visual treat as we unveil the beauty of generative art through spirals and vibrant hues.</p>
</div>
</section>
<section>
<!--[ Code Box ]-->
<div class='cBox'>
<div class='cBoxH'>
<!--[ Heading ]-->
<span>Code --> python</span>
<!--[ Copy Button ]-->
<button id='copy3' class='cBoxB' onclick="copyC('copy3','code3')">
<i class='icn'></i>
</button>
</div>
<!--[ python-code ]-->
<div id='code3'>
<pre class="line-numbers">
<code class="language-python">from turtle import *
from colorsys import *
bgcolor('black')
tracer(100)
pensize(4)
h = 0
def draw(ang, n):
circle(5+n, 69)
left(ang)
circle(5+2*n, 60)
goto(0, 0)
for i in range(500):
c = hsv_to_rgb(h, 1, 1)
h += 0.005
color(c)
up()
draw(90, i)
draw(180, i)
down()
draw(1/2, i-i)
draw(180, i/2)
draw(120, i-i)
</code>
</pre>
</div>
</div>
</section>
<section>
<div>
<h2>Code Overview:</h2>
<p>The code begins by importing the necessary modules: 'turtle' for graphics and 'colorsys' to work with colors in the HSV (Hue, Saturation, Value) color space. The background is set to black, and the turtle drawing speed is increased for smoother rendering.</p>
</div>
</section>
<section>
<div>
<h2>Drawing Function:</h2>
<p>The heart of the code lies in the 'draw()' function. This function creates a set of nested spirals by cleverly combining turtle movements and circle drawings. The function takes two parameters, "ang" for the angle of rotation and "n" for the size of the spiral.</p>
</div>
</section>
<section>
<div>
<h2>Main Loop:</h2>
<p>The main loop of the program executes 500 iterations, creating an impressive visual progression. With each iteration, the code updates the color by incrementing the hue value (h) in the HSV color space, creating a seamless transition through the color spectrum.</p>
</div>
</section>
<section>
<div>
<h2>Spiral Patterns:</h2>
<p>The code uses the 'draw()' function to create various spiral patterns in each iteration. Starting with a simple spiral and gradually introducing new angles, the code unfolds an enchanting dance of spirals with ever-changing shapes and sizes. Each spiral is colored using the updated hue value, creating a vibrant and dynamic display.</p>
</div>
</section>
<section>
<div>
<h2>Conclusion:</h2>
<p>In this blog post, we have explored a Python turtle program that crafts intricate spirals on a black canvas, accompanied by an explosion of colors. Combining mathematics with art, the program demonstrates the beauty of generative art and the endless possibilities that code can bring to life. Feel free to try out the code yourself and unleash your creativity with mesmerizing spirals and personalized color combinations. Happy coding and artistic exploration!</p>
</div>
</section>
</section>
<section><div><img src="Spyrograph.png" class="image"></div></section>
<!-- footer section start -->
<footer>
<div class="col">
<img src="exmo.png" height="80px">
</div>
<div class="col">
<p>EXMO 2023 is the Flagship Technological Experience of University of Moratuwa. EXMO provides a platform for the talented undergraduates and postgraduates of the university to unveil their creative and innovative engineering designs and research, while also creating opportunities for its attendees to enhance their technological awareness.</p>
</div>
<div class="col">
<ul class="socials">
<li><a href="https://www.facebook.com/EXMOUOM"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="https://www.instagram.com/exmo_uom/"><i class="fab fa-instagram"></i></a></li>
<li><a href="https://www.youtube.com/@EXMO_uom"><i class="fab fa-youtube"></i></a></li>
<li><a href="http://linkedin.com/company/exmo-uom"><i class="fab fa-linkedin"></i></a></li>
</ul>
</div>
</footer>
<!-- footer copy right section end -->
<!--closes menu-bar-->
</body>
</html>