[ 作业提交 ] P5 Workshop (2nd) @ xinchejian DAY2

[RavenKwok]

依旧，请大家以回帖的形式提交第二天的作业，附上代码和显示窗口的效果图。提交的作业我会在周六前审阅完毕。

[yuanyuan]

第一个作业，先交上把。。感觉到最后就固定在一个灰度了，点点增多也没有再变白了，不知道是什么原因。
float[]numbers=new float[30];
float r;

void setup (){
size(500,500);
smooth();
background(0);
}
void draw(){
float r=random(5);
fill(255,100);
for(int i=0;i<numbers.length;i++){
ellipse(random(500),random(500),r,r);
}
 }

[RavenKwok]

@yuanyuan

额...可能我上课时没有说清楚，这个貌似不是我要求的效果。我的意思是像电视机的雪花屏那样随机杂色闪烁。其实这样的话代码就更简单了。

目前你的代码是每帧往屏幕上绘制30 个，位置在场景中随机分布，大小随机分布在0-5之间的圆。颜色为透明度在100的白色。

其实我们只需要在每帧随机化场景每个像素的颜色即可。灰度杂色的话即在0-255的范围内，绘制像素的话用point()函数即可，而要操作场景中的每个像素，也就相当于操作一个二维矩阵。两个for() 循环嵌套即可。

代码如下：

程序代码

void setup () {
  size(300, 300, P2D);
  background(0);
}
void draw() {
  for (int i=0;i<width;i++) {
    for (int j=0;j<height;j++) {
      stroke(random(255));
      point(j,i);
    }
  }
}

 

[yuanyuan]

是哦。。。哈哈，。。。

[evoluees]

第二个搞不定阿，只要一排列弧度就都一样的了。

[muddy]

我是ZJ啊，交作业了！

No.1 Grainy Screen

代码：

float[]numbers=new float[400];

void setup() {
  frameRate(30);
  size(numbers.length, numbers.length);
  background(255);
}

void draw() {
  background(255);
  for (int i=0;i<height;i++) {
    for (int j=0;j<numbers.length;j++) {
      numbers[j] = random(100)*(numbers.length/100);
      point(numbers[j], i);
    }
  }
}

运行效果：

[muddy]

No.2 Circle Arc Grid

代码：

float plus, incre;
float[]begins = new float[100];
float[]ends = new float[100];

void setup() {
  colorMode(HSB);
  frameRate(100);
  size(400, 400);
  noStroke();
  smooth();
  for (int k=0;k<100;k++) {
    begins[k]=random(2*PI);
    ends[k]=begins[k]+random(PI/2);
  }
  incre=PI/180;
  plus=0;
}

void draw() {
  background(255);
  for (int i=0;i<10;i++) {
    for (int j=0;j<10;j++) {
      fill(240);
      ellipse(i*40+20, j*40+20, 40, 40);
    }
  }
  for (int i=0;i<10;i++) {
    for (int j=0;j<10;j++) {
      fill(noise(10*i+j)*255, 125, 240);
      arc(i*40+20, j*40+20, 40, 40, begins[10*i+j], ends[10*i+j]+plus);
    }
  }
  plus += incre;
  if (plus>2*PI || plus<-PI/2) {
    incre = -incre;
  }
}

运行效果：

[muddy]

No.3 Custom Shape

代码：

float degree;
float b, d, r;
float[]xPos = new float[16];
float[]yPos = new float[16];
float[]z = new float[16];
int i, j;

void setup() {
  colorMode(HSB);
  rectMode(CENTER);
  frameRate(80);
  size(500, 500);
  background(255);
  noStroke();
  noFill();
  smooth();
  r = 125;
  d = 1;
  b = 0.995;
  for (int i=0;i<z.length;i++) {
    z=random(10);
  }
}

