DrawingBoard

最新推荐文章于 2024-04-02 09:46:18 发布

REDswag

最新推荐文章于 2024-04-02 09:46:18 发布

阅读量460

点赞数

本文链接：https://blog.csdn.net/Yangjin121/article/details/85315302

版权

互动媒体技术作业报告

效果展示

探讨

数字和图形，是最让人着迷的组合。抽象的数字一旦和图形发生化学反应，会焕发出新的光彩。此次作业是用processing写的，processing软件是免费的开源软件，用起来很方便。而且随着科技的进步，随着程序员们的不懈努力，processing有很多的示例和教程。像我这种小白就可以在别人的代码的基础上做更改，通过这种方式就能了解每条代码的意思。以及找到可以改进的地方。代码量我提倡精简为主，但是自己的水平是有限的，虽然写不出精简的代码，但是写更多的代码也同样具有挑战性。

思考

刚开始想加载一些照片当做画布，然后实现一些笔刷，在画布上作画。

于是先实现了图片的加载，虽然这个很基础，但是对于初学者，这提供了代码量。

首先我们若只加载一张照片，则如下：

PImage img;//申明一个PImage的变量

void setup() {

size(400,400);

img = loadImage（“***.jpg”）;//载入图片]

}

void draw() {

background(0);

image(img.0.0);

}

如果要载入很多张照片,就需要重复写很多语句，看起来不精简。

PImage[] images = new PImage[5];

void setup(){

images[0] = loadImage("1.jpg");

images[1] = loadImage("2.jpg");

images[2] = loadImage("3.jpg");

}

于是我们可以将文件名存储在一个字符串内然后使用for循环初始化全部数组元素：

String[] filenames = ("1.jpg","2.jpg","3.jpg");
for(int i = 0;i < filenames.length;i++){
    images[i] = loadImage(filenames[i]);
}

如果将图片的名字统一命名会更方便

for(int i = 0;i < images.length;i++){
    images[i] = loadImage(i + "jpg");
}

图片加载完后，在draw（）中显示它

image(images[0],0,0);

参考资料

互动软件学习笔记，非常详细的带领小白了解processing：http://learn.travelchinawith.me/category/learning-note/processing/
讲解如何存储笔刷的轨迹：https://juejin.im/entry/57593352a341310061308f37

下面展示一个重复实现笔刷的轨迹：

PVector []pos;

PVector [][]newPos;

float []pTime;

boolean drawOnOff;

float pressTime;

int brushNum,num;



void setup(){

size(500,500);

background(0);

num = 6; //设置旋转的画笔数量

pos = new PVector[0];

newPos = new PVector[num][0];

pTime = new float[0];

drawOnOff = false;

brushNum = 0;

}



void draw(){

if(drawOnOff){

if(millis() - pressTime > pTime[brushNum+1] - pTime[0]){

for(int i = 0;i < num - 1;i++){

line(newPos[i][brushNum].x,newPos[i][brushNum].y,newPos[i][brushNum+1].x,newPos[i][brushNum+1].y);

}

brushNum++;

if(newPos[0][brushNum+1].x == 0 && newPos[0][brushNum+1].y == 0){

brushNum+=2;

}

}

if(brushNum+1 >= newPos[0].length-1){ //终止绘制的判断

drawOnOff = false;

}

}

}



void mouseDragged(){

stroke(255);

line(pmouseX,pmouseY,mouseX,mouseY);

pos = (PVector [])append(pos,new PVector(mouseX,mouseY)); //每新增一个位置坐标，添加到pos列表后

for(int i = 0;i < num - 1;i++){

newPos[i] = (PVector [])append(newPos[i],Trans(pos[pos.length-1],2*PI/num*(i+1)));

}

pTime = append(pTime,millis());

}



void mouseReleased(){

pos = (PVector [])append(pos,new PVector(0,0));

for(int i = 0;i < num;i++){

newPos[i] = (PVector [])append(newPos[i],new PVector(0,0));

}

pTime = append(pTime,millis());

}



void keyPressed(){

if(keyCode == 'A' && pos.length!=0){

pressTime = millis();

drawOnOff = true;

pos = new PVector[0];

}

if(keyCode == 'C'){

background(0);

pos = new PVector[0];

newPos = new PVector[num][0];

pTime = new float[0];

brushNum = 0;

drawOnOff = false;

}

}



PVector Trans(PVector a,float angle){

PVector center = new PVector(width/2,height/2);

float l = PVector.dist(a,center);

float angle1 = atan2(a.y - center.y,a.x - center.x);

float angle2 = angle1 + angle;

float x = center.x + l*cos(angle2);

float y = center.y + l*sin(angle2);

PVector newPos = new PVector(x,y);

return newPos;

}

效果展示：录屏（Camtasia） GIF图制作（Instagiffer）

升级之后

