-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathexample-challenge.html
More file actions
200 lines (198 loc) · 8.09 KB
/
Copy pathexample-challenge.html
File metadata and controls
200 lines (198 loc) · 8.09 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example Challenge for DECO1012</title>
<link rel="stylesheet" href="css/reset.css"/>
<link rel="stylesheet" href="css/style.css"/>
<link rel="stylesheet" href="css/prism.css"/>
</head>
<body>
<left>
</left>
<main>
<article>
<section class="main-title" id="wel">
<h1>Welcome to the windmill challenge</h1>
<p>Made by the Creative Coding Research Team</p>
<figure class="img-container">
<img src="images/windmill-solved.gif" alt="Flow Field Variation" width="100%">
<figcaption><center>To complete this challenge figure out the puzzle below to make this!<center></figcaption>
</figure>
<div class="pagination">
<a href="#s5">«</a>
<a class="active" href="#wel">1</a>
<a href="#tas">2</a>
<a href="#s1">3</a>
<a href="#s2">4</a>
<a href="#s3">5</a>
<a href="#s4">6</a>
<a href="#s5">7</a>
<a href="#tas">»</a>
</div>
</section>
<section id="tas">
<h2>Your Task</h2>
<p>To help you learn more about how translate and rotate affect the canvas and how shapes are drawn in p5.js, you're task is to make a windmill by solving a puzzle.
</p>
<div class="pagination">
<a href="#wel">«</a>
<a href="#wel">1</a>
<a class="active" href="#tas">2</a>
<a href="#s1">3</a>
<a href="#s2">4</a>
<a href="#s3">5</a>
<a href="#s4">6</a>
<a href="#s5">7</a>
<a href="#s1">»</a>
</div>
</section>
<section id="s1">
<h2>Draw a blade</h2>
<figure class="img-container">
<img src="images/example-step-1.png" alt="a white trapzium" width="100%">
<figcaption><center>Make this in the editor below to complete step one<center></figcaption>
</figure>
<p>To get you started, use the beginShape() method below to create one of the blades in the p5 editor. For more info on this method, see the <a href="https://p5js.org/reference/#/p5/beginShape" target="_blank">p5.js reference</a></p>
<pre data-src="prism.js" class=" language-javascript" data-src-status="loaded"><code class="language-processing">function setup() {
createCanvas(400, 400);
}
function draw() {
background(220);
// Copy and paste this into the code editor below
// change the vertexes to get your blade
//looking like the example
beginShape(QUADS);
vertex(0, 0);
vertex(7, 20);
vertex(40, 20);
vertex(47, 0);
endShape();
}
</code></pre>
<figure class="code-figure">
<div class="videoWrapper" style="--aspect-ratio: 3 / 5;">
<iframe width="560" height="349" src="https://editor.p5js.org/" frameborder="0" allowfullscreen></iframe>
</div>
<figcaption><center>Make a blade to complete step one<center></figcaption>
</figure>
<div class="pagination">
<a href="#tas">«</a>
<a href="#wel">1</a>
<a href="#tas">2</a>
<a class="active" href="#s1">3</a>
<a href="#s2">4</a>
<a href="#s3">5</a>
<a href="#s4">6</a>
<a href="#s5">7</a>
<a href="#s2">»</a>
</div>
</section>
<section id="s2">
<h2>Rotate() Method</h2>
<p>Now that you've made a blade you'll need to understand rotate to figure out the puzzle. Check out the code editor below to see how rotate works. For more info on this method, see the <a href="https://p5js.org/reference/#/p5/rotate" target="_blank">p5.js reference</a></p>
<figure class="code-figure">
<div class="videoWrapper" style="--aspect-ratio: 3 / 5;">
<iframe width="560" height="349" src="https://editor.p5js.org/halcha/sketches/d5KkW1ZGD" frameborder="0" allowfullscreen></iframe>
</div>
<figcaption><center>Understand the rotate() method to complete step two<center></figcaption>
</figure>
<div class="pagination">
<a href="#s1">«</a>
<a href="#wel">1</a>
<a href="#tas">2</a>
<a href="#s1">3</a>
<a class="active" href="#s2">4</a>
<a href="#s3">5</a>
<a href="#s4">6</a>
<a href="#s5">7</a>
<a href="#s3">»</a>
</div>
</section>
<section id="s3">
<h2>Translate() Method</h2>
<p>You also need to understand how translate() works. Check out the code editor below to see how translate works. For more info on this method, see the <a href="https://p5js.org/reference/#/p5/translate" target="_blank">p5.js reference</a></p>
<figure class="code-figure">
<div class="videoWrapper" style="--aspect-ratio: 3 / 5;">
<iframe width="560" height="349" src="https://editor.p5js.org/halcha/sketches/4zCmxXBr1" frameborder="0" allowfullscreen></iframe>
</div>
<figcaption><center>Understand the translate() method to complete step three<center></figcaption>
</figure>
<div class="pagination">
<a href="#s2">«</a>
<a href="#wel">1</a>
<a href="#tas">2</a>
<a href="#s1">3</a>
<a href="#s2">4</a>
<a class="active" href="#s3">5</a>
<a href="#s4">6</a>
<a href="#s5">7</a>
<a href="#s4">»</a>
</div>
</section>
<section id="s4">
<h2>Challenge - Build a windmill</h2>
<figure class="img-container">
<img src="images/windmill-solved.gif" alt="Flow Field Variation" width="100%">
<figcaption><center>To complete this challenge figure out the puzzle <a href="#s4">below</a> to make this!<center></figcaption>
</figure>
<p>With rotate and translate under your belt, it's time to solve the puzzle! Recreate the gif above in the code editor below to solve the puzzle. We've left a bit of code in there to get you started. Below are all the methods you'll need to solve the puzzle.</p>
<ul>
<li><a href="https://p5js.org/reference/#/p5/rotate" target="_blank">rotate()</a></li>
<li><a href="https://p5js.org/reference/#/p5/translate" target="_blank">translate()</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for" target="_blank">for loops</a></li>
<li><a href="https://p5js.org/reference/#/p5/push" target="_blank">push and pop</a></li>
</ul>
<figure class="code-figure">
<div class="videoWrapper" style="--aspect-ratio: 3 / 5;">
<iframe width="560" height="349" src="https://editor.p5js.org/halcha/sketches/oJMM_1VVd" alt="if i'm not loading, try refreshing your page" frameborder="0" allowfullscreen></iframe>
</div>
<figcaption><center>Solve the puzzle to complete step four and finish the challenge!<center></figcaption>
</figure>
<div class="pagination">
<a href="#s3">«</a>
<a href="#wel">1</a>
<a href="#tas">2</a>
<a href="#s1">3</a>
<a href="#s2">4</a>
<a href="#s3">5</a>
<a class="active" href="#s4">6</a>
<a href="#s5">7</a>
<a href="#s5">»</a>
</div>
</section>
<section id="s5">
<h2>Extra Challenge - be the wind</h2>
<figure class="img-container">
<img src="images/windmill-extra-solved.gif" alt="windmill spinning with the breeze" width="100%">
<figcaption><center>To complete this extra challenge, make this!<center></figcaption>
</figure>
<p>If you're up for an extra challenge, use p5.sound to let your microphone change the speed that the windmill spins!</p>
<ul>
<li><a href="https://p5js.org/reference/#/libraries/p5.sound" target="_blank">p5.sound library</a></li>
</ul>
<figure class="code-figure">
<div class="videoWrapper" style="--aspect-ratio: 3 / 5;">
<iframe width="560" height="349" src="https://editor.p5js.org/halcha/sketches/oJMM_1VVd" alt="if i'm not loading, try refreshing your page" frameborder="0" allowfullscreen></iframe>
</div>
<figcaption><center>Solve the puzzle to complete step four<center></figcaption>
</figure>
<div class="pagination">
<a href="#s4">«</a>
<a href="#wel">1</a>
<a href="#tas">2</a>
<a href="#s1">3</a>
<a href="#s2">4</a>
<a href="#s3">5</a>
<a href="#s4">6</a>
<a class="active" href="#s5">7</a>
<a href="#wel">»</a>
</div>
</section>
</article>
</main>
<right></right>
<footer><p>made with 🧡 by the Creative Coding Research Team<p></footer>
<script src="js/prism.js"></script>
</body>
</html>