[ 作业提交 ] P5 Workshop (3rd) @ xinchejian DAY2

[Ting]

homework2也做好了,不需要动画吧？

程序代码

float diam = 25;

void setup() {

  size(500, 400);
  colorMode(HSB);
  smooth();
  noStroke();
  background(255);
  

  float startArc=0;

  for (int i=0;i<width/diam;i++) {
    for (int j=0;j<height/diam;j++) {

      fill(random(250),40, 255);
      ellipse(i*diam+diam/2, j*diam+diam/2,diam,diam);
      
      fill(random(250), 160, 255);
      startArc = radians(random(360));
      arc(i*diam+diam/2, j*diam+diam/2, diam, diam, startArc, startArc+PI*random(0.5,2.5));
  }
  }
  
  

}

[RavenKwok]

@Ting

赞。动画其实也可以做做看拉，并不复杂，让起始弧度以及结束弧度变化就可以了。

[Simmel]

先交上一个

程序代码

float xStart, yStart;
float []circle=new float[200];
int totalAmount;

void setup() {
  size(500, 500);
  background(255);
  smooth();
  frameRate(10);
  xStart = 50;
  yStart = 50;
  totalAmount = 14;
}
void draw() {
  noStroke();
  colorMode(HSB);
  for (int i=0;i<totalAmount;i++) {
    for (int j=0;j<totalAmount;j++) {
      for (int k=0;k<circle.length;k++){
        fill(random(360),random(255),255);
      ellipse(xStart+30*i,yStart+30*j,30,30);
       fill(random(255),random(255),255);
      arc(xStart+30*i,yStart+30*j,30,30,circle[k],circle[k]+random(0,TWO_PI-circle[k]));
      }
    }
  }
}

[Simmel]

程序代码

float noiseS,noiseIncre;

void setup(){
  size(500,500);
  smooth();
  background(0);
noiseS=random(100);
noiseIncre=0.5;
  
}

void draw(){
 for (int i=0;i<width;i++) {
   for (int j=0;j<height;j++) {
   stroke(noise(noiseS)*255);
  point(i,j);
  noiseS +=noiseIncre;
  }
 }
}

[RavenKwok]

@Simmel

#17楼交的那个，执行效果看似没问题，但你代码中三次for 循环嵌套会导致圆和圆弧在相同的位置上被绘制200遍，导致运行速度极慢。此外你的circle 数组并没有任何赋值操作，也就是说这个数组内的元素恒为0，且你绘制的所有圆弧的起始弧度都是0。

程序代码

arc(xStart+30*i,yStart+30*j,30,30,circle[k],circle[k]+random(0,TWO_PI-circle[k]));

然后#18楼交的那个运行比较慢，且时间长了也会发生我#6楼提到的变灰的问题，即rounding error。其实有更简单的方法拉。再试着改改看

[xurenfang]

程序代码

float diam ;
float startArc; 
float stopArc;
float noiseColor;
float xPos, yPos;


void setup() {

  size(500, 500);
  colorMode(HSB);
  frameRate(100);
  smooth();
  noStroke();
  background(255);
  diam=30;
  startArc=random(360);
  noiseColor=random(360);
}

void draw() {


  for (int i=0;i<width;i++) {
    for (int j=0;j<height;j++) {
      float xPos=i*diam+diam/2;
      float yPos=j*diam+diam/2;


      fill(noise(noiseColor*360), 155, 255);
      ellipse(xPos, yPos, diam, diam);

      stopArc=startArc+(PI*random(5));
      fill(random(255), 130, 255);
      arc(xPos, yPos, diam, diam, startArc, stopArc);
    }
  }

  noiseColor+=10;
}

[xurenfang]

3还有点困难，先改了个练习

程序代码

float xStart, yStart;
float spacing;
int totalAmount;
float r;
float colorC;

void setup() {
  size(500, 500,P2D);
  smooth();
  colorMode(HSB);
  xStart = 50;
  yStart = 50;
  spacing = 30;
  totalAmount = 14;
  r+=80;
}
void draw() {
  background(255);
  noStroke();

  for (int i=0;i<totalAmount;i++) {
    for (int j=0;j<totalAmount;j++) {
      float r = dist(mouseX,mouseY,xStart+j*spacing,yStart+i*spacing)/5;
        float colorC = dist(mouseX,mouseY,xStart+j*spacing,yStart+i*spacing);
        fill(colorC/2,250,200,colorC/3);
      ellipse(xStart+j*spacing, yStart+i*spacing,r,r);
    }
  }
}

[RavenKwok]

