# Best way to make selection options

**URL:** https://discourse.processing.org/t/best-way-to-make-selection-options/15993
**Category:** Coding Questions
**Created:** [November 30, 2019, 7:19pm UTC](https://discourse.processing.org/t/best-way-to-make-selection-options/15993 "2019-11-30T19:19:08Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![keeg23](https://avatars.discourse-cdn.com/v4/letter/k/4da419/32.png) [@keeg23](https://discourse.processing.org/u/keeg23)
#### Post date: [November 30, 2019, 7:19pm UTC](https://discourse.processing.org/t/best-way-to-make-selection-options/15993/1 "2019-11-30T19:19:08Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)
#### Post date: [November 30, 2019, 8:11pm UTC](https://discourse.processing.org/t/best-way-to-make-selection-options/15993/2 "2019-11-30T20:11:43Z")

</div>

Hello,

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

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/0/0e815a2b78a5ef0105a213d2547eeb563bf359cf.png)

Checkout the Tutorials and Examples here:  
[https://processing.org/tutorials/](https://processing.org/tutorials/)

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

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/](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.

🙂

---

<div class="post-metadata">

### Author: ![Lexyth](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/lexyth/32/7403_2.png) [@Lexyth](https://discourse.processing.org/u/Lexyth)
#### Post date: [November 30, 2019, 11:13pm UTC](https://discourse.processing.org/t/best-way-to-make-selection-options/15993/3 "2019-11-30T23:13:46Z")

</div>

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

```auto
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());
}

```

---

<div class="post-metadata">

### Author: ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)
#### Post date: [December 1, 2019, 1:50am UTC](https://discourse.processing.org/t/best-way-to-make-selection-options/15993/4 "2019-12-01T01:50:16Z")

</div>

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.

```auto
// 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.

---

<div class="post-metadata">

### Author: ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)
#### Post date: [December 1, 2019, 3:30pm UTC](https://discourse.processing.org/t/best-way-to-make-selection-options/15993/5 "2019-12-01T15:30:47Z")

</div>

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

> [@A very simple draw and save program](https://discourse.processing.org/t/a-very-simple-draw-and-save-program/12669/5):
>
> Updated GLV Paint Thanks for all the support! [image] // GLV Paint // Version 0.01 // 2019-11-30 // Changes: // Major bug that caused a "NullPointerException " now fixed. // Major update to comments. // Intuitive interface; key letter matches first letter of function. // Ergonomic postioning for 3 finger control with left hand or right hand! // Can now change color with mouse wheel or keypad! // A 125% increase in drawing area! // Saved image now has a name that makes sense! Saves to "image…

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

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:

[![](https://img.youtube.com/vi/fj_UebW246k/maxresdefault.jpg "Exploring 3D Space") ](https://www.youtube.com/watch?v=fj_UebW246k)

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

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

> **[RGB - Android Apps on Google Play](https://play.google.com/store/search?q=RGB&c=apps&hl=en)**
>
> Enjoy millions of the latest Android apps, games, music, movies, TV, books, magazines & more. Anytime, anywhere, across your devices.

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):

> <https://play.google.com/store/apps/details?id=nextprototypes.bluetoothtRGB&hl=en>
>
> Simple Bluetooth RGB controller...

🙂