Day 17 - 利用程序码制造出韵律，随机性 - angleMode / random / noise

• 了解旋转、圆形与极座标的概念
• 如何利用弦波函数产生韵律感
• 利用噪声产生连续的乱数
• 如何使用噪声产生自然感的动态与形状
• 了解速度曲线与如何产生动态
• 适用的创作 - 韵律重复，轨迹，动作与舞蹈，自然界动植物，形状

了解三角函数

• 极座标的概念

主要是说 如果我们有一个座标就可以知道如何使用一个韵律

• sin(正弦)：
  • 在直角三角形中，一个锐角 angle A 的正弦定义为它的对边与斜边的比值，也就是：sinθ = a/c
  • θ 从 0 ~ 2PI(0 ~ 360度)的过程中，sin(θ)会呈现 0 -> 1 -> 0 -> -1 -> 0 这样的结果变化。
• cos(余弦)
  • 在直角三角形中，一个锐角 angle A 的余弦定义为它的邻边与斜边的比值，也就是：sinθ = b/c
  • θ 从 0 ~ 2PI(0 ~ 360度)的过程中，cos(θ)会呈现 1 -> 0 -> -1 -> 0 -> 1 这样的结果变化。

透过这个方式我们可以用它来做一些 韵律的一些动作

再利用delta去做波动的调整 可以调整出不一样的曲线设定 这样你就可以做出一种图层式的渐变效果

function draw() {
	background(0);
	colorMode(HSB)
	noStroke();
	translate(width/2,height/2);
	for(let o=-width/2;o<width;o+=50){
	for(let a=-width/2;a<width;a+=50){
		let delta = map(a,-width/2,width/2,0,5); // 增加一些delta的设定
		let ratio = map(sin(frameCount/10+delta+o/50),-1,1,0,1) // 更换颜色
		
		fill(180*ratio,80,80);
		let bouncs = (sin(frameCount/100+a) + 1)*50; // 利用sin 去做一个动态的设定
		ellipse(a, ratio+o , bouncs);
	};
	}

}

位置与角度的转换 atan2

atan2 把y 和 x变化量换算为角度 利用他们间距去看一个非常靠近你的一种设计风格

function eye(x,y,sc){
	push();//限制制作的开始
		translate(x,y);//设定座标位置/
		
		scale(sc);//缩小眼睛
		fill(255);
		ellipse(0,0,200);
		fill(0);
		let ang = atan2(mouseY-y,mouseX-x); //atan2 把y 和 x变化量换算为角度
		rotate(ang)
		ellipse(50,0,100);
	pop();//限制制作的结束 如果没有设定会互相交叉影响
}
function draw() {
	// ellipse(mouseX, mouseY, 20, 20);
	background(0);
	for(var o=0;o<height;o+=100){
		for(var i=0;i<width;i+=100){
			eye(i,o,0.4);
		};
	};
}

可以透过这种方式去做不一样的排列组合 放入array 再去把它随机长出来

制造噪音效果

noise() 利用这个去获取些微变化的 变数效果

function draw() {
	// ellipse(mouseX, mouseY, 20, 20);
	translate(width/2,height/2);
	for(var i=0;i<400;i++){
		let ang = i/10 + frameCount/50;
		let r = i+ noise(i/10)*map(mouseX,0,width,0,100)
		ellipse(cos(ang)*r,sin(ang)*r,50); // 利用cos跟 sin 去做原型座标位置
		text('hello'[i%5],cos(ang)*r,sin(ang)*r)
	}
}

透过noise 我们可以做出不同的 应用：地形生成、色相仪、云朵…

延伸阅读：Perlin Noise

速度曲线的应用

• https://easings.net/https://www.openprocessing.org/sketch/897433
• 速度曲线函式
  • 把我们要用的区间 map 到 0~1 的区间内（X），并依序丢到速度曲线的函式中计算，如此一来我们就可以得到在这个区间内计算过後的曲线数值(Y)，像是上面的图片。

function  easeOutElastic(x){
	const c1 = 1.70158;
const c2 = c1 * 1.525;

return x < 0.5
  ? (pow(2 * x, 2) * ((c2 + 1) * 2 * x - c2)) / 2
  : (pow(2 * x - 2, 2) * ((c2 + 1) * (x * 2 - 2) + c2) + 2) / 2;
}
function draw() {
	// ellipse(mouseX, mouseY, 20, 20);
	background(0);
	translate(width/2,height/2);
	for(var i=0;i<20;i++){
		push();
			rotate(2*PI/20*i);
			let ratio = map(((frameCount*5 + i*2)%width),0,width,0,1);
			let result = easeOutElastic(ratio);
			ellipse(0,200*result,100);
		pop();
	}