Hello!

hm...

actually in your approach (let's call it approach A) that is not too easy.

Your approach is: Paint every mouse input (rect) and never delete something.

So you can't really control what has been painted in that approach (approach A).

• Another approach (approach B) would be to store all that has been drawn as data (as you say the array).
  And then paint the data. Thus, you can browse through the data of the rects and
  change them.
  In this approach B you delete the screen every time and draw all data for the rects again.
  When a rect is deleted or changed it just gets drawn differently or not at all. Very clear approach.
  
  I'll post it in a minute.
  

Anyway; I made a change in you program (the old approach A). When you hold any key, you change the last rect with dragging the mouse. Since the rect is deleted (only this last rect, not the entire screen) and drawn again, it looks ok.
But: you'll destroy other rects partially when you drag the mouse over them. That wouldn't be the case in apporach B.

Greetings, Chrisir    

1. int lineToolX, lineToolY;
2. int oldWidth, oldHeight;
3. void setup() {
4.   size(400, 400);
5.   background(255);
6.   frameRate(200);
7.   loadPixels();
8. }
9. void draw()
10. {
11.   if (keyPressed) {
12.     // delete
13.     stroke(255);
14.     rect(lineToolX, lineToolY, oldWidth, oldHeight );
15.     // paint
16.     stroke (0);
17.     rect(lineToolX, lineToolY, mouseX-lineToolX, mouseY-lineToolY);
18.     oldWidth=mouseX-lineToolX;
19.     oldHeight=mouseY-lineToolY;
20.   }
21.   else {
22.     // not keyPressed
23.     if (mousePressed) {
24.       updatePixels();
25.       stroke(0);
26.       strokeWeight(3);
27.       noFill();
28.       rect(lineToolX, lineToolY, mouseX-lineToolX, mouseY-lineToolY);
29.       oldWidth=mouseX-lineToolX;
30.       oldHeight=mouseY-lineToolY;
31.     }
32.   }
33. }
34. void mousePressed()
35. {
36.   lineToolX = mouseX;
37.   lineToolY = mouseY;
38. }
39. void mouseReleased() {
40.   loadPixels();
41. }

after I read this I was thinking of saving what ever is on the canvas then when drawing a shape I can manipulate it how ever I want

here is a rough approach (B)


Usage
paint with the mouse
q abort current rect while dragging it
backspace: delete old ones
cursor left and right: select a rect (it has red frame)
return: enter edit mode for that red rect; then :

•       left mouse:  pos
•       right mouse:  size

return again : return to draw mode


Explanation:
The rects are stored as data and the data is drawn (see above).
Each rect is an object of the class Rectangle. All the rects properties and
methods are within this class.
All rects are stored in an arraylist (which is a kind of array but with variable size).
The members of the arraylist are objects of the type class Rectangle. Each of
those objects has it's own x,y and width and height etc.


The variable editorMode
Whether you are in draw mode or edit mode is denoted by the var editorMode.
It is false at the beginning of course.
Since the var editorMode is very fundamental for the behaviour of the program, it occurs often.
E.g. in draw() where two different main functions are called based on editorMode.

I hope this is not too much new information.  

Greetings, Chrisir    

1. //
2. ArrayList<Rectangle> rectangles;
3. //
4. // mouse dragging
5. boolean mouseHold=false;
6. int startX, startY;
7. //
8. // editing rects
9. int selectNum;
10. boolean editorMode=false;
11. //
12. void setup() {
13.   size(700, 700);
14.   smooth();
15.   rectangles = new ArrayList();
16. }
17. void draw() {
18.   background(255);
19.   if (editorMode) {
20.     editingDraw();
21.   }
22.   else
23.   {
24.     normalDraw();
25.   }
26. }
27. // -----------------------------------------------------------------
28. void normalDraw() {
29.   //
30.   // show existing rects
31.   for (int i = rectangles.size()-1; i >= 0; i--) {
32.     Rectangle ball = rectangles.get(i);
33.     if (i==selectNum)
34.       ball.selected=true;
35.     else
36.       ball.selected=false; 
37.     ball.display();
38.   } // for
39.   // println( rectangles.size());
40.   // this is during dragging
41.   if (mouseHold) {
42.     fill(0);
43.     text("Release mouse to draw, press 'q' to abort rect. Rect is from "
44.       +startX+", "
45.       +startY+" to "
46.       +mouseX+", "
47.       +mouseY+".", 20, 20);
48.     stroke(30);
49.     noFill();
50.     rect(startX, startY, mouseX-startX, mouseY-startY);
51.   }
52.   else
53.   {
54.     // when he is not dragging
55.     fill(0);
56.     text("Draw mode: Backspace to undo. Click and hold mouse to draw. Mouse is at "
57.       +mouseX+", "
58.       +mouseY
59.       +".", 20, 20);
60.   } // else
61. }
62. // -----------------------------------------------------------------
63. void editingDraw() {
64.   // show existing rects
65.   for (int i = rectangles.size()-1; i >= 0; i--) {
66.     Rectangle ball = rectangles.get(i);
67.     if (i==selectNum)
68.       ball.selected=true;
69.     else
70.       ball.selected=false; 
71.     ball.display();
72.   }
73.   // println( rectangles.size());
74.   // this is during dragging
75.   if (mouseHold) {
76.     if (mouseButton == LEFT) {
77.       //
78.       fill(0);
79.       text("Drag to change position", 20, 20);
80.       stroke(30);
81.       noFill();
82.       Rectangle ball = rectangles.get(selectNum);
83.       ball.x=mouseX;
84.       ball.y=mouseY;
85.     }
86.     else if (mouseButton == RIGHT) {
87.       //
88.       fill(0);
89.       text("Drag to change size", 20, 20);
90.       Rectangle ball = rectangles.get(selectNum);
91.       ball.w=mouseX-ball.x;
92.       ball.h=mouseY-ball.y;
93.     }  // if (Button==RIGHT)
94.   }  //  if (mouseHold)
95.   else
96.   {
97.     // do nothing
98.     // when he is not dragging
99.     fill(0);
100.     text("Edit mode: Left drag Pos, Right drag Size. Return to go back to draw. Mouse is at "
101.       +mouseX+", "
102.       +mouseY
103.       +".", 20, 20);
104.   }
105. }
106. // -----------------------------------------------------------------
107. void mousePressed() {
108.   // depending
109.   if (editorMode) {
110.     // starts dragging
111.     mouseHold=true;
112.   }
113.   else
114.   {
115.     // starts dragging
116.     mouseHold=true;
117.     startX=mouseX;
118.     startY=mouseY;
119.   }
120. }
121. void mouseReleased() {
122.   if (editorMode) {
123.     // ends dragging
124.     mouseHold=false;
125.   }
126.   else
127.   {
128.     // ends dragging
129.     if (mouseHold) {
130.       rectangles.add(new Rectangle(startX, startY, mouseX-startX, mouseY-startY));
131.       mouseHold=false;
132.       selectNum=( rectangles.size());
133.     }
134.   }
135. }
136. void keyPressed() {
137.   // key
138.   if (key!=CODED) {
139.     if (key=='q') {
140.       // println("abort rect");
141.       // ends dragging without drawing 
142.       mouseHold=false;
143.     }
144.     else if (key==BACKSPACE) {
145.       // undo
146.       mouseHold=false;
147.       if (rectangles.size()>0)
148.         rectangles.remove(rectangles.size()-1);
149.     }
150.     else if (key==RETURN||key==ENTER) {
151.       // toggle
152.       editorMode=!editorMode;
153.     }
154.     else
155.     {
156.       // do nothing
157.     }
158.   }
159.   else
160.   {
161.     // if (key == CODED) from here on
162.     if (keyCode == LEFT)
163.     {
164.       // println("selected -- ");
165.       selectNum--;
166.       if (selectNum<0)
167.         selectNum=0;
168.     }
169.     else if (keyCode== RIGHT)
170.     {
171.       // println("selected ++ ");
172.       selectNum++;
173.       if (selectNum>rectangles.size())
174.         selectNum=rectangles.size();
175.     }
176.     else
177.     {
178.       // do nothing
179.     }
180.   } // if (key == CODED)
181. }
182. // ==================================================================
183. class Rectangle {
184.   float x;
185.   float y;
186.   float w;
187.   float h;
188.   boolean selected  = false ;
189.   //
190.   // constr
191.   Rectangle(float tempX, float tempY, float tempW, float tempH) {
192.     x = tempX;
193.     y = tempY;
194.     w = tempW;
195.     h = tempH;
196.   }  //  constr
197.   //
198.   void display() {
199.     if (editorMode) {
200.       //       
201.       fill(0);
202.       noStroke();
203.       if (selected) {
204.         stroke (255, 2, 2);
205.         noFill();
206.       }
207.       rect(x, y, w, h);
208.     }
209.     else
210.     {
211.       //
212.       fill(0);
213.       noStroke();
214.       if (selected)
215.         stroke (255, 2, 2);
216.       rect(x, y, w, h);  // used w here
217.     }
218.   } // method
219.   //
220. }  // class
221. //

this can be programmed in a much nicer way of course.

e.g. when you right click on an existing rect it gets in edit mode.

Then you don't need enter and cursor keys.

• You could then grab a corner of an existing rectand move it. Or
• grab the edge of an existing rectand drag this.
• Or grab the center of an existing rectand drag the whole rect...

thanks very much chrisir 

Most of the sketch I already had in my little folder with nice sketches. I only extended it a bit.

I think this approach B with data for Rectangles is better than the layer thing approach C....

But choose the way that's best for you of course....

Greetings, Chrisir

just out of curiosity how would you register mouse events when not including its position on canvas but by position in arrayList

In the class you'd have a method over() returning true when mouse is over the rect

Then for loop over all rects and check for each if over is true - if so, select it (by saving its number) and go into edit mode

Greetings, Chrisir

hello,

like this.....

The idea is to

• Right mouse click on rect to edit - edit mode starts, rect is selected.

I haven't done this:

• grab a corner of an existing rect and move it. Or
• grab the edge of an existing rect and drag this.

It's just the changing of pos and size as before. Only the selection of a rect is now via mouse and not via keyboard.

I made bold what's new in the code.

Greetings, Chrisir    

1. //
2. ArrayList<Rectangle> rectangles;
3. //
4. // mouse dragging
5. boolean mouseHold=false;
6. int startX, startY;
7. //
8. // editing rects
9. int selectNum;
10. boolean editorMode=false;
11. //
12. void setup() {
13.   size(700, 700);
14.   smooth();
15.   rectangles = new ArrayList();
16. }
17. void draw() {
18.   background(255);
19.   if (editorMode) {
20.     editingDraw();
21.   }
22.   else
23.   {
24.     normalDraw();
25.   }
26. }
27. 
    
28. // -----------------------------------------------------------------
29. // the 2 main functions
30. 
    
31. void normalDraw() {
32.   // normal draw
33.   // paint new rects
34.   //
35.   // show existing rects
36.   for (int i = rectangles.size()-1; i >= 0; i--) {
37.     Rectangle rectMy = rectangles.get(i);
38.     if (i==selectNum)
39.       rectMy.selected=true;
40.     else
41.       rectMy.selected=false; 
42.     rectMy.display();
43.   } // for
44.   // println( rectangles.size());
45.   //
46.   // is the user holding the mouse key?
47.   if (mouseHold) {
48.     // this is during dragging
49.     fill(0);
50.     text("Release mouse to draw, press 'q' to abort rect. Rect is from "
51.       +startX+", "
52.       +startY+" to "
53.       +mouseX+", "
54.       +mouseY+".", 20, 20);
55.     stroke(30);
56.     noFill();
57.     rect(startX, startY, mouseX-startX, mouseY-startY);
58.   }
59.   else
60.   {
61.     // when he is not dragging
62.     fill(0);
63.     text("Draw mode: Backspace to undo. Click and hold mouse to draw. Mouse is at "
64.       +mouseX+", "
65.       +mouseY
66.       +".", 20, 20);
67.   } // else
68. }
69. 
    
70. // -----------------------------------------------------------------
71. 
    
72. void editingDraw() {
73.   // edit mode
74.   // show existing rects
75.   for (int i = rectangles.size()-1; i >= 0; i--) {
76.     Rectangle rectMy = rectangles.get(i);
77.     if (i==selectNum)
78.       rectMy.selected=true;
79.     else
80.       rectMy.selected=false; 
81.     rectMy.display();
82.   } // for
83.   // println( rectangles.size());
84. 
    
85.   // this is during dragging
86.   if (mouseHold) {
87.     //
88.     // depending left / right button
89.     if (mouseButton == LEFT) {
90.       //
91.       fill(0);
92.       text("Drag to change position", 20, 20);
93.       stroke(30);
94.       noFill();
95.       if (selectNum>=0 && selectNum<rectangles.size()) {
96.         Rectangle rectMy = rectangles.get(selectNum);
97.         rectMy.x=mouseX;
98.         rectMy.y=mouseY;
99.       }
100.     }
101.     else if (mouseButton == RIGHT) {
102.       //
103.       fill(0);
104.       text("Drag to change size", 20, 20);
105.       if (selectNum>=0 && selectNum<rectangles.size()) {
106.         Rectangle rectMy = rectangles.get(selectNum);
107.         rectMy.w=mouseX-rectMy.x;
108.         rectMy.h=mouseY-rectMy.y;
109.       } // if
110.     }  // if (Button==RIGHT)
111.     //
112.   }  //  if (mouseHold)
113.   else
114.   {
115.     // when he is not dragging
116.     fill(0);
117.     text("Edit mode: Left drag Pos, Right drag Size. Return to go back to draw. Mouse is at "
118.       +mouseX+", "
119.       +mouseY
120.       +".", 20, 20);
121.   }
122. } // func
123. 
     
124. // -----------------------------------------------------------------
125. // now Input funcs
126. 
     
127. void mousePressed() {
128.   // depending
129.   if (editorMode) {
130.     // starts dragging
131.     mouseHold=true;
132.   }
133.   else
134.   {
135.     if (mouseButton==LEFT) {
136.       // left button
137.       // starts dragging
138.       mouseHold=true;
139.       startX=mouseX;
140.       startY=mouseY;
141.     }
142.     else if (mouseButton==RIGHT)
143.     {
144.       // right button
145.       editorMode=true; // start editing
146.       selectNum=-1;    // undefined
147.       // loop existing rects
148.       for (int i = rectangles.size()-1; i >= 0; i--) {
149.         Rectangle rectMy = rectangles.get(i);
150.         // if mouse is over this rect
151.         if (rectMy.over())
152.           selectNum=i;
153.       } // for
154.       // no rect found?
155.       if (selectNum==-1)
156.         editorMode=false; // no editing
157.     } // else
158.   } // else
159. } // func
160. // 
161. 
     
162. void mouseReleased() {
163.   if (editorMode) {
164.     // ends dragging
165.     mouseHold=false;
166.   }
167.   else
168.   {
169.     // ends dragging
170.     if (mouseHold) {
171.       rectangles.add(new Rectangle(startX, startY, mouseX-startX, mouseY-startY));
172.       mouseHold=false;
173.       selectNum=( rectangles.size());
174.     }
175.   }
176. }
177. 
     
178. void keyPressed() {
179.   // key
180.   if (key!=CODED) {
181.     if (key=='q') {
182.       // println("abort rect");
183.       // ends dragging without drawing 
184.       mouseHold=false;
185.     }
186.     else if (key==BACKSPACE) {
187.       // undo
188.       mouseHold=false;
189.       if (rectangles.size()>0)
190.         rectangles.remove(rectangles.size()-1);
191.     }
192.     else if (key==RETURN||key==ENTER) {
193.       // only end editor mode
194.       editorMode=false;
195.     }
196.     else
197.     {
198.       // do nothing
199.     }
200.   }
201.   else
202.   {
203.     // if (key == CODED) from here on
204.     if (keyCode == LEFT)
205.     {
206.       // println("left");
207.     }
208.     else if (keyCode== RIGHT)
209.     {
210.       // println("right");
211.     }
212.     else
213.     {
214.       // do nothing
215.     }
216.   } // if (key == CODED)
217. }
218. 
     
219. // ==================================================================
220. 
     
221. class Rectangle {
222.   float x;
223.   float y;
224.   float w;
225.   float h;
226.   boolean selected  = false ;
227.   //
228.   // constr
229.   Rectangle(float tempX, float tempY, float tempW, float tempH) {
230.     x = tempX;
231.     y = tempY;
232.     w = tempW;
233.     h = tempH;
234.   }  //  constr
235.   //
236.   void display() {
237.     if (editorMode)
238.     {
239.       // editor mode        
240.       fill(0);
241.       noStroke();
242.       if (selected) {
243.         stroke (255, 2, 2);
244.         noFill();
245.       }
246.       rect(x, y, w, h);
247.     }
248.     else
249.     {
250.       // normal mode
251.       fill(0);
252.       noStroke();
253.       //      if (selected)
254.       //        stroke (255, 2, 2);
255.       rect(x, y, w, h);  // used w here
256.     }
257.   } // method
258.   //
259.   boolean over() {
260.     if (mouseX>x&&mouseY>y&&
261.       mouseX<x+w&&mouseY<y+h)
262.       return true;
263.     else
264.       return false;
265.   } // method
266.   //
267. }  // class ============================================
268. //

just curious but is your way faster or is mine using 
loadPixels()

from my understanding of loadPixels() both do more or less the same thing

I'm not asking whether it takes more memory but whether it is faster

      my initial coding

1.       color[] buttons = {#FF0000,//red
                      #FFFF00,//yellow
                      #00B050,//green
                      #0070C0,//blue
                      #F79646,//orange
                      #7F7F7F,//grey
                      #BFBFBF};//light grey
   color ReplacementColor;
   color TargetColor;
   color previouscolor;
   boolean previoustool=false;
   PImage[] Tools=new PImage[6];
   color currentcolor=color(0);
   int btnh=54;
   int btnpos=4;
   int SW=5;
   boolean penBool=true,
           lineToolBool=false,
           rubberBool=false;
   int lineToolX, lineToolY;
   void setup() {
     size(400,800);
     background(255);
     frameRate(200);
     loadPixels();
     Tools[0]=loadImage("penA.png");
     Tools[1]=loadImage("penB.png");
    
     Tools[2]=loadImage("rubberA.png");
     Tools[3]=loadImage("rubberB.png");
    
     Tools[4]=loadImage("lineToolA.png");
     Tools[5]=loadImage("lineToolB.png");
   }
   
   void draw() {
     stroke(255);
     strokeWeight(3);
     fill(255);
     rect(0,0,54,height);
     stroke(255);
     strokeWeight(3);
     fill(255);
     rect(0,0,width,54);
     for(int i=0;i<buttons.length;i++)
     {
       stroke(0);
       if(currentcolor == buttons[i]) stroke(255);
       strokeWeight(3);
       fill(buttons[i]);
       rect(0,i*btnh,51,51,10);
     }
     //strokeWeight++
     if(mouseX<51&&mouseY>7*btnh&&mouseY<8*btnh)
     {if(mousePressed){stroke(255); SW = SW+2;}
     fill(0);
     textSize(20);
     text("Increase StrokeWeight:",10*(btnh+4),35);}
     else {stroke(0);}
     strokeWeight(3);
     fill(255);
     rect(0,7*btnh,51,51,10);
     fill(0);
     ellipse((51/2),(7*btnh)+(51/2),30,30);
     stroke(255);;
     line(10,(7*btnh)+(51/2),40,(7*btnh)+(51/2));
     line((51/2),(7*btnh)+(51/4),(51/2),(8*btnh)-(51/4));
     //strokeWeight--  
     if(mouseX<51&&mouseY>8*btnh&&mouseY<9*btnh&&mousePressed == true)
     {stroke(255);if(SW>1){SW = SW-2;}}
     else {stroke(0);}
     strokeWeight(3);
     fill(255);
     rect(0,8*btnh,51,51,10);
     fill(0);
     ellipse((51/2),(8*btnh)+(51/2),16,16);
     stroke(255);
     line(18,(8*btnh)+(51/2),32,(8*btnh)+(51/2));
     //strokeWeight=5
     if(mouseX<51&&mouseY>9*btnh&&mouseY<10*btnh&&mousePressed == true)
     {stroke(255);SW = 5;}
     else {stroke(0);}
     strokeWeight(3);
     fill(255);
     rect(0,9*btnh,51,51,10);
     stroke(0);
     strokeWeight(5);
     line(0,(9*btnh)+(51/2),50,(9*btnh)+(51/2));
     //strokeWeight=7
     if(mouseX<51&&mouseY>10*btnh&&mouseY<11*btnh&&mousePressed == true)
     {stroke(255);SW = 7;}
     else {stroke(0);}
     strokeWeight(3);
     fill(255);
     rect(0,10*btnh,51,51,10);
     stroke(0);
     strokeWeight(7);
     line(0,(10*btnh)+(51/2),48,(10*btnh)+(51/2));
     //strokeWeight=9
     if(mouseX<51&&mouseY>11*btnh&&mouseY<12*btnh&&mousePressed == true)
     {stroke(255);SW = 9;}
     else {stroke(0);}
     strokeWeight(3);
     fill(255);
     rect(0,11*btnh,51,51,10);
     stroke(0);
     strokeWeight(9);
     line(0,(11*btnh)+(51/2),48,(11*btnh)+(51/2));
     strokeWeight(3);
     fill(255);
     rect(0,12*btnh,51,51,10);
    
    
     if(!penBool)
     {image(Tools[0],2*(btnh+btnpos),0);}
     else
     {image(Tools[1],2*(btnh+btnpos),0);}
    
     if(!rubberBool)
     {image(Tools[2],3*(btnh+btnpos),0);}
     else
     {image(Tools[3],3*(btnh+btnpos),0);}
    
     if(!lineToolBool)
     {image(Tools[4],4*(btnh+btnpos),0);}
     else
     {image(Tools[5],4*(btnh+btnpos),0);}
    
     if(mouseX<51&&mouseY<7*btnh&&mousePressed == true)previouscolor=currentcolor= get(mouseX,mouseY);
     if(mouseX>2*(btnh+btnpos)&&mouseX<3*(btnh+btnpos)&&mouseY<57&&mousePressed == true)
     {
           if(previoustool==true)
           currentcolor=previouscolor;
           penBool=true;
           rubberBool=false;
           lineToolBool=false;
     }
     if(mouseX>3*(btnh+btnpos)&&mouseX<4*(btnh+btnpos)&&mouseY<57&&mousePressed == true)
     {
           currentcolor= #FFFFFF;
           previoustool=true;
           penBool=false;
           rubberBool=true;
           lineToolBool=false;
     }
     //if(mouseX<51&&mouseY>16*btnh&&mouseY<17*btnh&&mousePressed == true) background(255);
     if(mouseX>4*(btnh+btnpos)&&mouseX<5*(btnh+btnpos)&&mouseY<57&&mousePressed == true)
     {
           if(previoustool==true)
           currentcolor=previouscolor;
           penBool=false;
           rubberBool=false;
           lineToolBool=true;
     }
     lineTool();
   }
   
   void mouseDragged()
   {
     if(mouseX>54&&mouseY>57&&penBool==true||rubberBool==true)
     {
       stroke(currentcolor);
       strokeWeight(SW);
       line(pmouseX,pmouseY,mouseX,mouseY);
     }
   }
   void lineTool()
   {
     if(lineToolBool==true&&mouseX>54&&mouseY>57&&mousePressed == true)
     {
       updatePixels();
       stroke(currentcolor);
       strokeWeight(SW);
       line(mouseX,mouseY,lineToolX,lineToolY);
     }
   }
   
   void mousePressed()
   {
      lineToolX = mouseX;
      lineToolY = mouseY;
   }
   
   void mouseReleased() {
       loadPixels();
   }
   
   

I don't know... sorry....