[ 作业讨论 ] DAY3 - Combine for() with drawArc()

[RavenKwok]

作业需要达到的效果图在DAY3 pdf 第29页上。

提示：drawArc() 这个函数课上已要求大家进行改写，已能自动识别start 与end 的位置顺序。现在结合之前的for() 循环的嵌套，随机化drawArc() 的起始与终止角度位置，即可达到和图一样的效果。

[Linyew]

随机颜色。


单色调。

为了方便做了一个以列数，画布和边框空隙定大小的简单运算，并平均留出四周的边框空隙。

程序代码

float startP=60; //边框空隙值
float spacing;
int totalAmount=10; //列数值

void setup() {
  size(500, 500);
  smooth();
  noStroke();
  spacing = (width-startP*2)/(totalAmount-1); //列数，画布和边框空隙定大小的运算
  background(255);
  for (int i=0;i<totalAmount;i++) {
    for (int j=0;j<totalAmount;j++) {
      drawArc(random(80,200),startP+j*spacing, startP+i*spacing, spacing, random(-360,360),random(-360,360));
    }
  }
}

void drawArc(float alpha_,float x_,float y_,float radius_,float start_,float end_){
  float myStart, myEnd;
  float R_ = random(255);
  float G_ = random(255);
  float B_ = random(255);
  if (start_<end_){
    myStart = start_;
    myEnd = end_;
  }
  else{
    myStart = end_;
    myEnd = start_;
  }
  fill(R_,G_,B_,alpha_);
  ellipse(x_,y_,radius_,radius_);
  fill(R_,G_,B_);
  arc(x_,y_,radius_,radius_,radians(myStart),radians(myEnd));
}

[Linyew]

结合了dist()的运算。

程序代码

float myWidth, myHeight;
float xStart = 40;
float yStart = 40;
int totalAmount = 15;

void setup() {
  size(500, 500);
  smooth();
  noStroke();
  myWidth = (width-xStart*2)/(totalAmount-1);
  myHeight = (height-yStart*2)/(totalAmount-1);
}

void draw(){
  background(255);
  for (int i=0;i<totalAmount;i++) {
    for (int j=0;j<totalAmount;j++) {
      float r = dist(mouseX,mouseY,xStart+j*myWidth,yStart+i*myHeight)/5;
      fill(255-r*4, 0, 0, r*10);
      arc(xStart+j*myWidth, yStart+i*myHeight, myWidth, myHeight, radians(0),radians(r*5));
    }
  }
}

[RavenKwok]

@Linyew

drawArc 函数还可以再简化，不需要局部变量myStart 和myEnd。

譬如可以这么写。

程序代码

void drawArc(float alpha_,float x_,float y_,float radius_,float start_,float end_){
  float R_ = random(255);
  float G_ = random(255);
  float B_ = random(255);
  fill(R_,G_,B_,alpha_);
  ellipse(x_,y_,radius_,radius_);
  fill(R_,G_,B_);
  if (start_<end_){
    arc(x_,y_,radius_,radius_,radians(start_),radians(end_));
  }
  else{
    arc(x_,y_,radius_,radius_,radians(end_),radians(start_));
  }
}

[钱 卓 韵]

吃豆子神麻的

程序代码

float d;
int totalAmount;

void setup() {
  size(500, 500);
  smooth();
  colorMode(HSB);
  totalAmount = 20;
}

void draw() {
  background(0);
  noStroke();
  for (int i=0;i<totalAmount;i++) {
    for (int j=0;j<totalAmount;j++) {
      float d = dist(mouseX, mouseY, i*50+25, j*50+25)/1.5;
      fill(d/4, 70+d*20, 255);
      drawArc(i*50+25, j*50+25, 200, d*2+200, 200-d);
      drawArc(i*50+25, j*50+25, 200, d/8+200, d/4);
    }
  }
}

void drawArc(float x_, float y_, float start_, float end_, float r_) {
  arc(x_, y_, r_, r_, radians(start_), radians(end_));
}

另外一个改着改着终于有点像课件里的了

程序代码

void setup() {
  background(0);
  size(500, 500);
  colorMode(HSB);
  smooth();
  noStroke();
}

void draw() {
  background(0);
  for (int i=0;i<100;i++) {
    for (int j=0;j<100;j++) {
      drawArc(i*50+25, j*50+25, 0, 360);
      drawArc(i*50+25, j*50+25, random(360), random(360));
    }
  }
//  noLoop();
} 

void drawArc(float x_, float y_, float start_, float end_) {
  fill(random(20, 255), 200, 250);
  if (start_>end_) {
    arc(x_, y_, 50, 50, radians(end_), radians(start_));
  }
  else {
    arc(x_, y_, 50, 50, radians(start_), radians(end_));
  }
}

[RavenKwok]

@钱 卓 韵

非常不错阿。加勒个油。