可从滑块调整嵌套循环

Question

我想制作一个正方形网格，可以通过两个滑块进行调整，一个用于宽度，另一个用于高度。我设法以某种方式让它适用于网格的宽度，但我对高度没有把握。

代码如下：

let bubbles = [];
var slider, slider2 ;
function setup() {
 var canvas=createCanvas(windowWidth, windowHeight);
 slider = createSlider (10,260,260);
 slider2 = createSlider (10,260,260);
 for (var i=0; i<25; i++) {
    for ( var j=0; j<5; j++){
      var x = i * 260;
      var y=j*260;
   
    let b = new Bubble(x, y);
    bubbles.push(b);
    }
  }
}
function draw() {
  
  background(0);
var value = slider.value();
   for (let i = 0; i < bubbles.length; i++) {
    bubbles[i].show(i);
   
  }
}
class Bubble {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.brightness = (0);
    this.slider=slider.value();
     this.slider2=slider2.value();
  }

 show(i) {
   push();
    stroke(255);
   //noStroke ;
    strokeWeight(0.2);
    fill(this.brightness);
  this.x=((i/5) - ((i%5)/5) ) * slider.value();
      //this.y=((i/5) - ((i%5)/5) ) * slider2.value();
 

   translate(this.x, this.y);
 rect(0 ,0,260);
   pop(); 
  }
}

Answer 1

如果这是您要达到的最终产品，那么我不推荐类，因为数量有限。有什么你想要的具体告诉我，告诉我是什么，我也可以给你注释和解释。

var slider, slider2 ;
function setup() {
 var canvas=createCanvas(windowWidth, windowHeight);
 slider = createSlider (10,260,260);
 slider2 = createSlider (10,260,260);
}
function draw() {
  
 for(i = 0; i < width / slider.value(); i ++){
   for(j =0; j < height / slider2.value(); j ++){
     fill(255,i/slider.value() * 255 ,j / slider.value() * 255);
     rect(i * slider.value(),j * slider2.value(),slider.value(),slider2.value());
   }
 }
}

这是对类和数组的编辑：

var maxVal = 30;
var resX = 20;
var resY = 20;
var sliderX, sliderY;

var grid = [];
function setup() {
  
  for(i = 0; i < maxVal; i ++){
    grid[i] = [];
    for(j =0; j < maxVal; j ++){
      grid[i][j] = new Point(i,j);
    }
}
  
 var canvas=createCanvas(windowWidth, windowHeight);
 sliderX = createSlider (10,30,resX);
 sliderY = createSlider (10,30,resX);
}
function draw() {
  background(0);
  resX = sliderX.value();
  resY = sliderY.value();
  
  for(let i of grid){
    for(let j of i){
      j.display();
    }
  }
}

class Point{
  constructor(x,y){
    this.x = x;
    this.y = y;
  }
  display(){
    rect(this.x * resX,this.y * resY,resX,resY);
  }
}

如果您要将 maxVal 扩展到一个非常大的数字，那么我建议仅在更改滑块时重绘而不是每秒重绘 60 次。

可从滑块调整嵌套循环

Nested loop adjustable from slider

slider

nested-loops

p5.js