Day 10 - 来谈谈在P5最常用的色彩学

p5 中的 color 物件:
先认识两个色彩学
可以了解

https://www.instagram.com/a__gilmore/?hl=en

https://www.instagram.com/mattmillsart/

可以透过色彩的交叉使用 可以了解一下到底怎麽去呈现

可以放在 fill()、background()、stroke() 等方法里面,控制绘图颜色的物件。

  • 取得颜色/透明度:_getBlue()/_getGreen()/_getRed()/_getAlpha(),不论模式回传 rgb(0-255),alpha(0-100)
  • 设定颜色/透明度:setBlue()/setGreen()/setRed()/setAlpha()

RGB:使用红、绿、蓝三色交叠後产生的颜色

https://ithelp.ithome.com.tw/upload/images/20210926/20103744P5ykKckbpJ.png

  • 使用方式
    1. 透过 colorMode(RGB)
    2. var clr )
  • 从上图可知,color(255,0,0) 是纯红色,color(255,255,0)是黄色,color(255,255,255)是白色、color(0,0,0)是黑色,rgb 都相同的话就是灰阶,以此类推
  • RGB模式的透明度会在 0~255
function draw() {
	var clr = color(255 - frameCount,63,63) // 请不要用color会坏掉
	var clr = color('#3b52f9') // 使用色票
	var clr = color('FireBrinck');// 也可以使用这种名词去找到相关颜色
	fill(clr);
	rect(mouseX,mouseY,50);
}
var clr
function setup() {
	createCanvas(windowWidth, windowHeight);
	background(100);
	clr = color(255 - frameCount,63,63) // 请不要用color会坏掉
	clr.setAlpha(100);
}

function draw() {
	
	fill(clr);
	rect(mouseX,mouseY,50);
}

function mousePressed(){
	clr.setBlue(255);
}

HSB(HSV):

由色相(Hue)、饱和度(Saturation)、亮度(Brightness/Value)三要素组成,相对於 RGB 会更容易直接控制想要的颜色与范围。

https://ithelp.ithome.com.tw/upload/images/20210926/20103744yXXGWeQ8TB.png

透过饱和度 跟亮度 可以让作品更有层次

function setup() {
	createCanvas(windowWidth, windowHeight);
	background(0);
	colorMode(HSB);
	for(var i=0;i<width;i+=40){
		var h = map(i,0,width,0,360)
		for(var o=0;o<height;o+=40){
			var clr= color(h,50,100)
			// clr.setAlpha(0.8)
			fill(clr)
			ellipse(i, o, 20, 20);
		}
		
	}
}

透过这个方式我们可以更快速找到我们想要的色彩光谱

https://openprocessing.org/sketch/1257052

转颜色对应

function draw() {
	blendMode(MULTIPLY)
	var clr1 = color('#6fdbd7');
	var clr2 = color("salmon");
	fill(clr1);
	rect(0,height/2,50,50);
	fill(clr2)
	rect(width-50,height/2,50)
	// ellipse(mouseX, mouseY, 20, 20);
	for(var i=0;i<width;i+=50){
		var ratio = map(i,0,width,0,1);
		var middleColor = lerpColor(clr1,clr2,ratio)
		fill(middleColor);
		rect(i,height/2,100,100)
	}
}

我们可以学会不同的颜色设定 blendMode 跟 lerpColor 可以做出重叠 跟 渐层效果

function setup() {
	createCanvas(windowWidth, windowHeight);
	background(100);
		blendMode(BLEND)
	background(0);
	var clr1 = color('#6fdbd7');
	var clr2 = color("salmon");
	fill(clr1);
	rect(0,height/2,50,50);
	fill(clr2)
	rect(width-50,height/2,50)
	noStroke();
	// ellipse(mouseX, mouseY, 20, 20);
	for(var i=0;i<width*2;i+=100){
		clr1.setAlpha(20);
		fill(clr1);
		ellipse(0,height/2,i)
	}
	for(var i=0;i<width*2;i+=100){
		clr2.setAlpha(20);
		fill(clr2);
		ellipse(width,height/2,i)
	}
}

利用blendMode 可以做出一些不同的设定

var colors = ["#264653","#2a9d8f","#e9c46a","#f4a261","#e76f51"]
function setup() {
	createCanvas(windowWidth, windowHeight);
	background(0);
}

function draw() {
	blendMode(SCREEN);
	var clr = random(colors);
	fill(clr);
	ellipse(mouseX, mouseY, random(0,100));
}

https://ithelp.ithome.com.tw/upload/images/20210926/20103744PqT8nra0kt.png


<<:  Day 25-reverse terraform: terraformer,从 infrastructure 产生 .tf 内容

>>:  D11/ 要怎麽显示动态资料的画面 - State

找LeetCode上简单的题目来撑过30天啦(DAY1)

哈罗,各位好,我本来想写一些,自己想学、有主题的东西,但考量最近工作繁忙,自己又在准备一些考试,所以...

Day1 - 前言

前言 大家好,目前我学过C、java、lua等语言,但在android设计上还只能算是一名初学者,因...

(Day30)第三方套件---图表套件Charts(下)

这篇会介绍图表套件Charts的功能 graphView.leftAxis.enabled = fa...

在 Fedora 34 上轻松安装呒虾米

对我来说,有段时间没有使用,Fedora 所呈现出来的「桌面行为」(是这个说法吗?)也有其独道迷人之...

Vue.js 从零开始:SSR、MPA、SPA的概念

每次网路搜寻关键字SSR、MPA、SPA,都会有看没有懂的感觉,看完过没多久马上就忘了,藉由这次机会...