# \*URGENT\* Assistance with Drawing Program

**URL:** <https://discourse.processing.org/t/urgent-assistance-with-drawing-program/27046>\
**Category:** Coding Questions\
**Tags:** homework\
**Created:** [January 14, 2021, 5:13am UTC](https://discourse.processing.org/t/urgent-assistance-with-drawing-program/27046 "2021-01-14T05:13:39Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![Prxt.3k](https://avatars.discourse-cdn.com/v4/letter/p/9e8a1a/32.png) [@Prxt.3k](https://discourse.processing.org/u/Prxt.3k)\
**Post date:** [January 14, 2021, 5:13am UTC](https://discourse.processing.org/t/urgent-assistance-with-drawing-program/27046/1 "2021-01-14T05:13:39Z")

</div>

I am creating a drawing program similar to paint for a school assignment, but I would like to know if someone has the code for the shape selector box similar to Microsoft paint because I would like to elevate my project. I require code for the box and all the shapes inside, so when I click on one of the shape icons it projects the shape which is resize-able on my drawing canvas. If possible guide me through your code so I understand coding better. I am on a short deadline so help as soon as possible would be appreciated. Thank you Everyone in Advance

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [January 14, 2021, 8:39am UTC](https://discourse.processing.org/t/urgent-assistance-with-drawing-program/27046/2 "2021-01-14T08:39:03Z")

</div>

Well, with a “shape selector box” you mean

- circle rectangle triangle… to choose from.

Ok, that’s just a bunch of buttons.

BUT once you stored the shape type in an int variable you need to act on it. So there are different ways to handle mouse input.

- For a rect a rect changes with the mouse, for a circle a circle and so on.

So it’s not only the tool box it’s the entire drawing.

Besides, we don’t know your Sketch. When you change an existing rectangle while placing it the drawing underneath will get lost. Unless you stored it in an ArrayList or image. Did you do this?

In general we don’t provide full code solutions here since that would be regarded as cheating

Here is an example with key input (instead of buttons) for the shape types / modes

Chrisir

**Sketch**

```auto
float startX=-1, startY=-1;

// constants 
final int lineMode = 0;
final int circleMode = 1;
final int rectMode = 2;
final int brushMode = 3;
int mode = brushMode; // current 

String[] description={
  "line mode", 
  "ellipse mode", 
  "rect mode", 
  "points mode"
}; 

//----------------------------------------------------------------------------------------------------

void setup() {
  size(900, 500);
  background(255);
} // func 

void draw() {

  showText();

  if (mode==lineMode) {
    if (startX>=0) {
      stroke(random(pmouseX), random(pmouseY), abs(pmouseX-pmouseY));
      line(startX, startY, pmouseX, pmouseY);
    }
  } else if (mode==circleMode) {
    if (startX>=0) {
      noFill();
      stroke(random(pmouseX), random(pmouseY), abs(pmouseX-pmouseY));
      ellipse (startX, startY, mouseX-startX, mouseY-startY);
    }
  } else if (mode==rectMode) {
    if (startX>=0) {
      noFill();
      stroke(random(pmouseX), random(pmouseY), abs(pmouseX-pmouseY));
      rect (startX, startY, mouseX-startX, mouseY-startY);
    }
  } else if (mode==brushMode) {
    if (startX>=0) {
      noFill();
      for (int i=0; i<11; i++) {
        float r=random(18);
        float angle = random(TWO_PI); 
        float x1=(r*cos(angle)) + mouseX;
        float y1=(r*sin(angle)) + mouseY;
        stroke(255, 0, 0); 
        point(x1, y1);
      }
    }
  } else {
    println("Error on mode : 176");  
    exit();
  }
} // func draw() 

// -----------------------------------------------------------------

void showText() {
  noStroke(); 
  fill(111);
  rect(0, 0, width, 20);

  fill(255);
  text("Modes: e (ellipses), r (rectangles), l (lines), b (points). Current mode is "
    +description[mode]
    +". Mouse to draw. c to clear. q to quit.", 
    14, 14);
}

void keyPressed(){
  if (keyPressed) {
    if (key == 'c') {
      background(255);
    } else if (key==ESC) {
      key=0;
      startX=-1;
    }
    // ---------------------- modes 
    else if (key=='e') {
      mode = circleMode;
      println ("mode = circle Mode");
      startX=-1;
    } else if (key=='l') {
      mode = lineMode;
      println ("mode = line Mode");
      startX=-1;
    } else if (key=='r') {
      mode = rectMode;
      println ("mode = rect Mode");
      startX=-1;
    } else if (key=='b') {
      mode = brushMode;
      println ("mode = brush Mode");
      startX=-1;
    }

    // ---------------------------- quit 
    else if (key=='q') {
      exit(); // quit
    }
  } //
} // func 

void mousePressed() {
  startX=mouseX;
  startY=mouseY;
}

void mouseReleased() {
  startX=-1;
  startY=-1;
}
//

```

---

<div class="post-metadata">

**Author:** ![Prxt.3k](https://avatars.discourse-cdn.com/v4/letter/p/9e8a1a/32.png) [@Prxt.3k](https://discourse.processing.org/u/Prxt.3k)\
**Post date:** [January 14, 2021, 4:32pm UTC](https://discourse.processing.org/t/urgent-assistance-with-drawing-program/27046/3 "2021-01-14T16:32:35Z")

</div>

Hey, First of All, Thank you very much, I genuinely appreciate it because I wasn’t expecting any replies.

I’ve only done processing for a month and 15days, so I basically don’t know anything advanced. The reason I asked for the exact code was that my teacher isn’t willing to teach it to me since it’s well above my curriculum. But he told me if I managed to find the code, he is willing to explain it to me.

for your program with buttons, the buttons seem to not project anything (sorry if it’s just not understanding the program), and for your other program, it just creates the shape in multiple colors instead of a shape that can be resized.

if you want me to show you my sketch, I can but I’m just a beginner so I don’t think that’s going to be very helpful.

Thanks again,

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [January 14, 2021, 5:05pm UTC](https://discourse.processing.org/t/urgent-assistance-with-drawing-program/27046/4 "2021-01-14T17:05:56Z")

</div>

You can merge my sketches

They are just an inspiration

---

<div class="post-metadata">

**Author:** ![Prxt.3k](https://avatars.discourse-cdn.com/v4/letter/p/9e8a1a/32.png) [@Prxt.3k](https://discourse.processing.org/u/Prxt.3k)\
**Post date:** [January 14, 2021, 5:24pm UTC](https://discourse.processing.org/t/urgent-assistance-with-drawing-program/27046/5 "2021-01-14T17:24:58Z")

</div>

I am sorry but I don’t think I understand what you mean,

Regards,

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [January 14, 2021, 5:37pm UTC](https://discourse.processing.org/t/urgent-assistance-with-drawing-program/27046/6 "2021-01-14T17:37:54Z")

</div>

I mean that you can write your own sketch further (since we don’t post full code solutions) and that you can use parts from my sketch like buttons or the switch mode

---

<div class="post-metadata">

**Author:** ![Prxt.3k](https://avatars.discourse-cdn.com/v4/letter/p/9e8a1a/32.png) [@Prxt.3k](https://discourse.processing.org/u/Prxt.3k)\
**Post date:** [January 14, 2021, 5:52pm UTC](https://discourse.processing.org/t/urgent-assistance-with-drawing-program/27046/7 "2021-01-14T17:52:44Z")

</div>

well, I am a complete beginner so anything I haven’t learnt I cant do yet, you see I am looking for full code solutions because they only possible way for me to learn this is by asking my teacher, and since this is above my required level of code. He wont teach it to me, but I’ve compromised with that if I can find the code we will try to explain it to me.

If you cant send it due to rules I completely understand, I am just eager to learn but I have a short deadline.

Thank you for all the assistance genuinely appreciated,

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [January 14, 2021, 5:55pm UTC](https://discourse.processing.org/t/urgent-assistance-with-drawing-program/27046/8 "2021-01-14T17:55:59Z")

</div>

This is difficult because

1. it is part of an academic assessment and we don’t post full code solutions as mentioned by @Chrisir
2. you have not posted any code so we can’t be sure that you have achieved anything yet
3. as a lecturer I would find it difficult to find the time to explain code written by a third party to a student when it is well above their programming skill level 🤔

---

<div class="post-metadata">

**Author:** ![Prxt.3k](https://avatars.discourse-cdn.com/v4/letter/p/9e8a1a/32.png) [@Prxt.3k](https://discourse.processing.org/u/Prxt.3k)\
**Post date:** [January 14, 2021, 6:05pm UTC](https://discourse.processing.org/t/urgent-assistance-with-drawing-program/27046/9 "2021-01-14T18:05:17Z")

</div>

Alright, I understand where your coming from. Thank you, I will try to see what my next step should be, by the way, this isn’t part of my assessment, since anything we haven’t learned cant be graded therefore I just wanted to learn new code,

Thanks, and sorry for the inconvenience @quark and @Chrisir!

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [January 14, 2021, 6:19pm UTC](https://discourse.processing.org/t/urgent-assistance-with-drawing-program/27046/10 "2021-01-14T18:19:21Z")

</div>

Maybe start with showing your entire Sketch here

---

<div class="post-metadata">

**Author:** ![Prxt.3k](https://avatars.discourse-cdn.com/v4/letter/p/9e8a1a/32.png) [@Prxt.3k](https://discourse.processing.org/u/Prxt.3k)\
**Post date:** [January 14, 2021, 6:38pm UTC](https://discourse.processing.org/t/urgent-assistance-with-drawing-program/27046/11 "2021-01-14T18:38:44Z")

</div>

ColorPicker cp;  
import ddf.minim._;  
import ddf.minim.analysis._;  
import ddf.minim.effects._;  
import ddf.minim.signals._;  
import ddf.minim.spi._;  
import ddf.minim.ugens._;

//Credits  
// Press CTRL+Z to undo, CTRL+SHIFT+Z to redo  
// We need these to know if CTRL/SHIFT are pressed  
// Quit button variables

Boolean draw=false;  
float drawingSurfaceX, drawingSurfaceY, drawingSurfaceWidth, drawingSurfaceHeight;  
float drawingDiameter;

float quitButtonX, quitButtonY, quitButtonWidth, quitButtonHeight;  
color buttonColour, resetWhite=#FFFFFF;  
color circleRed = #FF0303;  
float masterStroke= 1;  
//undo  
float undoX, undoY, undoWidth, undoHeight;  
//redo  
float redoX, redoY, redoWidth, redoHeight;

float oldX;  
float oldY;

boolean controlDown = false;  
boolean shiftDown = false;  
PImage UndoI;  
PImage RedoI;  
float PauseButtonX1, PauseButtonY1, PauseButtonDiameter;  
int loopIntNum = 1;

//Global Variables  
AudioPlayer song1;

Minim minim;  
Undo undo;

void setup() {  
textSetup();  
fullScreen();  
smooth();  
background(#A29F9F);  
frameRate( 100 );  
minim = new Minim(this);  
song1 = minim.loadFile(“Sample.mp3”);  
song1.play();

```
 // Quit Button Location

```

quitButtonX = width_18.3/19;  
quitButtonY = height_0.1/300;  
quitButtonWidth = width_1/27;  
quitButtonHeight = height_1/27;

//undo  
undoX = width_13/30;  
undoY = height_2/20;  
undoWidth = width_1/30;  
undoHeight = height_1.5/30;  
//redo  
redoX = width_15/30;  
redoY = height_2/20;  
redoWidth = width_1/30;  
redoHeight = height_1.5/30;

drawingSurfaceX = width_1/11;  
drawingSurfaceY = height_0.08;  
drawingSurfaceWidth = width_8/9;  
drawingSurfaceHeight = height_9/10;  
fill(255);

rect(drawingSurfaceX, drawingSurfaceY, drawingSurfaceWidth, drawingSurfaceHeight);

undo = new Undo(10);  
//UndoI = loadImage(“UndoI.png”);  
//RedoI = loadImage(“RedoI.png”);

```
cp = new ColorPicker( 10, 10, 225, 225, 255 );

```

}  
void draw() {

//Quit Button (Draw)

if ( mouseX\>quitButtonX && mouseX\<quitButtonX+quitButtonWidth && mouseY\>quitButtonY && mouseY\<quitButtonY+quitButtonHeight ) {  
buttonColour = circleRed;  
} else {  
buttonColour = resetWhite;  
}  
fill(buttonColour);  
rect(quitButtonX, quitButtonY, quitButtonWidth, quitButtonHeight);  
textDraw();  
fill(0);  
//

line(450, 30, 500, 30);  
strokeWeight(4);  
line(450, 50, 500, 50);  
strokeWeight(8);  
line(450, 80, 500, 80);  
strokeWeight(1);  
fill(255);

rect(250, 10, 50, 50);  
if(mousePressed){  
if(mouseX \> 450 && mouseX \<500){  
if(mouseY \>10 && mouseY \<40){  
masterStroke= 1; }  
}  
if(mouseX \> 450 && mouseX \<500){  
if(mouseY \>40 && mouseY \<70){  
masterStroke= 4; }  
}  
if(mouseX \> 450 && mouseX \<500){  
if(mouseY \> 70 && mouseY \<100){  
masterStroke= 7;  
}  
}  
strokeWeight(masterStroke);  
}  
if (draw == true && mouseX\>drawingSurfaceX && mouseX\<drawingSurfaceX+drawingSurfaceWidth && mouseY\>drawingSurfaceY && mouseY\<drawingSurfaceY+drawingSurfaceHeight) {  
stroke(cp.penTool);  
line(mouseX, mouseY, pmouseX, pmouseY);

```
}

```

cp.render();

```
 //PImage UndoI = loadImage("UndoI.png");
 //image(UndoI, 2, 2);
 
 //PImage RedoI = loadImage("RedoI.png");
 //image(RedoI, 2, 2);

```

}  
void mouseReleased() {  
// Save each line we draw to our stack of UNDOs  
undo.takeSnapshot();  
}

void keyPressed() {  
// Remember if CTRL or SHIFT are pressed or not  
if (key == CODED) {  
if (keyCode == CONTROL)  
controlDown = true;  
if (keyCode == SHIFT)  
shiftDown = true;  
return;  
}  
// Check if we pressed CTRL+Z or CTRL+SHIFT+Z  
if (controlDown) {  
if (keyCode == ‘Z’) {  
if (shiftDown)  
undo.redo();  
else  
undo.undo();  
}  
return;  
}  
// Check if we pressed the S key  
if (key==‘s’) {  
saveFrame(“image####.png”);  
}

if ( key == ’ ’ ) println("[space]");{ // Press Space to PAUSE & PLAY  
if ( song1.isPlaying() ) {  
song1.pause();  
} else if ( song1.position() == song1.length() ) {  
song1.rewind();  
song1.play();  
} else {  
song1.play();  
//Play  
}  
}  
//  
if ( key == ‘s’ || key == ‘S’ ) {  
if ( song1.isPlaying() ) {  
song1.pause();  
song1.rewind();  
} else if ( song1.position() == song1.length() ) {  
song1.rewind();  
} else {  
song1.rewind();  
}  
}

if ( key == ‘f’ || key == ‘f’ ) song1.skip(1000);  
if ( key == ‘r’ || key == ‘R’ ) song1.skip(-1000);  
if ( key == ‘l’ || key == ‘L’ ) song1.loop(loopIntNum);

// ================================================

}// End of func

void keyReleased() {  
// Remember if CTRL or SHIFT are pressed or not  
if (key == CODED) {  
if (keyCode == CONTROL)  
controlDown = false;  
if (keyCode == SHIFT)  
shiftDown = false;  
}  
}

class Undo {  
// Number of currently available undo and redo snapshots  
int undoSteps=0, redoSteps=0;  
CircImgCollection images;

Undo(int levels) {  
images = new CircImgCollection(levels);  
}

public void takeSnapshot() {  
undoSteps = min(undoSteps+1, images.amount-1);  
// each time we draw we disable redo  
redoSteps = 0;  
images.next();  
images.capture();  
}  
public void undo() {  
if(undoSteps \> 0) {  
undoSteps–;  
redoSteps++;  
images.prev();  
images.show();  
}  
}  
public void redo() {  
if(redoSteps \> 0) {  
undoSteps++;  
redoSteps–;  
images.next();  
images.show();  
}  
}  
}

class CircImgCollection {  
int amount, current;  
PImage[] img;  
CircImgCollection(int amountOfImages) {  
amount = amountOfImages;

```
// Initialize all images as copies of the current display
img = new PImage[amount];
for (int i=0; i<amount; i++) {
  img[i] = createImage(width, height, RGB);
  img[i] = get();
}

```

}  
void next() {  
current = (current + 1) amount; } void prev() { current = (current - 1 + amount) amount;  
}  
void capture() {  
img[current] = get();  
}  
void show() {  
image(img[current], 0, 0);  
}  
}

//------------------------------------------\> Main Color wheel Code

public class ColorPicker  
{  
int x, y, w, h, c;  
PImage cpImage;  
color penTool;

public ColorPicker ( int x, int y, int w, int h, int c )  
{  
this.x = x;  
this.y = y;  
this.w = w;  
this.h = h;  
this.c = c;  
this.penTool = c;

```
cpImage = new PImage( w, h );

init();

```

}

private void init ()  
{  
// draw color.  
int cw = w - 60;  
for( int i=0; i\<cw; i++ )  
{  
float nColorPercent = i / (float)cw;  
float rad = (-360 \* nColorPercent) \* (PI / 180);  
int nR = (int)(cos(rad) \* 127 + 128) \<\< 16;  
int nG = (int)(cos(rad + 2 \* PI / 3) \* 127 + 128) \<\< 8;  
int nB = (int)(Math.cos(rad + 4 \* PI / 3) \* 127 + 128);  
int nColor = nR | nG | nB;

```
  setGradient( i, 0, 1, h/2, 0xFFFFFF, nColor );
  setGradient( i, (h/2), 1, h/2, nColor, 0x000000 );
}

// draw black/white.
drawRect( cw, 0, 30, h/2, 0xFFFFFF );
drawRect( cw, h/2, 30, h/2, 0 );

// draw grey scale.
for( int j=0; j<h; j++ )
{
  int g = 255 - (int)(j/(float)(h-1) * 255 );
  drawRect( w-30, j, 30, 1, color( g, g, g ) );
}

```

}

private void setGradient(int x, int y, float w, float h, int c1, int c2 )  
{  
float deltaR = red(c2) - red(c1);  
float deltaG = green(c2) - green(c1);  
float deltaB = blue(c2) - blue(c1);

```
for (int j = y; j<(y+h); j++)
{
  int c = color( red(c1)+(j-y)*(deltaR/h), green(c1)+(j-y)*(deltaG/h), blue(c1)+(j-y)*(deltaB/h) );
  cpImage.set( x, j, c );
}

```

}

private void drawRect( int rx, int ry, int rw, int rh, int rc )  
{  
for(int i=rx; i\<rx+rw; i++)  
{  
for(int j=ry; j\<ry+rh; j++)  
{  
cpImage.set( i, j, rc );  
}  
}  
}

public void render ()  
{  
image( cpImage, x, y );  
if( mousePressed &&  
mouseX \>= x &&  
mouseX \< x + w &&  
mouseY \>= y &&  
mouseY \< y + h )  
{  
c = get( mouseX, mouseY );  
}  
fill( c );  
rect( x, y+h+10, 20, 20 );  
penTool = color©;  
}  
}

//---------------------------------------------------------------------------\>  
void mousePressed() {  
// Press to Exit  
if ( mouseX\>quitButtonX && mouseX\<quitButtonX+quitButtonWidth && mouseY\>quitButtonY && mouseY\<quitButtonY+quitButtonHeight ) exit();

if ( mouseX\>drawingSurfaceX && mouseX\<drawingSurfaceX+drawingSurfaceWidth && mouseY\>drawingSurfaceY && mouseY\<drawingSurfaceY+drawingSurfaceHeight) {  
println(“drawing surface”);  
if (draw == false) {  
draw = true;  
} else {  
draw = false;  
}

}  
}

So this is my program so far, and I need to add something similar to the box with a lot of shapes in Microsoft paint.

Regards,

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [January 14, 2021, 6:45pm UTC](https://discourse.processing.org/t/urgent-assistance-with-drawing-program/27046/12 "2021-01-14T18:45:20Z")

</div>

Thank you.

very impressive.

Here is a new version where you can click m to go from  
rect to circle mode - again variable mode.

Please see how beautiful you can change the rect’s and circle’s size during entering them. By click the mouse once for start and once for end the process for a rect / circle.