You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/section1/Logical Dot/LogicalDot.html
+13-17Lines changed: 13 additions & 17 deletions
Original file line number
Diff line number
Diff line change
@@ -27,20 +27,20 @@ <h1>Logical Dot</h1>
27
27
<pclass="normal">You are going to draw a circle that changes color when you click the mouse.
28
28
<br>
29
29
<br>
30
+
30
31
31
-
1. Create a new sketch in Processing and add a setup() method.<br>
32
-
<br>
32
+
1. Find the starter code for this recipe and open it using Processing (Hint: the file name is Logical_Dot.pde) and it should be in the section1 folder. <br>
33
+
<br>
33
34
34
-
2. Set the size of your sketch in your setup() method to 600, 600.<br>
35
+
2. Find the setup() method. Set the size of your sketch to (600, 600) inside the setup() method.<br>
35
36
<br>
36
37
37
-
3. Add a draw() method to your sketch.<br>
38
+
3. Find the draw() method.<br>
38
39
<br>
39
40
40
-
4. Draw an ellipse in your draw() method.<br>
41
+
4. Draw an ellipse inside the draw() method.<br>
41
42
<br>
42
43
43
-
44
44
5. Make your ellipse a nice color.<br>
45
45
<br>
46
46
@@ -50,24 +50,20 @@ <h1>Logical Dot</h1>
50
50
<br>
51
51
<br>
52
52
<pclass="normal">
53
-
6. In your draw() method, make it so that if the mouse is pressed the color of the ellipse changes.
54
-
<br>
55
-
<pre> if (mousePressed) {
56
-
// put one color here
53
+
6. In the draw() method, make it so that if the mouse is pressed the color of the ellipse changes.
<html><head><meta content="text/html; charset=UTF-8" http-equiv="content-type"><style type="text/css">ol.lst-kix_2jbm47z7ya5y-3.start{counter-reset:lst-ctn-kix_2jbm47z7ya5y-3 0}.lst-kix_2jbm47z7ya5y-1>li:before{content:"" counter(lst-ctn-kix_2jbm47z7ya5y-1,lower-latin) ". "}.lst-kix_2jbm47z7ya5y-2>li:before{content:"" counter(lst-ctn-kix_2jbm47z7ya5y-2,lower-roman) ". "}.lst-kix_2jbm47z7ya5y-3>li:before{content:"" counter(lst-ctn-kix_2jbm47z7ya5y-3,decimal) ". "}ol.lst-kix_2jbm47z7ya5y-5.start{counter-reset:lst-ctn-kix_2jbm47z7ya5y-5 0}ol.lst-kix_2jbm47z7ya5y-1.start{counter-reset:lst-ctn-kix_2jbm47z7ya5y-1 0}.lst-kix_2jbm47z7ya5y-7>li{counter-increment:lst-ctn-kix_2jbm47z7ya5y-7}.lst-kix_2jbm47z7ya5y-4>li:before{content:"" counter(lst-ctn-kix_2jbm47z7ya5y-4,lower-latin) ". "}.lst-kix_2jbm47z7ya5y-7>li:before{content:"" counter(lst-ctn-kix_2jbm47z7ya5y-7,lower-latin) ". "}.lst-kix_2jbm47z7ya5y-5>li:before{content:"" counter(lst-ctn-kix_2jbm47z7ya5y-5,lower-roman) ". "}ol.lst-kix_2jbm47z7ya5y-7.start{counter-reset:lst-ctn-kix_2jbm47z7ya5y-7 0}.lst-kix_2jbm47z7ya5y-0>li{counter-increment:lst-ctn-kix_2jbm47z7ya5y-0}.lst-kix_2jbm47z7ya5y-6>li:before{content:"" counter(lst-ctn-kix_2jbm47z7ya5y-6,decimal) ". "}.lst-kix_2jbm47z7ya5y-3>li{counter-increment:lst-ctn-kix_2jbm47z7ya5y-3}.lst-kix_2jbm47z7ya5y-6>li{counter-increment:lst-ctn-kix_2jbm47z7ya5y-6}.lst-kix_2jbm47z7ya5y-8>li:before{content:"" counter(lst-ctn-kix_2jbm47z7ya5y-8,lower-roman) ". "}.lst-kix_2jbm47z7ya5y-5>li{counter-increment:lst-ctn-kix_2jbm47z7ya5y-5}.lst-kix_2jbm47z7ya5y-8>li{counter-increment:lst-ctn-kix_2jbm47z7ya5y-8}ol.lst-kix_2jbm47z7ya5y-4.start{counter-reset:lst-ctn-kix_2jbm47z7ya5y-4 0}ol.lst-kix_2jbm47z7ya5y-2.start{counter-reset:lst-ctn-kix_2jbm47z7ya5y-2 0}ol.lst-kix_2jbm47z7ya5y-2{list-style-type:none}ol.lst-kix_2jbm47z7ya5y-3{list-style-type:none}ol.lst-kix_2jbm47z7ya5y-0{list-style-type:none}ol.lst-kix_2jbm47z7ya5y-1{list-style-type:none}ol.lst-kix_2jbm47z7ya5y-6{list-style-type:none}ol.lst-kix_2jbm47z7ya5y-7{list-style-type:none}.lst-kix_2jbm47z7ya5y-2>li{counter-increment:lst-ctn-kix_2jbm47z7ya5y-2}ol.lst-kix_2jbm47z7ya5y-4{list-style-type:none}ol.lst-kix_2jbm47z7ya5y-5{list-style-type:none}ol.lst-kix_2jbm47z7ya5y-6.start{counter-reset:lst-ctn-kix_2jbm47z7ya5y-6 0}ol.lst-kix_2jbm47z7ya5y-8{list-style-type:none}.lst-kix_2jbm47z7ya5y-4>li{counter-increment:lst-ctn-kix_2jbm47z7ya5y-4}ol.lst-kix_2jbm47z7ya5y-0.start{counter-reset:lst-ctn-kix_2jbm47z7ya5y-0 0}.lst-kix_2jbm47z7ya5y-1>li{counter-increment:lst-ctn-kix_2jbm47z7ya5y-1}ol.lst-kix_2jbm47z7ya5y-8.start{counter-reset:lst-ctn-kix_2jbm47z7ya5y-8 0}.lst-kix_2jbm47z7ya5y-0>li:before{content:"" counter(lst-ctn-kix_2jbm47z7ya5y-0,decimal) ". "}ol{margin:0;padding:0}table td,table th{padding:0}.c0{color:#000000;font-weight:400;text-decoration:none;vertical-align:baseline;font-size:11pt;font-family:"Arial";font-style:normal}.c11{color:#000000;text-decoration:none;vertical-align:baseline;font-size:14pt;font-family:"Arial";font-style:normal}.c5{padding-top:0pt;padding-bottom:0pt;line-height:1.15;orphans:2;widows:2;text-align:center}.c4{padding-top:0pt;padding-bottom:0pt;line-height:1.15;orphans:2;widows:2;text-align:left}.c2{color:#000000;text-decoration:none;vertical-align:baseline;font-size:11pt;font-style:normal}.c13{background-color:#ffffff;max-width:468pt;padding:72pt 72pt 72pt 72pt}.c6{margin-left:72pt;padding-left:0pt}.c1{font-weight:400;font-family:"Courier New"}.c9{margin-left:36pt;padding-left:0pt}.c7{margin-left:36pt;text-indent:36pt}.c3{padding:0;margin:0}.c10{font-weight:700}.c12{font-family:"Arial"}.c8{height:11pt}.c14{margin-left:36pt}.title{padding-top:0pt;color:#000000;font-size:26pt;padding-bottom:3pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}.subtitle{padding-top:0pt;color:#666666;font-size:15pt;padding-bottom:16pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}li{color:#000000;font-size:11pt;font-family:"Arial"}p{margin:0;color:#000000;font-size:11pt;font-family:"Arial"}h1{padding-top:20pt;color:#000000;font-size:20pt;padding-bottom:6pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h2{padding-top:18pt;color:#000000;font-size:16pt;padding-bottom:6pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h3{padding-top:16pt;color:#434343;font-size:14pt;padding-bottom:4pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h4{padding-top:14pt;color:#666666;font-size:12pt;padding-bottom:4pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h5{padding-top:12pt;color:#666666;font-size:11pt;padding-bottom:4pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h6{padding-top:12pt;color:#666666;font-size:11pt;padding-bottom:4pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;font-style:italic;orphans:2;widows:2;text-align:left}</style></head><body class="c13"><p class="c5"><span class="c11 c10">Tash Me!</span></p><p class="c5"><span style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 187.50px; height: 152.94px;"><img alt="" src="images/image1.png" style="width: 187.50px; height: 152.94px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></p><p class="c5 c8"><span class="c10 c11"></span></p><p class="c5"><span class="c0">We are going to make a program that allows us to put a mustache onto a person’s face! </span></p><p class="c5 c8"><span class="c0"></span></p><ol class="c3 lst-kix_2jbm47z7ya5y-0 start" start="1"><li class="c4 c9"><span>Create a new Processing sketch and add </span><span class="c1">setup()</span><span> and </span><span class="c1">draw()</span><span class="c0"> methods.</span></li></ol><p class="c4 c8"><span class="c0"></span></p><ol class="c3 lst-kix_2jbm47z7ya5y-0" start="2"><li class="c4 c9"><span class="c0">Find a photo of a face, it can be anyone you want:</span></li></ol><ol class="c3 lst-kix_2jbm47z7ya5y-1 start" start="1"><li class="c4 c6"><span class="c0">Find an image on google</span></li><li class="c4 c6"><span class="c0">Right click on the image and select "Save Image As"</span></li><li class="c4 c6"><span class="c0">Rename your image something short (e.g. "friend")</span></li><li class="c4 c6"><span class="c0">Save the image on your desktop</span></li><li class="c4 c6"><span class="c0">Drag the image from your desktop and drop it into your sketch</span></li></ol><p class="c4 c8 c14"><span class="c0"></span></p><ol class="c3 lst-kix_2jbm47z7ya5y-0" start="3"><li class="c4 c9"><span class="c0">On line 1 of your sketch, add the following code: </span></li></ol><p class="c4"><span> </span><span class="c2 c1">PImage mustache; </span></p><p class="c4 c7"><span class="c2 c1">PImage friend;</span></p><p class="c4 c7 c8"><span class="c2 c1"></span></p><ol class="c3 lst-kix_2jbm47z7ya5y-0" start="4"><li class="c4 c9"><span>Load your image by adding the following code to your </span><span class="c1">setup()</span><span class="c0"> method:</span></li></ol><p class="c4"><span> </span><span class="c1 c2">friend = loadImage("friend.jpg");</span></p><p class="c4 c7"><span class="c2 c1">size(800, 600);</span></p><p class="c4 c7"><span class="c2 c1">friend.resize(width,height);</span></p><p class="c4 c7 c8"><span class="c2 c1"></span></p><ol class="c3 lst-kix_2jbm47z7ya5y-0" start="5"><li class="c4 c9"><span class="c0">Change “friend.jpg” from the previous step so that it matches the name of your image.</span></li></ol><p class="c4 c8"><span class="c0"></span></p><ol class="c3 lst-kix_2jbm47z7ya5y-0" start="6"><li class="c4 c9"><span>At the beginning of your </span><span class="c1">draw()</span><span> method, set “friend” as your background using the </span><span class="c1">background()</span><span class="c0"> method.</span></li></ol><p class="c4 c8"><span class="c0"></span></p><ol class="c3 lst-kix_2jbm47z7ya5y-0" start="7"><li class="c4 c9"><span>Find an image of a mustache on google. </span><span class="c10">Make sure it has a transparent background.</span><span class="c0"> Search for “mustache transparent” or “mustache png”. Follow steps a - e under step 2. </span></li></ol><p class="c4 c8"><span class="c0"></span></p><ol class="c3 lst-kix_2jbm47z7ya5y-0" start="8"><li class="c4 c9"><span>In your </span><span class="c1">setup()</span><span class="c0">method, load your mustache image using the following code:</span></li></ol><p class="c4"><span> </span><span class="c1">mustache = loadImage("mustache.png");</span></p><p class="c4 c8"><span class="c0"></span></p><p class="c4 c8"><span class="c0"></span></p><p class="c4 c8"><span class="c0"></span></p><p class="c4 c8"><span class="c0"></span></p><p class="c4 c8"><span class="c0"></span></p><ol class="c3 lst-kix_2jbm47z7ya5y-0" start="9"><li class="c4 c9"><span class="c0">Change “mustache.png” from the previous step so that it matches the name of your image.</span></li></ol><p class="c4"><span> </span></p><ol class="c3 lst-kix_2jbm47z7ya5y-0" start="10"><li class="c4 c9"><span>In your </span><span class="c1">draw()</span><span class="c0"> method, add the mustache using:</span></li></ol><p class="c4"><span> </span><span> </span><span class="c2 c1">image(mustache, 400, 300);</span></p><p class="c4 c8"><span class="c2 c1"></span></p><ol class="c3 lst-kix_2jbm47z7ya5y-0" start="11"><li class="c4 c9"><span>Change </span><span class="c10">the previous line of code </span><span class="c0">so that the mustache moves with your mouse! </span></li></ol><p class="c4 c8"><span class="c0"></span></p><ol class="c3 lst-kix_2jbm47z7ya5y-0" start="12"><li class="c4 c9"><span>Use an</span><span class="c1"> if </span><span class="c0">statement to make the mustache appear only when the mouse is pressed. </span></li></ol><p class="c4 c8"><span class="c0"></span></p><ol class="c3 lst-kix_2jbm47z7ya5y-0" start="13"><li class="c4 c9"><span>Inside of your </span><span class="c1">if</span><span> statement, redraw the background just like you did in the</span><span class="c1"> setup()</span><span class="c0"> method. This will make it so that only one mustache appears at a time. </span></li></ol><p class="c4 c8"><span class="c0"></span></p><p class="c4"><span class="c2 c10 c12"> Optional:</span></p><p class="c4 c8"><span class="c2 c10 c12"></span></p><ol class="c3 lst-kix_2jbm47z7ya5y-0" start="14"><li class="c4 c9"><span>Add or subtract a number from </span><span class="c1">mouseX</span><span> and </span><span class="c1">mouseY</span><span class="c0"> so that your mustache appears exactly where you click your mouse. </span></li></ol><p class="c4 c8"><span class="c0"></span></p><ol class="c3 lst-kix_2jbm47z7ya5y-0" start="15"><li class="c4 c9"><span class="c0">Resize your mustache so that it fits better using:</span></li></ol><p class="c4"><span> </span><span class="c1">mustache.resize(int width, int height)</span><span class="c0"> </span></p><p class="c4 c8"><span class="c0"></span></p><ol class="c3 lst-kix_2jbm47z7ya5y-0" start="16"><li class="c4 c9"><span class="c0">Draw a hat on your image when the right mouse button is clicked using:</span></li></ol><p class="c4"><span> </span><span class="c2 c1">if (mouseButton == RIGHT){</span></p><p class="c4"><span class="c2 c1"> }</span></p><p class="c4 c8"><span class="c0"></span></p><p class="c4 c7"><span> </span></p><p class="c4 c8"><span class="c2 c1"></span></p><p class="c4 c7 c8"><span class="c2 c1"></span></p><p class="c4 c7 c8"><span class="c2 c1"></span></p><p class="c4 c8 c14"><span class="c0"></span></p></body></html>
<pclass="normal">You are going to make a program that lets a unicorn follow our mouse over a rainbow.
28
+
<br>
29
+
<br>
30
+
31
+
1. Find a photo of a rainbow:<br><br>
32
+
a. Find an image on google<br>
33
+
b. Right click on the image and select "Save Image As"<br>
34
+
c. Rename your image something short (e.g. "rainbow")<br>
35
+
d. Save the image on your Desktop<br>
36
+
<br>
37
+
2. Find the starter code for this recipe and open it using Processing. Hint: the file name is Unicorns_On_Rainbow.pde and it should be in the section1 folder. <br>
38
+
<br>
39
+
40
+
3. Drag the image you saved in Step 1 from the Desktop and drop it into your sketch<br>
41
+
<br>
42
+
43
+
4. On line 1 of your sketch, add the following code:<br>
44
+
45
+
<pre>PImage rainbow;
46
+
PImage unicorn;</pre>
47
+
48
+
<br>
49
+
<pclass="normal">
50
+
5. Load your image by adding the following code to the setup() method:<br>
51
+
52
+
<pre>rainbow = loadImage("rainbow.jpg");
53
+
size(800, 600);
54
+
rainbow.resize(width,height);
55
+
</pre>
56
+
57
+
<br>
58
+
<pclass="normal">
59
+
6. Change “rainbow.jpg” in the above code so that it matches the name of your image.<br>
60
+
<br>
61
+
7. At the beginning of the draw() method, set “rainbow” as your background using the background() method.<br>
62
+
63
+
<imgsrc="images/rainbow_.jpg" style="width: 200px; height=160px; margin: 0px 20px" align="left"><h3><u>TESTING</u></h3><pclass="normal"> Run the program. Is your image displayed in the sketch? If not, get this part working before you move on to the next step.</p>
64
+
<br
65
+
<br>
66
+
<pclass="normal">
67
+
8. Now find an image of a unicorn. Pick one that has a transparent background. Search for “unicorn transparent” or “unicorn png”. Follow steps a - d under step 1, then drag and drop it onto your sketch.<br>
68
+
<br>
69
+
9. In the setup()method, load the unicorn image using the following code:<br>
70
+
71
+
<pre> unicorn = loadImage("unicorn.png");</pre>
72
+
73
+
<br>
74
+
<pclass="normal">
75
+
10. Change “unicorn.png” from the previous step so that it matches the name of your image and resize it if you need to (see step 5 for a hint on how to resize an image).<br>
76
+
<br>
77
+
11. In the draw() method, add the unicorn to your sketch using:<br>
78
+
<pre>image(unicorn, 150, 400);</pre>
79
+
<br>
80
+
<imgsrc="images/unicornOnRainbow.png" style="width: 200px; margin: 0px 20px" align="left"><h3><u>TESTING</u></h3><pclass="normal"> Run the program. Is your unicorn displayed on the rainbow? If not, get this part working before you move on to the next step.</p>
81
+
<br><br>
82
+
83
+
<br>
84
+
<pclass="normal">
85
+
12. Change the previous line of code so that the unicorn moves with your mouse! Hint: Processing gives you <fontcolor="fuscia">mouseX</font> and <fontcolor="fuscia">mouseY</font> to help you do this.<br>
86
+
<br>
87
+
13. Use an if statement to make the unicorn appear only when the mouse is pressed. Hint: Processing gives you <fontcolor="fuscia">mousePressed</font> to help you do this.<br>
88
+
<br>
89
+
14. Inside of your if statement, redraw the background before you draw the unicorn. This will make it so that only one unicorn appears at a time.<br>
90
+
<br>
91
+
<h3><u>EXTRAS</u></h3>
92
+
<pclass="normal">
93
+
15. Add or subtract a number from mouseX and mouseY when drawing the unicorn so the middle appears exactly where you click the mouse.<br>
0 commit comments