PVector []pos;

PVector [][]newPos;

float []pTime;

boolean drawOnOff;

float pressTime;

int brushNum,num;

float interval,cInterval;

  

void setup(){

size(500,500);

background(255);

num = 10;

pos = new PVector[0];

newPos = new PVector[num][0];

pTime = new float[0];

drawOnOff = false;

brushNum = 0;

interval = 5;

cInterval = 100;

}



void draw(){

if(drawOnOff){

if(millis() - pressTime > pTime[brushNum+1] - pTime[0]){

for(int i = 0;i < num-1;i++){

for(int j = 0;j < brushNum;j++){

float r = dist(newPos[i][j].x,newPos[i][j].y,newPos[i][brushNum].x,newPos[i][brushNum].y);

if(r < cInterval){

stroke(0,map(r,0,cInterval,8,2));

line(newPos[i][j].x,newPos[i][j].y,newPos[i][brushNum].x,newPos[i][brushNum].y);

}

}

}

brushNum++;

if(newPos[0][brushNum+1].x == 0 && newPos[0][brushNum+1].y == 0){

brushNum+=2;

}

}

if(brushNum+1 >= newPos[0].length-1){ //终止绘制的判断

drawOnOff = false;

}

}

}



void mouseDragged(){

if(pos.length == 0 || dist(mouseX,mouseY,pos[pos.length-1].x,pos[pos.length-1].y) > interval){

pos = (PVector [])append(pos,new PVector(mouseX,mouseY));

}

println(pos.length);

for(int i = 0;i < pos.length;i++){

float r = dist(pos[i].x,pos[i].y,pos[pos.length-1].x,pos[pos.length-1].y);

if(r < cInterval){

stroke(0,map(r,0,cInterval,8,2));

line(pos[i].x,pos[i].y,pos[pos.length-1].x,pos[pos.length-1].y);

}

}



for(int i = 0;i < num;i++){

newPos[i] = (PVector [])append(newPos[i],Trans(pos[pos.length-1],2*PI/num*(i+1)));

}

pTime = append(pTime,millis());

}



void mouseReleased(){

pos = (PVector [])append(pos,new PVector(0,0));

for(int i = 0;i < num;i++){

newPos[i] = (PVector [])append(newPos[i],new PVector(0,0));

}

pTime = append(pTime,millis());

}



void keyPressed(){

if(keyCode == 'A' && pos.length!=0){

pressTime = millis();

drawOnOff = true;

pos = new PVector[0];

}

if(keyCode == 'C'){

background(255);

pos = new PVector[0];

newPos = new PVector[num][0];

pTime = new float[0];

brushNum = 0;

drawOnOff = false;

}

}



PVector Trans(PVector a,float angle){

PVector center = new PVector(width/2,height/2);

float l = PVector.dist(a,center);

float angle1 = atan2(a.y - center.y,a.x - center.x);

float angle2 = angle1 + angle;

float x = center.x + l*cos(angle2);

float y = center.y + l*sin(angle2);

PVector newPos = new PVector(x,y);

return newPos;

}

效果：

最权威、样例最多的当然是processing的官网：https://processing.org/
很多例子，还有完整的demo：https://www.openprocessing.org/
Drawing Flowers With Processing：https://www.youtube.com/watch?v=9EbvnaMXxCE
在GitHub上找到的一个模板用到了作业里，但是写这篇博客的时候已经找不到那个链接了。。。

作品代码：

Processing Drawing Board
//The bar color
int BarColor=255;
//The Wireframe Size
float FrameWeight=2;
int ButtonSelect=5;
int ButtonNoSelect=2;
LeftBar LB=new LeftBar();
int LB_Button=0;
Paper PaperFrame;
RightBar RB=new RightBar();
int RB_Size=5;
int RB_Color=8;

int[][] Color={
              {130,166,245},
              {234,240,72},
              {159,240,72},
              {42,82,0},
              {246,214,255},
              {184,90,154},
              {204,47,105},
              {59,35,12},
              {237,227,135}
             };
              
int[] Size={100,17,14,11,8,5};
int ClickNum;
float x1=0;
float y1=0;

//plus 
PVector []pos;

PVector [][]newPos;

float []pTime;

boolean drawOnOff;

float pressTime;

int brushNum,num;

float interval,cInterval;
//plus

void setup(){
  
  size(840,620);
  smooth();
  strokeJoin(ROUND);
  background(255);
  PaperFrame=new Paper();
  textSize(16);
  
  //plus
  num = 10;

  pos = new PVector[0];
  
  newPos = new PVector[num][0];
  
  pTime = new float[0];
  
  drawOnOff = false;
  
  brushNum = 0;
  
  interval = 5;
  
  cInterval = 100;
  
  //plus
 
}

