Skip to content

Commit 861c77b

Browse files
bnmnetpbnmnetp
committed
Fix: Add Luther Bell
1 parent b6888f8 commit 861c77b

3 files changed

Lines changed: 85 additions & 43 deletions

File tree

‎.gitignore‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -88,4 +88,8 @@ GitHub.sublime-settings
8888
.dropbox
8989
.dropbox.attr
9090
.dropbox.cache
91-
91+
__pycache__
92+
published
93+
pretext/GenFigs
94+
sphinx_settings.json
95+
rs-substitutes.xml

‎pretext/Figures/datafiles/LutherBellPic.jpg‎

63 KB
Loading

‎pretext/MoreAboutIteration/2DimensionalIterationImageProcessing.ptx‎

Lines changed: 80 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,18 @@
22
<section xml:id="more-about-iteration_dimensional-iteration-image-processing">
33
<title>2-Dimensional Iteration: Image Processing</title>
44
<introduction>
5-
<p>Two dimensional tables have both rows and columns. You have probably seen many tables like this if you have used a
5+
<p>Two dimensional tables have both rows and columns. You have probably seen many tables like this if you have used a
66
spreadsheet program. Another object that is organized in rows and columns is a digital image. In this section we will
77
explore how iteration allows us to manipulate these images.</p>
8-
<p>A <term>digital image</term> is a finite collection of small, discrete picture elements called <term>pixels</term>. These pixels are organized in a two-dimensional grid. Each pixel represents the smallest amount of picture information that is
8+
<p>A <term>digital image</term> is a finite collection of small, discrete picture elements called <term>pixels</term>. These pixels are organized in a two-dimensional grid. Each pixel represents the smallest amount of picture information that is
99
available. Sometimes these pixels appear as small <q>dots</q>.
10-
</p>
11-
<p>Each image (grid of pixels) has its own width and its own height. The width is the number of columns and the height is the number of rows. We can name the pixels in the grid by using the column number and row number. However, it is very important to remember
10+
</p>
11+
<p>Each image (grid of pixels) has its own width and its own height. The width is the number of columns and the height is the number of rows. We can name the pixels in the grid by using the column number and row number. However, it is very important to remember
1212
that computer scientists like to start counting with 0! This means that if there are 20 rows, they will be named 0,1,2, and so on through 19. This will be very useful later when we iterate using range.</p>
13-
<p>In the figure below, the pixel of interest is found at column <term>c</term> and row <term>r</term>.
14-
</p>
15-
<image source="MoreAboutIteration/Figures/image.png" width="50%"/>
16-
</introduction>
13+
<p>In the figure below, the pixel of interest is found at column <term>c</term> and row <term>r</term>.
14+
</p>
15+
<image source="MoreAboutIteration/Figures/image.png" width="50%"/>
16+
</introduction>
1717
<subsection xml:id="more-about-iteration_the-rgb-color-model">
1818
<title>The RGB Color Model</title>
1919
<p>Each pixel of the image will represent a single color. The specific color depends on a formula that mixes various amounts
@@ -271,33 +271,41 @@ print(p.getGreen(), p.getBlue())
271271
<statement>
272272
<p>Dark red</p>
273273
</statement>
274-
<feedback><p>
274+
<feedback>
275+
<p>
275276
Because all three values are close to 0, the color will be dark. But because the red value is higher than the other two, the color will appear red.
276-
</p></feedback>
277+
</p>
278+
</feedback>
277279
</choice>
278280
<choice>
279281
<statement>
280282
<p>Light red</p>
281283
</statement>
282-
<feedback><p>
284+
<feedback>
285+
<p>
283286
The closer the values are to 0, the darker the color will appear.
284-
</p></feedback>
287+
</p>
288+
</feedback>
285289
</choice>
286290
<choice>
287291
<statement>
288292
<p>Dark green</p>
289293
</statement>
290-
<feedback><p>
294+
<feedback>
295+
<p>
291296
The first value in RGB is the red value. The second is the green. This color has no green in it.
292-
</p></feedback>
297+
</p>
298+
</feedback>
293299
</choice>
294300
<choice>
295301
<statement>
296302
<p>Light green</p>
297303
</statement>
298-
<feedback><p>
304+
<feedback>
305+
<p>
299306
The first value in RGB is the red value. The second is the green. This color has no green in it.
300-
</p></feedback>
307+
</p>
308+
</feedback>
301309
</choice>
302310
</choices>
303311
</exercise>
@@ -402,8 +410,13 @@ print(p.getGreen(), p.getBlue())
402410
file and uses the contents to create an image object that is referred to by <c>img</c>. Once we have an image object,
403411
we can use the methods described above to access information about the image or to get a specific pixel and check
404412
on its basic color intensities.</p>
405-
<raw format="html" xml:space="preserve">&lt;img src="../_static/LutherBellPic.jpg" id="luther.jpg"&gt;</raw>
406-
<program xml:id="pixelex1" interactive="activecode" language="python">
413+
414+
<datafile label="luther-bell" filename="luther.jpg">
415+
<image source="datafiles/LutherBellPic.jpg" width="66%"/>
416+
</datafile>
417+
418+
419+
<program xml:id="pixelex1" label="pixelex1a" interactive="activecode" language="python">
407420
<input>
408421
import image
409422
img = image.Image("luther.jpg")
@@ -415,6 +428,7 @@ p = img.getPixel(45, 55)
415428
print(p.getRed(), p.getGreen(), p.getBlue())
416429
</input>
417430
</program>
431+
418432
<p>When you run the program you can see that the image has a width of 400 pixels and a height of 244 pixels. Also, the
419433
pixel at column 45, row 55, has RGB values of 165, 161, and 158. Try a few other pixel locations by changing the <c>getPixel</c> arguments and rerunning the program.</p>
420434
<p>
@@ -429,33 +443,41 @@ print(p.getRed(), p.getGreen(), p.getBlue())
429443
<statement>
430444
<p>149 132 122</p>
431445
</statement>
432-
<feedback><p>
446+
<feedback>
447+
<p>
433448
These are the values for the pixel at row 30, column 100. Get the values for row 100 and column 30 with p = img.getPixel(100, 30).
434-
</p></feedback>
449+
</p>
450+
</feedback>
435451
</choice>
436452
<choice correct="yes">
437453
<statement>
438454
<p>183 179 170</p>
439455
</statement>
440-
<feedback><p>
456+
<feedback>
457+
<p>
441458
Yes, the RGB values are 183 179 170 at row 100 and column 30.
442-
</p></feedback>
459+
</p>
460+
</feedback>
443461
</choice>
444462
<choice>
445463
<statement>
446464
<p>165 161 158</p>
447465
</statement>
448-
<feedback><p>
466+
<feedback>
467+
<p>
449468
These are the values from the original example (row 45, column 55). Get the values for row 100 and column 30 with p = img.getPixel(30, 100).
450-
</p></feedback>
469+
</p>
470+
</feedback>
451471
</choice>
452472
<choice>
453473
<statement>
454474
<p>201 104 115</p>
455475
</statement>
456-
<feedback><p>
476+
<feedback>
477+
<p>
457478
These are simply made-up values that may or may not appear in the image. Get the values for row 100 and column 30 with p = img.getPixel(30, 100).
458-
</p></feedback>
479+
</p>
480+
</feedback>
459481
</choice>
460482
</choices>
461483
</exercise>
@@ -622,33 +644,41 @@ d.
622644
<statement>
623645
<p>Output a</p>
624646
</statement>
625-
<feedback><p>
647+
<feedback>
648+
<p>
626649
i will start with a value of 0 and then j will iterate from 0 to 1. Next, i will be 1 and j will iterate from 0 to 1. Finally, i will be 2 and j will iterate from 0 to 1.
627-
</p></feedback>
650+
</p>
651+
</feedback>
628652
</choice>
629653
<choice>
630654
<statement>
631655
<p>Output b</p>
632656
</statement>
633-
<feedback><p>
657+
<feedback>
658+
<p>
634659
The inner for-loop controls the second digit (j). The inner for-loop must complete before the outer for-loop advances.
635-
</p></feedback>
660+
</p>
661+
</feedback>
636662
</choice>
637663
<choice>
638664
<statement>
639665
<p>Output c</p>
640666
</statement>
641-
<feedback><p>
667+
<feedback>
668+
<p>
642669
The inner for-loop controls the second digit (j). Notice that the inner for-loop is over the list [0, 1].
643-
</p></feedback>
670+
</p>
671+
</feedback>
644672
</choice>
645673
<choice>
646674
<statement>
647675
<p>Output d</p>
648676
</statement>
649-
<feedback><p>
677+
<feedback>
678+
<p>
650679
The outer for-loop runs 3 times (0, 1, 2) and the inner for-loop runs twice for each time the outer for-loop runs, so this code prints exactly 6 lines.
651-
</p></feedback>
680+
</p>
681+
</feedback>
652682
</choice>
653683
</choices>
654684
</exercise>
@@ -676,33 +706,41 @@ newblue = 0
676706
<statement>
677707
<p>It would look like a red-washed version of the bell image</p>
678708
</statement>
679-
<feedback><p>
709+
<feedback>
710+
<p>
680711
Because we are removing the green and the blue values, but keeping the variation of the red the same, you will get the same image, but it will look like it has been bathed in red.
681-
</p></feedback>
712+
</p>
713+
</feedback>
682714
</choice>
683715
<choice>
684716
<statement>
685717
<p>It would be a solid red rectangle the same size as the original image</p>
686718
</statement>
687-
<feedback><p>
719+
<feedback>
720+
<p>
688721
Because the red value varies from pixel to pixel, this will not look like a solid red rectangle. For it to look like a solid red rectangle each pixel would have to have exactly the same red value.
689-
</p></feedback>
722+
</p>
723+
</feedback>
690724
</choice>
691725
<choice>
692726
<statement>
693727
<p>It would look the same as the original image</p>
694728
</statement>
695-
<feedback><p>
729+
<feedback>
730+
<p>
696731
If you remove the blue and green values from the pixels, the image will look different, even though there does not appear to be any blue or green in the original image (remember that other colors are made of combinations of red, green and blue).
697-
</p></feedback>
732+
</p>
733+
</feedback>
698734
</choice>
699735
<choice>
700736
<statement>
701737
<p>It would look the same as the negative image in the example code</p>
702738
</statement>
703-
<feedback><p>
739+
<feedback>
740+
<p>
704741
Because we have changed the value of the pixels from what they were in the original ActiveCode box code, the image will not be the same.
705-
</p></feedback>
742+
</p>
743+
</feedback>
706744
</choice>
707745
</choices>
708746
</exercise>

0 commit comments

Comments
 (0)