我试图分配一个随机的颜色给每个圆圈一次，然后让这个颜色通过颜色光谱进展。我是一个初学者，无法弄清楚如何阻止绘制函数中的随机颜色重置每个循环，而不将其拉入设置函数，然后使所有圆圈从相同的随机颜色开始。下面的代码是我到目前为止所拥有的。此刻，它似乎也在轻微地改变颜色，我想这与"for"有关。所有我想要的是一个网格的圆圈，分配一个随机的颜色一次，然后继续通过色轮以相同的速度推进他们的颜色。提前感谢!
let intervals = [10];
let count;
let frameWidth;
let distance;
let diam1;
let col1;
let sat1;
let bri1;
let speed;
function setup() {
createCanvas(800, 800);
colorMode(HSB, 360, 100, 100, 1);
//initiate draw variables
count = random(intervals);
frameWidth = (width*0.8);
distance = (frameWidth/count);
col1 = random(360);
diam1 = distance*0.5;
speed = 0.005;
}
function draw() {
background(0, 0, 0, 1);
// draw grid of circles
for (let x = width * 0.1; x <= width * 0.9; x += distance) {
for (let y = height * 0.1; y <= height * 0.9; y += distance) {
sat1 = 100;
bri1 = 100;
noStroke();
fill(col1, sat1, bri1, 1);
ellipse(x,y,diam1);
col1 = col1 + speed
if (col1 >= 360) {
col1 = 0
}
}
}
}
你必须在setup中创建一个随机颜色的网格:
let speed, colors, rows, columns;
function setup() {
// [...]
columns = Math.round(frameWidth / distance) + 1;
rows = Math.round(frameWidth / distance) + 1;
colors = [];
for (let i = 0; i < columns; i ++) {
colors.push([]);
for (let j = 0; j < rows; j ++) {
colors[i].push(random(360));
}
}
speed = 1;
}
使用draw功能中的colors。完整的示例:
let intervals = [10];
let count, frameWidth, distance;
let sat1, bri1;
let speed, colors, rows, columns, diameters;
function setup() {
createCanvas(800, 800);
colorMode(HSB, 360, 100, 100, 1);
//initiate draw variables
count = random(intervals);
frameWidth = (width*0.8);
distance = (frameWidth/count);
columns = Math.round(frameWidth / distance) + 1;
rows = Math.round(frameWidth / distance) + 1;
colors = [];
diameters = []
for (let i = 0; i < columns; i ++) {
colors.push([]);
diameters.push([]);
for (let j = 0; j < rows; j ++) {
colors[i].push(random(360));
diameters[i].push(random(TWO_PI));
}
}
speed = 1;
}
function draw() {
background(0, 0, 0, 1);
// draw grid of circles
for (let i = 0; i < columns; i ++) {
for (let j = 0; j < rows; j ++) {
sat1 = 100;
bri1 = 100;
noStroke();
fill(colors[i][j], sat1, bri1, 1);
let d = distance * (0.5 + 0.4 * sin(diameters[i][j]));
ellipse(width * 0.1 + i * distance, height * 0.1 + j * distance, d);
colors[i][j] = (colors[i][j] + speed) % 360;
diameters[i][j] = diameters[i][j] + 0.05;
}
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.min.js"></script>ui将是一个2d的圆形网格。
数据结构将是一个2d的颜色值数组。数据结构永远不需要更新;得到一个圆的当前颜色我们只需要知道其最初的颜色,和的时间已经过去了!
我将使用hsla()css颜色指令来定义颜色，因为它使移动色调微不足道。
colourShiftingCircles函数接受一个画布上下文和一些显示参数，并将在提供的画布上下文上保持一个动画(颜色移动)的圆圈网格。
函数签名为:
colourShiftingCircles({ ctx, rad, numX, numY, saturation=100, lightness=50, huePerSec=30 })
ctx:画布上下文rad:圆半径(像素)numX:穿过 的圈数numY:圈数下降(numX×numY圈的总数)saturation: control how " colorful& quot;或";nongrey"颜色为lightness:控制转向黑/白颜色是huePerSec:如何快速循环色调
let canvas = document.querySelector('canvas');
// This just ensures the canvas is a reasonable size; it's optional
let resize = () => {
let { width, height } = canvas.parentNode.getBoundingClientRect();
if (width.toString() !== canvas.getAttribute('width')) canvas.setAttribute('width', width);
if (height.toString() !== canvas.getAttribute('height')) canvas.setAttribute('height', height);
};
resize();
window.addEventListener('resize', resize);
let colourShiftingCircles = ({ ctx, rad, numX, numY, saturation=100, lightness=50, huePerSec=30 }) => {
// This value allows the animation to be ended at some point in the future
let control = { run: true, end: () => control.run = false };
// Animation loop runs inside an `async` function:
(async () => {
// An array of size `numX` x `numY` items, defining initial hue values for circles
let data = [ ...new Array(numX) ].map(() => [ ...new Array(numY) ].map(() => {
return { hue: Math.random() * 360 };
}));
// Mark the start time; this will allow us to tell how much time has passed later
let startTime = performance.now();
while (control.run) {
// Wait for animation frame; this is a basic principle of canvas animations
await new Promise(r => requestAnimationFrame(r));
// Figure out how much the hue has shifted by at this point in time
let totalHueShift = ((performance.now() - startTime) / 1000) * huePerSec;
// Draw every circle:
for (let y = 0; y < numY; y++) { for (let x = 0; x < numX; x++) {
// Calculate the hue based on the circle's initial colour, and the amount
// of hue shifted due to passage of time
let hue = data[x][y].hue + totalHueShift;
// Simply draw a circle with an hsla fill colour
ctx.beginPath();
ctx.fillStyle = `hsla(${Math.floor(hue) % 360}deg ${saturation}% ${lightness}%)`;
ctx.arc((rad * 2 * x) + rad, (rad * 2 * y) + rad, rad, 0, Math.PI * 2);
ctx.fill();
}}
}
})();
return control;
};
let { end } = colourShiftingCircles({ ctx: canvas.getContext('2d'), rad: 20, numX: 5, numY: 5 });
// If you ever want to end the animation just call `end()`!/* Just getting the canvas to display in a reasonable way; this is optional */
html, body, canvas { position: absolute; width: 100%; height: 100%; margin: 0; padding: 0; }
canvas { outline: 1px solid black; }<canvas></canvas>