-
Notifications
You must be signed in to change notification settings - Fork 0
/
planning.html
92 lines (83 loc) · 4.86 KB
/
planning.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
<!DOCTYPE html>
<html>
<head>
<title>Planning (p5.js Reference)</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Import Font -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Shadows+Into+Light">
<link href="style.css" rel="stylesheet" type= "text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
</head>
<body>
<!--Header Nav Bar -->
<nav>
<div class="nav-wrapper" style ="background-color: purple">
<a href="index.html" class="brand-logo right">Ms. Qs p5.js Reference</a>
<ul id="nav-mobile" class="left hide-on-med-and-down">
<li><a href="index.html">Home</a></li>
<li><a href="planning.html">Planning</a></li>
<li><a href="shapes.html">Shapes</a></li>
<li><a href="animation.html">Animation</a></li>
<li><a href="sound.html">Sound</a></li>
</ul>
</div>
</nav>
<!--Unique Webpage Content-->
<h1 id = "title">Planning Your Code in p5.js</h1>
<!-- Cards for Two Sections -->
<div class ="container">
<h5 class ="white-text">Before you can start coding illustrations in p5.js you should plan out your code. This can be done in any way you feel most comfortable. Here are some suggestions:</h5>
<div class="row">
<div class ="col s6">
<div class = "card purple accent-2">
<div class="card-content white-text">
<span class="card-title">Custom Planning Worksheet</span>
<p>In class we practiced using the p5.js coordinate system planning page. This planning page works for the default p5.js canvas width = 400 and canvas height = 400</p>
</div>
</div>
</div>
<div class ="col s6 push-6">
<div class = "card purple accent-2">
<div class="card-content white-text">
<span class="card-title">Using mouseX and mouseY</span>
<p>Another way you can plan is by using the mouseX and mouseY built in variables</p>
</div>
</div>
</div>
</div>
</div>
<div class= "container row">
<p class ="pinktxt" id= "uc">Pardon our appearence. We are under construction </p>
<div class="col s1 push-s4"><span class="flow-text"><img class="materialboxed" width="400" src="https://cdn.pixabay.com/photo/2017/06/16/07/26/under-construction-2408060__340.png"></span></div>
</div>
<!-- End Unique Page Content -->
<!-- End of Unique Page Conent -->
<!--Footer -->
<footer class="page-footer" style ="background-color: purple">
<div class="container">
<div class="row">
<div class="col l6 s12">
<h5 class="white-text">About Ms. Quinones</h5>
<p class="grey-text text-lighten-4">Layla Quinones teaches Computer Science & STEM at MS/HS 223 in the Bronx. She has a BS and MA from NYU in Physics & Education, and is focused on spreading CS to communities throughout NYC. She is passionate about integrating CS across the curriculum and identifying entry points for CS in other subjects. Layla believes strongly that CS is an essential tool for students to learn not only to stay competitive in the future's job market, but also to use as a tool for creative expression and contributing to a global community. </p>
</div>
<div class="col l4 offset-l2 s12">
<h5 class="white-text">Helpful Links</h5>
<ul>
<li><a class="grey-text text-lighten-3" href="https://p5js.org/reference/">p5.js Reference</a></li>
<li><a class="grey-text text-lighten-3" href="https://editor.p5js.org/">p5.js Editor</a></li>
<li><a class="grey-text text-lighten-3" href="https://www.youtube.com/user/shiffman">p5.js Video Tutorials</a></li>
<li><a class="grey-text text-lighten-3" href="https://classroom.google.com/h">Google Classroom</a></li>
</ul>
</div>
</div>
</div>
<div class="footer-copyright">
<div class="container">
Email: [email protected]
<a class="grey-text text-lighten-4 right" href="https://p5js.org/learn/">Other p5.js Tutorials</a>
</div>
</div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>