void draw() {
  //fill(255, 30); 
  translate(width/2, height/2);
  //rect(0, 0, width, height);
  degree = -90;
  d *= b; 
  fill(100+noise(10*z[j])*150, 125, 255);
  //stroke(0, 0, 0, 50);
  //strokeWeight(1);

  for (int j=0;j<xPos.length;j++) {
    xPos[j]=d*cos(radians(degree))*(r+noise(z[j])*100);
    yPos[j]=d*sin(radians(degree))*(r+noise(z[j])*100);
    degree += 12;
    z[j] += 0.01;
  }

  beginShape();
  curveVertex(xPos[0], yPos[0]);
  curveVertex(xPos[0], yPos[0]);
  curveVertex(xPos[1], yPos[1]);
  curveVertex(xPos[2], yPos[2]);
  curveVertex(xPos[3], yPos[3]);
  curveVertex(xPos[4], yPos[4]);
  curveVertex(xPos[5], yPos[5]);
  curveVertex(xPos[6], yPos[6]);
  curveVertex(xPos[7], yPos[7]);
  curveVertex(xPos[8], yPos[8]);
  curveVertex(xPos[9], yPos[9]);
  curveVertex(xPos[10], yPos[10]);
  curveVertex(xPos[11], yPos[11]);
  curveVertex(xPos[12], yPos[12]);
  curveVertex(xPos[13], yPos[13]);
  curveVertex(xPos[14], yPos[14]); 
  curveVertex(xPos[15], yPos[15]);
  curveVertex(xPos[15], yPos[15]);
  //vertex(xPos[0], yPos[0]);
  endShape();

  degree = -90;

  for (int j=0;j<xPos.length;j++) {
    xPos[j]=d*cos(radians(degree))*(r+noise(z[j])*100);
    yPos[j]=d*sin(radians(degree))*(r+noise(z[j])*100);
    degree -= 12;
    z[j] += 0.01;
  }

  beginShape();
  curveVertex(xPos[0], yPos[0]);
  curveVertex(xPos[0], yPos[0]);
  curveVertex(xPos[1], yPos[1]);
  curveVertex(xPos[2], yPos[2]);
  curveVertex(xPos[3], yPos[3]);
  curveVertex(xPos[4], yPos[4]);
  curveVertex(xPos[5], yPos[5]);
  curveVertex(xPos[6], yPos[6]);
  curveVertex(xPos[7], yPos[7]);
  curveVertex(xPos[8], yPos[8]);
  curveVertex(xPos[9], yPos[9]);
  curveVertex(xPos[10], yPos[10]);
  curveVertex(xPos[11], yPos[11]);
  curveVertex(xPos[12], yPos[12]);
  curveVertex(xPos[13], yPos[13]);
  curveVertex(xPos[14], yPos[14]); 
  curveVertex(xPos[15], yPos[15]);
  curveVertex(xPos[15], yPos[15]);
  //vertex(xPos[0], yPos[0]);
  endShape();

  if (yPos[15]<20 || yPos[15]>150) {
    b = 1/b;
  }
}

运行效果：

[muddy]

有个问题，第三个作业，在进行各点连线的时候必须把各点的位置像我一样逐一写出来吗@_@
有没有简单的方法，小郭老师？

[RavenKwok]

@muddy

关于第一个作业，效果可以，俺提一个建议：你可以试试看把渲染器改为P2D，运行速度为明显提高 : )

另外我想知道，你这条代码为何要这样写，思路是啥？

程序代码

numbers[j] = random(100)*(numbers.length/100);

第二个作业效果非常不错。代码也干净明了。

第三个的vertex 连线其实你完全可以用for() 循环来完成的，代码如下。

程序代码

beginShape();

curveVertex(xPos[0], yPos[0]);
for (int i=0;i<xPos.length;i++) {
  curveVertex(xPos[i], yPos[i]);
}
curveVertex(xPos[15], yPos[15]);

endShape();

[RavenKwok]

@evoluees

能做哪个就先做掉交吧。

[muddy]

P2D一开效果果然好很多，顺便问下P2D和JAVA2D两种模式的优劣各在哪呢？

那条代码被我改来改去，被我搞复杂了- -其实简化了就是
numbers[j] = random(1)*(numbers.length);
这样应该可以理解了吧？

