Discussion
Map of Computer Languages
Popular Languages these days
1. What would be a computer programming project?
2. Server-side vs. client-side
What is server? Service!
What is client? User!
3. CDN and LOCAL
A. CDN : Content Delivery Network
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/addons/p5.dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/addons/p5.sound.js"></script>
B. Local : Open up a new folder and Download file
C. Live Coding
4. LET'S START WITH P5.JS
A. function setup() and function draw()
function setup() is static, not changing over time.
function draw() is continuously changing over time.
B. Canvas in the web browser
Unlike mathematical quadrant origins, the origin (0,0) of the web browser canvas is at the top-left corner.
C. SHAPES
point()
line()
line(30, 20, 85, 75);
stroke(126,0,0);
ellipse()
fill(80);
ellipse(56, 46, 55, 55);
rect()
stroke(0,0,255);
fill(0,0,255);
rect(30, 20, 55, 55);
triangle()
fill(10,200,35,0.6);
triangle(30, 75, 58, 20, 86, 75);
D. COLOR
color()
var inside = color(204, 102, 0);
fill(inside);
triangle(30, 75, 58, 20, 86, 75);
E. CONSOLE
console.log()
console.log("hello");
print()
print("Hello, World");
5. How to upload your project?
A. Documentation:
Signup for the wordpress and upload your project one by one every week. (recommended)
Wordpress is free and easy to use.
B. How to share your code easily.
6. In-class Activity
A. Draw a self-portrait of yourself.
7. Assignment
A. Find a project that works with the computer programming.
- Recommended: Improve OR Add additional objects to your in-class self-portrait.
(eg. adding favorite animal, favorite food and etc)
B. Submit your in-class activity and the assignment.
