-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
557 lines (389 loc) · 30.9 KB
/
index.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
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
<!doctype html>
<head>
<meta charset="UTF-8">
<title>Rainbow Hearts Prototype</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="jumbotron text-center">
<h1>Scientific Computing <br>
& Physics Experiments</h1>
<h2>using the RaspberryPi & SenseHAT</h2>
</div> <!-- end jumbotron div-->
<nav class="navbar navbar-default navbar-static-top navbar-inverse">
<!-- class="navbar navbar-default navbar-static-top second-navbar"
--> <div class="container-fluid">
<p class="text-muted" id="center">Raspberry Pi is a trademark of the Raspberry Pi Foundation.</p>
</div>
</nav>
<div class="col-md-2" id="sidebar">
<ul class="nav nav-pills nav-stacked hidden-sm hidden-xs" id="nav">
<li role="presentation"><a href="#things-you-need">Things You Need</a></li>
<li role="presentation"><a href="#getting-set-up">Getting Set Up</a></li>
<li role="presentation"><a href="#resources">Resources</a></li>
<li role="presentation"><a href="#lets-start-coding">Let's Start Coding!</a></li>
<li role="presentation"><a href="#choose-your-colors">Choose Your Colors</a></li>
<li role="presentation"><a href="#prepare-the-leds">Prepare the LEDs</a></li>
<li role="presentation"><a href="#lighting-up-the-leds">Lighting Up the LEDs</a></li>
<li role="presentation"><a href="#run-your-file">Run Your File</a></li>
</ul>
</div> <!-- end sidebar navigation-->
<div class="container">
<div class="row">
<div class="sm-col-6 xs-col-12" id="image"><br><br>
<h1>Light-up Rainbow Hearts</h1>
<h3 id="black">Use your Raspberry Pi and SenseHAT to display flashing, colorful hearts</h3>
<img src="https://images-na.ssl-images-amazon.com/images/I/51K53jwHU0L._SX355_.jpg"><br><br><br>
</div> <!-- end image div -->
<div class="sm-col-6 xs-col-12" id="you-will-need">
<h3 id="things-you-need">Things You Need</h3>
<p class="centered-list">
A Raspberry Pi<br>
A SenseHAT, connected to your Pi's GPIO pins<br>
A monitor connected to your Pi with an HDMI cable<br>
Keyboard & mouse attached to your Pi<br>
A power adapter<br></p>
</div> <!-- end "you will need" section -->
</div> <!-- end row div -->
<br>
<div class="row" id="content">
<h3 id="getting-set-up">Getting Set Up</h3>
<p>This tutorial assumes you've correctly attached the SenseHAT to your Raspberry Pi's GPIO pins. If the LEDs show a rainbow when you power on the Pi, you're all set. The tutorial also assumes that you can see your Desktop (if you're using a monitor) or Bash (if you're using SSH).</p>
<br>
<h3 id="resources">Resources</h3>
<p>Here are links to useful resources for this project. You might want to open each one in a new tab, so you can refer to them later as you're working through this tutorial.
<ul>
<li>SenseHAT documenation - <a href="https://pythonhosted.org/sense-hat" target="_blank">Main Page: Installation & Basic Usage</a></li>
<li>SenseHAT documenation - <a href="https://pythonhosted.org/sense-hat/api/" target="_blank">API Reference: Interacting with the SenseHAT</a></li>
<li><a href="https://www.tutorialspoint.com/python/python_tuples.htm" target="_blank">Python Tuples</a></li>
<li><a href="https://www.tutorialspoint.com/python/python_lists.htm" target="_blank">Python Lists</a></li>
<li><a href="https://www.tutorialspoint.com/python/python_for_loop.htm" target="_blank">Python For-Loops</a></li>
</ul>
</p>
<br>
<h3 id="lets-start-coding">Let's Start Coding!</h3>
<p>Open your Terminal. If you're using your RaspberryPi from a Desktop, click the icon in the top menu bar that looks like a black box. If you're accessing your RaspberryPi via SSH, you are already in the Terminal. From your Terminal, navigate to the Desktop by typing the following command. (Remember that the dollar sign (<strong>$</strong>) is part of your Terminal; you do not need to type this in.)</p>
<div class="well well-sm">
<strong>$</strong> cd ~/Desktop
</div>
<p>Let's make a new directory to hold the Rainbow Hearts project, and then navigate into it:</p>
<div class="well well-sm">
<strong>$</strong> mkdir pi_rainbow_hearts
<br>
<strong>$</strong> cd pi_rainbow_hearts
</div>
<p>To double check that we're in the right place, we can run the <span id="highlight">pwd</span> command, which will print to our screen the file path we're currently in:</p>
<div class="well well-sm"><strong>$</strong> pwd <br>/home/pi/Desktop/pi-rainbow-hearts</div>
<p>Now that we're in the directory for the Rainbow Hearts project, we need to create a Python file to put our code in.</p>
<div class="well well-sm"><strong>$</strong> touch hearts.py</div>
<p>We can verify that our new file was actually created by running the <span id="highlight">ls</span> command (that's lowercase L, by the way). You should see a filed called <span id="highlight">hearts.py</span> print to your Terminal.</p>
<div class="well well-sm"><strong>$</strong> ls
<br />
hearts.py
</div>
<p>Let's open this file with the Raspberry Pi's built-in Python 3 IDLE. Click on the RaspberryPi logo in the upper left corner, then click on the "Programming" tab that appears, then click on the "Python 3 IDLE" choice that appears. Note that your options may be in a different order or location based on the operating system you installed! But don't worry, whatever you installed definitely has the Python 3 IDLE. You may need to look around for it.</p>
<p>Once you're in the Python 3 IDLE, you need to open the <span id="highlight">hearts.py file.</p>
<ol>
<li>
Click the "File" menu, then click "Open".
</li>
<li>
Double click on the Desktop folder.
</li>
<li>
Double-click on the pi-rainbow-hearts folder.
</li>
<li>
Finally, select the <span id="highlight">hearts.py</span> file and click on the "Open" button.
</li>
</ol>
<p>
A new (empty) window should appear, which is where we will write our Python program!
</p>
<p>In this window that we just opened, which is actually our <span id="highlight">hearts.py</span> file, we need to import two modules: 1) The SenseHAT library, so we can interact with the SenseHAT, and 2) The Time library, so we can have our hearts flash on the LED matrix for a specified amount of time. Accomplish this by typing the following code into the file: </p>
<div class="well well-sm">
<em># hearts.py</em>
<br><br>
<span id="orange">from</span> sense_hat <span id="orange">import</span> SenseHat<br>
<span id="orange">import</span> time
</div> <!-- end well -->
<p>Note that the # sign creates a comment in Python, and any line of code that starts with a # will not be run. Programmers use this feature to write notes about their code. Here, the note we see is just telling us which file we are in.
<br><br>
<p>When we import SenseHat, as above, we are importing an "object" called SenseHat. Objects can have special functions attached to them (called "methods"), and we can use these special functions to make the objects do different things. We'll come back to this idea later. For right now, we want to save this SenseHat object as a variable so we can refer to the SenseHat object simply by using the variable name:</p>
<div class="well well-sm">
<em># hearts.py</em>
<br><br>
<span id="orange">from</span> sense_hat <span id="orange">import</span> SenseHat<br>
<span id="orange">import</span> time
<br><br>
sense <span id="orange">=</span> SenseHat( )
</div> <!-- end well -->
<p>If you're curious about how or why we begin our file this way, have a look at the <a href="https://pythonhosted.org/sense-hat" target="_blank">quick set-up guide</a> the Raspberry Pi Foundation provides for the SenseHAT.
<br><br>
Along with methods, objects can also have special characteristics which we call "attributes". For example, if we created a "Dog" object, the object might have attributes such as "breed" or "weight". We can store values inside these attributes, so in this example we could set<br> Dog.breed = "Golden Retriever"
<br><br>
Let's get back to the topic of writing Python code so we can interact with our SenseHAT. The LEDs are quite bright, so to make them a little dimmer, we can change the SenseHat object's "low_light" attribute to True (the default is False), as shown below:</p>
<div class="well well-sm">
<em># hearts.py</em>
<br><br>
<span id="orange">from</span> sense_hat <span id="orange">import</span> SenseHat
<br>
<span id="orange">import</span> time
<br><br>
sense <span id="orange">=</span> SenseHat( )
<br>
sense.low_light <span id="orange">=</span> <span id="blue">True</span>
</div> <!-- end well -->
<p>How do we know we can change the brightness of the LEDs? Are there any other things about the SenseHAT we could change or customize? For answers to these questions, browse the <a href="https://pythonhosted.org/sense-hat/api/" target="_blank">SenseHAT API documentation</a>!
<br><br>
Now's a good time to save your file, either by holding down the < Ctrl > key and then the < s > key, or by opening the File menu and clicking on "Save..."</p>
<p><em>If the topics of objects, methods and attributes are confusing right now, don't worry! You can still have fun and complete this tutorial even if you skip the stuff about objects. Keep going!</em></p>
<br>
<h3 id="choose-your-colors">Choose Your Colors</h3>
<p>Alright. We've taken care of importing things and setting up our SenseHat object. Time to choose some colors using the Red-Green-Blue (RGB) format!</p>
<br>
<p>RGB is a way of creating colors by mixing very specific quantities of red, green and blue. Each color (red, green or blue) can have a quantity, or concentration, of up to 255. For example, the RGB value for <span id="red">red</span> is (255, 0, 0) because we list the concentrations in (RGB) order, and pure red will have no green or blue in it. This means there's a 100% concentration of red and a 0% concentration of the other colors. Likewise, the color <span id="green">green</span> would have an RGB value of (0, 255, 0) and the color <span id="blue">blue</span> would have an RGB value of (0, 0, 255).
<br><br>
We'll be using colors from the rainbow for this tutorial. If you'd like to choose different colors, you can <a href="https://www.w3schools.com/colors/colors_rgb.asp" target="_blank">experiment with an RGB calculator to make custom colors</a> or <a href="https://www.w3schools.com/colors/colors_rgb.asp" target="_blank">copy and paste the RGB codes for some common colors</a>.
<br><br>
To use the rainbow colors, copy and paste this Python code into your <span id="highlight">hearts.py</span> file, <strong>under the code we have already written.</strong>
<br /><br />
Remember, the lines of code that begin with the # sign will not be run. In our case, we are writing these comments to remind ourselves which color is being coded in the line below.
<br /><br />
Normally, we'd want to use variable names that are as descriptive as possible (full color names, in our case). If our variable names are really descriptive, we don't have to write comments about them! The reason we're only using 1 or 2 characters as variable names is because we're going to create lists that hold these colors in the shape of our 8x8 LED matrix. Using single characters allows us to present the lists in a near-square pattern, which mirrors the LED matrix. If we were to use the full color names, our lists would appear as long rectangles instead. It wouldn't be as easy to understand at-a-glance which of our LED bulbs are going to light up and which are not.</p>
<br />
<div class="well well-sm">
<em># Create variables to hold each RGB color we want to use</em>
<em># red</em><br>
<strong>r</strong> <span id="orange">=</span> (255, 0, 0)
<br><br>
<em># pink</em><br>
<strong>p</strong> <span id="orange">=</span> (204, 0, 204)
<br><br>
<em># orange</em><br>
<strong>o</strong> <span id="orange">=</span> (255, 128, 0)
<br><br>
<em># yellow</em><br>
<strong>y</strong> <span id="orange">=</span> (255, 255, 0)
<br><br>
<em># green</em><br>
<strong>g</strong> <span id="orange">=</span> (0, 255, 0)
<br><br>
<em># aqua</em><br>
<strong>a</strong> <span id="orange">=</span> (0, 255, 255)
<br><br>
<em># blue</em><br>
<strong>b</strong> <span id="orange">=</span> (0, 0, 255)
<br><br>
<em># purple</em><br>
<strong>pr</strong> <span id="orange">=</span> (128, 0, 255)
<br><br>
<em># empty (no color)</em><br>
<strong>e</strong> <span id="orange">=</span> (0, 0, 0)
</div> <!-- end well -->
<p>Remember to save your file every time you add a new chunk of code to it!
<br><br>
In the code above, we are creating a new and unique variable name for each color. To keep our variable names short, we are using just the first letter of each color (with the exception of purple, because the color pink already took the "p"). Each variable stores that color's RGB value as a tuple.
<br><br>
A tuple is a way to store several different pieces of data as one. Python knows we're using a tuple because tuples start and end with parentheses, and contain more than one thing inside. (Even though we may see one RGB value, this RGB value is made up of 3 separate integers, each separated by commas.) When we store data in tuples, we have to separate each data point with a comma. <a href="https://www.tutorialspoint.com/python/python_tuples.htm" target="_blank">Read more about tuples.</a> if you're curious about how they work.</p>
<br>
<h3 id="prepare-the-leds">Prepare the LEDs</h3>
<p>The SenseHAT's LED matrix forms a square with 8 LEDs on each side, for 64 LEDs total. This 8x8 grid is the geometric space we have to work with for making the hearts appear.</p>
<br><br>
<img src="images/led_layout.jpeg">
<br>
<p>Each time we want to show something on the LED matrix, we have to tell the LED matrix which (if any) of the 64 LEDs should light up, and what color they should be. In other words, we have to specify one-by-one which of the 64 tiny LEDs should light up.
<br><br>
The way we do this is with a list that contains 64 values inside of it -- one value per LED! Now, just observe the following code snippet (don't put this into <em> hearts.py</em>.) We could code a Python list with 64 values in it like this:</p>
<div class="well well-sm">
<strong>led_list</strong> <span id="orange">=</span> [o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o]
</div> <!-- end well -->
<p>But this way of doing it would make it hard to see at a glance what our picture would turn out like, because the data telling which LEDs to light up is basically in one straight line. This is fine for the computer, but not so friendly for humans. <a href="https://www.tutorialspoint.com/python/python_lists.htm" target="_blank">Read more about Python lists</a>.]
<br><br>
Luckily, Python allows us to break up the values in a list into a format that is more human-readable. Again, just observe the following code; don't write this code yet. We can code the list as 8 rows of 8 values, like this:</p>
<div class="well well-sm">
<strong>led_list</strong> <span id="orange">=</span> [<br>
o, o, o, o, o, o, o, o,<br>
o, o, o, o, o, o, o, o,<br>
o, o, o, o, o, o, o, o,<br>
o, o, o, o, o, o, o, o,<br>
o, o, o, o, o, o, o, o,<br>
o, o, o, o, o, o, o, o,<br>
o, o, o, o, o, o, o, o,<br>
o, o, o, o, o, o, o, o<br>
]
</div> <!-- end well -->
<p>That is so much easier to read AND we'll get a better idea of the picture that is taking shape on the LED matrix, since the shape of the list resembles the surface area made by the 64 LEDs.
<br><br>
Before we go any further, we need to figure out which values in this list are going to tell the LEDs to light up, and which values in this list are going to tell the LEDs <strong>not</strong> to light up. An easy and fun way to plan your image is to simply color in squares on an 8x8 grid, like so:<p>
<br>
<img src="images/heart.jpeg">
<br>
<p>We can now create a variable that will hold a list, and this list will hold the 64 LED values just as we saw above. Looking back to the code you wrote in your <span id="highlight">hearts.py</span> file which assigned RGB values to different variables, we see that the variable "e" means "empty" (or no color) and the variable "r" means "red".
<br><br>
So, anywhere in our list where we want an LED to <strong>not</strong> turn on, we type "e". And anywhere in our list where we want an LED to turn on, we type the letter of the variable that contains the color we want to display. Here is what the code looks like for creating a variable called <span id="highlight">red_heart</span> that stores the LED values following the sketch above:</p>
<div class="well well-sm">
<strong>red_heart</strong> <span id="orange">=</span> [<br>
e, e, e, e, e, e, e, e,<br>
e, r, r, e, r, r, e, e,<br>
r, r, r, r, r, r, r, e,<br>
r, r, r, r, r, r, r, e,<br>
r, r, r, r, r, r, r, e,<br>
e, r, r, r, r, r, e, e,<br>
e, e, r, r, r, e, e, e,<br>
e, e, e, r, e, e, e, e<br>
]
</div> <!-- end well -->
<p>Take a minute to walk through both the grid with the heart in it and the <span id="highlight">red_heart</span> list. Notice that each blank space in the grid is represented by an "e" in the <span id="highlight">red_heart</span> list, and each red space in the grid is represented by an "r" in the <span id="highlight">red_heart</span> list. Notably, the entire top row and the entire far-right column are both empty, meaning none of those LEDs will light up.
<br><br>
Time to code the variables for the rest of our colors! Using the <span id="highlight">red_heart</span> list as a guide, create a new variable for each heart color you want to display on your LED matrix. Here are some things to keep in mind, especially if you are going to copy and paste:</p>
<br>
<ul>
<li>Every variable needs to have a unique name. Use the example for reference.</li>
<li>The color in the variable name should match the color represented in your list.</li>
<li>Ensure that every non-empty value in your list is for the same color. (ie: Be careful you don't miss a value, and wind up with a red heart that has one blue spot!)</li>
</ul>
<br>
<p>If you get stuck, you can view the sample code <a href="https://github.com/allardbrain/sensehat-rainbow-hearts/blob/master/hearts.py" target="_blank">here</a>, which contains all the colors of the rainbow.
<br><br>
Your <span id="highlight">hearts.py</span> file should now look similar to the file shown below. Remember to save your file!</p>
<div class="well well-sm">
<em># hearts.py</em>
<br><br>
<span id="orange">from</span> sense_hat <span id="orange">import</span> SenseHat
<br>
<span id="orange">import</span> time
<br><br>
sense <span id="orange">=</span> SenseHat( )
<br>
sense.low_light <span id="orange">=</span> <span id="blue">True</span>
<br><br>
<em># Create variables to hold each RGB color we want to use</em>
<br><br>
<em># red</em><br>
<strong>r</strong> <span id="orange">=</span> (255, 0, 0)
<br><br>
<em># pink</em><br>
<strong>p</strong> <span id="orange">=</span> (204, 0, 204)
<br><br>
<em># orange</em><br>
<strong>o</strong> <span id="orange">=</span> (255, 128, 0)
<br><br>
<em># yellow</em><br>
<strong>y</strong> <span id="orange">=</span> (255, 255, 0)
<br><br>
<em># green</em><br>
<strong>g</strong> <span id="orange">=</span> (0, 255, 0)
<br><br>
<em># aqua</em><br>
<strong>a</strong> <span id="orange">=</span> (0, 255, 255)
<br><br>
<em># blue</em><br>
<strong>b</strong> <span id="orange">=</span> (0, 0, 255)
<br><br>
<em># purple</em><br>
<strong>pr</strong> <span id="orange">=</span> (128, 0, 255)
<br><br>
<em># empty (no color)</em><br>
<strong>e</strong> <span id="orange">=</span> (0, 0, 0)
<br><br>
<strong>red_heart</strong><span id="orange"> =</span> [<br>
e, e, e, e, e, e, e, e,<br>
e, r, r, e, r, r, e, e,<br>
r, r, r, r, r, r, r, e,<br>
r, r, r, r, r, r, r, e,<br>
r, r, r, r, r, r, r, e,<br>
e, r, r, r, r, r, e, e,<br>
e, e, r, r, r, e, e, e,<br>
e, e, e, r, e, e, e, e<br>
]<br><br>
<strong>pink_heart</strong><span id="orange"> =</span> [<br>
e, e, e, e, e, e, e, e,<br>
e, p, p, e, p, p, e, e,<br>
p, p, p, p, p, p, p, e,<br>
p, p, p, p, p, p, p, e,<br>
p, p, p, p, p, p, p, e,<br>
e, p, p, p, p, p, e, e,<br>
e, e, p, p, p, e, e, e,<br>
e, e, e, p, e, e, e, e<br>
]<br><br>
<strong>orange_heart</strong><span id="orange"> =</span> [<br>
e, e, e, e, e, e, e, e,<br>
e, o, o, e, o, o, e, e,<br>
o, o, o, o, o, o, o, e,<br>
o, o, o, o, o, o, o, e,<br>
o, o, o, o, o, o, o, e,<br>
e, o, o, o, o, o, e, e,<br>
e, e, o, o, o, e, e, e,<br>
e, e, e, o, e, e, e, e<br>
]<br><br>
</div> <!-- end well -->
<br>
<h3 id="lighting-up-the-leds">Lighting Up the LEDs</h3>
<p>We've done a lot of prep work, and now we're in the home stretch! It's time to make our SenseHAT light up!
<br><br>
One strategy we could use is to write a for-loop to iterate through all of our <span id="highlight"><color>_heart</span> variables (which hold the data about which LEDs to turn on) and have each heart light up one by one. To do this, we need to create a new variable that's going to hold a list of all of the <span id="highlight"><color>_heart</span> variables inside.
<br><br>
Add the following code underneath the other code you have in your <span id="highlight">hearts.py</span> file, making sure to replace the sample variable names with your own variable names, if the variable names you have chosen for each of your hearts are different than what is shown below. <em>[Note: There are more colors used in the <a href="https://github.com/allardbrain/sensehat-rainbow-hearts/blob/master/hearts.py" target="_blank">full sample code</a>. The colors below refer only to the colors demonstrated in this tutorial.]</em></p>
<div class="well well-sm">
<strong>heart_colors</strong><span id="orange"> = </span>[red_heart, pink_heart, orange_heart]<br>
</div> <!-- end well -->
<br>
<p>Next, we need to write a function that can loop through the items in the <em>heart_colors</em> list, and flash them on the SenseHAT's LED maxtrix one-by-one. Type the following code at the bottom of your <span id="highlight">hearts.py</span> file, making sure to replicate the indentation. In the next section, we'll walk through what each line of code is doing.</p>
<div class="well well-sm">
<strong>def <span id="red">rainbow_hearts</span></strong>():
<p class="tab"><strong><span id="orange">for</span></strong> color <strong><span id="blue">in</span></strong> heart_colors:</p>
<p class="double-tab">sense.set_pixels(color)<br>
time.sleep(1)<br></p>
<p class="tab"><em># Clear the LED display</em><br>
sense.clear()</p>
</div> <!-- end well -->
<br>
<ul>
<li>Line 1 defines ("def") a function called <span id="highlight">rainbow_hearts</span>. <a href="https://www.tutorialspoint.com/python/python_functions.htm" target="_blank">Read more about Python functions.</a></li>
<li>Line 2 creates a for-loop that will visit, in order, each heart color (<span id="highlight">red_heart</span>, <span id="highlight">pink_heart</span>, <span id="highlight">orange_heart</span>, etc.) contained within the list that we made previously, called "heart_colors". <a href="https://www.tutorialspoint.com/python/python_for_loop.htm" target="_blank">Read more about for-loops</a>.</li>
<li> Line 3 makes the LEDs light up in which ever color the for-loop is currently reading, using the values you specified for that color.</li>
<li>Line 4 makes the LEDs stay on for 1 second.</li>
<li>Lines 3 & 4 will repeat for each color you have in your "heart_colors" list.</li>
<li>Line 5 is a comment.</li>
<li>Line 6 turns off the LEDs once the for-loop has run for each color you created. We know it runs after the for-loop because it is at the same indentation level as the for-loop, and not inside of it like lines 3 and 4 are.</li>
</ul>
<br>
<p>We only have one more line of code we need to write! We need to <strong>call</strong> the <span id="highlight">rainbow_hearts</span> function, so that all the code inside it will be run by the <span id="highlight">hearts.py</span> file. So far, all we've done is <strong>define</strong> the <span id="highlight">rainbow_hearts</span> function. If we don't tell Python that it's OK to run the function, our LEDs won't light up. Add this line of code to the very end of your file, and then save it:</p>
<div class="well well-sm">
rainbow_hearts()
</div> <!-- end well -->
<br>
<h3 id="run-your-file">Run Your File</h3>
<p>Now that our file is complete, we need to run it in order to make the LEDs display our colorful hearts. Go back to the window showing the Raspberry Pi's Terminal and run the file by typing in this command:</p>
<div class="well well-sm">
<strong>$</strong> python3 hearts.py
</div> <!-- end well -->
<p>If your Terminal is not still running from the session we started at the beginning of this tutorial, navigate to the directory that contains the <span id="highlight">hearts.py</span> file by typing in this command, then try running the file:</p>
<div class="well well-sm">
<strong>$</strong> cd pi/Desktop/pi_rainbow_hearts/hearts.py
<br />
<strong>$</strong> python3 hearts.py
</div> <!-- end well -->
<br>
<iframe src="https://giphy.com/embed/Q2wCxfrvyTUm4" width="480" height="478" frameBorder="0" class="giphy-embed" allowFullScreen></iframe><p><a href="https://giphy.com/gifs/greys-anatomy-meredith-grey-bailey-Q2wCxfrvyTUm4">via GIPHY</a></p>
<h3 id="whats-next">What's Next?</h3>
<p>If you enjoyed making the Rainbow Hearts project, here are some things you can try next:
<br>
<ul>
<li>Change the hearts to other shapes, like triangles or squares.</li>
<li>Instead of a rainbow, use your school colors or favorite sports team's colors.</li>
<li>Change the length of time for which the hearts (or other shapes) are displayed.</li>
</ul>
</p>
</div> <!-- end row class and content id -->
</div> <!-- end container -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>
</body>
</html>