Best way to make selection options

Processing Coding Questions
1

I need help with coding my paint program so I am able to switch between colors. But not sure the best way to set it up. Anything will help.

2

Hello,

Checkout the examples that come with Processing in File> Examples:

image

Checkout the Tutorials and Examples here:
https://processing.org/tutorials/

You may even want to just use keyboard to change colors and select. :slight_smile:

First thing that came to my mind is using HSB color and 2 keys (forward and reverse) to scroll through color wheel.
https://processing.org/tutorials/color/

With a little research and experimentation you will see that you have many choices for your project.

Best can be subjective and very much depends on the user and application.
You can decide what best is.

:slight_smile:

3

You might want to take a look at JColorChooser, but keep in mind that generally swing objects aren‘t the best option with Processing.

import javax.swing.JColorChooser;
import java.awt.Color;

void keyPressed() {
   color c;
   Color javaC = JColorChooser.showDialog(this, „Color“);
   c = color(javaC.getRed(), javaC.getGreen(), javaC.getBlue());
}
4

a very unusual way to select a color for a PAINTER
is mouse wheel with multiplexing key board,

try it if it fits to your working style.

// painter_basic_mousewheelplusplus 
// V0.2 with cursorimage ( brush color and size )
// v0.3 add clear // info()

int rval, gval, bval;               // drawn circle fill color RGB
color brush =color(0, 0, 0, 100);
int wval=5;                         // brush size
String outfile = "data/mypic.png";
PImage mycursor;
int csize = 30;

//_______________________________________________ SETUP
void setup() {
  size(500, 500);
  info();
  colorMode(RGB, 100);
  fill(brush);
  noStroke();
  background(100);
  mycursor = createImage(csize, csize, ARGB);
  set_cursor();
}

//_______________________________________________ DRAW
void draw() {                  // drawing mode  background(200,200,0);
  if ( mousePressed ) {
    if      ( mouseButton == LEFT )  fill(brush);
    else if ( mouseButton == RIGHT ) fill(100);
    circle(mouseX, mouseY, wval);
  }
}

//_______________________________________________ OPERATION Mouse Wheel Plus Plus
void mouseWheel(MouseEvent event) {   // move mouse wheel
  float e = event.getCount();
  if ( keyPressed && key == 'r' )  rval += e;
  if ( keyPressed && key == 'g' )  gval += e;
  if ( keyPressed && key == 'b' )  bval += e; 
  if ( keyPressed && key == 'w' )  wval += e;
  rval = constrain(rval, 0, 100);
  gval = constrain(gval, 0, 100);
  bval = constrain(bval, 0, 100);
  wval = constrain(wval, 1, 30);
  println("RGB ("+rval+","+gval+","+bval+"), brush "+wval);
  brush = color(rval, gval, bval);
  fill(brush);
  noStroke();
  set_cursor();
}

void keyPressed() {
  if ( key == 's' ) {
    save(outfile);
    println("saved to "+outfile);
  }
  if ( key == 'c' ) background(100);
  if ( key == 'h' ) info(); 

}

void info() {
 println("use mouse LEFT press for paint, RIGHT press for erase\nuse key: \n[s] for save picture\n[c] clear\n mousewheelplusplus: press\n[r] red\n[g] green\n[b] blue\n[w] brush size\nand turn mousewheel");  
}

void  set_cursor() {
  for ( int i = 0; i<mycursor.width; i++ ) for ( int j = 0; j<mycursor.height; j++)  mycursor.set(i, j, color(0, 0, 0, 0));  // set cursor transparent
  for ( int i = 0; i<wval; i++ ) for ( int j = 0; j<wval; j++)  mycursor.set(i, j, color(rval, gval, bval, 100));            // show brush color and size
  cursor(mycursor, 0, 0);
}

it is like using sliders but not see sliders,
the feedback works in 2 ways:

  • the console prints like color data
  • the cursor shows like brush size and selected color
    actually much like a real paintbrush

it would even allow like
left hand press one color key r g b or brush w
right hand press mouse button LEFT for paint
and with little training same time turn mouse wheel while paint ( move mouse )
to make a gradient.

1 Like
5

This topic inspired me to update my “simple” draw program:

Mostly just having fun with this and keeping it very simple. :slight_smile:

The scrollbars in the Processing examples are worth taking a look at.

I modified the Processing example program and did this (early version) and was able to put this on my Android devices also:

I have a version somewhere that changes color as well and saves favourites.

You may also get some ideas (searched for RGB) from:

This is a Bluetooth RGB app I can use to control (serial over Bluetooth) my Arduino (an RGB LED) and Processing window (circle changing colors):

:slight_smile: