Day 19 - 网页元素DOM - 表单元件的Event，表单的type 设定

制作表单 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