如何為網格中的每個圓分配隨機顏色，然后讓每個圓從起始顏色開始在色譜中前進？

Question

我正在嘗試為每個圓圈分配一次隨機顏色，然后讓該顏色在色譜中前進。 我是初學者，無法弄清楚如何阻止繪制 function 中的隨機顏色重置每個循環而不將其拉入設置 function，然后使所有圓圈從相同的隨機顏色開始。 下面是我目前所擁有的代碼。 目前它似乎也在輕微地改變 colors，我認為這與“for”有關。 我想要的只是一個圓圈網格，這些圓圈被分配一次隨機顏色，然后 go 以相同的速度通過色輪推進它們的顏色。 提前致謝！

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
      
      }
  
      }
    }
  }  

Answer 1

您必須在setup中創建一個隨機 colors 的網格：

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 function中使用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>

Answer 2

用戶界面將是一個二維的圓圈網格。

數據結構將是一個二維顏色值數組。 數據結構永遠不需要更新； 要獲得一個圓圈的當前顏色，我們只需要知道它的初始顏色，以及已經過去的時間量！

我將使用hsla() css 顏色指令來定義顏色，因為它使改變色調變得微不足道。

colourShiftingCircles function 采用 canvas 上下文和一些顯示參數，並將在提供的 canvas 上下文中保持動畫（顏色轉換）圓網格。

function 簽名為：

colourShiftingCircles({ ctx, rad, numX, numY, saturation=100, lightness=50, huePerSec=30 })

• ctx : canvas 上下文
• rad : 以像素為單位的圓半徑
• numX : 跨圈數
• numY ：向下的圈數（ numX x numY圈的總數）
• saturation ：控制顏色的“彩色”或“非灰色”程度
• 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>