void draw(){
  
  //Choose Tool
  LB_Button=LB.GetButton(LB_Button);
  //Choose Size
  RB_Size=RB.GetSize(RB_Size);
  //Choose Color
  RB_Color=RB.GetColor(RB_Color);
  //Draw left menu
  LB.DrawBar();
  //Draw right menu
  RB.DrawBar();
  //Draw Help (must be in the last)
  LB.DrawHelp();
  RB.DrawHelp();
  //
  PaperFrame.Draw(LB_Button,RB_Size,RB_Color);
  
  if(keyPressed){
    
        if(key=='e' || key=='E'){
          
          ClickNum=0;
          
        }
        else if(key=='r' ||key=='R'){
          
          PaperFrame=new Paper();
          
        }
      }
      
 //plus
  if(drawOnOff){

if(millis() - pressTime > pTime[brushNum+1] - pTime[0]){

for(int i = 0;i < num-1;i++){

for(int j = 0;j < brushNum;j++){

float r = dist(newPos[i][j].x,newPos[i][j].y,newPos[i][brushNum].x,newPos[i][brushNum].y);

if(r < cInterval){

stroke(0,map(r,0,cInterval,8,2));

line(newPos[i][j].x,newPos[i][j].y,newPos[i][brushNum].x,newPos[i][brushNum].y);

}

}

}

brushNum++;

if(newPos[0][brushNum+1].x == 0 && newPos[0][brushNum+1].y == 0){

brushNum+=2;

}

}

if(brushNum+1 >= newPos[0].length-1){ //终止绘制的判断

drawOnOff = false;

}

}
//plus
  
}

class LeftBar{
  
  int gap;
  int ButtonL;
  int ButtonNum;
  int[] ButtonChoose={1,0,0,0,0,0};
  //Variable define
  LeftBar(){
    
    gap=20;
    ButtonL=80;
    ButtonNum=6;
    
  }
  //Draw Left bar
  void DrawBar(){
    
    //Draw Left bar background
    strokeWeight(FrameWeight);
    fill(BarColor);
    rect(0,0,gap*2+ButtonL,(gap+ButtonL)*ButtonNum+gap);
    //Draw Button frame
    for(int i=0;i<ButtonNum;i++){
      
      if (ButtonChoose[i]==1){
        
        strokeWeight(ButtonSelect);//be selected
        
      }
      else{
        
        strokeWeight(ButtonNoSelect);//not be selected
        
      }
      
      fill(255);
      rect(gap,i*(gap+ButtonL)+gap,ButtonL,ButtonL);
      strokeWeight(1.5);
      
      switch(i){
        
        case 0:
          PenButton(gap,i*(gap+ButtonL)+gap);
          break;
        case 1:
          EraserButton(gap,i*(gap+ButtonL)+gap);
          break;
        case 2:
          LineButton(gap,i*(gap+ButtonL)+gap);
          break;
        case 3:
          SquareButton(gap,i*(gap+ButtonL)+gap);
          break;
        case 4:
          CircleButton(gap,i*(gap+ButtonL)+gap);
          break;
        case 5:
          QuadButton(gap,i*(gap+ButtonL)+gap);
          break;
        default:
          break;
          
      }
    }
  }
  //Button pictures
  void PenButton(int x,int y){
    
      beginShape();
      vertex(x+10+ButtonL-20-10,y+10);
      vertex(x+10,y+10+ButtonL-20-10);
      vertex(x+10,y+10+ButtonL-20);
      vertex(x+10+10,y+10+ButtonL-20);
      vertex(x+10+ButtonL-20,y+10+10);
      vertex(x+10+ButtonL-20-10,y+10);
      endShape();
      beginShape();
      vertex(x+10,y+10+ButtonL-20-10);
      vertex(x+10+10,y+10+ButtonL-20);
      endShape();
      
    }
    void EraserButton(int x,int y){
      
      ellipse((x+10+x+10+25)/2,(y+10+ButtonL-20-25+y+10+ButtonL-20)/2,(x+10+25)-(x+10)+5,(y+10+ButtonL-20)-(y+10+ButtonL-20-25)+5);
      beginShape();
      vertex(x+10+ButtonL-20-25,y+10);
      vertex(x+10,y+10+ButtonL-20-25);
      vertex(x+10+25,y+10+ButtonL-20);
      vertex(x+10+ButtonL-20,y+10+25);
      vertex(x+10+ButtonL-20-25,y+10);
      endShape();
      
    }
    void LineButton(int x,int y){
      
      line(x+ButtonL-5,y+5,x+5,y+ButtonL-5);
      
    }
    void SquareButton(int x,int y){
      
      rect(x+10,y+10,ButtonL-20,ButtonL-20);
      
    }
    void CircleButton(int x,int y){
      
      ellipse(x+ButtonL/2,y+ButtonL/2,ButtonL-20,ButtonL-20);
      
    }
    void QuadButton(int x,int y){
      
      quad(x+10,y+10,x+ButtonL-10,y+10,x+ButtonL-20,y+ButtonL-10,x+20,y+ButtonL-15);
      
    }
    //Click Button
    int GetButton(int k){
      
      if (mousePressed){
        
        if (mouseX>gap && mouseX<gap+ButtonL && mouseY>0*(gap+ButtonL)+gap && mouseY<1*(gap+ButtonL)){
          
          for (int i=0;i<ButtonNum;i++){
            ButtonChoose[i]=0;
          }
          ButtonChoose[0]=1;
          k=0;
        }
        else if(mouseX>gap && mouseX<gap+ButtonL && mouseY>1*(gap+ButtonL)+gap && mouseY<2*(gap+ButtonL)){
          
          for (int i=0;i<ButtonNum;i++){
            ButtonChoose[i]=0;
          }
          ButtonChoose[1]=1;
          k=1;
        }
        else if(mouseX>gap && mouseX<gap+ButtonL && mouseY>2*(gap+ButtonL)+gap && mouseY<3*(gap+ButtonL)){
          
          for (int i=0;i<ButtonNum;i++){
            ButtonChoose[i]=0;
          }
          ButtonChoose[2]=1;
          k=2;
        }
        else if(mouseX>gap && mouseX<gap+ButtonL && mouseY>3*(gap+ButtonL)+gap && mouseY<4*(gap+ButtonL)){
          
          for (int i=0;i<ButtonNum;i++){
            ButtonChoose[i]=0;
          }
          ButtonChoose[3]=1;
          k=3;
        }
        else if(mouseX>gap && mouseX<gap+ButtonL && mouseY>4*(gap+ButtonL)+gap && mouseY<5*(gap+ButtonL)){
          
          for (int i=0;i<ButtonNum;i++){
            ButtonChoose[i]=0;
          }
          ButtonChoose[4]=1;
          k=4;
        }
        else if(mouseX>gap && mouseX<gap+ButtonL && mouseY>5*(gap+ButtonL)+gap && mouseY<6*(gap+ButtonL)){
          
          for (int i=0;i<ButtonNum;i++){
            ButtonChoose[i]=0;
          }
          ButtonChoose[5]=1;
          k=5;
        }
      }
      return k;
    }
    
