« 上一篇主题 下一篇主题 »
页: [1]   向下

作者 主题: [ 作业提交 ] P5 Intro Course DAY1 (07/15/2012)  (阅读 9208 次)

RavenKwok

  • Sr. Member
  • ****
  • 帖子: 277
  • Artist/ Animator/ Coder/ Cynical Asshole
[ 作业提交 ] P5 Intro Course DAY1 (07/15/2012)
« 于: 七月 16, 2012, 12:28:20 上午 »
请大家以回帖的形式提交第一天的作业，附上代码和显示窗口的效果图。提交的作业我会在下节课(07/22/2012)前审阅完毕。
已记录

Kimi Hu

  • Newbie
  • *
  • 帖子: 5
Re: [ 作业提交 ] P5 Intro Course DAY1 (07/15/2012)
« 回复 #1 于: 七月 17, 2012, 07:03:56 下午 »
居然是第一个0_0第一个作业有几个问题：
1.还是想显示底纹，但是Add file放了PImage进去似乎没有显示……不知是何原因？
2.for循环黑白交错格子那里是问了程序朋友写的，但并不是很理解（汗 请教小郭老师其他方法！
3.arc圆弧出来的端点都是一样大的，按照Kandinsky的原画端点是有稍微缩小的，有没有什么语句可以做到？
4.手绘的深色边际效果…………查了blend和filter的reference,似乎还是混色或者是图片做效果，能不能通过分析绘制的边际来绘制？
好像要求太高了汗……
谢谢小郭老师 ;D

程序代码
PImage photo;
photo=loadImage("wassilyxxx.jpg");
image(photo, 0, 0,width,height);

