互動技術概論week01
一.學習點、線、面、色彩
步驟1.對資料夾processing-4.0b8-windows-x64按右鍵
>點選7-Zip
>解壓縮至"processing-4.0b8-windows-x64\"
簡單介紹一下介面，預設檔名為sketch_日期+a.b.c(1.2.3的意思)
步驟2.打開應用程式Processing
若是需要調整字體
點開檔案(File)--->偏好設定--->可改字型大小
*修改字型大小上面那行，可以選擇更改其他字型
3.size(500,500)--->打開500*500大小的視窗
4.background()--->設定字體顏色
如果不知道想要調整成的顏色代碼是多少
可以選擇工具--->顏色選擇器，就可以選擇心儀的顏色啦~
複製我們選好的顏色，貼上後執行
接下來我們畫一個四邊形
size(500,500);
background(#F7FFBF);
fill(#BFF3FF);
rect(100,100,100,150);
fill--->填充/覆蓋色彩
rect--->建立四邊形
3.網路互動設定，兩種模式: 直接跑 vs. 互動 (靜態static vs. 動態active)
void setup(){};設定一次
void draw(){};//每一秒畫60次
mouseX , mouse Y 追蹤滑鼠定位
程式一(week01_1_size_background_fill_rect):
//static
size(500,500);
background(#F7FFBF);
fill(#BFF3FF);
rect(100,100,100,150);
rect(300,100,100,150);
------------------------------
程式二(week01_2_setup_draw_mouseX_mouseY2.js):
//active
void setup()
{
size(500,500);
}
void draw()
{
background(#F7FFBF);
fill(#BFF3FF);
rect(100,100,100,150);
rect(mouseX,mouseY,100,150);
}
上圖:靜態互動、下圖:動態互動
*下圖的動態互動設定鼠標mouse，就可以隨著滑鼠的移動跟著移動四方形的位置
4.如何在網頁上執行
(一)那接下來想要在網頁上執行的話，選擇p5.js Mode | Adds a simple editor for p5.js code 安裝
然後就可以在網頁上執行了
程式三(week01_3_p5_js.pde):
function setup() {
initializeFields();
createCanvas(500, 500);
}
function draw() {
background(color(0xF7, 0xFF, 0xBF));
fill(color(0xBF, 0xF3, 0xFF));
rect(100, 100, 100, 150);
rect(mouseX, mouseY, 100, 150);
}
function initializeFields() {
}
四.學習畫線
*對其中一個程式單詞無法理解的話，可以選取該詞彙--->右鍵-->在參考文件裡找選取的字，就可以跳到解釋名詞的網站去
1.直接用滑鼠繪製
程式四(week01_4_mousePressed_line_painter.pde):
void setup()
{
size(500,500);
}
void draw()
{
line(mouseX,mouseY,pmouseX,pmouseY);
}
mousePressed 感測按下滑鼠時
keyPressed 感測鍵盤
stroke(顏色); 是改變筆觸的顏色
line(mouseX,mouseY,pmouseX,pmouseY)解釋
line( ); --->畫線
mouseX,mouseY --->滑鼠之前的座標位置
pmouseX,pmouseY --->滑鼠現在的座標位置
不過因為沒有特別去限制，所以只要滑鼠滑動到哪裡，線條就會跟著亂畫
2.按壓滑鼠才能畫圖
程式四之二(week01_4_if_mousePressed_line_painter.pde):
void setup()
{
size(500,500);
}
void draw()
{
if(mousePressed)--->有了這行後，要繪製出圖形都得持續按壓滑鼠才能畫出
{
line(mouseX,mouseY,pmouseX,pmouseY);
}
}
五.第一個互動程式: 小畫家
如果像上面程式碼四之二一樣，畫出來的顏色只有黑色舊好無趣!
為了豐富我們美麗的畫作，那麼新增顏色是非常有必要的~~
程式五(week01_5_stroke_keyPressed_change_stroke.pde):
void setup()//只執行一次
{
size(500,500);//開個500*500大小的視窗
background(#F7FFBF);//背景顏色
stroke(255,0,0);//筆觸顏色預先設定紅色
}
void draw()//每秒60次
{
if(mousePressed){//按壓鼠標
line(mouseX,mouseY,pmouseX,pmouseY);//滑鼠畫圖
}
}
void keyPressed(){//控制鍵盤按鈕
if( key == '1')stroke(#FF0D0D);//按下按鈕1會畫出橘色
if( key == '2')stroke(#1AB0FF);//按下按鈕2會畫出藍色
if( key == '3')stroke(#E43BFF);//按下按鈕3會畫出紫色
}
六.將程式匯出到網頁
想要在網頁上執行，就要重複第三點，將在java寫好的程式轉換成p5.js
程式六(week01_6_painter_p5_js.js):
function setup() {
initializeFields();
// 開個500*500大小的視窗
createCanvas(500, 500);
// 背景顏色
background(color(0xF7, 0xFF, 0xBF));
// 筆觸顏色設定紅色
stroke(255, 0, 0);
}
function draw() {
if (mouseIsPressed) {
line(mouseX, mouseY, pmouseX, pmouseY);
}
}
function keyPressed() {
if (key == '1')
stroke(color(0xFF, 0x0D, 0x0D));
if (key == '2')
stroke(color(0x1A, 0xB0, 0xFF));
if (key == '3')
stroke(color(0xE4, 0x3B, 0xFF));
}
function initializeFields() {
}
***注意***
如果將java轉成p5.js，會有多一個index.html檔，執行不了的話，檢查檔名是否出錯或是哪裡有問題，真的找不到可以使用工具列 > p5.js > Re-create index.html，會幫你重生覆蓋一個正確的檔案
七.上傳至Github
步驟1.建立一個新的倉儲2022interaction
Description>稍微寫一下這個倉儲是拿來做什麼的
>勾選Public
>勾選Add a README file
>確定
步驟2.上傳檔案
做完就ok啦!恭喜你完成今天的課程啦~~
沒有留言:
張貼留言