# 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="/files/-LJHaY9tvGLeV5sXXuCY" %}
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

![](/files/-LMZz3Wab1heHvPBKrRv)

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>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://icl.doyoki.com/week-02.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.