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()
colorMode(RGB)
var clr )
color(255,0,0)
是纯红色,color(255,255,0)
是黄色,color(255,255,255)
是白色、color(0,0,0)
是黑色,rgb 都相同的话就是灰阶,以此类推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);
}
由色相(Hue)、饱和度(Saturation)、亮度(Brightness/Value)三要素组成,相对於 RGB 会更容易直接控制想要的颜色与范围。
透过饱和度 跟亮度 可以让作品更有层次
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));
}
<<: Day 25-reverse terraform: terraformer,从 infrastructure 产生 .tf 内容
哈罗,各位好,我本来想写一些,自己想学、有主题的东西,但考量最近工作繁忙,自己又在准备一些考试,所以...
前言 大家好,目前我学过C、java、lua等语言,但在android设计上还只能算是一名初学者,因...
这篇会介绍图表套件Charts的功能 graphView.leftAxis.enabled = fa...
对我来说,有段时间没有使用,Fedora 所呈现出来的「桌面行为」(是这个说法吗?)也有其独道迷人之...
每次网路搜寻关键字SSR、MPA、SPA,都会有看没有懂的感觉,看完过没多久马上就忘了,藉由这次机会...