size(800, 600);
smooth();
noStroke();
background(#ffe555);
strokeCap(SQUARE); 

//////////////////////////////////////////////////////rect
fill(#faa090);
rect(160, 150, 210, 180);//big pink rect
fill(#fffad8);
rect(190, 200, 20, 20);//little white rect left
fill(#c1da8c);
rect(300, 175, 10, 10);//little green left
fill(#fffad8);
rect(330, 237, 10, 15);//little white right
fill(#c1da8c);
rect(350, 60, 35, 30);//little green right
fill(0);
rect(249, 314, 100, 50);//with 2 tri rect
fill(0);
rect(420, 355, 180, 20);//long black rect
fill(#faa090);
rect(530, 425, 35, 20);

//////////////////////////////////////////////////////triangle

//most left
fill(0);
triangle(75, 290, 90, 310, 50, 310);
triangle(85, 280, 95, 300, 75, 290);

//left top
fill(#f7e5b7);
triangle(120, 50, 150, 110, 90, 110);//left top tri white
fill(0);
triangle(120, 50, 133, 75, 107, 75);//left top tri black
triangle(130, 25, 140, 50, 120, 50);//left top tri black small
triangle(133, 75, 150, 75, 143, 82);//left top tri black smalll
triangle(90, 55, 103, 55, 95, 60);//3 small left
triangle(103, 55, 113, 55, 110, 60);//3 small right
triangle(95, 60, 110, 60, 105, 70);//3 small bottom

//left bottom
fill(#3e2844);
triangle(90, 500, 180, 500, 135, 530);//purple tri
fill(0);
triangle(120, 530, 150, 530, 135, 550);
triangle(130, 550, 140, 550, 135, 560);

//big tri
triangle(250, 25, 270, 60, 225, 60);//top 
fill(255);
stroke(0);
strokeWeight(5);
triangle(250, 70, 320, 280, 250, 310);//with lines tri
fill(0);
noStroke();
triangle(249, 360, 300, 550, 250, 550);//black tri
fill(#3e2844);
triangle(249, 550, 270, 570, 230, 570);//purple
fill(0);
triangle(340, 410, 410, 410, 380, 490);
fill(#3e2844);
triangle(340, 410, 375, 410, 380, 490);//purple black tri
fill(#9dbcdb);
triangle(380, 490, 415, 490, 405, 505);


//middle
fill(#9bb4d7);
triangle(510, 15, 550, 40, 510, 60);//top
fill(#7f6b9d);
triangle(510, 90, 520, 120, 510, 125);
fill(0);
triangle(510, 125, 490, 170, 470, 160);
fill(#271f2b);
triangle(470, 160, 480, 200, 445, 200);

triangle(560, 130, 570, 160, 550, 160);

//tixing
fill(255);
triangle(425, 210, 510, 210, 450, 260);

///////
int start = 0; // 0 = white, 1 = black
for (int y=210;y<255;y+=7) 
{
  int sign = start;
  if (start == 0) {
    start = 1;
  } 
  else {
    start = 0;
  }

  for (int x=425+(y-210)/2;x<503-(y-210);x+=7)
  {
    if (sign == 1) {
      fill(0);
      sign = 0;
    }
    else {
      fill(255);
      sign = 1;
    }
    quad(x, y, x+7, y, x+12, y+8, x+3, y+8);
  }
}

//////


fill(#3e2844);
triangle(425, 210, 450, 260, 400, 260);

fill(0);
triangle(511, 210, 530, 260, 450, 260);

triangle(425, 260, 435, 320, 420, 320);
triangle(490, 260, 500, 320, 485, 320);

triangle(480, 480, 610, 480, 550, 505);
fill(#af9bc5);
triangle(510, 505, 550, 505, 540, 555);

//right
fill(0);
triangle(650, 70, 690, 105, 640, 105);
fill(#5f525a);
triangle(660, 105, 705, 170, 590, 170);
fill(#cab8b5);
triangle(640, 245, 690, 245, 670, 310);

fill(0);
triangle(740, 300, 750, 300, 745, 320);
fill(#50304a);
triangle(745, 320, 750, 345, 740, 345);

//////////////////////////////////////////////////////line
//left
stroke(0);
strokeWeight(2);
line(40, 210, 100, 210);

stroke(#392622);
strokeWeight( ;
line(120, 165, 120, 380);

stroke(#392622);
strokeWeight(2);
line(300, 25, 300, 75);

stroke(0);
strokeWeight(4);
line(330, 103, 330, 180);
line(345, 103, 345, 180);

stroke(0);
strokeWeight(4);
line(360, 400, 410, 400);

//middle
strokeWeight(2);
line(520, 180, 600, 180);
line(530, 190, 590, 190);
strokeWeight(1);
line(560, 160, 560, 260);
line(560, 210, 550, 255);
line(560, 210, 570, 255);
line(560, 275, 560, 340);

line(520, 450, 580, 450);
line(510, 460, 590, 460);

//right
strokeWeight(1);
line(650, 170, 645, 235);
line(650, 170, 655, 235);
line(650, 170, 665, 235);
line(650, 170, 675, 235);

stroke(0);
strokeWeight(3);
line(670, 320, 670, 405);
stroke(#624a60);
line(690, 320, 690, 400);

stroke(0);
strokeWeight(11);
line(705, 25, 760, 25);
strokeWeight(3);
line(705, 50, 760, 50);
strokeWeight( ;
line(705, 80, 760, 80);
strokeWeight(6);
line(705, 125, 760, 125);
strokeWeight(3);
line(705, 160, 760, 160);

//////////////////////////////////////////////////////quad
fill(0);
quad(73, 110, 167, 110, 165, 115, 75, 115);
quad(545, 205, 575, 205, 570, 210, 548, 210);
quad(645, 235, 675, 235, 673, 240, 647, 240);

//////////////////////////////////////////////////////ellipse
noStroke();
fill(#bde0d0);
ellipse(65, 175, 37, 37);

fill(#f3d8c0);
ellipse(160, 315, 65, 65);

fill(255);
ellipse(450, 405, 35, 35);

//////////////////////////////////////////////////////arc
noFill();
stroke(0);
strokeWeight(10);
arc(135, 410, 95, 95, radians(0), radians(180));

strokeWeight(15);
arc(515, 130, 125, 125, radians(165), radians(375));

strokeWeight(3);
arc(405, 540, 25, 25, radians(0), radians(180));

strokeWeight( ;
arc(610, 400, 40, 40, radians(160), radians(380));

strokeWeight(7);
stroke(#402636);
arc(640, 440, 50, 50, radians(190), radians(350));

stroke(0);
strokeWeight(3);
arc(665, 450, 40, 40, radians(0), radians(180));

stroke(#734750);
strokeWeight( ;
arc(715, 525, 30, 30, radians(340), radians(560));

//////////////////////////////////////////////////////other
//rect cross ellipse
noStroke();
fill(#54293d);
triangle(160, 285, 187, 331, 160, 331);
arc(160, 315, 65, 65, radians(270), radians(390));

//tri lineeeeeeee
stroke(0);
strokeWeight(5);
line(249, 146, 275, 138);
line(249, 162, 275, 152);
line(249, 176, 279, 164);
line(249, 186, 282, 174);
line(249, 196, 285, 183);
line(249, 205, 288, 191);
line(249, 216, 291, 200);
line(249, 227, 294, 209);
line(249, 238, 298, 219);
line(249, 250, 300, 229);
line(249, 263, 304, 240);
line(249, 277, 308, 252);
line(249, 294, 316, 267);

fill(0);
triangle(250, 70, 265, 125, 250, 130);

strokeWeight(5);
line(250, 70, 250, 310);

//two purple tri
fill(#634e76);
noStroke();
triangle(249, 314, 349, 314, 297, 340);
fill(#a697ba);
triangle(297, 340, 349, 364, 249, 364);




-----------------------------------------------------------------------
圆球按钮：

程序代码

float xA;
float yA;
float diam;

void setup()
{
  size(500, 500);
  background(0);
  smooth();
  noStroke();
  xA=250;
  yA=250;
  diam=100;
  colorMode(HSB, 100);
}


void draw()
{
  ellipse(xA, yA, diam, diam);
}


void mouseMoved()
{
  fill(44);
  ellipse(xA, yA, diam, diam);
}


void mousePressed() 
{
  float k=dist(mouseX, mouseY, xA, yA);
  if (k<diam/2) 
  {
    fill(random(100), random(200), 200);
    ellipse(xA, yA, diam/2, diam/2);
  }
}

-----------------------------------------------------------------------
方形按钮：

程序代码

float xB;
float yB;
float widthB;
float heightB;

void setup()
{
  size(500, 500);
  background(0);
  smooth();
  noStroke();
  xB=200;
  yB=180;
  widthB=100;
  heightB=100;
  colorMode(HSB, 100);
}


void draw()
{
  rect(xB, yB, widthB, heightB);
}


void mouseMoved()
{
  fill(HSB,333,60,20);
  rect(xB, yB, widthB, heightB);
}


void mousePressed() 
{
  if (mouseX>xB && mouseX<xB+widthB
   && mouseY>yB && mouseY<yB+heightB)
  {
    fill(random(360), 40, random(200));
    rect(20, 20, width-40, height-40);
  }
}


已记录

RavenKwok

  • Sr. Member
  • ****
  • 帖子: 277
  • Artist/ Animator/ Coder/ Cynical Asshole
Re: [ 作业提交 ] P5 Intro Course DAY1 (07/15/2012)
« 回复 #2 于: 七月 17, 2012, 09:49:12 下午 »
@Kimi Hu

 :)

1的问题是由于你在image() 命令后执行了background() 命令，也就是用#ffe555 颜色铺满了整个屏幕，也就把图片盖住了，所以没有显示。

2的问题我本意没有想要你们做出网格的，当然用for 结构写完全可以。此外也可以用texture() 命令调用一张黑白网格的位图贴在多边形的表面，有兴趣的话可以看一下 http://processing.org/reference/texture_.html

3的问题没有预制的命令，但依然可以达到这个效果，可以把整个圆弧分成多段，用for 循环分别设置每一段的粗细并绘制。

譬如像这样：

程序代码
float x,y;
float startDegree,endDegree,midDegree;
float increment;
int count;

void setup(){
  size(500,500);
  background(255);
  frameRate(30);
  smooth();
  x = width/2;
  y = height/2;
  startDegree = 180;
  increment = 5;
  count = 36;
  endDegree = startDegree+increment*count;
  midDegree = (startDegree+endDegree)/2;
}
void draw(){
  background(255);
  for(int i=0;i<count;i++){
    float thickness = (90-abs(startDegree+i*increment-midDegree))/5;
    strokeWeight(thickness);
    arc(x,y,200,200,radians(startDegree+i*increment),radians(startDegree+(i+1)*increment));
  }
}

4的问题可以把你绘制的对象作为一个PGraphics 对象，blend 和filter 对PGraphics 同样是有效的，而不仅仅是PImage。 http://processing.org/reference/PGraphics.html
« 最后编辑时间: 七月 17, 2012, 09:51:29 下午 作者 RavenKwok »
已记录

Kimi Hu

  • Newbie
  • *
  • 帖子: 5
Re: [ 作业提交 ] P5 Intro Course DAY1 (07/15/2012)
« 回复 #3 于: 七月 17, 2012, 11:13:00 下午 »
画了会儿画回来就看到回复了，等回头去试验！
谢谢小郭老师 :D
已记录

Eui Gon Jung

  • Newbie
  • *
  • 帖子: 4
Re: [ 作业提交 ] P5 Intro Course DAY1 (07/15/2012)
« 回复 #4 于: 七月 20, 2012, 11:54:37 下午 »
第一个作业。我虽然没有结束，但是我觉得麻烦的图形都搞定了。



void setup()
{
  size(700,600);
  color bgc = color(232,189,14);
  background(bgc);


  color lightBlue = color(131,173,185);
  color midPurple = color(57,39,98);
  color darkPurple = color(26,18,44);
  color lightPurple;
}


void draw()
{
 
  /*=================================
   =============LEFT-TOP==============
   ===================================*/


  noStroke();
  smooth();
  fill(0);
  triangle(100,50,95,70,105,70);


  fill(240,235,140);
  triangle(95,70,65,130,125,130);


  fill(0);
  triangle(95,70,80,100,110,100);


  triangle(110,100,120,100,115,105);


  triangle(75,100,70,95,80,95);
  triangle(70,95,65,90,75,90);
  triangle(80,95,75,90,85,90);


  fill(0);
  quad(55,130,135,130,132,140,58,140);


  /*=================================
   =============MID-LEFT==============
   ===================================*/
  rect(95,170,5,200);
  fill(lightBlue);




  ellipse(50,180,30,30);


  stroke(0);
  strokeWeight(3);
  line(20,230,80,230);


  noStroke();
  fill(0);
  triangle(50,280,40,290,60,300);
  triangle(40,290,20,310,60,310);


  /*=================================
   =============BOT-LEFT==============
   ===================================*/
  arc(120,410,90,90,0,PI);
  fill(bgc);
  arc(120,400,80,80,0,PI);






  /*=================================
   =============MID-PINKBOX-AREA======
   ===================================*/
  fill(240,111,146);
  rect(140,165,180,140);
  fill(250,187,204);
  ellipse(140,290,50,50);
  fill(137,36,63);
  arc(140,290,50,50,-PI/2,0.6);
  triangle(140,280,140,305,161,305);


  //On the top of the pinckbox area


  fill(250,248,222);
  stroke(0);
  strokeWeight(5);
  triangle(200,80,200,280,280,260);


  fill(0);
  triangle(200,80,200,120,216,116);


  noStroke();
  fill(0);
  quad(198,283,290,330,290,283,198,330);


  fill(4,21,39);
  quad(198,283,290,283,198,330,290,330);


  /*=================================
   =============MID-TOP==============
   ===================================*/


  fill(0);
  arc(400,150,150,150,-PI-0.1,0.1);
  fill(bgc);
  arc(400,160,140,140,-PI-0.1,0.1);


  fill(0);
  triangle(450,140,440,170,460,170);
  stroke(0);
  strokeWeight(1);
  line(450,170,450,280);
  line(400,185,500,185);
  line(420,190,480,190);
  quad(430,210,470,210,465,220,435,220);
  line(450,220,440,270);
  line(450,220,460,270);


  /*=================================
   =============MID-TOP==============
   ===================================*/
  noStroke();
  fill(midPurple);
  triangle(400,130,400,100,410,125);
  fill(0);
  triangle(400,130,360,160,380,170);
  fill(darkPurple);
  triangle(360,160,345,200,375,200);


  //Zebra Triangle
  fill(0);
  triangle(340,205,410,205,360,250);


  //1st row
  for(int i = 0; i<=60; i+=10)
  {
    fill(255);
    quad(340+i,205,345+i,205,347+i,210,342+i,210);
  }


  //2nd row
  for(int i = 0; i<=50; i+=10)
  {
    fill(255);
    quad(347+i,210,352+i,210,354+i,215,349+i,215);
  }


  //3rd row
  for(int i = 0; i<=50; i+=10)
  {
    fill(255);
    quad(344+i,215,349+i,215,351+i,220,346+i,220);
  }
  //4th row
  for(int i = 0; i<=30; i+=10)
  {
    fill(255);
    quad(351+i,220,357+i,220,358+i,225,353+i,225);
  }
  //5th row
  for(int i = 0; i<=30; i+=10)
  {
    fill(255);
    quad(348+i,225,353+i,225,355+i,230,350+i,230);
  }
  //6th row
  for(int i = 0; i<=20; i+=10)
  {
    fill(255);
    quad(355+i,230,361+i,230,362+i,235,357+i,235);
  }
  //7th row
  for(int i = 0; i<=20; i+=10)
  {
    fill(255);
    quad(352+i,235,357+i,235,359+i,240,354+i,240);
  }
  //8th row
  fill(255);
  quad(359,240,365,240,366,245,361,245);
  quad (356,245,361,245,363,250,358,250);
 
  fill(darkPurple);
  triangle(410,205,360,250,430,250);
  fill(midPurple);
  triangle(340,205,360,250,320,250);
}

已记录

Eui Gon Jung

  • Newbie
  • *
  • 帖子: 4
Re: [ 作业提交 ] P5 Intro Course DAY1 (07/15/2012)
« 回复 #5 于: 七月 21, 2012, 12:53:09 上午 »
第二个作业。




boolean effectOrNot = true;
void setup()
{
  size(500,500);
  //Circle button
  smooth();
  strokeWeight(1);
  fill(255);
  ellipse(50,100,50,50);
  //Square button
  rect(25,150,50,50);
  //Screen
  rect(100,50,300,300);
}

void mousePressed()
{
  {
    //Circle Function
    if(mouseX>=25 && mouseX <=75 && mouseY >=75 && mouseY<=125)
    {
      if(effectOrNot)
      {
        fill(0);
        ellipse(50,100,50,50);
        fill(93,214,114);
        rect(100,50,300,300);
        effectOrNot = false;
      }
      else
      {
        fill(255);
        ellipse(50,100,50,50);
        effectOrNot = true;
        fill(214,93,206);
        rect(100,50,300,300);
      }
    }
    //Square Function
    if(mouseX>=25&&mouseX<=75&&mouseY>=150&&mouseY<=200)
    {
      for(int i = 0; i<30; i++)
      {
        point(random(100,400),random(50,350));
      }
    }
  }
}




void draw()
{
  if(pmouseX>=100&&pmouseY>=50&&pmouseX<=400&&pmouseY<=350)
  {
    if(mouseX>=100&&mouseY>=50&&mouseX<=400&&mouseY<=350)
    {
      line(pmouseX,pmouseY,mouseX,mouseY);
    }
  }
}
已记录

GordonXu

  • Newbie
  • *
  • 帖子: 6
Re: [ 作业提交 ] P5 Intro Course DAY1 (07/15/2012)
« 回复 #6 于: 七月 21, 2012, 02:09:19 下午 »
郭老师，如何把移动过程中的残影弄走而不清空画面上其他的图形？求指导 :-[
已记录

GordonXu

  • Newbie
  • *
  • 帖子: 6
Re: [ 作业提交 ] P5 Intro Course DAY1 (07/15/2012)
« 回复 #7 于: 七月 21, 2012, 02:21:57 下午 »
还有那个在三角形里黑白格格是一个个长方形画上去的还是......郭老师麻烦说一下，谢谢
已记录

liza_scj

  • Newbie
  • *
  • 帖子: 1
Re: [ 作业提交 ] P5 Intro Course DAY1 (07/15/2012)
« 回复 #8 于: 七月 21, 2012, 04:51:01 下午 »
郭老师，

作业实在做得不好 只有 周六有时间 复习和做功课 arc都不知道如何画出来 有想过用两个圆叠加可以做出 但好像是个很笨的办法，另外big triangle中的平行线 还有黑白格子填空 如何做？好难！！！ :-[

作业1：

size(800,600);
background(255,255,100);
smooth();
noStroke();
fill(255,142,164);
rect(150,150,200,180);
fill(0,210,255,80);
ellipse(150,300,75,75);
fill(250);
rect(190,200,16,18);
stroke(0);
strokeWeight(4);
triangle(250,50,250,310,315,280);
fill(0);
noStroke();
triangle(250,25,230,49,270,49);
triangle(250,310,250,350,290,330);
triangle(290,330,330,310,330,350);
fill(90,72,152);
noStroke();
triangle(250,310,290,330,330,310);
triangle(290,330,250,350,330,350);
fill(0);
noStroke();
triangle(250,350,250,500,290,500);
fill(90,72,152);
noStroke();
triangle(250,500,235,520,265,520);
strokeWeight(7);
stroke(0);
line(100,155,100,380);
strokeWeight(2);
line(300,25,300,80);
strokeWeight(4);
line(320,110,320,170);
line(330,110,330,170);
fill(191,234,182);
noStroke();
rect(340,75,30,25);

...........
后面没时间做 也不下去了 不好意思哎！
已记录

RavenKwok

  • Sr. Member
  • ****
  • 帖子: 277
  • Artist/ Animator/ Coder/ Cynical Asshole
Re: [ 作业提交 ] P5 Intro Course DAY1 (07/15/2012)
« 回复 #9 于: 七月 21, 2012, 08:49:53 下午 »
@Eui Gon Jung

 :)

你的代码没有办法正常编译的，可以看一下我摘录的这段：

程序代码
void setup()
{
  size(700,600);
  color bgc = color(232,189,14);
  background(bgc);


  color lightBlue = color(131,173,185);
  color midPurple = color(57,39,98);
  color darkPurple = color(26,18,44);
  color lightPurple;
}

你可以看到你声明的几个变量都在setup 结构内，也就意味着它们都是局部变量，仅在setup 结构内可以被正常调用。修正方法如下：

程序代码
color lightBlue = color(131,173,185);
color midPurple = color(57,39,98);
color darkPurple = color(26,18,44);
color lightPurple;
color bgc = color(232,189,14);

void setup()
{
  size(700,600);
  background(bgc);
}

另外，你的第二个作业中的圆形按钮的区域判断可以通过比较鼠标到圆心的距离来和半径之间的关系。目前你的代码效果乍看虽然没有问题，但实质上圆形按钮的热区是它的外接矩形，而不是圆形本身。
« 最后编辑时间: 七月 21, 2012, 09:00:18 下午 作者 RavenKwok »
已记录

RavenKwok

  • Sr. Member
  • ****
  • 帖子: 277
  • Artist/ Animator/ Coder/ Cynical Asshole
Re: [ 作业提交 ] P5 Intro Course DAY1 (07/15/2012)
« 回复 #10 于: 七月 21, 2012, 09:12:39 下午 »
@GordonXu

引用
郭老师，如何把移动过程中的残影弄走而不清空画面上其他的图形？求指导

这个我木有理解你的意思  :(

引用
还有那个在三角形里黑白格格是一个个长方形画上去的还是......郭老师麻烦说一下，谢谢

这个涉及到for 循环的使用，也是Day2 的主要内容之一，明天的课上会详细解说。目前可以先搁一边的。 :)
« 最后编辑时间: 七月 21, 2012, 09:16:39 下午 作者 RavenKwok »
已记录

RavenKwok

  • Sr. Member
  • ****
  • 帖子: 277
  • Artist/ Animator/ Coder/ Cynical Asshole
Re: [ 作业提交 ] P5 Intro Course DAY1 (07/15/2012)
« 回复 #11 于: 七月 21, 2012, 09:15:56 下午 »
@liza_scj

 :) 没有问题。不过有一个小的建议，可以养成使用注释的习惯，即在代码中// 来标注一些重要代码所起的功能，以你作业一中的代码为例，可以加入一些注释来表明代码所绘制的图形内容，也便于你未来修改。
已记录
页: [1]   向上
« 上一篇主题 下一篇主题 »
Tags: