[ 作业提交 ] P5 Intro Course DAY1 & DAY2 (06/17/2012,06/24/2012)

[RavenKwok]

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

[big_fat_meal]

哈，完成一个了，不管好不好，先抢先发了再说。那个画图的实在是太难了，弧度和马赛克还没想到方法搞出来。

float xA = 360;
float yA = 200;
float radiusA = 100;
float changdu = 200;
float kuandu = 100;//全局变量设置
 
void setup(){
  size(500,500);
  smooth();
}
void draw(){
  background(255);
  noStroke();
  fill(31,218,41);
  ellipse(xA,yA,radiusA,radiusA);//圆按钮的位置
  fill(100,168,210);
  rect(100,300,changdu,kuandu);  //长方形按钮的位置
  if(mousePressed == true && dist(mouseX,mouseY,xA,yA) <= radiusA/2) {
      background(#484DDE);//设置按后的背景色
  }
    if(mousePressed == true && 100 <= mouseX && mouseX <= 100+changdu
                            && 300 <= mouseY && mouseY <= 300+kuandu) {
      stroke(22,135,38);
      strokeWeight(10);
      fill(255,123,21);
      ellipse(100,100,50,50);     
      }
}

[RavenKwok]

@big_fat_meal

哈哈，不错，几个问题。

1 - 变量命名不恰当，第三行出现一个radiusA，意为半径A，但绘制时却是作为圆的直径使用的。

2 - 目前的程序是长按按钮时才会有效果，一旦放掉鼠标就会回归初始状态，而作业本意是希望点击按钮可以在两种背景颜色下切换（效果与conditional02 那个例子相似），其实只要把mousePressed 作为一个事件考虑就可以了，无需在draw(){}内判断鼠标是否处于按下状态，再修改一下吧

[big_fat_meal]

照着condition02修改了，可以在松开按钮后仍然保持背景，再点就还原，但是问题出来了，如果这时把鼠标移到外面，就会出现和在园内点击鼠标一样的效果，还是不太明白这个shutter使用的意义，以及为什么鼠标移开会这样，condition02的条件设置很简单，可是这个复杂的解不开。

boolean shutter;
float xA = 360;
float yA = 200;
float diametersA = 100;
float radiusA = diametersA/2;
float changdu = 200;
float kuandu = 100;//全局变量设置
 
void setup(){
  size(500,500);
  smooth();
    shutter = false;
}
void draw(){
  background(255);
  noStroke();
  fill(31,218,41,55);
  ellipse(xA,yA,diametersA,diametersA);//圆按钮的位置
  fill(100,168,210);
  rect(100,300,changdu,kuandu);  //长方形按钮的位置
  if(shutter && dist(mouseX,mouseY,xA,yA) <= radiusA) {
        background(#484DDE,22);//设置按后的背景色
  } 
 
  if(shutter && 100 <= mouseX && mouseX <= 100+changdu
             && 300 <= mouseY && mouseY <= 300+kuandu) {
      stroke(22,135,38);
      strokeWeight(10);
      fill(255,123,21);
      ellipse(100,100,50,50);     
      }
}

void mousePressed(){
  shutter = !shutter;
}

[RavenKwok]

@big_fat_meal

其实完全可以把鼠标的位置判断的命令放到mousePressed 事件中。可以声明两个布尔值，一个为圆形开关的状态，一个为矩形开关的状态，譬如：

void mousePressed(){

  if(dist(mouseX,mouseY,circleX,circleY)<circleRadius){
    shutterCircle = !shutterCircle;
  }
 
  if(mouseX>rectX && mouseX<rectX+rectWidth && mouseY>rectY && mouseY<rectY+rectHeight){
    shutterRect = !shutterRect;
  }
}

然后draw()结构内就可以完全仅通过判断shutterCircle 以及shutterRect 的状态来进行绘制了。

[big_fat_meal]

原来是这么用的噢
boolean shutterCircle;
boolean shutterRect;
float circleX = 360;
float circleY = 200;
float diametersA = 100;
float circleRadius = diametersA/2;
float changdu = 200;
float kuandu = 100;//全局变量设置
 
void setup(){
  size(500,500);
  smooth();
}
void draw(){
  background(255);
  noStroke();
  fill(31,218,41,55);
  ellipse(circleX,circleY,diametersA,diametersA);//圆按钮的位置
  fill(100,168,210);
  rect(100,300,changdu,kuandu);  //长方形按钮的位置
      if(shutterCircle) {
      background(#484DDE);//设置按后的背景色   
      }       
      if(shutterRect) {
      stroke(22,135,38);
      strokeWeight(10);
      fill(255,123,21);
      ellipse(100,100,50,50);   
      }   
}

void mousePressed(){
  if(dist(mouseX,mouseY,circleX,circleY)<circleRadius){
        shutterCircle = !shutterCircle;
        }
  if(100 <= mouseX && mouseX <= 100+changdu
             && 300 <= mouseY && mouseY <= 300+kuandu){
        shutterRect = !shutterRect;
        }
}

[RavenKwok]

@big_fat_meal

其实还可以再改善的，我写了下，目前功能是这样的，按圆形按钮随机改变背景颜色，且不会覆盖按钮本身，按矩形按钮则会在场景的随机位置添加一个白色圆点。改变背景颜色的同时，圆点会被清除。此外重新声明了一些变量，便于管理。你可以参考一下。

程序代码

//定义圆形按钮的属性
float circleX, circleY;
float circleRadius = 50;
color circleColor = color(31, 218, 41);

//定义矩形按钮的属性
float rectX, rectY;
float rectWidth = 100;
float rectHeight= 80;
color rectColor = color(100, 168, 210);

color bgColor;

void setup() {
  size(500, 500);
  background(0);
  smooth();
  ellipseMode(RADIUS);
  rectMode(CENTER);
  circleX = width/3;
  circleY = height/2;
  rectX = width/3*2;
  rectY = height/2;

  //绘制按钮
  stroke(255);
  strokeWeight(3);
  fill(circleColor);
  ellipse(circleX, circleY, circleRadius, circleRadius);

  fill(rectColor);
  rect(rectX, rectY, rectWidth, rectHeight);
}
void draw() {
}

void mousePressed() {
  if (dist(mouseX, mouseY, circleX, circleY)<circleRadius) {
    
    bgColor = color(random(255), random(255), random(255));//随机生成背景颜色
    background(bgColor);//填充背景颜色
    
    //绘制按钮
    stroke(255);
    strokeWeight(3);
    fill(circleColor);
    ellipse(circleX, circleY, circleRadius, circleRadius);

    fill(rectColor);
    rect(rectX, rectY, rectWidth, rectHeight);
    
  }
  if (rectX-rectWidth/2 <= mouseX && mouseX <= rectX+rectWidth/2 && rectY-rectHeight/2 <= mouseY && mouseY <= rectY+rectHeight/2) {
    //随机添加白色圆点
    noStroke();
    fill(255);
    ellipse(random(width),random(height),10,10);
  }
}

[big_fat_meal]

现在画到这个程度了，难的都没画出来 


size(727,578);
smooth();
background(#F1FA08);
float x1 =210;
float y1 =240;
float x2= 280;
float y2= 220;
float x3= 210;
float y3= 60;
float L1=dist(x1,y1,x3,y3);
float L2=dist(x2,y2,x3,y3);
float ratio=L2/L1;
float k1 = (y2-y1)/(x2-x1);
float k = (y2-y3)/(x2-x3);

strokeWeight(6);//竖线
strokeCap(SQUARE);
line(100,120,100,330);
strokeWeight(2);
line(260,30,260,70);
strokeWeight(3);
strokeCap(SQUARE);
line(300,70,300,130);
line(310,70,310,130);
line(600,270,600,360);
line(620,270,620,350);

//横线
strokeWeight(;
strokeCap(SQUARE);
line(650,20,700,20);
line(650,70,700,70);
strokeWeight(4);
line(650,40,700,40);
line(650,110,700,110);
line(650,150,700,150);

strokeWeight(2);
line(650,130,700,130);
line(30,150,80,150);

//triangle
noStroke();
fill(#DB2C26);
triangle(200,20,220,40,180,40);
fill(#425539);
triangle(500,20,500,60,540,40);
fill(#17A579);
triangle(600,70,590,110,640,110);
fill(#80810A);
triangle(620,110,660,160,550,160);
fill(#BC1E46);
triangle(600,210,640,210,620,260);
fill(#141046);
triangle(680,250,690,250,685,265);
fill(#2452C4);
triangle(678,285,689,285,685,265);
fill(#242334);
triangle(400,435,520,435,460,450);
fill(#A1BC9C);
triangle(450,450,480,450,470,500);

fill(#201F24);
triangle(250,380,280,380,280,430);//背靠背的三角形
fill(#428B33);
triangle(310,380,280,380,280,430);

fill(#E8CCCC);
ellipse(140,300,50,50);
fill(#CBA6A6,187);
rect(150,150,200,200);

fill(0);
triangle(210,480,210,280,250,480);
fill(#02010A);

triangle(210,280,210,240,250,260);
fill(#02010A);
triangle(250,260,290,240,290,280);
fill(#3E4689);
triangle(210,280,250,260,290,280);

fill(#3E4689);
triangle(210,240,250,260,290,240);

stroke(0);
fill(255);
triangle(x1,y1,x2,y2,x3,y3);//斑马线的三角形
/**********************************
for(int i=5;i<=90;i+=5){

line(x1,y1-i,x2-sqrt(sq(i*ratio)/(1+sq(k)),y2-abs(k)*sqrt(sq(i*ratio)/(1+sq(k)));
}
//斑马线
******************************************/

[lolaee]

void setup() {
  size(1600, 1325);
  colorMode(RGB);
  smooth();
}

void draw() {
  background(#f3c367);

  strokeWeight(10);
  stroke(249,160,68,50);
  fill(255, 90, 130, 80);
  rect(341, 325, 445, 381);
  // This is the big pink.

  noStroke();
  fill(0, 0, 0);
  rect(150, 233, 202, 19);
  // this is the left top boat.
  strokeWeight(1);//STROKE WEITGHT
  stroke(0, 50); 
  fill(235, 214, 185);
  triangle(258, 102, 183, 233, 315, 233);
  fill(0, 0, 0);
  triangle(258, 102, 275, 66, 286, 102);
  triangle(222, 165, 285, 165, 258, 102);
  stroke(259, 187, 68);
  triangle(204, 145, 222, 165, 232, 145);
  triangle(204, 145, 194, 130, 215, 130);
  triangle(225, 145, 234, 130, 215, 130);
  triangle(315, 164, 285, 164, 300, 183);
  // this is the left top boat.
  stroke(0, 60);
  fill(174, 195, 196);
  ellipse(145, 325, 65, 65);

  // blue ball

  fill(0);
  quad(88, 444, 88, 450, 189, 450, 189, 444);   
  //  line under blue ball

  strokeWeight(10);
  stroke(249,160,68,50);
  fill(0, 0, 0);
  rect(241, 343, 19, 460);
  // vertical line

  fill(255, 178, 130, 80);
  ellipse(339, 655, 133, 133);
  // overlap ellipse
  noFill();
  strokeWeight(10);
  stroke(0);
  arc(291, 884, 202, 174, 0, PI);
  noStroke();
  fill(41, 44, 49);
  triangle(172, 1045, 371, 1045, 276, 1120);
  triangle(244, 1120, 304, 1120, 276, 1150);
  triangle(270, 1150, 282, 1150, 276, 1168);
  //bottom back triangles}


//To be continued....感觉画形状的语句都用了。。下面就是重复。。。

忘记了如何“点击储存”事件怎么写。。于是截屏（下面的部分没有截上）

[RavenKwok]

@lolaee

quad那条绘制也可以用自定义形状来取代，用法更加灵活。

http://processing.org/reference/beginShape_.html

保存当前帧内容的命令是saveFrame();

在鼠标事件中调用这条命令即可。

[RavenKwok]

@big_fat_meal

绘制圆弧的命令 arc。

http://processing.org/reference/arc_.html，六个参数分别为圆弧中心的横坐标，纵坐标，宽，高，起始弧度，终止弧度。

绘制梯形的命令 quad。

http://processing.org/reference/quad_.html，八个参数分别为四个点的横纵坐标。

 

[lailailailai]

作业提交：
蓝色小球运动轨迹，

问题：
蓝色小球运动过的轨迹会留下蓝色的阴影的印子，无法去除。
求解，谢谢，老师

//Define a variable of position
float x=30;
float xpos,ypos;
float xspeed= 3.0;
float yspeed= 2.0;

float xdirection= 1;
float ydirection= 1;

float radius= 15.0;

void setup() {
  size(640, 480, P2D);
  smooth();
  noStroke();
  background(255);
}

void draw() {
 
  fill(0,12);
rect(random(xpos),random(ypos),width,height);
fill(0,0,255,50);
xpos = xpos + ( xspeed * xdirection );
ypos = ypos + ( yspeed * ydirection );

//x+=speed;
  if (xpos < 0 || xpos > width) {
    xdirection*=-1 ;
}
  if (ypos < 0 || ypos > height) {
    ydirection*=-1 ;
  }
 ellipse(xpos+x/4,ypos+x/4,x,x);
 
}

[lolaee]

相关bottom我写了一段事件，没有写出来
http://processing.org/learning/topics/button.html
这个参考update（）不明白。。还有就是int x（怎么突然出来一个x？）
“boolean overCircle(int x, int y, int diameter)
{
  float disX = x - mouseX;
  float disY = y - mouseY;
  if(sqrt(sq(disX) + sq(disY)) < diameter/2 ) {
    return true;
  } else {
    return false;
  }
}”
感谢。

[RavenKwok]

@lolalee

update() 是这个例子的作者自己定义的一个函数，而int x, int y 是update() 自定义函数的参数。

void update(int x, int y)
{
  if( overCircle(circleX, circleY, circleSize) ) {
    circleOver = true;
    rectOver = false;
  } else if ( overRect(rectX, rectY, rectSize, rectSize) ) {
    rectOver = true;
    circleOver = false;
  } else {
    circleOver = rectOver = false;
  }
}

以上这一段是对于update() 函数的定义。

而draw() 中update(mouseX, mouseY); 则是对update() 函数的调用。

你那本橙色的书慢慢往后看就会明白的

[RavenKwok]

@lailailailai

  几个问题。

1，那个用来达到残影效果的遮盖的位置为何是随机的？（这一点导致了你所说的印子的问题）

2，变量x 你是用其作为圆的直径使用的，所以x 的名字不是很恰当，可以使用diam 或者其他。

3，xPos 与yPos 指定的是圆的位置，为何在绘制中要加上一个x/4？