[ 作业提交 ] P5 Intro Course DAY2 (07/22/2012)

[RavenKwok]

请大家以回帖的形式提交第一天的作业，附上代码和显示窗口的效果图。提交的作业我会在下节课(07/29/2012)前审阅完毕。

[miraclemaker07]

郭老师，你好，我想请教一下第一节课作业上的一些问题，有关按钮的作业。问题有二：1我想实现的是按圆形改变背景颜色，按方形在下方产生圆形并且在再次按圆形按钮后等于清屏，按方形按钮需从初始位置（即xC，yC初始值）产生圆形，请问如何实现这一功能？（flag和emblem是为了防止按下鼠标不松手不断地执行程序），程序如下：
float xA, yA, rA, a, flag, emblem;
float pig;
float xB, yB, xC, yC, rC;
float xPos, yPos, wid, hei;
boolean onRollover;

void setup() {
  pig=1;
  a=255;
  size(500, 500);
  background(a);
  smooth();
  fill(a);
  rA=75;
  xA=250;
  yA=200;
  strokeWeight(6);
  ellipse(xA, yA, 2*rA, 2*rA);
  smooth();
  fill(a);
  wid=100;
  hei=50;
  xB=200;
  yB=350;
  strokeWeight(6);
  rect(xB, yB, wid, hei);
  xC=-5;
  yC=430;
  rC=50;
}

void draw() {
  xPos = mouseX;
  yPos = mouseY;

  if (dist( xPos, yPos, xA, yA)<rA) {
    if (mousePressed) {
      if (flag==1) {
        pig=-pig;
        a=255-a;
        flag=-flag;
        background(a);
        stroke(255-a);
        fill(a);
        ellipse(xA, yA, 2*rA, 2*rA);
        rect(xB, yB, wid, hei);
      }
      else {
      }
    }
    else {
      flag=1;
    }
  }
  else {
  }

  if (xPos>xB && xB<xB+wid && yPos>yB && yB<yB+hei && mousePressed) {
    if (emblem==1) {
      if (pig==pig) {
        fill(a);
        stroke(255-a);
        xC=xC+25;
        yC=yC;
        ellipse(xC, yC, rC, rC);
        emblem=-emblem;
      }
      else {
        xC=25;
        yC=yC;
        ellipse(xC, yC, rC, rC);
      }
    }
    else {
    }
  }
  else {
    emblem=1;
  }
}
谢谢！

[miraclemaker07]

2是关于lerp的使用

[Kimi Hu]

上节课上犯困脑袋各种缺氧，结果果然回去要花更多时间复习，下次一定前天晚上不熬夜OTL

交作业！
雪花屏，本来想用i*spacing控制xPos,yPos的移动范围，后来发现其实删掉不用也没太大影响囧一开始总是容易想的复杂
不用P2D速度果然好慢好慢…………还好第一天上课做了笔记！

程序代码

float totalAmount;

void setup()
{
  size(500,500,P2D);
  totalAmount=1000;
}

void draw()
{
  for(int i=0;i<totalAmount;i++)
  {
    for(int j=0;j<totalAmount;j++)
    {
      stroke(random(255));
      point(i,j);
    }
  }
  //noLoop();
}

第二个作业，用上节课学的鼠标控制半径加了两行，发现效果超级棒啊T_T好有Klimt的画的feel！！！美哭了……
每次这种时候就好想学的超厉害有木有！！！然后用P5画画！！！！（重点奇葩……
上代码！

程序代码

float xStart, yStart;
float xPos, yPos;
float spacing;
float rows, cols;
float diam;
float degreeStart, degreeEnd;

void setup()
{
  size(600, 450);
  background(255);
  smooth();
  diam= spacing=30;
  xStart=yStart=diam/2;
  rows=20;
  cols=15;
  colorMode(HSB);
  stroke(20,255,255,140);
}

void draw()
{
  for (int i=0;i<rows;i++)
  {
    for (int j=0;j<cols;j++)
    {
      xPos=xStart+i*spacing;
      yPos=yStart+j*spacing;
      fill(random(360), 100, 255, 140);
    
      //float distance=dist(xPos,yPos,mouseX,mouseY);
      //diam=distance/10;
      ellipse(xPos, yPos, diam, diam);
      
      degreeStart=random(360);
      degreeEnd=degreeStart+random(360);

      fill(random(360), 255, 255, 200);   
      arc(xPos, yPos, diam, diam, radians(degreeStart), radians(degreeEnd));
    }
  }
    noLoop();
}

[Kimi Hu]

