10/4 建北聯課> <

by 鄭婷卉 卉潔!?

建北聯課？？

上課內容

```
Processing
```
```
網頁
```

什麼是processing??

What is processing ??

Processing is a flexible software sketchbook and a language for learning how to code within the context of the visual arts.

Processing通過可視化的方式輔助編程教學，並在此基礎之上表達數字創意。

Processing基於Java語言，進一步簡化了語法，並用圖形編程模式取代了命令行程序模式。

在開始之前...

那我們就開始畫畫吧> <

視窗

size (width, height);

size(150, 200);

直線

line(x1, y1, x2, y2);

(x1, y1)

(x2, y2)

size(160, 320);
line(100, 50, 200, 150);

圓形

ellipse(x, y, width, height);

(x, y)

width

height

ellipse(50, 50, 80, 80);

矩形

rect(x, y, width, height);

width

height

(x, y)

size(150, 300);
rect(50, 50, 50, 100);

四邊形

quad(x1, y1, x2, y2, x3, y3, x4, y4);

(x1, y1)

(x2, y2)

(x3, y3)

(x4, y4)

size(150, 300);
quad(50, 50, 100, 100, 120, 150, 130, 270);

三角形

triangle(x1, y1, x2, y2, x3, y3)

(x1, y1)

(x2, y2)

(x3, y3)

size(100, 200);
triangle(30, 40, 60, 50, 90, 150);

只有黑色跟白色好醜...

而且線都一樣粗細QQ

線的粗細

strokeWeight(num);

裡面填的數字代表筆畫粗細為幾個像素

線的轉彎處

strokeJoin(ROUND/BEVEL);

控制線段遇到轉角的型:圓角/斜角

線的開頭結尾

strokeCap(ROUND/SQUARE);

控制線段在開頭與結尾的樣子:圓形/方形

線的圓滑

smooth(); / noSmooth();

控制線段的圓滑性

背景顏色

background(R, G, B);

size(300, 300);
background(0, 0, 0);

填色

fill(R, G, B, alpha);

size(300, 300);
background(255, 255, 255);

fill(151, 203, 255, 0);
rect(20, 30, 40, 40);
fill(151, 203, 255, 50);
rect(40, 50, 40, 40);
fill(151, 203, 255, 100);
rect(60, 70, 40, 40);
fill(151, 203, 150, 150);
rect(80, 90, 40, 40);
fill(151, 203, 255, 255);
rect(90, 110, 40, 40);

練習時間> <

偷補充

void setup(){
  size(600, 600);
  background(128, 128, 255);
}
void draw(){
  strokeWeight(15); 
  strokeJoin(ROUND); 
  rect(mouseX, mouseY, 100, 100);
}