1.三个要素

1.设置画布
size(800,600);

2.画布背景
background(255); rgb
background(236,184,138); r,g,b
background(20,20,255,80); r,g,b,tranperant%

3.设置描边的粗细
strokeWeight(2); 默认为1

stroke(0); // Setting the outline (stroke) to black
fill(150); // Setting the interior of a shape (fill) to grey

2.坐标&常用的形状

image.png

1.点

point(10,10); x y

2.线

line(20,20,80,100); x1,y1,x2,y2

3.三角

triangle(150,120,80,180,200,212); x1,y1,x2,y2,x3,y3

4.椭圆

ellipse(300,300,80,120); 圆心x1,圆心y1,直径x,直径y

5.矩形

rect(400,300,150,100); x1,y1,长,宽

练习

画一个小机器人（重要的是熟悉坐标的感觉）

  1. //画一个皮卡丘
  2. size(600,600);
  3. background(129,199,212);
  4. strokeWeight(1);
  6. fill(255,255,0);
  7. triangle(80,200,300,200,280,280);
  8. triangle(480,100,360,200,380,280);
  9. ellipse(300,300,240,240);
  11. fill(0);
  12. ellipse(260,260,20,20);
  13. ellipse(340,260,20,20);
  15. fill(230,20,15);
  16. triangle(260,300,340,300,300,400);

image.png

3.循环函数

for(int i=0; i<5; i+=1){
ellipse(50+i*75,200,50,50);
}

练习 循环画圆

//放射性phantoscope
size(600,600);
background(0);
noStroke(0);

for(int i=0; i<20; i++){
  fill(50+i*10, 50+i*50, 50,50+5*i);
  ellipse(20+30*i,20+30*i,20+4*i,20+4*i);
  fill(50+i*10,50,50+i*50,50+5*i);
  ellipse(20+20*i,20+30*i,20+5*i,20+5*i);
  fill(20+i*20,20+i*20,20+i*20,50+5*i);
  ellipse(20+50*i,20+25*i,20+20*i,20+20*i);
  fill(20+i*30,20+i*30,20+i*30,50+5*i);
  ellipse(20+50*i,20+25*i,20+20*i,20+20*i);
}

save("mywork.png"); 自动保存图片

image.png

4.随机函数

radom(a); 给出0-a之前的随机数
radom(a,b); 给出a-b之间的随机数

//polkadot上线🎉
size(600,600);
background(0);
noStroke();

for(int i=0; i<8000; i++){
  fill(random(255),random(255),i++);
  ellipse(random(600),random(600),25,25);
}

image.png

//满天的星星给你
size(600,600);
background(0);

for(int i=0;i<500;i+=1){
  strokeWeight(random(1,3));
  stroke(255,random(0,255)); //透明度在50-255之间
  point(random(600),random(600));
}

save("star.png");

image.png

//画一个书籍的封面
size(400,600);
background(255);
noStroke();

for(int i=0; i<30; i+=1){
  fill(random(255),random(255),random(255),random(50,255));
  rect(-20,i*20,random(150,400),20,10);
}

image.png

size(400,400);
background(0);

for(int i=0; i<100; i++){
  for(int y=20; y<60; y++){
    fill(random(120,255),random(125,255),random(125,255),random(50,100));
    rect(random(400),random(400),random(y),random(y));
  }
}

image.png

size(400,400);
background(255);
stroke(167);

for(int i=0; i<30; i++){
  for(int y=0; y<30; y++){
    fill(0);    
    rect(-90+i*60+y*10,y*30,30,30);
    fill(255);
    rect(-60+i*60+y*10,y*30,30,30);
  }
}

image.png

5.变量

声明变量语法
int diam;
diam = 3;
ellipse(30,30,diam,diam) ;

diam = 8;
ellipse(30,30,diam,diam);