另外还有一个问题，上堂课第一个example画圆圈那个，我想用这个效果做一套不同几何形状的，现在问题是圆形的轨迹就是一条线，如果是三角形或者n边形，就有n条轨迹吧？这种情况要怎么写呢？

想了半天，如果是三角形，似乎可以把第二个点重新赋为第一个点，但是肯定是缺少什么条件OTL 不知道if里头该填什么……小郭老师帮忙看看

程序代码

float xPos, yPos;
float x1, y1, x2, y2;
float t;

void setup()
{
  size(500, 500);
  background(0);
  smooth();
  stroke(255);
  strokeWeight(3);
  x1=y1=0;
  x2=150;
  y2=210;
  t=0;
}


void draw()
{
  translate(width/2, height/4);
  xPos=(x2-x1)*t+x1;
  yPos=(y2-y1)*t+y1;
  point(xPos, yPos);

  t+=0.01;
  t=constrain(t, 0, 1);

  if (xPos==x2 && yPos==y2)
  {
    x1=x2;
    y1=y2;

    if (？？？？这里不知道……)
    {
      x2=-150;
      y2=210;
    }
    else
    {
      x2=0;
      y2=0;
    }
    t=0;
  }
}

这是现在做好的圆

[RavenKwok]

@miraclemaker07

 

其实没有使用flag 和emblem 的必要。使用mousePressed 事件就可以了，与draw 以及setup 结构相对独立的。

附上我修改后的你的代码，其中drawAddedEllipse 以及drawTwoButtons 这两个函数是我自己定义的，可能超出了我课程的内容。因为根据你需要的效果，以我们目前学到的知识写起来太过累赘。

程序代码

float rectBtnX,rectBtnY,rectBtnWidth,rectBtnHeight;
float roundBtnX,roundBtnY,roundBtnRadius,roundBtnDiameter;
float addRoundX,addRoundY,addRoundDiameter;
boolean shutterRound;

void setup(){
  size(500,500);
  smooth();
  rectMode(CENTER);
  shutterRound = true;
  
  //Set the parameters of two buttons
  rectBtnX = width/2;
  rectBtnY = height/3*2;
  rectBtnWidth = 120;
  rectBtnHeight = 80;
  
  roundBtnX = width/2;
  roundBtnY = width/3;
  roundBtnRadius = 60;
  roundBtnDiameter = roundBtnRadius*2;
  
  //Set the parameters of the added ellipse
  addRoundDiameter = 20;
  addRoundX = addRoundDiameter/2;
  addRoundY = rectBtnY+rectBtnHeight/2+addRoundDiameter/2;
  
  //Draw the two buttons
  drawTwoButtons(shutterRound);
}

void draw(){
}

void mousePressed(){
  if(dist(mouseX,mouseY,roundBtnX,roundBtnY)<roundBtnRadius){
    shutterRound = !shutterRound;
    drawTwoButtons(shutterRound);
  }else if(mouseX > rectBtnX-rectBtnWidth/2 && mouseX< rectBtnX+rectBtnWidth/2 && mouseY > rectBtnY-rectBtnHeight/2 && mouseY < rectBtnY+rectBtnHeight/2){
    drawAddedEllipse(shutterRound);
  }
}

void drawAddedEllipse(boolean shutter){
  if(shutter){
    fill(255);
    stroke(0);
  }else{
    fill(0);
    stroke(255);
  }
  strokeWeight(6);
  ellipse(addRoundX,addRoundY,addRoundDiameter,addRoundDiameter);
  addRoundX += addRoundDiameter;
}

void drawTwoButtons(boolean shutter){
  if(shutter){
    background(255);
    fill(255);
    stroke(0);
  }else{
    background(0);
    fill(0);
    stroke(255);
  }
  strokeWeight(6);
  ellipse(roundBtnX,roundBtnY,roundBtnDiameter,roundBtnDiameter);
  rect(rectBtnX,rectBtnY,rectBtnWidth,rectBtnHeight);
  addRoundX = addRoundDiameter/2;
}

然后来说一下lerp 的使用。

lerp 可以通过第三个amt 参数来得到两个数值之间的一个中间值。譬如lerp(0,10,0.1); 得到的就是0+(10-0)*0.1，即1。 写成通式的话即lerp(a,b,amt) = a+(b-a)*amt。

在实际运用中通常可以模拟物体的缓冲运动。

举个例子，我们在draw 循环内部使一个球的x，y 位置分别做x=lerp(x,xTartget,0.1); y=lerp(y,yTarget,0.1); 每一帧就会使球向它的目标位置步进距离的0.1，而由于距离逐渐缩短，也就是上述通式中(b-a)这个基数越来越小，球的运动速度也会越来越慢，视觉上看也就是缓冲的效果。

