Skip to content

Commit fe004fa

Browse files
DaveDLeagueDaveDLeague
authored
Update DotRace.html
1 parent 384575e commit fe004fa

1 file changed

Lines changed: 350 additions & 1 deletion

File tree

‎src/day1/Dot Race/DotRace.html‎

Lines changed: 350 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,350 @@
1-
<html><head><meta content="text/html; charset=UTF-8" http-equiv="content-type"><style type="text/css">ol.lst-kix_4wrqwatigo1k-5{list-style-type:none}ol.lst-kix_4wrqwatigo1k-4{list-style-type:none}.lst-kix_4wrqwatigo1k-7>li{counter-increment:lst-ctn-kix_4wrqwatigo1k-7}ol.lst-kix_4wrqwatigo1k-1.start{counter-reset:lst-ctn-kix_4wrqwatigo1k-1 0}.lst-kix_4wrqwatigo1k-4>li{counter-increment:lst-ctn-kix_4wrqwatigo1k-4}ol.lst-kix_4wrqwatigo1k-7{list-style-type:none}ol.lst-kix_4wrqwatigo1k-6{list-style-type:none}.lst-kix_4wrqwatigo1k-1>li{counter-increment:lst-ctn-kix_4wrqwatigo1k-1}ol.lst-kix_4wrqwatigo1k-6.start{counter-reset:lst-ctn-kix_4wrqwatigo1k-6 0}ol.lst-kix_4wrqwatigo1k-8{list-style-type:none}ol.lst-kix_4wrqwatigo1k-8.start{counter-reset:lst-ctn-kix_4wrqwatigo1k-8 0}.lst-kix_4wrqwatigo1k-1>li:before{content:"" counter(lst-ctn-kix_4wrqwatigo1k-1,lower-latin) ". "}ol.lst-kix_4wrqwatigo1k-3.start{counter-reset:lst-ctn-kix_4wrqwatigo1k-3 0}.lst-kix_4wrqwatigo1k-0>li:before{content:"" counter(lst-ctn-kix_4wrqwatigo1k-0,decimal) ". "}.lst-kix_4wrqwatigo1k-2>li{counter-increment:lst-ctn-kix_4wrqwatigo1k-2}ol.lst-kix_4wrqwatigo1k-4.start{counter-reset:lst-ctn-kix_4wrqwatigo1k-4 0}.lst-kix_4wrqwatigo1k-5>li{counter-increment:lst-ctn-kix_4wrqwatigo1k-5}.lst-kix_4wrqwatigo1k-3>li{counter-increment:lst-ctn-kix_4wrqwatigo1k-3}.lst-kix_4wrqwatigo1k-0>li{counter-increment:lst-ctn-kix_4wrqwatigo1k-0}.lst-kix_4wrqwatigo1k-6>li{counter-increment:lst-ctn-kix_4wrqwatigo1k-6}ol.lst-kix_4wrqwatigo1k-2.start{counter-reset:lst-ctn-kix_4wrqwatigo1k-2 0}.lst-kix_4wrqwatigo1k-7>li:before{content:"" counter(lst-ctn-kix_4wrqwatigo1k-7,lower-latin) ". "}.lst-kix_4wrqwatigo1k-8>li{counter-increment:lst-ctn-kix_4wrqwatigo1k-8}ol.lst-kix_4wrqwatigo1k-7.start{counter-reset:lst-ctn-kix_4wrqwatigo1k-7 0}.lst-kix_4wrqwatigo1k-8>li:before{content:"" counter(lst-ctn-kix_4wrqwatigo1k-8,lower-roman) ". "}.lst-kix_4wrqwatigo1k-3>li:before{content:"" counter(lst-ctn-kix_4wrqwatigo1k-3,decimal) ". "}.lst-kix_4wrqwatigo1k-5>li:before{content:"" counter(lst-ctn-kix_4wrqwatigo1k-5,lower-roman) ". "}.lst-kix_4wrqwatigo1k-2>li:before{content:"" counter(lst-ctn-kix_4wrqwatigo1k-2,lower-roman) ". "}.lst-kix_4wrqwatigo1k-6>li:before{content:"" counter(lst-ctn-kix_4wrqwatigo1k-6,decimal) ". "}ol.lst-kix_4wrqwatigo1k-5.start{counter-reset:lst-ctn-kix_4wrqwatigo1k-5 0}ol.lst-kix_4wrqwatigo1k-1{list-style-type:none}ol.lst-kix_4wrqwatigo1k-0{list-style-type:none}ol.lst-kix_4wrqwatigo1k-0.start{counter-reset:lst-ctn-kix_4wrqwatigo1k-0 0}ol.lst-kix_4wrqwatigo1k-3{list-style-type:none}ol.lst-kix_4wrqwatigo1k-2{list-style-type:none}.lst-kix_4wrqwatigo1k-4>li:before{content:"" counter(lst-ctn-kix_4wrqwatigo1k-4,lower-latin) ". "}ol{margin:0;padding:0}table td,table th{padding:0}.c0{padding-top:0pt;padding-bottom:0pt;line-height:1.15;orphans:2;widows:2;text-align:center;height:11pt}.c6{color:#000000;font-weight:700;text-decoration:none;vertical-align:baseline;font-size:14pt;font-family:"Arial";font-style:normal}.c3{color:#000000;font-weight:400;text-decoration:none;vertical-align:baseline;font-size:11pt;font-family:"Courier New";font-style:normal}.c1{color:#000000;font-weight:400;text-decoration:none;vertical-align:baseline;font-size:11pt;font-family:"Arial";font-style:normal}.c8{padding-top:0pt;padding-bottom:0pt;line-height:1.15;orphans:2;widows:2;text-align:left}.c5{padding-top:0pt;padding-bottom:0pt;line-height:1.15;orphans:2;widows:2;text-align:center}.c2{margin-left:72pt;padding-top:0pt;padding-bottom:0pt;line-height:1.15;text-align:left}.c9{padding-top:0pt;padding-bottom:0pt;line-height:1.15;text-align:left}.c12{background-color:#ffffff;max-width:468pt;padding:72pt 72pt 72pt 72pt}.c11{padding:0;margin:0}.c10{margin-left:36pt;padding-left:0pt}.c4{height:11pt}.c7{text-indent: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="c12"><p class="c5"><span class="c6">Dot Race</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: 624.00px; height: 153.33px;"><img alt="" src="images/image1.png" style="width: 624.00px; height: 153.33px; 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="c0"><span class="c6"></span></p><p class="c8"><span class="c1">Your goal is to make a circle that zooms across the screen when you press the mouse! </span></p><p class="c8 c4"><span class="c1"></span></p><ol class="c11 lst-kix_4wrqwatigo1k-0 start" start="1"><li class="c8 c10"><span class="c1">Copy and paste the code below into Processing, and then follow the steps inside.</span></li></ol><p class="c4 c9"><span class="c1"></span></p><p class="c2"><span class="c3">void setup() {</span></p><p class="c2"><span class="c3">&nbsp; size(800, 200);</span></p><p class="c2"><span class="c3">}</span></p><p class="c2 c4"><span class="c3"></span></p><p class="c2"><span class="c3">void draw() {</span></p><p class="c2"><span class="c3">&nbsp; //3. make it a nice color</span></p><p class="c2"><span class="c3">&nbsp;</span></p><p class="c2"><span class="c3">&nbsp; //4. if the mouse is pressed...</span></p><p class="c2"><span class="c3">&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></p><p class="c2 c7"><span class="c3">//5. ... change the X coordinate so that the dot moves to the right</span></p><p class="c2"><span class="c3">&nbsp; &nbsp; &nbsp; </span></p><p class="c2"><span class="c3">&nbsp; //2. Draw an ellipse of height and width 100. Make sure to use your variable for the X position.</span></p><p class="c2 c4"><span class="c3"></span></p><p class="c2"><span class="c3">//6. Make your dot move really fast so that it can win the race (you have to figure out what part of your code to change)</span></p><p class="c2 c4"><span class="c3"></span></p><p class="c2"><span class="c3">//7. Use this method to play a ding when your dot crosses the finish line. </span></p><p class="c2 c4"><span class="c3"></span></p><p class="c2"><span class="c3">}</span></p><p class="c0"><span class="c6"></span></p></body></html>
1+
<html>
2+
3+
<head>
4+
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
5+
<style type="text/css">
6+
ol.lst-kix_4wrqwatigo1k-5 {
7+
list-style-type: none;
8+
}
9+
ol.lst-kix_4wrqwatigo1k-4 {
10+
list-style-type: none;
11+
}
12+
.lst-kix_4wrqwatigo1k-7 > li {
13+
counter-increment: lst-ctn-kix_4wrqwatigo1k-7;
14+
}
15+
ol.lst-kix_4wrqwatigo1k-1.start {
16+
counter-reset: lst-ctn-kix_4wrqwatigo1k-1 0;
17+
}
18+
.lst-kix_4wrqwatigo1k-4 > li {
19+
counter-increment: lst-ctn-kix_4wrqwatigo1k-4;
20+
}
21+
ol.lst-kix_4wrqwatigo1k-7 {
22+
list-style-type: none;
23+
}
24+
ol.lst-kix_4wrqwatigo1k-6 {
25+
list-style-type: none;
26+
}
27+
.lst-kix_4wrqwatigo1k-1 > li {
28+
counter-increment: lst-ctn-kix_4wrqwatigo1k-1;
29+
}
30+
ol.lst-kix_4wrqwatigo1k-6.start {
31+
counter-reset: lst-ctn-kix_4wrqwatigo1k-6 0;
32+
}
33+
ol.lst-kix_4wrqwatigo1k-8 {
34+
list-style-type: none;
35+
}
36+
ol.lst-kix_4wrqwatigo1k-8.start {
37+
counter-reset: lst-ctn-kix_4wrqwatigo1k-8 0;
38+
}
39+
.lst-kix_4wrqwatigo1k-1 > li:before {
40+
content: "" counter(lst-ctn-kix_4wrqwatigo1k-1, lower-latin) ". ";
41+
}
42+
ol.lst-kix_4wrqwatigo1k-3.start {
43+
counter-reset: lst-ctn-kix_4wrqwatigo1k-3 0;
44+
}
45+
.lst-kix_4wrqwatigo1k-0 > li:before {
46+
content: "" counter(lst-ctn-kix_4wrqwatigo1k-0, decimal) ". ";
47+
}
48+
.lst-kix_4wrqwatigo1k-2 > li {
49+
counter-increment: lst-ctn-kix_4wrqwatigo1k-2;
50+
}
51+
ol.lst-kix_4wrqwatigo1k-4.start {
52+
counter-reset: lst-ctn-kix_4wrqwatigo1k-4 0;
53+
}
54+
.lst-kix_4wrqwatigo1k-5 > li {
55+
counter-increment: lst-ctn-kix_4wrqwatigo1k-5;
56+
}
57+
.lst-kix_4wrqwatigo1k-3 > li {
58+
counter-increment: lst-ctn-kix_4wrqwatigo1k-3;
59+
}
60+
.lst-kix_4wrqwatigo1k-0 > li {
61+
counter-increment: lst-ctn-kix_4wrqwatigo1k-0;
62+
}
63+
.lst-kix_4wrqwatigo1k-6 > li {
64+
counter-increment: lst-ctn-kix_4wrqwatigo1k-6;
65+
}
66+
ol.lst-kix_4wrqwatigo1k-2.start {
67+
counter-reset: lst-ctn-kix_4wrqwatigo1k-2 0;
68+
}
69+
.lst-kix_4wrqwatigo1k-7 > li:before {
70+
content: "" counter(lst-ctn-kix_4wrqwatigo1k-7, lower-latin) ". ";
71+
}
72+
.lst-kix_4wrqwatigo1k-8 > li {
73+
counter-increment: lst-ctn-kix_4wrqwatigo1k-8;
74+
}
75+
ol.lst-kix_4wrqwatigo1k-7.start {
76+
counter-reset: lst-ctn-kix_4wrqwatigo1k-7 0;
77+
}
78+
.lst-kix_4wrqwatigo1k-8 > li:before {
79+
content: "" counter(lst-ctn-kix_4wrqwatigo1k-8, lower-roman) ". ";
80+
}
81+
.lst-kix_4wrqwatigo1k-3 > li:before {
82+
content: "" counter(lst-ctn-kix_4wrqwatigo1k-3, decimal) ". ";
83+
}
84+
.lst-kix_4wrqwatigo1k-5 > li:before {
85+
content: "" counter(lst-ctn-kix_4wrqwatigo1k-5, lower-roman) ". ";
86+
}
87+
.lst-kix_4wrqwatigo1k-2 > li:before {
88+
content: "" counter(lst-ctn-kix_4wrqwatigo1k-2, lower-roman) ". ";
89+
}
90+
.lst-kix_4wrqwatigo1k-6 > li:before {
91+
content: "" counter(lst-ctn-kix_4wrqwatigo1k-6, decimal) ". ";
92+
}
93+
ol.lst-kix_4wrqwatigo1k-5.start {
94+
counter-reset: lst-ctn-kix_4wrqwatigo1k-5 0;
95+
}
96+
ol.lst-kix_4wrqwatigo1k-1 {
97+
list-style-type: none;
98+
}
99+
ol.lst-kix_4wrqwatigo1k-0 {
100+
list-style-type: none;
101+
}
102+
ol.lst-kix_4wrqwatigo1k-0.start {
103+
counter-reset: lst-ctn-kix_4wrqwatigo1k-0 0;
104+
}
105+
ol.lst-kix_4wrqwatigo1k-3 {
106+
list-style-type: none;
107+
}
108+
ol.lst-kix_4wrqwatigo1k-2 {
109+
list-style-type: none;
110+
}
111+
.lst-kix_4wrqwatigo1k-4 > li:before {
112+
content: "" counter(lst-ctn-kix_4wrqwatigo1k-4, lower-latin) ". ";
113+
}
114+
ol {
115+
margin: 0;
116+
padding: 0;
117+
}
118+
table td,
119+
table th {
120+
padding: 0;
121+
}
122+
.c0 {
123+
padding-top: 0pt;
124+
padding-bottom: 0pt;
125+
line-height: 1.15;
126+
orphans: 2;
127+
widows: 2;
128+
text-align: center;
129+
height: 11pt;
130+
}
131+
.c6 {
132+
color: #000000;
133+
font-weight: 700;
134+
text-decoration: none;
135+
vertical-align: baseline;
136+
font-size: 14pt;
137+
font-family: "Arial";
138+
font-style: normal;
139+
}
140+
.c3 {
141+
color: #000000;
142+
font-weight: 400;
143+
text-decoration: none;
144+
vertical-align: baseline;
145+
font-size: 11pt;
146+
font-family: "Courier New";
147+
font-style: normal;
148+
}
149+
.c1 {
150+
color: #000000;
151+
font-weight: 400;
152+
text-decoration: none;
153+
vertical-align: baseline;
154+
font-size: 11pt;
155+
font-family: "Arial";
156+
font-style: normal;
157+
}
158+
.c8 {
159+
padding-top: 0pt;
160+
padding-bottom: 0pt;
161+
line-height: 1.15;
162+
orphans: 2;
163+
widows: 2;
164+
text-align: left;
165+
}
166+
.c5 {
167+
padding-top: 0pt;
168+
padding-bottom: 0pt;
169+
line-height: 1.15;
170+
orphans: 2;
171+
widows: 2;
172+
text-align: center;
173+
}
174+
.c2 {
175+
margin-left: 72pt;
176+
padding-top: 0pt;
177+
padding-bottom: 0pt;
178+
line-height: 1.15;
179+
text-align: left;
180+
}
181+
.c9 {
182+
padding-top: 0pt;
183+
padding-bottom: 0pt;
184+
line-height: 1.15;
185+
text-align: left;
186+
}
187+
.c12 {
188+
background-color: #ffffff;
189+
max-width: 468pt;
190+
padding: 72pt 72pt 72pt 72pt;
191+
}
192+
.c11 {
193+
padding: 0;
194+
margin: 0;
195+
}
196+
.c10 {
197+
margin-left: 36pt;
198+
padding-left: 0pt;
199+
}
200+
.c4 {
201+
height: 11pt;
202+
}
203+
.c7 {
204+
text-indent: 36pt;
205+
}
206+
.title {
207+
padding-top: 0pt;
208+
color: #000000;
209+
font-size: 26pt;
210+
padding-bottom: 3pt;
211+
font-family: "Arial";
212+
line-height: 1.15;
213+
page-break-after: avoid;
214+
orphans: 2;
215+
widows: 2;
216+
text-align: left;
217+
}
218+
.subtitle {
219+
padding-top: 0pt;
220+
color: #666666;
221+
font-size: 15pt;
222+
padding-bottom: 16pt;
223+
font-family: "Arial";
224+
line-height: 1.15;
225+
page-break-after: avoid;
226+
orphans: 2;
227+
widows: 2;
228+
text-align: left;
229+
}
230+
li {
231+
color: #000000;
232+
font-size: 11pt;
233+
font-family: "Arial";
234+
}
235+
p {
236+
margin: 0;
237+
color: #000000;
238+
font-size: 11pt;
239+
font-family: "Arial";
240+
}
241+
h1 {
242+
padding-top: 20pt;
243+
color: #000000;
244+
font-size: 20pt;
245+
padding-bottom: 6pt;
246+
font-family: "Arial";
247+
line-height: 1.15;
248+
page-break-after: avoid;
249+
orphans: 2;
250+
widows: 2;
251+
text-align: left;
252+
}
253+
h2 {
254+
padding-top: 18pt;
255+
color: #000000;
256+
font-size: 16pt;
257+
padding-bottom: 6pt;
258+
font-family: "Arial";
259+
line-height: 1.15;
260+
page-break-after: avoid;
261+
orphans: 2;
262+
widows: 2;
263+
text-align: left;
264+
}
265+
h3 {
266+
padding-top: 16pt;
267+
color: #434343;
268+
font-size: 14pt;
269+
padding-bottom: 4pt;
270+
font-family: "Arial";
271+
line-height: 1.15;
272+
page-break-after: avoid;
273+
orphans: 2;
274+
widows: 2;
275+
text-align: left;
276+
}
277+
h4 {
278+
padding-top: 14pt;
279+
color: #666666;
280+
font-size: 12pt;
281+
padding-bottom: 4pt;
282+
font-family: "Arial";
283+
line-height: 1.15;
284+
page-break-after: avoid;
285+
orphans: 2;
286+
widows: 2;
287+
text-align: left;
288+
}
289+
h5 {
290+
padding-top: 12pt;
291+
color: #666666;
292+
font-size: 11pt;
293+
padding-bottom: 4pt;
294+
font-family: "Arial";
295+
line-height: 1.15;
296+
page-break-after: avoid;
297+
orphans: 2;
298+
widows: 2;
299+
text-align: left;
300+
}
301+
h6 {
302+
padding-top: 12pt;
303+
color: #666666;
304+
font-size: 11pt;
305+
padding-bottom: 4pt;
306+
font-family: "Arial";
307+
line-height: 1.15;
308+
page-break-after: avoid;
309+
font-style: italic;
310+
orphans: 2;
311+
widows: 2;
312+
text-align: left;
313+
}
314+
</style>
315+
</head>
316+
317+
<body class="c12">
318+
<p class="c5"><span class="c6">Dot Race</span></p>
319+
<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: 624.00px; height: 153.33px;"><img alt="" src="images/image1.png" style="width: 624.00px; height: 153.33px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></p>
320+
<p
321+
class="c0"><span class="c6"></span></p>
322+
<p class="c8"><span class="c1">Your goal is to make a circle that zooms across the screen when you press the mouse! </span></p>
323+
<p class="c8 c4"><span class="c1"></span></p>
324+
325+
<li class="c8 c10"><span class="c1">Copy and paste the code below into Processing, and then follow the steps inside.</span></li>
326+
327+
<p class="c4 c9"><span class="c1"></span></p>
328+
<p class="c2"><span class="c3">// 1. Create an integer variable to<br>// keep track of the x postion for an ellipse.</span></p><br>
329+
<p class="c2"><span class="c3">void setup() {</span></p>
330+
<p class="c2"><span class="c3">&nbsp; size(800, 200);</span></p>
331+
<p class="c2"><span class="c3">}</span></p>
332+
<p class="c2 c4"><span class="c3"></span></p>
333+
<p class="c2"><span class="c3">void draw() {</span></p>
334+
<p class="c2"><span class="c3">&nbsp; //3. make it a nice color</span></p>
335+
<p class="c2"><span class="c3">&nbsp;</span></p>
336+
<p class="c2"><span class="c3">&nbsp; //4. if the mouse is pressed...</span></p>
337+
<p class="c2"><span class="c3">&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></p>
338+
<p class="c2 c7"><span class="c3">//5. ... change the X coordinate so that the dot moves to the right</span></p>
339+
<p class="c2"><span class="c3">&nbsp; &nbsp; &nbsp; </span></p>
340+
<p class="c2"><span class="c3">&nbsp; //2. Draw an ellipse of height and width 100. Make sure to use your variable for the X position.</span></p>
341+
<p class="c2 c4"><span class="c3"></span></p>
342+
<p class="c2"><span class="c3">//6. Make your dot move really fast so that it can win the race (you have to figure out what part of your code to change)</span></p>
343+
<p class="c2 c4"><span class="c3"></span></p>
344+
<p class="c2"><span class="c3">//7. Use this method to play a ding when your dot crosses the finish line. </span></p>
345+
<p class="c2 c4"><span class="c3"></span></p>
346+
<p class="c2"><span class="c3">}</span></p>
347+
<p class="c0"><span class="c6"></span></p>
348+
</body>
349+
350+
</html>

0 commit comments

Comments
 (0)