原来beginShape里面也可以嵌套for循环，赞的～

多谢指点！

@muddy

关于第一个作业，效果可以，俺提一个建议：你可以试试看把渲染器改为P2D，运行速度为明显提高 : )

另外我想知道，你这条代码为何要这样写，思路是啥？

程序代码

numbers[j] = random(100)*(numbers.length/100);

第二个作业效果非常不错。代码也干净明了。

第三个的vertex 连线其实你完全可以用for() 循环来完成的，代码如下。

程序代码

beginShape();

curveVertex(xPos[0], yPos[0]);
for (int i=0;i<xPos.length;i++) {
  curveVertex(xPos[i], yPos[i]);
}
curveVertex(xPos[15], yPos[15]);

endShape();

[muddy]

简化过的第三个作业的代码：

程序代码

float degree;
float b, d, r;
float[]xPos = new float[16];
float[]yPos = new float[16];
float[]z = new float[16];
int i, j;

void setup() {
  colorMode(HSB);
  rectMode(CENTER);
  frameRate(80);
  size(500, 500);
  background(255);
  noStroke();
  noFill();
  smooth();
  r = 125;
  d = 1;
  b = 0.995;
  for (int i=0;i<z.length;i++) {
    z[i]=random(10);
  }
}

void draw() {
  translate(width/2, height/2);
  //fill(255, 30);    
  //rect(0, 0, width, height);
  //stroke(0, 0, 0, 50);
  //strokeWeight(1);
  degree = -90;
  d *= b;  
  fill(100+noise(10*z[j])*150, 125, 255);
  
  for (int j=0;j<xPos.length;j++) {
    xPos[j]=d*cos(radians(degree))*(r+noise(z[j])*100);
    yPos[j]=d*sin(radians(degree))*(r+noise(z[j])*100);
    degree += 12;
    z[j] += 0.01;
  }

  beginShape();
  curveVertex(xPos[0], yPos[0]);
  for (int i=0;i<xPos.length;i++) {
    curveVertex(xPos[i], yPos[i]);
  } 
  curveVertex(xPos[15], yPos[15]);
  endShape();

  beginShape();
  curveVertex(-xPos[0], yPos[0]);
  for (int i=0;i<xPos.length;i++) {
    curveVertex(-xPos[i], yPos[i]);
  } 
  curveVertex(-xPos[15], yPos[15]);
  endShape();

  if (yPos[15]<20 || yPos[15]>150) {
    b = 1/b;
  }
}

[yuanyuan]

想请问一下第三个作业要怎么和声音结合，放一段声音时会根据节奏变化？

[RavenKwok]

@yuanyuan

打开examples > Minim Audio > LoadFile ，把下列代码替换原始例子中的代码，另存运行。

主要的注释我已经在代码中标注。

程序代码

//导入类库
import ddf.minim.*;

//声明初始角度，点的x/y位置，环的原始半径
float degree;
float xPos,yPos;
float baseRadius;

//声明player 与minim 对象
AudioPlayer player;
Minim minim;

void setup()
{
  size(600, 600, P2D);
  
  //初始化minim 以及player
  minim = new Minim(this);
  player = minim.loadFile("groove.mp3",360);
  
  //让音乐循环播放（而不是像例子那样只播放一遍）
  player.loop();
  
  //初始化原始半径
  baseRadius = 200;
}

void draw()
{
  translate(width/2,height/2);
  background(0);
  stroke(255);
  
  for(int degree = 0; degree < 360; degree++){
    //x = cos(cita)*r 而 y = sin(cita)*r，这里的r 由原始半径和音频共同决定，注意这个(baseRadius+(player.left.get(degree)+player.right.get(degree))*100)
    xPos = cos(radians(degree))*(baseRadius+(player.left.get(degree)+player.right.get(degree))*100);
    yPos = sin(radians(degree))*(baseRadius+(player.left.get(degree)+player.right.get(degree))*100);
    //绘制单个点
    point(xPos,yPos);
  }
}

void stop()
{
  player.close();
  minim.stop();
  super.stop();
}