    //Draw Help
    void DrawHelp(){
      
      textAlign(RIGHT);
      fill(0,0,0);
      if (mouseX>gap && mouseX<gap+ButtonL && mouseY>0*(gap+ButtonL)+gap && mouseY<1*(gap+ButtonL)){
          text("Pen",mouseX,mouseY);
        }
        else if(mouseX>gap && mouseX<gap+ButtonL && mouseY>1*(gap+ButtonL)+gap && mouseY<2*(gap+ButtonL)){
          text("Eraser",mouseX,mouseY);
        }
        else if(mouseX>gap && mouseX<gap+ButtonL && mouseY>2*(gap+ButtonL)+gap && mouseY<3*(gap+ButtonL)){
          text("Line",mouseX,mouseY);
        }
        else if(mouseX>gap && mouseX<gap+ButtonL && mouseY>3*(gap+ButtonL)+gap && mouseY<4*(gap+ButtonL)){
          text("Square",mouseX,mouseY);
        }
        else if(mouseX>gap && mouseX<gap+ButtonL && mouseY>4*(gap+ButtonL)+gap && mouseY<5*(gap+ButtonL)){
          text("Circle",mouseX,mouseY);
        }
        else if(mouseX>gap && mouseX<gap+ButtonL && mouseY>5*(gap+ButtonL)+gap && mouseY<6*(gap+ButtonL)){
          text("Shape",mouseX,mouseY);
        }
    }
}

class RightBar{
  