希望对你的困惑有所帮助。

[RavenKwok]

@Kimi Hu

 

雪花屏那个作业貌似totalAmount 没有必要为1000 的，500就足够了。

第二个果然很酷阿，另外你可以尝试着让cols 与 rows 动态的绑定场景大小试试看，也就是无论场景多大，都会生成单位大小为30 的铺满整个场景的阵列。

此外你的第三个问题比较复杂，我目前觉得可以用向量PVector 来实现，但是之前没有做过类似的尝试，我后面几天抽空做个demo 看看。

[Kimi Hu]

@Kimi Hu

 

雪花屏那个作业貌似totalAmount 没有必要为1000 的，500就足够了。

第二个果然很酷阿，另外你可以尝试着让cols 与 rows 动态的绑定场景大小试试看，也就是无论场景多大，都会生成单位大小为30 的铺满整个场景的阵列。

此外你的第三个问题比较复杂，我目前觉得可以用向量PVector 来实现，但是之前没有做过类似的尝试，我后面几天抽空做个demo 看看。

动态绑定大小？那就直接让cols和rows绑定width和height咯
rows=width/diam;
cols=height/diam;
试验了下似乎可行！或者还有什么其他方法？

[RavenKwok]

@Kimi Hu

专门开了一帖解答了下这个问题。

http://www.hudo.it/index.php/topic,415.msg1729.html

[miraclemaker07]

谢谢郭老师。

[GordonXu]

郭老师，我做了个雪花屏可是觉得不是标准的做法.....
import processing.net.*;

import processing.opengl.*;


float [] xPosSeed = new float[8000];
float [] yPosSeed = new float[8000];
float seedIncre;

void setup() {
  size(500, 500);
  frameRate(30);
  for(int i=0;i<xPosSeed.length;i++){
    xPosSeed = random(100);
    yPosSeed = random(100);
  }
  seedIncre = 0.005;
  smooth();
}
void draw() {
  noStroke();
  if(frameCount %3 == 0){
  fill(0);
  }else{
  }
  if(frameCount %3 ==1){
  fill(125);
  }else{
  }
    if(frameCount %3 ==2){
  fill(255);
  }else{
  }
  for (int i=0;i<xPosSeed.length;i++) {
    float xPos = noise(xPosSeed)*width;
    float yPos = noise(yPosSeed)*height;
    ellipse(xPos, yPos,2,2);
    xPosSeed += seedIncre;
    yPosSeed += seedIncre;
  }
}

[GordonXu]

还有一个是那个上课让我们改的那个，我把他改的灰不灰，白不白的但又觉得挺好看的..........
float [] xPos = new float[100];
float [] yPos = new float[100];
float [] xPosSeed = new float[100];
float [] yPosSeed = new float[100];
float seedIncre;
float thres;
float alfa;

void setup() {
  size(500, 500);
  frameRate(30);
  smooth();
  for (int i=0;i<xPosSeed.length;i++) {
    xPosSeed = random(100);
    yPosSeed = random(100);
  }
  seedIncre = 0.005;
  thres = 50;
}
void draw() {

  noStroke();
  fill(alfa,alfa,alfa);

  for (int i=0;i<xPos.length;i++) {
    xPos = noise(xPosSeed)*width;
    yPos = noise(yPosSeed)*height;
    xPosSeed += seedIncre;
    yPosSeed += seedIncre;
  }
  for (int i=0;i<xPos.length;i++) {
    for (int j=i+1;j<xPos.length;j++) {
      float distance = dist(xPos, yPos, xPos[j], yPos[j]);
      if (distance<thres) {
       alfa =200-distance/thres*200;
        stroke(alfa+50,alfa);
        line(xPos, yPos, xPos[j], yPos[j]);
      }
    }
  }
}

[GordonXu]

老师那个用lerp的作业没搞清楚，lerp的用法不清楚啊，那个啥数组神马的

[Eui Gon Jung]

第一个作业
void setup(){
  size(500,500);
  for(int i = 0; i<width; i++)
  {
    for(int p = 0; p<height;p++)
    {
      stroke(random(255));
      point(p,i);
    }
  }
}

void draw(){

}

[RavenKwok]

@GordonXu

 

雪花屏那个无需用到dec06c 的代码的，用一个点阵列就可以达到效果，且你目前的杂点颜色也并非是随机的。

上课改的那个效果很不错（虽然不是我要求的效果），但我猜测你把alfa 参数写入stroke() 里的灰度位置是无心之举吧。

lerp 与数组无关，用法参见本帖#5楼我对@miraclemaker07 问题的解答。