打印图书打印图书

颜色

站点: 聚观点-创意环境
课程: 必修1. 互联网创意编程基础
图书: 颜色
打印: 访客用户
日期: 2025年04月12日 星期六 02:18

目录

1.1. 颜色（字符串）


preload()

示例：

▶️运行示例代码



let x = 0;
function setup() {
  createCanvas(100, 100);
}
function draw() {
  background(204);
  x = x + 0.1;
  if (x > width) {
    x = 0;
  }
  line(x, 0, x, height);
}
function mousePressed() {
  noLoop();
}
function mouseReleased() {
  loop();
}

舞台区显示的画布内容如下：




1.2. 颜色RGB


p5.Color

示例：

▶️运行示例代码



let x = 0;
function setup() {
  createCanvas(100, 100);
}
function draw() {
  background(204);
  x = x + 0.1;
  if (x > width) {
    x = 0;
  }
  line(x, 0, x, height);
}
function mousePressed() {
  noLoop();
}
function mouseReleased() {
  loop();
}

舞台区显示的画布内容如下：





1.3. 配色方案

🎞️调色板主题

🎞️API说明


▶️运行实例代码


参数可以是一个浮点数，或者一组浮点数。


代码生成的调色板中第一个颜色如下所示。


该调色板的主题名是“rainbow”，第一个参数是“0.5”。


1.4. RGBA颜色


p5.Color

示例：

▶️运行示例代码



let x = 0;
function setup() {
  createCanvas(100, 100);
}
function draw() {
  background(204);
  x = x + 0.1;
  if (x > width) {
    x = 0;
  }
  line(x, 0, x, height);
}
function mousePressed() {
  noLoop();
}
function mouseReleased() {
  loop();
}

舞台区显示的画布内容如下：





1.5. RBGA


p5.Color

示例：

▶️运行示例代码



let x = 0;
function setup() {
  createCanvas(100, 100);
}
function draw() {
  background(204);
  x = x + 0.1;
  if (x > width) {
    x = 0;
  }
  line(x, 0, x, height);
}
function mousePressed() {
  noLoop();
}
function mouseReleased() {
  loop();
}

舞台区显示的画布内容如下：





1.6. 颜色和透明度


p5.Color

示例：

▶️运行示例代码



let x = 0;
function setup() {
  createCanvas(100, 100);
}
function draw() {
  background(204);
  x = x + 0.1;
  if (x > width) {
    x = 0;
  }
  line(x, 0, x, height);
}
function mousePressed() {
  noLoop();
}
function mouseReleased() {
  loop();
}

舞台区显示的画布内容如下：





1.7. 颜色灰度和透明度


p5.Color

示例：

▶️运行示例代码



let x = 0;
function setup() {
  createCanvas(100, 100);
}
function draw() {
  background(204);
  x = x + 0.1;
  if (x > width) {
    x = 0;
  }
  line(x, 0, x, height);
}
function mousePressed() {
  noLoop();
}
function mouseReleased() {
  loop();
}

舞台区显示的画布内容如下：





1.8. 颜色abcd


p5.Color

示例：

▶️运行示例代码



let x = 0;
function setup() {
  createCanvas(100, 100);
}
function draw() {
  background(204);
  x = x + 0.1;
  if (x > width) {
    x = 0;
  }
  line(x, 0, x, height);
}
function mousePressed() {
  noLoop();
}
function mouseReleased() {
  loop();
}

舞台区显示的画布内容如下：





1.9. 颜色4值数组


p5.Color

示例：

▶️运行示例代码



let x = 0;
function setup() {
  createCanvas(100, 100);
}
function draw() {
  background(204);
  x = x + 0.1;
  if (x > width) {
    x = 0;
  }
  line(x, 0, x, height);
}
function mousePressed() {
  noLoop();
}
function mouseReleased() {
  loop();
}

舞台区显示的画布内容如下：





1.10. 红色彩值


red()

示例：

▶️运行示例代码



let x = 0;
function setup() {
  createCanvas(100, 100);
}
function draw() {
  background(204);
  x = x + 0.1;
  if (x > width) {
    x = 0;
  }
  line(x, 0, x, height);
}
function mousePressed() {
  noLoop();
}
function mouseReleased() {
  loop();
}

舞台区显示的画布内容如下：





1.11. 绿色彩值


green()

示例：

▶️运行示例代码



let x = 0;
function setup() {
  createCanvas(100, 100);
}
function draw() {
  background(204);
  x = x + 0.1;
  if (x > width) {
    x = 0;
  }
  line(x, 0, x, height);
}
function mousePressed() {
  noLoop();
}
function mouseReleased() {
  loop();
}

舞台区显示的画布内容如下：





1.12. 蓝色彩值


blue()

示例：

▶️运行示例代码



let x = 0;
function setup() {
  createCanvas(100, 100);
}
function draw() {
  background(204);
  x = x + 0.1;
  if (x > width) {
    x = 0;
  }
  line(x, 0, x, height);
}
function mousePressed() {
  noLoop();
}
function mouseReleased() {
  loop();
}

舞台区显示的画布内容如下：





1.13. 透明度


alpha()

示例：

▶️运行示例代码



let x = 0;
function setup() {
  createCanvas(100, 100);
}
function draw() {
  background(204);
  x = x + 0.1;
  if (x > width) {
    x = 0;
  }
  line(x, 0, x, height);
}
function mousePressed() {
  noLoop();
}
function mouseReleased() {
  loop();
}

