Day8 - 条件，重复，回圈与互动 - 回圈搭配配条件判断绘图

首先我们可以做一个随机的色块设计

function setup() {
	createCanvas(windowWidth, windowHeight);
	background(100);
}

function draw() {
	// ellipse(mouseX, mouseY, 20, 20);
	for(var x=0; x < width; x+=50){
		fill(random(255),random(255),random(255)) // 随机一直跑颜色
		rect(x,height/2,50) // 制造方块 跟 位移方块位置
	}
}

不一定只能放在draw区块可以放在 setup 再去让他跑

function setup() {
	createCanvas(windowWidth, windowHeight);
	background(0);
	noStroke();
		for(var x=0; x < width; x+=50){
		
			for(var y=0;y<height;y+=50){
				fill(random(200,150),random(255),random(255))
				rect(x,y,50)
			}
		
	}
}

function draw() {
	// ellipse(mouseX, mouseY, 20, 20);

}

只要再加上一些 count 的设定可以开始制作出一些色彩的图层美感

去做 if else 的判定 count % 5 < 4

我们就可以开始产生出不一样的渐层式图层效果

之後也可以在if()else去做一些不一样的判定标准

function setup() {
	createCanvas(windowWidth, windowHeight);
	background(0);
	noStroke();
	var count = 0
	for (var x = 0; x < width; x += 50) {

		for (var y = 0; y < height; y += 50) {
			count += 1;
			fill(random(200, 250), random(0), random(255))
			stroke(random(200, 250), random(255), random(255))
			strokeWeight(3)
			if (count % 5 < 4) {
				rect(x, y, 40,40,5)
				if (random() < 0.5) {
					fill(0);
					ellipse(x + 20, y + 20, 20);
					noStroke();
						if (random() < 0.5) {
							fill(random(250), random(0), random(255))
							ellipse(x + 20, y + 20, 10);
							noStroke();
						}
				}
			}

		}

	}
}

function draw() {
	// ellipse(mouseX, mouseY, 20, 20);

}