  int RightBarX=(30+150)*4;
  int RightBarY=0;
  int RightBarL=30*4;
  int RightBarW=25*4*6+5*4;
  int[] SizeChoose={0,0,0,0,0,1};
  int SizeX=RightBarX+3*4;
  int SizeY=3*4;
  int SizeL=(30-3*2)*4;
  float SizeW=(6*6+1.5*2)*4;
  int[] ColorChoose={0,0,0,0,0,0,0,0,1};
  int ColorX=SizeX;
  float ColorY=SizeY+SizeW+5*4;
  int ColorL=SizeL;
  float ColorW=RightBarW-ColorY-5*4;
  RightBar(){}
  void DrawBar(){
    
    //background
    strokeWeight(FrameWeight);
    fill(BarColor);
    rect(RightBarX,RightBarY,RightBarL,RightBarW);
    //Size Choose Frame
    //Size Choose Frame Background
    fill(255);
    rect(SizeX,SizeY,SizeL,SizeW);
    //Size Choose Circle
    for(int i=0;i<6;i++){
      
      strokeWeight(0);
      if(SizeChoose[i]==1){
        
        fill(255,0,0);//Select
      }
      else{
        
        fill(0);//Not Select
      }
      int x;
      int y;
      if (i%2==0){x=0;}
      else{x=1;}//column
      if (i+1<3){y=0;}
      else if(i+1<5){y=1;}
      else{y=2;}//row
      ellipse(SizeX+1.5*4+6*4+x*12*4,SizeY+1.5*4+6*4+y*12*4,20-i*3,20-i*3);
    }
    //Color Choose
    //Color Choose Background
    strokeWeight(FrameWeight);
    fill(255);
    rect(ColorX,ColorY,ColorL,ColorW);
    //Color Choose Circle
    for (int i=0;i<9;i++){
      
      if(ColorChoose[i]==1){
        
        strokeWeight(5);//Select
      }
      else{
        strokeWeight(0);//not Select
      }
      int x;
      int y;
      if (i%2==0){x=0;}else{x=1;}//column
      if (i+1<3){y=0;}else if(i+1<5){y=1;}else if(i+1<7){y=2;}else if(i+1<9){y=3;}else{y=4;}
      fill(Color[i][0],Color[i][1],Color[i][2]);
      ellipse(ColorX+1.5*4+6*4+x*12*4,ColorY+1.5*4+6*4+y*12*4,20,20);
    }
  }
  int GetSize(int k){
    
    if(mousePressed){
      
      if(mouseX>((SizeX+1.5*4+6*4+0*12*4)-(20-0*3)/2) && mouseX<((SizeX+1.5*4+6*4+0*12*4)+(20-0*3)/2) &&
         mouseY>((SizeY+1.5*4+6*4+0*12*4)-(20-0*3)/2) && mouseY<((SizeY+1.5*4+6*4+0*12*4)+(20-0*3)/2)){
           
           for(int i=0;i<6;i++){
             SizeChoose[i]=0;
           }
           k=0;
           SizeChoose[k]=1;
         }
         else if(mouseX>((SizeX+1.5*4+6*4+1*12*4)-(20-1*3)/2) && mouseX<((SizeX+1.5*4+6*4+1*12*4)+(20-1*3)/2) &&
         mouseY>((SizeY+1.5*4+6*4+0*12*4)-(20-1*3)/2) && mouseY<((SizeY+1.5*4+6*4+0*12*4)+(20-1*3)/2)){
           
           for(int i=0;i<6;i++){
             SizeChoose[i]=0;
           }
           k=1;
           SizeChoose[k]=1;
         }
         else if(mouseX>((SizeX+1.5*4+6*4+0*12*4)-(20-2*3)/2) && mouseX<((SizeX+1.5*4+6*4+0*12*4)+(20-2*3)/2) &&
         mouseY>((SizeY+1.5*4+6*4+1*12*4)-(20-2*3)/2) && mouseY<((SizeY+1.5*4+6*4+1*12*4)+(20-2*3)/2)){
           
           for(int i=0;i<6;i++){
             SizeChoose[i]=0;
           }
           k=2;
           SizeChoose[k]=1;
         }
         else if(mouseX>((SizeX+1.5*4+6*4+1*12*4)-(20-3*3)/2) && mouseX<((SizeX+1.5*4+6*4+1*12*4)+(20-3*3)/2) &&
         mouseY>((SizeY+1.5*4+6*4+1*12*4)-(20-3*3)/2) && mouseY<((SizeY+1.5*4+6*4+1*12*4)+(20-3*3)/2)){
           
           for(int i=0;i<6;i++){
             SizeChoose[i]=0;
           }
           k=3;
           SizeChoose[k]=1;
         }
         else if(mouseX>((SizeX+1.5*4+6*4+0*12*4)-(20-4*3)/2-3) && mouseX<((SizeX+1.5*4+6*4+0*12*4)+(20-4*3)/2+3) &&
         mouseY>((SizeY+1.5*4+6*4+2*12*4)-(20-4*3)/2-3) && mouseY<((SizeY+1.5*4+6*4+2*12*4)+(20-4*3)/2+3)){
           
           for(int i=0;i<6;i++){
             SizeChoose[i]=0;
           }
           k=4;
           SizeChoose[k]=1;
         }
         else if(mouseX>=((SizeX+1.5*4+6*4+1*12*4)-(20-5*3)/2-3) && mouseX<=((SizeX+1.5*4+6*4+1*12*4)+(20-5*3)/2+3) &&
         mouseY>=((SizeY+1.5*4+6*4+2*12*4)-(20-5*3)/2-3) && mouseY<=((SizeY+1.5*4+6*4+2*12*4)+(20-5*3)/2+3)){
           
           for(int i=0;i<6;i++){
             SizeChoose[i]=0;
           }
           k=5;
           SizeChoose[k]=1;
         }
    }
    return k;
  }
  //ellipse(ColorX+1.5*4+6*4+x*12*4,ColorY+1.5*4+6*4+y*12*4,20,20);
  int GetColor(int k){
    if(mousePressed){
      if(mouseX>ColorX+1.5*4+6*4+0*12*4-10 && mouseX<ColorX+1.5*4+6*4+0*12*4+10 && mouseY>ColorY+1.5*4+6*4+0*12*4-10
      && mouseY<ColorY+1.5*4+6*4+0*12*4+10){
        for(int i=0;i<9;i++){
          ColorChoose[i]=0;
        }
        k=0;
        ColorChoose[k]=1;
      }
      else if(mouseX>ColorX+1.5*4+6*4+1*12*4-10 && mouseX<ColorX+1.5*4+6*4+1*12*4+10 && mouseY>ColorY+1.5*4+6*4+0*12*4-10
      && mouseY<ColorY+1.5*4+6*4+0*12*4+10){
        for(int i=0;i<9;i++){
          ColorChoose[i]=0;
        }
        k=1;
        ColorChoose[k]=1;
      }
      else if(mouseX>ColorX+1.5*4+6*4+0*12*4-10 && mouseX<ColorX+1.5*4+6*4+0*12*4+10 && mouseY>ColorY+1.5*4+6*4+1*12*4-10
      && mouseY<ColorY+1.5*4+6*4+1*12*4+10){
        for(int i=0;i<9;i++){
          ColorChoose[i]=0;
        }
        k=2;
        ColorChoose[k]=1;
      }
      else if(mouseX>ColorX+1.5*4+6*4+1*12*4-10 && mouseX<ColorX+1.5*4+6*4+1*12*4+10 && mouseY>ColorY+1.5*4+6*4+1*12*4-10
      && mouseY<ColorY+1.5*4+6*4+1*12*4+10){
        for(int i=0;i<9;i++){
          ColorChoose[i]=0;
        }
        k=3;
        ColorChoose[k]=1;
      }
      else if(mouseX>ColorX+1.5*4+6*4+0*12*4-10 && mouseX<ColorX+1.5*4+6*4+0*12*4+10 && mouseY>ColorY+1.5*4+6*4+2*12*4-10
      && mouseY<ColorY+1.5*4+6*4+2*12*4+10){
        for(int i=0;i<9;i++){
          ColorChoose[i]=0;
        }
        k=4;
        ColorChoose[k]=1;
      }
      else if(mouseX>ColorX+1.5*4+6*4+1*12*4-10 && mouseX<ColorX+1.5*4+6*4+1*12*4+10 && mouseY>ColorY+1.5*4+6*4+2*12*4-10
      && mouseY<ColorY+1.5*4+6*4+2*12*4+10){
        for(int i=0;i<9;i++){
          ColorChoose[i]=0;
        }
        k=5;
        ColorChoose[k]=1;
      }
      else if(mouseX>ColorX+1.5*4+6*4+0*12*4-10 && mouseX<ColorX+1.5*4+6*4+0*12*4+10 && mouseY>ColorY+1.5*4+6*4+3*12*4-10
      && mouseY<ColorY+1.5*4+6*4+3*12*4+10){
        for(int i=0;i<9;i++){
          ColorChoose[i]=0;
        }
        k=6;
        ColorChoose[k]=1;
      }
      else if(mouseX>ColorX+1.5*4+6*4+1*12*4-10 && mouseX<ColorX+1.5*4+6*4+1*12*4+10 && mouseY>ColorY+1.5*4+6*4+3*12*4-10
      && mouseY<ColorY+1.5*4+6*4+3*12*4+10){
        for(int i=0;i<9;i++){
          ColorChoose[i]=0;
        }
        k=7;
        ColorChoose[k]=1;
      }
      else if(mouseX>ColorX+1.5*4+6*4+0*12*4-10 && mouseX<ColorX+1.5*4+6*4+0*12*4+10 && mouseY>ColorY+1.5*4+6*4+4*12*4-10
      && mouseY<ColorY+1.5*4+6*4+4*12*4+10){
        for(int i=0;i<9;i++){
          ColorChoose[i]=0;
        }
        k=8;
        ColorChoose[k]=1;
      }
    }
    return k;
  }
  void DrawHelp(){
    textAlign(LEFT);
    fill(255,0,0);
    if(mouseX>((SizeX+1.5*4+6*4+0*12*4)-(20-0*3)/2) && mouseX<((SizeX+1.5*4+6*4+0*12*4)+(20-0*3)/2) &&
         mouseY>((SizeY+1.5*4+6*4+0*12*4)-(20-0*3)/2) && mouseY<((SizeY+1.5*4+6*4+0*12*4)+(20-0*3)/2)){
           text("20",mouseX,mouseY);
         }
         else if(mouseX>((SizeX+1.5*4+6*4+1*12*4)-(20-1*3)/2) && mouseX<((SizeX+1.5*4+6*4+1*12*4)+(20-1*3)/2) &&
         mouseY>((SizeY+1.5*4+6*4+0*12*4)-(20-1*3)/2) && mouseY<((SizeY+1.5*4+6*4+0*12*4)+(20-1*3)/2)){
           text("17",mouseX,mouseY);
         }
         else if(mouseX>((SizeX+1.5*4+6*4+0*12*4)-(20-2*3)/2) && mouseX<((SizeX+1.5*4+6*4+0*12*4)+(20-2*3)/2) &&
         mouseY>((SizeY+1.5*4+6*4+1*12*4)-(20-2*3)/2) && mouseY<((SizeY+1.5*4+6*4+1*12*4)+(20-2*3)/2)){
           text("14",mouseX,mouseY);
         }
         else if(mouseX>((SizeX+1.5*4+6*4+1*12*4)-(20-3*3)/2) && mouseX<((SizeX+1.5*4+6*4+1*12*4)+(20-3*3)/2) &&
         mouseY>((SizeY+1.5*4+6*4+1*12*4)-(20-3*3)/2) && mouseY<((SizeY+1.5*4+6*4+1*12*4)+(20-3*3)/2)){
           text("11",mouseX,mouseY);
         }
         else if(mouseX>((SizeX+1.5*4+6*4+0*12*4)-(20-4*3)/2-3) && mouseX<((SizeX+1.5*4+6*4+0*12*4)+(20-4*3)/2+3) &&
         mouseY>((SizeY+1.5*4+6*4+2*12*4)-(20-4*3)/2-3) && mouseY<((SizeY+1.5*4+6*4+2*12*4)+(20-4*3)/2+3)){
           text("8",mouseX,mouseY);
         }
         else if(mouseX>=((SizeX+1.5*4+6*4+1*12*4)-(20-5*3)/2-3) && mouseX<=((SizeX+1.5*4+6*4+1*12*4)+(20-5*3)/2+3) &&
         mouseY>=((SizeY+1.5*4+6*4+2*12*4)-(20-5*3)/2-3) && mouseY<=((SizeY+1.5*4+6*4+2*12*4)+(20-5*3)/2+3)){
           text("5",mouseX,mouseY);
         }
    if(mouseX>ColorX+1.5*4+6*4+0*12*4-10 && mouseX<ColorX+1.5*4+6*4+0*12*4+10 && mouseY>ColorY+1.5*4+6*4+0*12*4-10
      && mouseY<ColorY+1.5*4+6*4+0*12*4+10){
        text("Red",mouseX,mouseY);
      }
      else if(mouseX>ColorX+1.5*4+6*4+1*12*4-10 && mouseX<ColorX+1.5*4+6*4+1*12*4+10 && mouseY>ColorY+1.5*4+6*4+0*12*4-10
      && mouseY<ColorY+1.5*4+6*4+0*12*4+10){
        text("Orign",mouseX,mouseY);
      }
      else if(mouseX>ColorX+1.5*4+6*4+0*12*4-10 && mouseX<ColorX+1.5*4+6*4+0*12*4+10 && mouseY>ColorY+1.5*4+6*4+1*12*4-10
      && mouseY<ColorY+1.5*4+6*4+1*12*4+10){
        text("Yello",mouseX,mouseY);
      }
      else if(mouseX>ColorX+1.5*4+6*4+1*12*4-10 && mouseX<ColorX+1.5*4+6*4+1*12*4+10 && mouseY>ColorY+1.5*4+6*4+1*12*4-10
      && mouseY<ColorY+1.5*4+6*4+1*12*4+10){
        text("Green",mouseX,mouseY);
      }
      else if(mouseX>ColorX+1.5*4+6*4+0*12*4-10 && mouseX<ColorX+1.5*4+6*4+0*12*4+10 && mouseY>ColorY+1.5*4+6*4+2*12*4-10
      && mouseY<ColorY+1.5*4+6*4+2*12*4+10){
        text("Blue",mouseX,mouseY);
      }
      else if(mouseX>ColorX+1.5*4+6*4+1*12*4-10 && mouseX<ColorX+1.5*4+6*4+1*12*4+10 && mouseY>ColorY+1.5*4+6*4+2*12*4-10
      && mouseY<ColorY+1.5*4+6*4+2*12*4+10){
        text("Indigo",mouseX,mouseY);
      }
      else if(mouseX>ColorX+1.5*4+6*4+0*12*4-10 && mouseX<ColorX+1.5*4+6*4+0*12*4+10 && mouseY>ColorY+1.5*4+6*4+3*12*4-10
      && mouseY<ColorY+1.5*4+6*4+3*12*4+10){
        text("Purple",mouseX,mouseY);
      }
      else if(mouseX>ColorX+1.5*4+6*4+1*12*4-10 && mouseX<ColorX+1.5*4+6*4+1*12*4+10 && mouseY>ColorY+1.5*4+6*4+3*12*4-10
      && mouseY<ColorY+1.5*4+6*4+3*12*4+10){
        text("White",mouseX,mouseY);
      }
      else if(mouseX>ColorX+1.5*4+6*4+0*12*4-10 && mouseX<ColorX+1.5*4+6*4+0*12*4+10 && mouseY>ColorY+1.5*4+6*4+4*12*4-10
      && mouseY<ColorY+1.5*4+6*4+4*12*4+10){
        text("Black",mouseX,mouseY);
      }
  }
}

