第一份程式
第二份程式，多了筆觸大小
第三份程式，背景色更改
第四份程式，多了函式，眼睛透過滑鼠游標X Y軸控制
第五份程式，多了刷新率
2021年9月28日 星期二
2021年9月27日 星期一
我與天文社與漢堡排_week01
210927 week01
💛🔔
如何畫出企鵝？
首先要先下載Processing
要下載老師放在上課用軟體的3.5.4版本
解壓縮後長醬＞開啟
檔案＞偏好設定能夠選擇字形及大小
右下方三角形可縮放下方欄
畫個500*600的空間如何啊
工具＞顏色選擇器是個好工具
選擇喜歡的顏色並複製
這是一個粉紅色500*600的空間背景
畫一個正方形如何啊？
😏👉size(600,600);//大小
background(#E885CF);//背景色
rect(100,100,400,400);//方塊
對這是眼睛
對這也是眼睛
位置、圖案示意圖
嘴巴的部分
先畫一個橢圓跟長方形
這是一個有關筆觸顏色的故事
整理一下～
企鵝完成！！！
size(600,600);//大小
background(#E885CF);//背景色
fill(255);
noStroke();//臉
rect(100,100,400,400);//方塊
stroke(0,0,0);///筆觸顏色
strokeWeight(5);
ellipse(200,250,30,30);//圓
ellipse(400,250,30,30);//圓
noStroke();
fill(#CC6600);//嘴巴
ellipse(300,400,200,100);
stroke(255);//嘴巴的線
line(200,400,400,400);
伊莉莎白是你？
試試看使用void setup也能成功
也加上 👉ellipse(mouseX,mouseY,30,30);👈這行試試
為什麼莫名想到丹丹漢堡吉祥物😂
如果把 background(#E885CF); 放到void setup裡面
就會產生殘影
番外篇～Processing存檔檔名須知
1.不能使用空格
2.不能使用特殊符號
3.不能使用中文
4.最前面不能是學號
如果喜歡我的部落格的話
請幫我按右上角的愛心(根本按不下去)
也可以按右上角的小鈴鐺(這也按不下去)
才不會錯過我的更新哦！😉
week02
(來點日常抱怨...什麼時候才能回學校上課嗚嗚嗚)
今天教的使用processing
畫圖很方便,簡單的幾句程式碼完成你所要的圖
size(600,600);//(1) 畫布大小
background(#30A4D8);//背景色
//(2) 顏色: 背景色、畫的顏色
rect(100,100, 400,400);//(3)方塊
ellipse(200,300, 30,30);//圓
先畫一隻企鵝
size(600,600);//(1) 大小
background(#30A4D8);//(2)背景色
stroke(204,102,0);//(5)筆觸色
strokeWeight(5);//線條粗細
rect(100,100, 400,400);//(3)方塊
ellipse(200,300, 30,30);//(4)圓
ellipse(400,300, 30,30);
ellipse(300,400, 200,100);
line(200,400, 400,400);
再來做嘴巴鼓起來的的企鵝
size(600,600);
background(128);
fill(255);//臉
noStroke();
rect(100,100,400,400);
stroke(51);
strokeWeight(5);//雙眼的長和寬
ellipse(200,300, 30,30);
ellipse(400,300, 30,30);
noStroke();
fill(#CC6600);//嘴巴
ellipse(300,400,200,100);
stroke(255);//嘴巴的線
line(200,400, 400,400);
橘貓(互動技術筆記_week01)
熟悉Processing環境
首先先下載課用軟體(軟體至moodle下載)
1. Processing 3.5.4 windows64 版 (解壓縮後, 再使用)
2. Git for Windows (安裝後就可以使用。在Chrome 裡先登入GitHub網站,才能用git上傳)
3. Arduino (開發 Arduino 軟體介面)
4. CH341SER.EXE (MakerUNO 需要的 USB Serial 驅動程式)
今日的基本程式碼
size(600,600);//視窗大小(寬,高)
background(#f08080);//背景顏色(16進位顏色)
line(x,y,x1,y1);//畫線(座標,座標1)
background(#f08080);//背景顏色(16進位顏色)
line(x,y,x1,y1);//畫線(座標,座標1)
筆觸填色
stroke(R,G,B);//筆觸色彩(R,G,B)
strokeWeight(n);//筆觸粗細(粗細數字)
noStroke();//去除邊線(放在rect或ellipseg上可以畫出沒邊框的圖)
fill(R,G,B);//填滿顏色(R,G,B)
strokeWeight(n);//筆觸粗細(粗細數字)
noStroke();//去除邊線(放在rect或ellipseg上可以畫出沒邊框的圖)
fill(R,G,B);//填滿顏色(R,G,B)
形狀
rect(100,100,400,400);//正方形(4個點)
ellipse(x,y,Wx,Hy);//圓型(圈圈座標x,y,寬x,高y)
ellipse(x,y,Wx,Hy);//圓型(圈圈座標x,y,寬x,高y)
開始實作
1.呆呆企鵝_框線板
size(600,600);
background(#f08080);
strokeWeight(5);
stroke(0,0,0);//筆觸色彩(RGB)
rect(100,100,400,400);//正方形
stroke(0,0,0);//筆觸色彩(RGB)
ellipse(200,200,60,60);//圓型
stroke(0,0,0);//筆觸色彩(RGB)
ellipse(400,200,60,60);
stroke(204,102,0);//筆觸色彩(RGB)
ellipse(300,300,300,100);
line(150,300,450,300);
2.呆呆企鵝_實心無線版
程式碼:
size(600,600);
background(#f08080);
fill(255);//填滿的
noStroke();//沒框線
rect(100,100,400,400);//正方形
//臉
stroke(128);
strokeWeight(5);//線寬度為5
ellipse(200,300,30,30);//左眼
ellipse(400,300,30,30);//右眼
noStroke();//沒框線
fill(#CC6600);
ellipse(300,400,200,100);//右眼
stroke(255);
line(200,400,400,400);//嘴巴
3.呆呆企鵝_眼睛跳動版
void setup(){
size(600,600);
}
void draw(){
background(#f08080);
fill(255);//填滿的
noStroke();//沒框線
rect(100,100,400,400);//正方形
//臉
stroke(128);
strokeWeight(5);//線寬度為5
ellipse(200,300,30,30);//左眼
ellipse(mouseX,mouseY,30,30);//右眼
noStroke();//沒框線
fill(#CC6600);
ellipse(300,400,200,100);//右眼
stroke(255);
line(200,400,400,400);//嘴巴
}
✨實作2跟3的差別✨
1.實作2沒有使用函數，直接畫圖的話background(#f08080);不會每次畫一個影格就更新一次，這裡需要格外注意，所以background(#f08080);需要被放在void draw(){}裡面。
2.特別的變數右眼的ellipse(mouseX,mouseY,30,30);裡面的mouseX與mouseY分別代表滑鼠的X與Y軸，所以移動滑鼠就可以動眼睛瞜~
存檔file->Safe As
🎃注意用英文和底線取名檔案較不會出問題厚厚厚🎅
week01 畫圖
size(600,600);//(1)大小
background(#30A4D8);//(2)
stroke(204,102,0);//
strokeWeight(5);//
rect(100,100, 400,400);//
ellipse(200,300, 30,30);//
ellipse(400,300, 30,30);//
ellipse(300,400, 200,100);//
line(200,400, 400,400);//
畫一隻呆企鵝
size(600,600);//大小
background(#30A4D8);//背景
fill(255);//臉
noStroke();
rect(100,100,400,400);
stroke(128);//眼
strokeWeight(5);
ellipse(200,300, 30,30);
ellipse(400,300, 30,30);
noStroke();//嘴
fill(#CC6600);
ellipse(300,400, 200,100);
stroke(255);//嘴中間的線
line(200,400, 400,400);
另一隻呆企鵝
void setup(){
size(600,600);
}
void draw(){
background(#30A4D8);
fill(255);//臉
noStroke();
rect(100,100,400,400);
stroke(128);//眼
strokeWeight(5);
ellipse(200,300, 30,30);
ellipse(400,300, 30,30);
noStroke();//嘴
fill(#CC6600);
ellipse(300,400, 200,100);
stroke(255);//嘴中間的線
line(200,400, 400,400);
}
把設置背景跟畫臉的部分分開
然後
stroke(128);//眼
strokeWeight(5);
ellipse(200,300, 30,30);改成ellipse(mouseX,mouseY, 30,30);
ellipse(400,300, 30,30);
讓左眼跟著滑鼠移動
嗨壓阿 Week01
Week01
1.Processing設定
2.視窗&背景顏色
size(500,400);//視窗大小
background(#00D7FF);//背景顏色
3.方塊&橢圓
rect(100,100,300,200);//方塊
ellipse(200,175,30,30);//橢圓
4.填充色&筆的顏色&筆的粗細
stroke(128);//筆的顏色
strokeWeight(5);//筆的粗細
fill(255);//填充色
5.滑鼠位置
ellipse(mouseX,mouseY,30,30);
全部程式碼
void setup(){
size(600,600);//視窗大小
}
void draw(){
background(128);//背景顏色
fill(255);//填充色
noStroke();//筆不要顏色
rect(100,100,400,400);//方塊
stroke(128);//筆的顏色
strokeWeight(5);//筆的粗細
ellipse(mouseX,mouseY,30,30);//橢圓
ellipse(400,300,30,30);
noStroke();
fill(#CC6600);
ellipse(300,400,200,100);
stroke(255);
line(200,400,400,400);
}
互動技術 第一周-忘了吃午餐
今天呢第一次上課，是的。
課前準備 : moodle上 / 上課用資料夾 / 下載 processing 程式
進入processing :
- 檔案中偏好設定可以設定字型、字體
- 工具中的顏色選擇器可以選顏色
基本程式:
- size(600,600);//大小
- background(#1AB990);//背景
- rect(100,100, 400,400);//畫方塊，在100，100的位置畫出 400，400的方塊
- ellipse();畫橢圓(圓)
- fill(#FC8F00);填色
- stroke(#9C9D9D);//筆觸色
- noStroke();不要筆觸色
- strokeWeight(5);//筆粗度
- line(200,400, 400,400);//畫線
裡面有許多補充和類似用法。
課堂練習做出企鵝:
程式碼:
size(600,600);//大小
background(#9C9D9D);//背景
stroke(#9C9D9D);//筆觸色
strokeWeight(5);//筆粗度
rect(100,100, 400,400);//畫方塊，在100，100的位置
//畫出 400，400的方塊
ellipse(200,300, 40,40);//畫圓 眼睛1
ellipse(400,300, 40,40);//畫圓 眼睛2
//嘴巴
noStroke();
rect(200,350, 200,100);//方型是以左上角為中心點
fill(#FC8F00);
ellipse(300,400,200,100);//圓形&橢圓形是以圓心為中點
stroke(#FFFEFC);
line(200,400, 400,400);//畫線
課堂練習 set up 函式: 將座標改成mouseX,mouseY
眼睛就會跟著滑鼠移動
訂閱：
意見 (Atom)