# Week 02

## 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? &#x20;

{% embed url="<http://hint.fm/wind/>" %}

{% embed url="<https://www.youtube.com/watch?v=1ZPJ0U_kpNg>" %}

## 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

{% file src="<https://3008602149-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LENuoEyK2N20-qT-Oc8%2F-LJGtGYNWYg_uo_q8Np9%2F-LJHaY9tvGLeV5sXXuCY%2FStart.zip?alt=media&token=d555ffbe-a210-4516-80d9-d538560ba1ea>" %}
Start.zip
{% endfile %}

### C. Live Coding

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

**Go to** [**https://jsfiddle.net/kdoodoo/fcsv9kw2/**](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.&#x20;

```
function draw()
```

function draw() is continuously changing over time.

### B. Canvas in the web browser

![](https://3008602149-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LENuoEyK2N20-qT-Oc8%2F-LMZvSAhJJC4TGU6Z4SQ%2F-LMZz3Wab1heHvPBKrRv%2F%ED%94%84%EB%A0%88%EC%A0%A0%ED%85%8C%EC%9D%B4%EC%85%981.png?alt=media\&token=a5c4de5d-4616-4329-a2fb-042a1d0b79ef)

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:&#x20;

#### <https://wordpress.com/> (recommended)

Signup for the wordpress and upload your project one by one every week. (recommended)&#x20;

Wordpress is free and easy to use.&#x20;

#### B. How to share your code easily.&#x20;

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

## 6. In-class Activity

#### A. Draw a self-portrait of yourself.&#x20;

## 7. Assignment

#### A. Find a project that works with the computer programming.&#x20;

#### - Recommended: Improve OR Add additional objects to your in-class self-portrait.&#x20;

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

#### B. Submit your in-class activity and the assignment.&#x20;

#### Here : <https://goo.gl/forms/XHD9edphZxcGF0lb2>