class Paper{
  int PaperX=30*4;
  int PaperY=0;
  int PaperL=100*4+50*4;
  int PaperW=25*4*6+5*4;
  Paper(){
    strokeWeight(FrameWeight);
    fill(255);
    rect(PaperX,PaperY,PaperL,PaperW);
    strokeWeight(1.5);
    ClickNum=0;
  }
  
  void Draw(int LB_Button,int RB_Size,int RB_Color){
    strokeWeight(Size[RB_Size]);
    fill(Color[RB_Color][0],Color[RB_Color][1],Color[RB_Color][2]); 
    if (mouseX>PaperX && mouseX<PaperX+PaperL && mouseY>PaperY && mouseY<PaperY+PaperW){
      if(LB_Button==0){
        //Pen
        stroke(Color[RB_Color][0],Color[RB_Color][1],Color[RB_Color][2]);
        if(mousePressed){
          line(mouseX,mouseY,pmouseX,pmouseY);
        }
        stroke(0,0,0);
      }
      else if(LB_Button==1){
        //Erase
        stroke(255,255,255);
        if(mousePressed){
          line(mouseX,mouseY,pmouseX,pmouseY);
        }
        stroke(0,0,0);
      }
      else if(LB_Button==2){
        //Line
      }
      else if(LB_Button==3){
        //Square
      }
      else if(LB_Button==4){
        //Circle
      }
      else if(LB_Button==5){
        //shape
      }
    }
  }
}

