Week 02

Introduction and Drawing

Discussion

Map of Computer Languages

http://www.pfnp.me/wp-content/uploads/2012/11/programming-language-history2.png

Popular Languages these days

https://www.computerscience.org/resources/computer-programming-languages/

https://spectrum.ieee.org/static/interactive-the-top-programming-languages-2018

1. What would be a computer programming project?

Wind Maphint.fm

2. Server-side vs. client-side

What is server? Service!

What is client? User!

3. CDN and LOCAL

A. CDN : Content Delivery Network

What is CDN? https://www.cloudflare.com/learning/cdn/what-is-a-cdn/

What is CDN? https://cdnjs.com/about

p5.js : https://cdnjs.com/libraries/p5.js

<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

Start.zip

archive · 230KB

Open

Start.zip

C. Live Coding

Go to https://alpha.editor.p5js.org/ (Recommended)

Go to https://jsfiddle.net/kdoodoo/fcsv9kw2/

4. LET'S START WITH P5.JS

A. function setup() and function draw()

function setup()

function setup() is static, not changing over time.

function draw()

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()

point(30, 20);

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:

https://wordpress.com/ (recommended)

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.

You can share your code via Gist. ​https://gist.github.com/

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.

Here : https://goo.gl/forms/XHD9edphZxcGF0lb2