Week 02

Introduction and Drawing

Discussion

Map of Computer Languages

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

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:

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.

(eg. adding favorite animal, favorite food and etc)

B. Submit your in-class activity and the assignment.

Last updated