Day 9 - 条件，重复，回圈与互动 - 加入互动，随机性与状态

接下来我们要来介绍滑鼠使用後的互动调整

但你可以依照互动的状态 去做一些 不同的 样式设计

function setup() {
	createCanvas(windowWidth, windowHeight);
	background(100);
}

function draw() {
	// ellipse(mouseX, mouseY, 20, 20);
}
// 利用增加 mousePressed的 function
function mousePressed(){
	for(let i=0;i< 10; i++){
			fill(random(255),random(200,255),random(100,200));
			ellipse(mouseX + random(-30,30), mouseY+ random(-20,20), 20, 20);
	}

}

那其实不代表你只能做一种单一的 锺乳石的设计 或者颠倒 岩石设计 像是我们常在photoshop看到的喷洒设定也可以透过这样的方式去呈现出来

 如果此时我想要让颜色有更多的变化 可以在fill()上面做一些更大的变化

fill(random(frameCount%255 + mouseY),random(200,255),random(100,200));

function setup() {
	createCanvas(windowWidth, windowHeight);
	background(0);
}

function draw() {
	// ellipse(mouseX, mouseY, 20, 20);
}

function mouseMoved(){ // 更改你的event事件
	var count = int(random(100,350)); // 随机给一些count数字 一定要整数喔
	var r = random(2,20)
	noStroke();
	for(let i=0;i< count; i++){
			fill(random(255),random(200,255),random(100,200));
			ellipse(mouseX+ random(-50,50), mouseY+ random(-50,50) ,r); // 制造圆型
			r *= 0.9;
	}

}

介绍 pmouseX / PmosueY

利用之前的mouse的设计 var delta = abs(pmouseX - mouseX) 设定这样的参数 会有一个比刷的大小判定可以让滑鼠感觉挥洒感觉在泼墨的感觉

abs() 取得正数

dist() 两者之间的距离

sqrt() 开平方之後的数字

顺便利用以上的参数可以再去做出不一样滑动效果

https://openprocessing.org/sketch/1254736 范例参考

但我们会有需要 mode去判定他们现在的function动作

就是用最基本的mode直接设定数字去做判定

var mode = 1;
function mousePressed(){
	mode++;
	if(mode > 2){
		mode = 1
	}
	print(mode)
}
function mouseMoved(){
	var count = int(random(100,350));
	var r = random(2,20)
	// 利用sqrt(前一个mouse 跟 mouseY的 相差开平方之後)可以让笔刷不会刷得太过夸张
	var delta = sqrt(dist(pmouseX , pmouseY,mouseX,mouseY)) * 10
	noStroke();
	if(mode ===1){
		for(let i=0;i< count; i++){
			fill(random(frameCount%255 + mouseY),random(200,255),random(100,200));
			
			ellipse(mouseX+ random(-delta,delta), mouseY+ random(-delta,delta) ,r);
			r *= 0.9;
		}
	}else if(mode ==2){
		ellipse(mouseX,mouseY,50,50)
	}

}

https://openprocessing.org/sketch/1254738 范例参考