URGENT Assistance with Drawing Program

Prxt.3k · January 14, 2021, 5:13am

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

Chrisir · January 14, 2021, 8:39am

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

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;
}
//

Prxt.3k · January 14, 2021, 4:32pm

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,

Chrisir · January 14, 2021, 5:05pm

You can merge my sketches

They are just an inspiration

Prxt.3k · January 14, 2021, 5:24pm

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

Regards,

Chrisir · January 14, 2021, 5:37pm

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

Prxt.3k · January 14, 2021, 5:52pm

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,

quark · January 14, 2021, 5:55pm

This is difficult because

it is part of an academic assessment and we don’t post full code solutions as mentioned by @Chrisir
you have not posted any code so we can’t be sure that you have achieved anything yet
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

Prxt.3k · January 14, 2021, 6:05pm

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!

Chrisir · January 14, 2021, 6:19pm

Maybe start with showing your entire Sketch here

Prxt.3k · January 14, 2021, 6:38pm

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 = width18.3/19;
quitButtonY = height0.1/300;
quitButtonWidth = width1/27;
quitButtonHeight = height1/27;

//undo
undoX = width13/30;
undoY = height2/20;
undoWidth = width1/30;
undoHeight = height1.5/30;
//redo
redoX = width15/30;
redoY = height2/20;
redoWidth = width1/30;
redoHeight = height1.5/30;

drawingSurfaceX = width1/11;
drawingSurfaceY = height0.08;
drawingSurfaceWidth = width8/9;
drawingSurfaceHeight = height9/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,

Chrisir · January 14, 2021, 6:45pm

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.

Topic		Replies	Views
Click on shape in array Coding Questions	2	1205	April 21, 2019
Help with color changing and display of drawn objects Coding Questions homework	3	928	May 6, 2020
Moving a shape by mouseClicked function Coding Questions	5	1453	October 4, 2018
Changing Images on Click? Coding Questions	4	765	October 15, 2018
Delete one shape and add another or moving shapes Coding Questions	4	560	January 15, 2019

*URGENT* Assistance with Drawing Program

Related topics

URGENT Assistance with Drawing Program