---
tags: 程式設計,第九章,學生版,互動藝術程式創作入門,Creative Coding
---

# 10 網頁元素(DOM)_學生版 - 取得文字、數值和其他輸入
## 單元介紹

---

## 文字輸入(輸入文字方框)


---

### 使用設定一個輸入方框指令
並設定它顯示的位置

inputElement =createInput("Hello")
inputElement.position(50,50)

### 取得裡面的輸入文字

var txts = inputElement.value();

---

var inputElement

function setup() {
	createCanvas(windowWidth, windowHeight);
	background(0);
	inputElement=createInput("Hello")
	inputElement.position(50,10)
    
function draw() {
	background(0)
	var txts=inputElement.value();
    fill(255)
	textSize(50)
	var textLength=textWidth(txts)+100
	for(var x=0 ;x<width;x=x+textLength){
		text(txts,x,height/2)
	}
}

---
## 滑桿元件


---
### 設定一個滑桿

sliderElement= createSlider(10,50,20,0.01)//初始值，最大值，預設值，間距

### 取一個值

textSize(sliderElement.value())

---

var inputElement

function setup() {
	createCanvas(windowWidth, windowHeight);
	background(0);
	inputElement=createInput("Hello")
	inputElement.position(50,10)
	sliderElement= createSlider(10,50,20,0.01)//初始值，最大值，預設值，間距
    sliderElement.position(350,10)
}
function draw() {
	background(0)
	var txts=inputElement.value();
	fill(255)
	textSize(50)
	textStyle(BOLD)
	var textLength=textWidth(txts)+100
	var textHeight=sliderElement.value()+30
	for(var x=0 ;x<width;x=x+textLength){
		text(txts,x,height/2)
	}
}

---
## 產生一個按鈕


---

### 設定一個按鈕

btnElement =createButton("瘋狂")

### 案下滑鼠執行的程式碼

btnElement.mousePressed(goCrazy)

## 函數內容的寫法

function goCrazy() {
 if(randomValue>0){
	 randomValue=0
 }
	else
	{
		randomValue=10
	}
}

---

var inputElement,sliderElement,btnElement
var randomValue=0

function setup() {
	createCanvas(windowWidth, windowHeight);
	background(0);
	inputElement =createInput("Hello") 
	inputElement.position(50,50)
	sliderElement=createSlider(30,100,50,1)
	sliderElement.position(300,50)
	btnElement=createButton("CRAZY")
	btnElement.position(450,50)
	btnElement.mousePressed(goCrazy)
}

function goCrazy() {
 if(randomValue>0){
	 randomValue=0
 }
	else
	{
		randomValue=10
	}
}

function draw() {
	background(0)
	var txts =inputElement.value()
	fill(255)
	textSize(sliderElement.value())
	textStyle(BOLD)
	var textL=textWidth(txts)+30
	var textH=sliderElement.value()+30
	for(var i=0;i<height;i+=textL){
		for(var j=0;j<width;j+=textH){
		text(txts,i+random(-randomValue,randomValue),j+random(-randomValue,randomValue))
		}
	}
}

---
## 產生一個顏色選擇器

---
### 設定一個顏色選擇器

colorPicker = createColorPicker('#ed225d');//括號內的值，為預設值

### 取得顏色值

fill(colorPicker.value())

---

var inputElement,sliderElement,btnElement,colorPicker
var randomValue=0 //預設值為0(文字靜止)，第一次按下按鈕，值就會變成10(文字抖動)，第二次按，又回到0(文字靜止)


function setup() {
	createCanvas(windowWidth, windowHeight);
	background(0);
	inputElement =createInput("Hello")
	inputElement.position(50,50)
	sliderElement= createSlider(30,100,50,1)//最小值，最大值，預設值，間距
	sliderElement.position(300,50)
	btnElement =createButton("瘋狂")
	btnElement.position(450,50)
	btnElement.mousePressed(goCrazy)
	
	colorPicker = createColorPicker('#ed225d');//括號內的值，為預設值
	colorPicker.position(550,50)
	
}

function goCrazy() {
 if(randomValue>0){
	 randomValue=0  //randomValue>0條件成立，執行此行
 }
	else
	{
		randomValue=10  //randomValue>0條件不成立，執行此行
	}
}
function draw() {
	background(0);
	var txts = inputElement.value();
	textSize(sliderElement.value())
	textStyle(BOLD)
	var textLength=textWidth(txts)+80
	var textHeight = sliderElement.value()+30
	for(var y=0;y<height;y=y+textHeight){
		push()
		if(int(y/textHeight)%2==0){     //int(y/textHeight)算出第幾行，%2除2求餘數
			fill(colorPicker.value())  //偶數行
			translate(-50,0)
		}
		else
		{  
			fill(255)  //奇數行
		}
			for(var x=0;x<width;x=x+textLength){
				text(txts,x+random(-randomValue,randomValue),y+random(-randomValue,randomValue))   //顯示文字在(width/2,height/2)座標上
			}
		pop()
	}
}

---

## 產生一個旋鈕


---

### 產生一個旋鈕

radioElement=createRadio()
radioElement.option("一般")
radioElement.option("旋轉(rotate)")
radioElement.option("大小(scale)")
radioElement.style("background-color",'white')//設定為CSS格式

### 取得值

mode = radioElement.value()

---

---

---


---

var txts = inputElement.value();
	if(txts=="pizza"){
		txts="🍕"
	}

---
## 使用CSS格式設定


	btnElement.style("border-color",'green')
	btnElement.style("border-width",'10px')
	btnElement.style("color",'green')
	btnElement.style("font-size",'20px')

---
粒子系統

---


function userInput(){
	
	txts.push({
		x: width/2,
		y: 50,
		text: this.value()
	})
	// this.value('')
	// print(txts)
}

---

---


var inputElement
var txts=[]
function setup() {
	createCanvas(windowWidth, windowHeight);
	background(0);
	inputElement =createInput("") 
	inputElement.position(50,50)
	inputElement.input(userInput)
}

function userInput(){
	txts.push({
		text: this.value(),
		x: width/2,
		y: 50,
	})
	this.value('')
}

function draw() {
	background(0);
	fill(255)
	textSize(50)
	for(var i =0;i<txts.length;i++){
		let txt =txts[i]	
}

---
## 設定往x與y的速度值


function userInput(){
	txts.push({
		text: this.value(),
		x: width/2,
		y: 50,
		vx:random(-1,1),
		vy:1
	})
	this.value('')
}

function draw() {
	background(0);
	fill(255)
	textSize(50)
	for(var i =0;i<txts.length;i++){
		let txt =txts[i]	
		text(txt.text,txt.x,txt.y)
		txt.x=txt.x+txt.vx
		txt.y=txt.y+txt.vy
		txt.vy=txt.vy+0.1
	}
}

---

---
## 碰到底回彈


---
加入一個slider


### 目標
* 瞭解如何使用網頁元素與使用者互動
* 能夠取得文字、選項跟輸入的資料
* 瞭解如何擺放跟佈局網頁元素
* 能夠綁定網頁元素事件

---

## 課程重點
#### DOM（Document Object Model, 文件物件模型）超快速介紹

---

##### DOM 是什麼？
DOM 是一個樹狀的文件結構，藉由一層一層包覆的結構把網頁的內容架構起來。如果你在 Chrome 瀏覽器中點擊右鍵，選擇檢查的話，就會靠看到很多個用 <>...</> 包覆起來的資料，他們分別都是一個 DOM 元素，也是網頁的組成基礎喔 🐜。!

---


---

##### 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 元件來設定

    // <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://www.openprocessing.org/sketch/901354)


---

### 內容回顧

---

#### 小技巧與心法
結合 input 作為 fill() 裡面的參數，動態改變顏色樣式

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://experiments.withgoogle.com/collection/chrome](https://experiments.withgoogle.com/collection/chrome)


---

[https://musiclab.chromeexperiments.com/Song-Maker/](https://musiclab.chromeexperiments.com/Song-Maker/)

---

[https://forest-mt.seekrtech.com/](https://forest-mt.seekrtech.com/)

---

[https://jayweeks.com/medusae/](https://jayweeks.com/medusae/)


---

[http://wiki.polyfra.me/#](http://wiki.polyfra.me/#)

10 網頁元素(DO ... 數值和其他輸入.md
選擇開啟工具

目前顯示的是「10 網頁元素(DOM)_學生版 - 取得文字、數值和其他輸入.md」。