157 – Drawing Pad in Processing (Final Project)

For the rest of the year, I’m going to highlight some impressive final projects in Computer Programming and BC Calculus.
The computer programming students have had the majority of the term to work on their projects and one of the requirements was to write a blog post about their experience.
Here’s a crosspost of a fantastic drawing program that one (female, yay!) student wrote in processing.org:

A Basic Drawing Program

Although I cannot stress enough that this is just a basic program, as it lacks the ability to undo (Which would be difficult to code I’d imagine, for me at least). I found myself mildly surprised at how effective this was at performing certain tasks. This could actually create something that looked half decent, if you knew how.

You can access the code here:

http://www.openprocessing.org/sketch/150625

 

Directions

The gui offers a few basic colors to pick from without bothering to deal with the sliders, there’s also a few basic brush widths to pick from. However if you want to try them out, the sliders alter a certain variable that makes up the color.

color custom = color(0+r,0+g,0+b,255+opac);

Also, for those of you that actually made a file for this, you can save the pictures you create with the save button.

Keyboard Shortcuts:

e – Increases brush width
q – Decreases brush width
z – Clears the canvas
c – Color picker
r – Increases the red value
t – Decreases the red value
b – Increases the blue value
n – Decreases the blue value
g – Increases the green value
h – Decreases the green value
d – Makes shades of gray darker
f – Makes shades of gray lighter
o – Makes brush strokes more solid
p – Makes brush strokes more see-through

 

Saving feature

Although you can play this game from the window, I highly recommend downloading processing and pasting the code (Which is found on the site) into your own file. Without the file on your computer the saving feature will not work.
How it saves:

void saving(boolean save)
{
  if (save == true)
  {
    //Start of borrowed code
    save("Test.png");
    PImage img = loadImage("Test.png");
    PImage myImage = img.get(152,0,648,800); //Get a portion of the loaded image with displaying it
    myImage.save("Final.png"); //Save the portion of the image without displaying it
    //End of borrowed code
  }
}

//This is checked whenever the mouse clicks:

//Save button
  if (((mouseX > 0) && (mouseX < 100)) && ((mouseY > 700) && (mouseY < 750)))
  {
    save = true;
  }

Basically it makes the entire window an image, then it takes that image and only takes the canvas, which is everything to the right of the x value of 150. It then saves both of these images as “Test” and “Final”. If you do not rename the “Final” file, it will be overwritten, so be careful. Although you should still save often, because there is no going back once an error is made, unless you have the skill to fix it.

This is the "Test" file
This is the “Test” file
This is the "Final" file
This is the “Final” file

The Rainbow In One Stroke

Unlike most drawing programs, this allows for something quite useful, changing colors as you draw. The thing is this code is very simple, I’m actually surprised I don’t see it in other drawing programs.

//Makes it less red as it decreases
  if (key == 't')
  {
    if (r>3)
    {
      r = r - 4;
      color custom = color(0+r,0+g,0+b,0+opac);
      choosenColor = custom;
    }
  }
  //Makes it less blue as it decreases
  if (key == 'n')
  {
    if (b>3)
    {
      b = b - 4;
      color custom = color(0+r,0+g,0+b,0+opac);
      choosenColor = custom;
    }
  }
  //Makes it less green as it decreases
  if (key == 'h')
  {
    if (g>3)
    {
      g = g - 4;
      color custom = color(0+r,0+g,0+b,0+opac);
      choosenColor = custom;
    }
  }
//The opposite is used for increasing the values

When they are used they can produce a nice transition of colors, which are very convenient in creating things such as backgrounds and skies.

An example of the color transition.

An example of color changing, note this is all one line.
An example of color changing, please note this is all one line.

 

Avoid Mistakes

I have to admit, it would of been smarter to line these buttons in another drawing program, or maybe create an entire gui image and just use that instead. I had to deal with the tedious task of placing each button, at odd intervals no less. It would of been less time consuming, and it wouldn’t take so long to edit it if something was off. Even the size, I ended up creating it too big for my laptop screen, making it a pain to use, but it’s even more of  a pain to relocate every button and where to press to get a certain effect.

 

Gallery

Just a few pictures I whipped up real quick, they’re not too bad?

BubbleNightSkyStrangeSkyRedness

 

All of these below are from before I fixed the cropping

Bubble ColorsSkyNight skyFog

3 years ago

Leave a Reply

Your email address will not be published. Required fields are marked *