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 Map

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

230KB

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.

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