舞台区显示的画布内容如下：





1.14. 色调值


hue()

示例：

▶️运行示例代码



let x = 0;
function setup() {
  createCanvas(100, 100);
}
function draw() {
  background(204);
  x = x + 0.1;
  if (x > width) {
    x = 0;
  }
  line(x, 0, x, height);
}
function mousePressed() {
  noLoop();
}
function mouseReleased() {
  loop();
}

舞台区显示的画布内容如下：





1.15. 饱和度值


saturation()

示例：

▶️运行示例代码



let x = 0;
function setup() {
  createCanvas(100, 100);
}
function draw() {
  background(204);
  x = x + 0.1;
  if (x > width) {
    x = 0;
  }
  line(x, 0, x, height);
}
function mousePressed() {
  noLoop();
}
function mouseReleased() {
  loop();
}

舞台区显示的画布内容如下：





1.16. 光度值


lightness()

示例：

▶️运行示例代码



let x = 0;
function setup() {
  createCanvas(100, 100);
}
function draw() {
  background(204);
  x = x + 0.1;
  if (x > width) {
    x = 0;
  }
  line(x, 0, x, height);
}
function mousePressed() {
  noLoop();
}
function mouseReleased() {
  loop();
}

舞台区显示的画布内容如下：





1.17. 混合颜色


lerpColor()

示例：

▶️运行示例代码



let x = 0;
function setup() {
  createCanvas(100, 100);
}
function draw() {
  background(204);
  x = x + 0.1;
  if (x > width) {
    x = 0;
  }
  line(x, 0, x, height);
}
function mousePressed() {
  noLoop();
}
function mouseReleased() {
  loop();
}

舞台区显示的画布内容如下：





1.18. 亮度值


brightness()

示例：

▶️运行示例代码



let x = 0;
function setup() {
  createCanvas(100, 100);
}
function draw() {
  background(204);
  x = x + 0.1;
  if (x > width) {
    x = 0;
  }
  line(x, 0, x, height);
}
function mousePressed() {
  noLoop();
}
function mouseReleased() {
  loop();
}

舞台区显示的画布内容如下：





1.19. 随机颜色


preload()

示例：

▶️运行示例代码



let x = 0;
function setup() {
  createCanvas(100, 100);
}
function draw() {
  background(204);
  x = x + 0.1;
  if (x > width) {
    x = 0;
  }
  line(x, 0, x, height);
}
function mousePressed() {
  noLoop();
}
function mouseReleased() {
  loop();
}

舞台区显示的画布内容如下：





1.20. 颜色三色


preload()

示例：

▶️运行示例代码



let x = 0;
function setup() {
  createCanvas(100, 100);
}
function draw() {
  background(204);
  x = x + 0.1;
  if (x > width) {
    x = 0;
  }
  line(x, 0, x, height);
}
function mousePressed() {
  noLoop();
}
function mouseReleased() {
  loop();
}

舞台区显示的画布内容如下：





1.21. 混合颜色比例


preload()

示例：

▶️运行示例代码



let x = 0;
function setup() {
  createCanvas(100, 100);
}
function draw() {
  background(204);
  x = x + 0.1;
  if (x > width) {
    x = 0;
  }
  line(x, 0, x, height);
}
function mousePressed() {
  noLoop();
}
function mouseReleased() {
  loop();
}

舞台区显示的画布内容如下：





1.22. 颜色转字符串


toString()

示例：

▶️运行示例代码



let x = 0;
function setup() {
  createCanvas(100, 100);
}
function draw() {
  background(204);
  x = x + 0.1;
  if (x > width) {
    x = 0;
  }
  line(x, 0, x, height);
}
function mousePressed() {
  noLoop();
}
function mouseReleased() {
  loop();
}

舞台区显示的画布内容如下：





1.23. 颜色四个数值


setRed()

示例：

▶️运行示例代码



let x = 0;
function setup() {
  createCanvas(100, 100);
}
function draw() {
  background(204);
  x = x + 0.1;
  if (x > width) {
    x = 0;
  }
  line(x, 0, x, height);
}
function mousePressed() {
  noLoop();
}
function mouseReleased() {
  loop();
}

舞台区显示的画布内容如下：





1.24. 调色板

📚预定义的一组调色板

每个调色板包含若干个前景色、外形线色、背景色。

// Can both use ES6 import and CommonJS require.
//import * as chromotome from 'chromotome';

// Palettes can be acquired randomly...
let palette = chromotome.get(); // chromotome.getRandom() also works.

// ...or by name!
palette = chromotome.get('miradors'); // chromotome.getNames() gets you a list of all the different palette names.

// A palette consists of an array of colors together with (usually) a stroke color and a background color.
console.log(palette.colors); // --> ['#ff6936', '#fddc3f', '#0075ca', '#00bb70']
console.log(palette.stroke); // --> '#ffffff'
console.log(palette.background); // --> '#020202'
https://kgolid.github.io/chromotome-site/

1.25. 相同颜色


将两个p5.Color颜色对象，转化为#rrggbb格式的RGB字符串，进行对比。相当于以下函数的实现。

参数color1和color2也可以是#rrggbb格式的RGB字符串。


1.26. 保存ASE文件

将颜色组保存为调色板文件（.ase格式）



.ase文件可在🎨图像编辑器中以文件方式打开。导入的调色板如下图所示。

1.27. 颜色组排序


gd.sortColors()

▶️运行代码