--- tags: 程式設計,第九章,學生版,互動藝術程式創作入門,Creative Coding --- # 10 網頁元素(DOM)_學生版 - 取得文字、數值和其他輸入 ## 單元介紹 --- ## 文字輸入(輸入文字方框) ![](https://i.imgur.com/FroW3on.gif) --- ### 使用設定一個輸入方框指令 並設定它顯示的位置 ```javascript= inputElement =createInput("Hello") inputElement.position(50,50) ``` ### 取得裡面的輸入文字 ```javascript= var txts = inputElement.value(); ``` --- ```javascript= function setup() { createCanvas(windowWidth, windowHeight); //產生一文字框 inputElement = createInput("") //新增一文字框 inputElement.position(50,50) //把文字框放在(50,50) inputElement.style("font-size","50px") //文字大小 inputElement.style("color","#90f1ef") //文字顏色 inputElement.style("background-color","#0fa3b1") //文字框背景顏色 inputElement.style("width","500px") inputElement.style("border","8px solid #90f1ef") //框線大小、實心、顏色 //滑桿設定 sliderElement = createSlider(10,50,20,0.1) //最小值10，最大值50，起始值20，每滑一步0.1 ``` --- ## 滑桿元件 ![](https://i.imgur.com/QOpXlUa.gif) --- ### 設定一個滑桿 ```javascript= sliderElement= createSlider(10,50,20,0.01)//初始值，最大值，預設值，間距 ``` ### 取一個值 ```javascript= textSize(sliderElement.value()) ``` --- ```javascript= function setup() { createCanvas(windowWidth, windowHeight); //產生一文字框 inputElement = createInput("") //新增一文字框 inputElement.position(50,50) //把文字框放在(50,50) inputElement.style("font-size","50px") //文字大小 inputElement.style("color","#90f1ef") //文字顏色 inputElement.style("background-color","#0fa3b1") //文字框背景顏色 inputElement.style("width","500px") inputElement.style("border","8px solid #90f1ef") //框線大小、實心、顏色 //滑桿設定 sliderElement = createSlider(10,50,20,0.1) //最小值10，最大值50，起始值20，每滑一步0.1 sliderElement.position(600,50) //把滑桿放到座標(600,50) //按鈕 btnElement = createButton("open") btnElement.position(800,50) btnElement.style("font-size","50px") btnElement.style("border","10px solid #ffd6e0") btnElement.style("border-color","green") btnElement.mousePressed(goCrazy) function draw() { background(220); txts = inputElement.value() //顯示的文字 fill(colorPickerElement.value()) txt_width = sliderElement.value() textSize(txt_width) //文字的寬度+10為間距 textLength = textWidth(txts)+50 for(y=210;y<height;y=y+txt_width+20){ for(x=0;x<width;x=x+textLength){ text(txts,x+random(-randomValue,randomValue),y+(-randomValue,randomValue)) //把文字放在(x,y) } } } ``` --- ## 產生一個按鈕 ![](https://i.imgur.com/cwHVl6l.gif) --- ### 設定一個按鈕 ```javascript= btnElement =createButton("瘋狂") ``` ### 案下滑鼠執行的程式碼 ```javascript= btnElement.mousePressed(goCrazy) ``` ## 函數內容的寫法 ```javascript= function goCrazy() { if(randomValue>0){ randomValue=0 } else { randomValue=10 } } ``` --- ```javascript= function setup() { createCanvas(windowWidth, windowHeight); //產生一文字框 inputElement = createInput("") //新增一文字框 inputElement.position(50,50) //把文字框放在(50,50) inputElement.style("font-size","50px") //文字大小 inputElement.style("color","#90f1ef") //文字顏色 inputElement.style("background-color","#0fa3b1") //文字框背景顏色 inputElement.style("width","500px") inputElement.style("border","8px solid #90f1ef") //框線大小、實心、顏色 //滑桿設定 sliderElement = createSlider(10,50,20,0.1) //最小值10，最大值50，起始值20，每滑一步0.1 sliderElement.position(600,50) //把滑桿放到座標(600,50) //按鈕 btnElement = createButton("open") btnElement.position(800,50) btnElement.style("font-size","50px") btnElement.style("border","10px solid #ffd6e0") btnElement.style("border-color","green") btnElement.mousePressed(goCrazy) function draw() { background(220); txts = inputElement.value() //顯示的文字 fill(colorPickerElement.value()) txt_width = sliderElement.value() textSize(txt_width) //文字的寬度+10為間距 textLength = textWidth(txts)+50 for(y=210;y<height;y=y+txt_width+20){ for(x=0;x<width;x=x+textLength){ text(txts,x+random(-randomValue,randomValue),y+(-randomValue,randomValue)) //把文字放在(x,y) } } } ``` --- ## 產生一個顏色選擇器 ![](https://i.imgur.com/zjfpMOg.gif) --- ### 設定一個顏色選擇器 ```javascript= colorPicker = createColorPicker('#ed225d');//括號內的值，為預設值 ``` ### 取得顏色值 ```javascript= fill(colorPicker.value()) ``` --- ```javascript= function setup() { createCanvas(windowWidth, windowHeight); //產生一文字框 inputElement = createInput("") //新增一文字框 inputElement.position(50,50) //把文字框放在(50,50) inputElement.style("font-size","50px") //文字大小 inputElement.style("color","#90f1ef") //文字顏色 inputElement.style("background-color","#0fa3b1") //文字框背景顏色 inputElement.style("width","500px") inputElement.style("border","8px solid #90f1ef") //框線大小、實心、顏色 //滑桿設定 sliderElement = createSlider(10,50,20,0.1) //最小值10，最大值50，起始值20，每滑一步0.1 sliderElement.position(600,50) //把滑桿放到座標(600,50) //按鈕 btnElement = createButton("open") btnElement.position(800,50) btnElement.style("font-size","50px") btnElement.style("border","10px solid #ffd6e0") btnElement.style("border-color","green") btnElement.mousePressed(goCrazy) //顏色選擇器 colorPickerElement = createColorPicker('#5fa8d3') colorPickerElement.position(1000,50) } var randomValue=0 var stop = true //true時，停止，false代表目前抖動 function goCrazy(){ if(stop){ randomValue = 10 btnElement.html( "stop") stop = false }else { randomValue = 10 btnElement.html( "stop") stop = true } } function draw() { background(220); txts = inputElement.value() //顯示的文字 fill(colorPickerElement.value()) txt_width = sliderElement.value() textSize(txt_width) //文字的寬度+10為間距 textLength = textWidth(txts)+50 for(y=210;y<height;y=y+txt_width+20){ for(x=0;x<width;x=x+textLength){ text(txts,x+random(-randomValue,randomValue),y+(-randomValue,randomValue)) //把文字放在(x,y) } } } ``` --- ## 產生一個旋鈕 ![](https://i.imgur.com/6odALq9.gif) --- ### 產生一個旋鈕 ```javascript= radioElement=createRadio() radioElement.option("一般") radioElement.option("旋轉(rotate)") radioElement.option("大小(scale)") radioElement.style("background-color",'white')//設定為CSS格式 ``` ### 取得值 ```javascript= mode = radioElement.value() ``` --- ![](https://i.imgur.com/cQPlNqJ.gif) ```javascript= ``` --- ![](https://i.imgur.com/0Gv7CnE.png) --- ![](https://i.imgur.com/xbhTKK9.gif) --- ![](https://i.imgur.com/fStzTMi.gif) ```javascript= var txts = inputElement.value(); if(txts=="pizza"){ txts="🍕" } ``` --- ## 使用CSS格式設定 ![](https://i.imgur.com/LENMnR5.png) ```javascript= btnElement.style("border-color",'green') btnElement.style("border-width",'10px') btnElement.style("color",'green') btnElement.style("font-size",'20px') ``` --- 粒子系統 --- ![](https://i.imgur.com/15uNbxu.gif) ```javascript= function userInput(){ txts.push({ x: width/2, y: 50, text: this.value() }) // this.value('') // print(txts) } ``` --- ```javascript= ``` --- ![](https://i.imgur.com/5sCiosS.gif) ```javascript= ``` --- ## 設定往x與y的速度值 ![](https://i.imgur.com/xRoAUIx.gif) ```javascript= ``` --- ```javascript= ``` --- ## 碰到底回彈 ![](https://i.imgur.com/WGZCbHh.gif) ```javascript= ``` --- 加入一個slider ![](https://i.imgur.com/CPh2wgv.gif) ```javascript= ``` ### 目標 * 瞭解如何使用網頁元素與使用者互動 * 能夠取得文字、選項跟輸入的資料 * 瞭解如何擺放跟佈局網頁元素 * 能夠綁定網頁元素事件 --- ## 課程重點 #### DOM（Document Object Model, 文件物件模型）超快速介紹 --- ##### DOM 是什麼？ DOM 是一個樹狀的文件結構，藉由一層一層包覆的結構把網頁的內容架構起來。如果你在 Chrome 瀏覽器中點擊右鍵，選擇檢查的話，就會靠看到很多個用 <>...</> 包覆起來的資料，他們分別都是一個 DOM 元素，也是網頁的組成基礎喔 🐜。! --- ![](https://i.imgur.com/K8GufzU.png) --- ##### DOM 可以幹嘛？ * 除了最基礎的呈現資訊外， HTML 內建的 DOM 元件也包含了許多我們會與使用者互動的元素，如輸入框、選單、表單等，此外如果是網頁工程師，也很常會對 DOM 元素進行更改，以達到資訊更新、動畫呈現的目的。 --- ##### p5 的 DOM 元件 * 像是文字輸入框、滑桿、下拉選單、顏色選取器之類的元件，都是 html（網頁的架構語言）內建的元素，p5 進一步幫我們把這些元件包裝好，讓我們可以快速的使用他們來跟使用者互動。 --- * 如何使用 p5 的 DOM 元件？ * 創建一個新的 dom 元件，並綁訂在一個變數上，方便之後的操作：inputElement ) * 設定元件的位置：inputElement.position(50,50) * 取得元件的內容/數值：let txt = inputElement.value() * 設定樣式：inputElement.style('width','80px') * 綁定事件（像是滑鼠點擊、輸入之類的事件，例如： * buttonElement.mousePressed(要執行的函數名稱) * inputElement.input(要執行的函數名稱) * selectElement.changed(要執行的函數名稱) --- #### CSS 超級入門 * 什麼是 CSS? * 是一種設定網頁樣式的網頁樣式語言，用來設定網頁上的內容要怎麼呈現。像是文字的字形、大小、粗細、圖片的大小與位置，以及 CSS 動畫等。 * 一般網頁的設定方式：直接針對 DOM 元件來設定 ```css= // <p></p> p 元件是網頁中常用的段落元件 // 如果我們對內建的 p 樣式不滿意 // 我們可以透過下面的 css 來修改他： p { //最前面是要修改的項目，刮號內是要設定的細節 color: 'gray'; //設定顏色 font-size: 24px; //設定大小 font-weight: bold; //設定粗細 } ``` * 參考： * MDN 的 CSS 基礎 * The CSS Zen Garden：有許多只透過修改 CSS 的樣式就讓網站有完全不同的風格的範例。 * 直接設定 p5 DOM 元件的 CSS 樣式 * 使用 element.style(樣式項目, 數值) * 常用的修改項目 * font-size * border-color * border-width * background-color * color --- #### 範例練習 --- ##### [DOM 操作練習](https://www.openprocessing.org/sketch/901354) ![](https://i.imgur.com/QZbQxPQ.gif) --- ##### [彈彈文字與圖片變化](https://www.openprocessing.org/sketch/901354) ![](https://i.imgur.com/7n7HeHS.gif) --- ### 內容回顧 --- #### 小技巧與心法 結合 input 作為 fill() 裡面的參數，動態改變顏色樣式 ```javascript= let clr = input() fill(clr) ``` --- * 設定 0-1 之間來回的數值：使用 sin：sin((frameCount/20 + o/10)+1)/2 * 彈跳的重力感覺：在每一次彈跳更新的時候的時候設定 vx *= 0.999 * 從字串設定一個陣列的色票："ff0000-ff8200-ffc100-ffeaae".split("-").map(tx=>"#"+tx) * mac 表情符號快捷鍵：Control–Command–空白鍵 😁 * windows 採用windows符號加上小數點即可產生😍 --- #### p5 語法們 * text：在畫面上創造文字物件。 * textWidth：取得文字在畫面上的寬度 * DOM 元件們 * createInput() * 清空 input: this.value('') --- * createSlider() * createButton() * createColorPicker() * createRadio() * createSelect() * element.option() --- * createImg() * element.attribute(“src”, “fish.png”) * 通用的屬性與事件綁定 * element.value() * element.size() * element.style() * element.attr() * element.input(函式名稱) * element.change(函式名稱) --- ### 課後問題 --- #### 補充 12:30左右 加上() 代表執行 function MDN css 44:00 this 1:01 右鍵->檢查水母 --- #### 案例參考 --- [https://paperplanes.world/](https://paperplanes.world/) ![](https://i.imgur.com/12FICQn.png) --- [https://experiments.withgoogle.com/collection/chrome](https://experiments.withgoogle.com/collection/chrome) ![](https://i.imgur.com/LExJjIe.png) --- [https://musiclab.chromeexperiments.com/Song-Maker/](https://musiclab.chromeexperiments.com/Song-Maker/) ![](https://i.imgur.com/QwLY6wm.jpg) --- [https://forest-mt.seekrtech.com/](https://forest-mt.seekrtech.com/) ![](https://i.imgur.com/wgAEw4O.jpg) --- [https://jayweeks.com/medusae/](https://jayweeks.com/medusae/) ![](https://i.imgur.com/lYwAT41.jpg) --- [http://wiki.polyfra.me/#](http://wiki.polyfra.me/#)