製作表單 createRadio();

沿用上一個文章的參考 加上以下設定 我們可以用radio去做額外的設定

let radioElement;
function setup() {
	radioElement = createRadio(); //放入radio button
	radioElement.position(0,250); //設定 radio 位置
	radioElement.option('nomral');
	radioElement.option('rotate');
	radioElement.option('scale');
	radioElement.style('background-color','white');
}

function draw() {
	// ellipse(mouseX, mouseY, 20, 20);
	
	if(mode==='rotate'){
		rotate(PI/4); //要設定變成旋轉
	};
	
}

接下來把原本的設定更改成 在每個字上面製作旋轉效果

function draw() {
	// ellipse(mouseX, mouseY, 20, 20);
	let mode = radioElement.value(); // 抓取radio 參數

	
	
	for(var o=0;o<height;o+=100){
		lineCount++;
		if(lineCount %2 ==0){
			
			fill(selectColor);
		}else{
			fill('white');
		}
		for(var i=0;i<width;i+=textLength){
			push();
				translate(i+random(randomValue,-randomValue),o+random(randomValue,-randomValue));
				if(mode==='rotate'){
					rotate(PI/4); //要設定變成旋轉
				};
			text(txt,0,0)// render text
			pop();
		};
	}
}

透過這些方式 我們可以製作出不同的 參考設定 來去做你想做的動態效果

參考範例

https://openprocessing.org/sketch/1272822

如果想要做一些按鈕的樣式調整可直接設定他的style設定

css可控制： 選單裡的字 ，顏色，背景顏色的樣式。

function setup() {
	radioElement.option('nomral');
	radioElement.option('rotate');
	radioElement.option('scale');
	radioElement.style('background-color','white');
}

動態綁定與文字物理模擬

假設今天要設定一個事件是由使用者在輸入的時候才會變更

想做一個打字過後會有粒子系統掉下來

let inputElement
let txts=[]
function setup() {
	createCanvas(windowWidth, windowHeight);
	background(100);
	inputElement = createInput();
	inputElement.position(50,50);
	inputElement.input(userInput)
}
function userInput(){
	// print(this.value())
	txts.push({
		x:width/2,
		y:50,
		vx:random(-1,1),
		vy:0,
		text:this.value()
	});
	this.value('');;
}
function draw() {
	// ellipse(mouseX, mouseY, 20, 20);
	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.vx;
		txt.y+=txt.vy
		txt.vy +=0.1
		if(txt.y>height){
			txt.vy = -abs(txt.vy); // -abs 曲絕對值在變負數 讓字體再有彈跳的感覺
		}
	}
}

之後再增加一些color 以及 地心引力的設定可以讓整個畫面更佳繽紛還有彈跳感

let inputElement
let sliderElement
let txts=[]
let colors = 'b90c09-642c0c-e4e7e6-b3ada2'.split('-').map((item)=> '#'+item);
let ay = 0.2
function setup() {
	createCanvas(windowWidth, windowHeight);
	background(100);
	inputElement = createInput();
	inputElement.position(50,50);
	inputElement.input(userInput)
	sliderElement = createSlider(-1,1,1,0.5);
	sliderElement.input(setGravity);
	sliderElement.position(50,100)
	ay = sliderElement.value(); //先取好值
}
// let ay = 0.1
function userInput(){
	// print(this.value())
	txts.push({
		x:width/2,
		y:height/2,
		vx:random(-10,10),
		vy:0,
		text:this.value(),
		color:random(colors)
	});
	this.value('');;
}
function setGravity(){
	ay = this.value(); // 直接抓取sliderbar的值
}
function draw() {
	// ellipse(mouseX, mouseY, 20, 20);
	background(0);
	// fill(255);
	textSize(150);
	
	for(var i=0;i<txts.length;i++){
		let txt = txts[i]
		text(txt.text,txt.x,txt.y)
		fill(txt.color);
		txt.x+=txt.vx;
		txt.y+=txt.vy
		txt.vx *=0.99 // 讓移動增加阻力
		txt.vy *=0.99 // 讓移動爭加一些阻力
		txt.vy += ay // 直接對應到字體的重力＋速度
	
		if(txt.y>height){
			txt.vy = -abs(txt.vy); // -abs 曲絕對值在變負數 讓字體再有彈跳的感覺
		}
	}
}

增加select 選項

參考範例

https://openprocessing.org/sketch/1279938