void mouseClicked(){
  
  int PaperX=30*4;
  int PaperY=0;
  int PaperL=100*4+50*4;
  int PaperW=25*4*6+5*4;
  strokeWeight(Size[RB_Size]);
  fill(Color[RB_Color][0],Color[RB_Color][1],Color[RB_Color][2]);
  stroke(Color[RB_Color][0],Color[RB_Color][1],Color[RB_Color][2]);
  if (mouseX>PaperX && mouseX<PaperX+PaperL && mouseY>PaperY && mouseY<PaperY+PaperW){
    if(LB_Button==2){
      if(ClickNum==0){
        x1=mouseX;
        y1=mouseY;
        ClickNum++;
      }
      else{
        line(x1,y1,mouseX,mouseY);
        ClickNum=0;
      }
    }
    else if(LB_Button==3){
      if(ClickNum==0){
        x1=mouseX;y1=mouseY;ClickNum++;
      }
      else{
        rect(x1,y1,mouseX-x1,mouseY-y1);
        ClickNum=0;
      }
    }
    else if(LB_Button==4){
      if(ClickNum==0){
        x1=mouseX;y1=mouseY;ClickNum++;
      }
      else{
        ellipse(x1,y1,(mouseX-x1)*2,(mouseY-y1)*2);
        ClickNum=0;
      }
    }
    else if(LB_Button==5){
      if(ClickNum==0){
        x1=mouseX;y1=mouseY;ClickNum++;
      }
      else{
        line(x1,y1,mouseX,mouseY);
        x1=mouseX;
        y1=mouseY;
      }
    }
  }
  stroke(0,0,0);
}









//plus
void mouseReleased(){

pos = (PVector [])append(pos,new PVector(0,0));

for(int i = 0;i < num;i++){

newPos[i] = (PVector [])append(newPos[i],new PVector(0,0));

}

pTime = append(pTime,millis());

}



void keyPressed(){

if(keyCode == 'A' && pos.length!=0){

pressTime = millis();

drawOnOff = true;

pos = new PVector[0];

}

if(keyCode == 'C'){

background(255);

pos = new PVector[0];

newPos = new PVector[num][0];

pTime = new float[0];

brushNum = 0;

drawOnOff = false;

}

}

PVector Trans(PVector a,float angle){

PVector center = new PVector(width/2,height/2);

float l = PVector.dist(a,center);

float angle1 = atan2(a.y - center.y,a.x - center.x);

float angle2 = angle1 + angle;

float x = center.x + l*cos(angle2);

float y = center.y + l*sin(angle2);

PVector newPos = new PVector(x,y);

return newPos;

}