2020互動技術: week01

顯示具有 week01 標籤的文章。顯示所有文章

2020年11月16日星期一

07161116 張勝彥

week01

桌面葉正聖老師所需檔案

processing-3.5.3

processing.exe

開始學習程式碼

setup

size(寬,高);

視窗大小

drawline(x1,y1,x2,y2);

rect(x,y,寬,高);

ellipse(x,y,寬,高);

color-

background(#RGB);

stroke(#RGB);

fill(#RGB);

or(R,G,B);

week01 鄭皓文

這學期的主要學習內容是類似電腦圖學的P語言，先去下載安裝，我選擇的是3.5.4 windows 64 bit版本，順帶說下因為我常用的電腦要打包托運所以我估計是班上僅有的2020年還在用雙核CPU電腦上網課的人。

都2020年了還有人用雙核奔騰…真就夢回千禧年

回到正題，今天我們要學習如何使用P語言畫圖，先從最基礎的線段開始:

在這個程式中，line用以畫出線段，size則是用於調整視窗大小，所以同理，只要改變不同的首碼就可以畫出更多不同的圖形，例如：

1.畫線段用line(x1,x2,y1,y2);

2.畫方塊方塊rect(x1,y1,w,h);

3.畫圓形用ellipse(c1,c2,w,h);

這個圓角矩形

通過fill就可以調整要填充的顏色了，這裡我選擇的是純藍色，查找顏色編碼的方式在上學期已經記錄過了，這裡就不進行過多的贅述，現在我們已經可以畫出特定圖形了，自然就要挑戰一些更複雜的圖形了，就拿老朋友騰訊（誤）開刀吧，反正馬化騰應該看不到這篇blog

好吧我錯了，這根本不像騰訊，倒是有點像PINGU，但還是希望騰訊不要寄律師函給我，程式碼如下:

size(600,600);

fill(#ff0000);

ellipse(300,400,400,200);

fill(0,0,0);

ellipse(300,300,450,330);

fill(255,255,255);

ellipse(200,280,60,60);

fill(0,0,0);

ellipse(200,280,50,50);

fill(255,255,255);

ellipse(400,280,60,60);

fill(0,0,0);

ellipse(400,280,50,50);

fill(255,190,10);

ellipse(300,400,200,80);

line(200,400,400,400);

fill(50,50,50);

rect(150,200,95,20);

rect(350,200,95,20);

就這樣第一節課結束了，感覺比上學期的課程容易得多，不用安裝多餘的函式庫，直接用Processing就可以了。

2020年9月21日星期一

week ╯ 01 ╮

week01👴👵

♥點開桌面葉正聖老師所需檔案->processing-3.5.3->processing.exe

♥開始學習程式碼

setup-

size(寬,高);///視窗大小\

draw-

line(x1,y1,x2,y2);///畫線

rect(x,y,寬,高);///畫方形以左上角為中心點

ellipse(x,y,寬,高);///畫圓形以中心為中心點

color-

background(#RGB);///背景色

stroke(#RGB);///線框

fill(#RGB);///填色

or(R,G,B);

畫線、方塊、圈圈

1.畫線用line(x1,x2,y1,y2);

2.方塊rect(x1,y1,w,h);

3.ellipse(c1,c2,w,h);

2020年9月17日星期四

WEEK 01

一開始老師教我們畫直線 line(10,10,90,90)

接下來老師教我們如何調整大小 size(500,500)

接下來教如何再把圖畫在上面

接下來的程式碼都是可以圖畫在座標上

完成一個臉

最後把塗上色，完成!

2020年9月14日星期一

:D~week01

練習用Processing寫程式

🔴先去下載Processing

🔴找符合自己電腦的下載

🔴調整畫布大小

🔴利用畫線、畫圓、畫方做出一個可愛圖案

🔴學習色彩(筆刷、填充、背景)

🟠本來要做呆企鵝，結果做完像河童<(￣︶￣)>

⬇⬇⬇以下是程式碼⬇⬇⬇

size(600,600);//畫布大小

fill(68,155,234);//填色

rect(100,100,400,400,20);//外臉

fill(136,192,242);//填色

rect(120,120,360,360,20);//內臉

fill(255,255,255);//填色

ellipse(200,280,60,60);//左外眼

fill(0,0,0);//填色

ellipse(200,280,50,50);//左內眼

fill(255,255,255);//填色

ellipse(400,280,60,60);//右外眼

fill(0,0,0);//填色

ellipse(400,280,50,50);//右內眼

fill(247,187,9);//填色

ellipse(300,400,200,80);//嘴唇

line(200,400,400,400);//嘴

fill(54,54,54);//填色

rect(150,200,95,20);//左眉毛

rect(352,200,95,20);//右眉毛

Sherry:line,rect,color and penguin!

2020/09/14

(一)畫線、畫圓、畫方，利用函式及座標畫出想要的形狀

1.畫線 line(x1,y1,x2,y2); //點到點畫線

2.畫圓 ellipse(x1,y1,width,height); //左上角的點(x1,y1)畫width,height的圓

3.畫方

法一:

rect(x1,y1,width,height); // processing預設的

法二:

rectMode(CORNERS);

rect(x1,y1,x2,y2);

rectMode(RADIUS);

4.color: 屬於Hexadecimal notation的部分

RGB:

colorMode(RGB);

fill(R,G,B);

HSB:

colorMode(HSB);

fill(H,S,B);

//fill(#FF0000,alpha)

//可以有alpha值

my penguin project:

int y=125,x=235;

void setup(){

background(0);

size(400,400);

colorMode(RGB);

fill(180,125,155);

stroke(255);

rect(50,50,300,300,10);//big rect

colorMode(RGB);

fill(#FFFF00,100);

stroke(255);

rect(100,100,200,200,15);//small rect

//eyebrown

fill(255);

rect(120,130,50,20);

rect(230,130,50,20);

fill(155);

stroke(255);

ellipse(250,200,50,50);//right eye

ellipse(150,200,50,50);//left eye

fill(0);

ellipse(250,200,30,30);//right eye

ellipse(150,200,30,30);//left eye

fill(#FF0000);

ellipse(200,250,60,30);//mouth

}

void draw(){

//eyebrown

stroke(0);

for(int i=x;i<280;i+=5){

line(i,130,i,150);

}

for(int m=y;m<170;m+=5){

line(m,130,m,150);

}

喵~程式繪圖

Processing

學習影片:https://www.youtube.com/channel/UCoQzbAB-dVSJe_OkkWBc3bg/featured
教材:https://www.youtube.com/channel/UCoQzbAB-dVSJe_OkkWBc3bg/featured
初學者第一步:把字體放大!!!

對程式碼點右鍵>>在參考文件中搜索(可以找到延伸用法)

繪圖(畫線、畫圓、畫矩形......)

Processing 座標

線: line(10,10,90,90);///(x1,y1,x2,y2)

視窗大小: size(400,400);///(長,寬)

矩形: rect(100,100,200,200,60);///(x1,y1,x2,y2,圓角[可以用四個不角度])

橢圓(圓): ellipse(200,250,30,10);///(x,y,長,寬)

填色方法(在需上色的圖案程式前加入以下對應方法)#超前進度

填色格式:

灰階(0~255)
RGB(R,G,B) / (R,G,B,A)///透明度

#FFFFFF

色塊: fill();

線框: stroke();

背景色: background();

小試身手:

background(#94F5FC);
stroke(#C974FF);
line(0,50,400,50);
line(0,350,400,350);
line(0,60,400,60);
line(0,340,400,340);
line(50,0,50,400);
line(350,0,350,400);
line(60,0,60,400);
line(340,0,340,400);
stroke(0,0,0);
size(400,400);
fill(#FCFF5D);
rect(100,100,200,200,60);
fill(#FF3E3E);
ellipse(200,250,30,10);
fill(0,0,0);
ellipse(160,180,30,50);
ellipse(240,180,30,50);
fill(255,255,255);
ellipse(160,180,10,20);
ellipse(240,180,10,20);

week01 如何畫OPEN醬的臉

企鵝太簡單了，來畫OPEN醬如何呢?你只需要一些簡單的圓形和橢圓形喔!

程式碼:

size(400,400);

background(255);

strokeWeight(5); //寬度=5

//設定完成

stroke(0);

fill(59,172,216);

ellipse(200,200,300,290);//藍圈

stroke(255);

fill(234,47,64);

ellipse(200,200,250,240);//紅圈

stroke(255);

fill(125,181,44);

ellipse(200,200,200,190);//綠圈

stroke(0);

fill(255);

rect(50,200,300,150);//切半

stroke(255);

fill(255);

rect(50,205,300,150);//切邊

stroke(0);

fill(255,244,214);

ellipse(200,200,150,140);//臉

stroke(0);

fill(0);

ellipse(165,190,20,20);//左眼

stroke(0);

fill(0);

ellipse(235,190,20,20);//右眼

stroke(0);

fill(255,244,214);

ellipse(200,230,50,30);//鼻子

stroke(252,244,214);

fill(255,244,214);

ellipse(201,226,50,30);//嘴

stroke(0);

fill(135,96,27);

ellipse(200,215,30,20);//切邊

//完成了~

齁齁yo yo

開學第一天

這次用的是processing

嗷嗷我忘記截後面教的圖了

Yang_week01

互動技術概論-Prosessing

week01

processing下載網址 → https://processing.org/download/

(一)基本圖形指令

1.調整視窗大小: size(h,w);

2.畫線:line(x1,y1,h,w)

3.畫矩形:rect(x1,y1,h,w);

rect(x1,y1,h,w,弧度);

4.畫橢圓形:ellipse(x,y,w,h);

Processing畫面坐標軸

背景顏色:

background(R,G,B);

background(H,S,B);

線框:

stroke(顏色);

填色:

fill(R,G,B);

fill(H,S,B);

實作:

wendy_week1

互動技術概論學習日誌

week1

學習目標:

(一)圖形基本指令(線、矩形、橢圓形)

(二)Processing畫布座標

(三)小實作

語言 → Processing

下載網址 → https://processing.org/download/

(一)圖形基本指令

線:

line(x1,y1,x2,y2);

矩形:

rect(x1,y1,h,w);

rect(x1,y1,h,w,圓半徑);

橢圓形:

ellipse(x,y,w,h);

畫布大小設定:

size(w,h);

背景顏色:

background(R,G,B);

background(H,S,B);

線框:

stroke(顏色);

填色:

fill(R,G,B);

fill(H,S,B);

(二)Processing畫布座標

(三)小實作

幾何圖形拼湊~~~

程式碼:

size(500,500);

background(#D1E9E9);

rectMode(CENTER);

fill(#81C0C0);

rect(250,250,200,200,18);

fill(#A3D1D1);

rect(350,80,100,100,18);

fill(#81C0C0);

rect(200,400,50,50,18);

fill(#81C0C0);

rect(280,420,30,30,18);

ellipseMode(CENTER);

fill(#84C1FF);

ellipse(250,250,80,80);

fill(#2894FF);

ellipse(280,280,50,50);

fill(#2894FF);

ellipse(180,410,20,20);

fill(#97CBFF);

ellipse(220,370,50,50);

fill(#BBFFFF);

ellipse(220,370,20,20);

fill(#97CBFF);

ellipse(310,130,50,50);

fill(#BBFFFF);

ellipse(310,130,20,20);

fill(#BBFFFF);

ellipse(50,250,50,50);

fill(#97CBFF);

ellipse(50,250,20,20);

WEEK-1

Processing-初學

幾個基礎畫圖指令

line
rect、ellipse
stroke、strokeWeight
fill、size、background

等等.......

一顆寶貝球~

size(480,480);

background(255);

fill(255,0,0);

circle(240,240,360);

stroke(255);

fill(255);

rect(0,240, 480,240);

stroke(0);

strokeWeight(5);

fill(255,0);

circle(240,240,365);

stroke(0);

strokeWeight(10);

line(60,240, 420,240);

fill(255);

circle(240,240,72);

迪克第一週畫線、方塊、圈圈

畫線辣！

畫方形跟橢圓辣！

還有上色！

訂閱：文章 (Atom)

2020年11月16日 星期一

2020年9月21日 星期一

畫線、方塊、圈圈

2020年9月17日 星期四

2020年9月14日 星期一

2020年11月16日星期一

2020年9月21日星期一

2020年9月17日星期四

2020年9月14日星期一