@xurenfang

改的那个练习第15行 r+=80 是手误还是有意为之？

另外Arc Grid 那个作业，你的sketch 的运行速度极为缓慢，原因在于你的for 循环结构中，退出条件是i>=width 以及j>=height。也就是说你的sketch 单帧会绘制500X500（也就是250000） 个圆和圆弧。导致运行速度极慢。尝试着修正一下吧，加油。

[Ting]

程序代码

我估计这不是正确的方法，但找不到别的法子了 :-\

code]

float diam = 100;
float diamSeed;
float colorSeed;

int vertexCount = 10;
float degreeSpace = 180/vertexCount;
float vertexX[]=new float[vertexCount];
float vertexY[]=new float[vertexCount];

void setup() {

  size(500, 500);
  colorMode(HSB);
  smooth();
  stroke(0,30);
  background(255);
  
  diamSeed = random(500);
  colorSeed = random(1);


}

void draw(){
  
  translate(width/2,height/2);
  fill(noise(colorSeed)*130+100,130,255);

  
  beginShape();
  

  for(int i=0;i<vertexCount;i++){
    

    float diamNoise = noise(diamSeed)*5;

    float xPosT = sin(radians(i*degreeSpace))*diamNoise;
    float yPosT = cos(radians(i*degreeSpace))*diamNoise;
    
    vertexX[i] = lerp(vertexX[i],xPosT*diam,0.2);
    vertexY[i] = lerp(vertexY[i],yPosT*diam,0.2);

    curveVertex(vertexX[i],vertexY[i]);
    
    diamSeed+=1;
    
  }

  curveVertex(0,vertexY[vertexCount-1]);

  for(int i=vertexCount-1;i>0;i--){
  

    curveVertex(-vertexX[i],vertexY[i]);
    
    
  }
  
  curveVertex(0,vertexY[0]);
  curveVertex(vertexX[0],vertexY[0]);

  
  endShape(CLOSE);

  colorSeed+=0.4;
  
  diam-=1;

  
  
  if(diam<0){
  noLoop();
  }
}


void mousePressed(){

  background(255);
  diam=100;
  loop();

}

[RavenKwok]

@Ting

哈哈，运行效果很不错阿。

代码逻辑上稍微有些混乱，来说一下。

1. 你是用lerp() 函数中的一个变量diam 来控制整个图形的缩小。diam作为一个系数与xPosT 相乘。而后每帧再让这个diam 递减。在这里变量diam 并没有作为整个图形的直径来使用（你的代码中控制图形大小还有float diamNoise = noise(diamSeed)*5;中那个系数5），所以命名为diam 首先不是很恰当。

2. 即便使用这种方法，也存在一些问题。在你程序刚开始运行时，你并没有对vertexX 以及vertexY 做任何赋值操作，也就是说它们默认为0，做了lerp()处理后，整个图形会先从半径0开始变大，而后变小。当然你的代码运行上貌似没有出现这个现象，但你可以试着把你用的lerp() 函数的第三个参数从0.2 改为0.01 看下，我说的问题就会很明显。

3. 你的vertexCount 设置为10，但事实上你绘制一圈用到的点不止10个，只是你重用了一些点的数据，让他们在x方向上镜像，而后再用curveVertex 连结。不过我建议你的sketch 可以分两步走，第一步是所有点数据的赋值，第二步才是把他们全连结起来绘制。你代码现在反映出来的情况是你对一圈中的部分点进行了赋值，而在绘制阶段又对剩余点的坐标数据进行了操作，逻辑就比较混乱了。

代码的效果上已经OK拉，但代码本身还有非常大的改进空间，加勒个油。

[tanttant]

程序代码

void setup() {

  size(500, 500);
  smooth();
  noStroke();
  background(255);
  frameRate(5);
}


void draw() {
  for (int i=0;i<15;i++) {
    for (int j=0;j<15;j++) {
      for (int k=0;k<12;k++) {

        fill(random(255), random(200), random(170));
        ellipse(35+i*30, 35+j*30, 30, 30);

        fill(random(255), random(150), random(170));
        arc(35+i*30, 35+j*30, 30, 30, 0, random(radians(30*k)));
      }
    }
  }
}

[RavenKwok]

@tanttant

  问题和我#19楼回复Simmel 的类似。

3次for 循环会导致圆和圆弧在相同的位置上被绘制12遍（也就是那个k的最大值）。另外我想知道你把k 写入arc 最后一个结束弧度的参数的目的是什么？是否是希望越后面的圆弧的结束弧度的随机范围越大？