Feedback!

LCD HSB Drawing

Views: 8628 Difficulty: 4 Status: Deprecated
Screen_shot_2012-12-21_at_6.52.55_pm

Control the hue, value and saturation on this pocket-sized joystick drawing machine.

Three potentiometers control the hue, saturation, and brightness of your drawing. Alternatively the potentiometers can be mapped to the red green and blue color channels, but it tends to be more intuitive to work in the HSB model. This project uses the 1.8" thin film transistor (TFT) Liquid Crystal Display (LCD) screen. You can buy them from adafruit either as a breakout board or just the screen.

Bite-Sized Art Maker

Screen_shot_2012-12-21_at_6.51.56_pm
The push button joystick controls your rainbow colored paint brush! Notice the PCB silkscreen of the hand drawing, that's what we call onomatopoetic electronics!

Slow drawing joy. Potentiometer color spin!

Drawing spirals and hearts!

Video

Watch two drawings happen in parallel. It's like a rainbow etch-a-sketch! The video is sped up because we know your time is important.

Arduino Code for full spectrum RGB HSB Joystick Drawing

Here is the Arduino code to make your hand-held art machine! It uses our color library as well as the ST7735 TFT LCD Screen library from adafruit (click the zip button to download the whole library. Lastly, we use the Arduino SPI library to communicate with the TFT LCD Screen. Drawing onto the screen is done by the aptly named joy_draw function:
void joy_draw(int color){
  int xraw = analogRead(0);
  int yraw = 1024-analogRead(1);
  xraw -= 512;
  yraw -= 512;
  xraw /= 140;
  yraw /= 140;
  cur_x+= xraw ;
  cur_x = constrain(cur_x, 0, tft_width - radius);
  cur_y+= yraw;
  cur_y = constrain(cur_y, 0, tft_height - radius);
  if (digitalRead( btns[0] ) == HIGH){
    if ( mode == 0 )tft.fillCircle(cur_x, cur_y, radius/2,color);
    else tft.fillRect(cur_x, cur_y, radius, radius,color);
  } else {
    if ( mode == 0 )tft.drawCircle(cur_x, cur_y, radius/2,color);
    else tft.drawRect(cur_x, cur_y, radius, radius,color);
  }
}

Basically, this function reads the input from the joystick and constrains it to lie on the dimensions of the screen (128 by 160). Then, depending on whether the button (the one with index == btns[0]) is being pressed or not, it draws the outline of a circle or a filled circle. Lastly, we grab a full-spectrum color from the three potentiometers at the top of the board:
float h = analogRead(4) ;
  float s = analogRead(3) ;
  float b = analogRead(2) ;
  h /= 1024.0;
  s /= 1024.0;
  b /= 1024.0;
  cur_color.convert_hcl_to_rgb(h,s,b);
  int color = cur_color.get_color_16bit();
The get_color_16bit function is a nice feature supplied by our color library which does bit-packing for you necessary to get the color in the format that the screen is expecting.
/* LucidTronix Full Spectrum Joystick Drawing Machine
 * See the tutorial with images, schematics, and more at
 * http://lucidtronix.com/tutorials/12
 * Uses adafruit 1.8" tft lcd Screen
 * over spi bus.
 */

// Pins SCLK and MOSI are fixed in hardware, and pin 10 (or 53) 
// must be an output
//#define sclk 13    // for MEGAs use pin 52
//#define mosi 11    // for MEGAs use pin 51
#define cs 10   // for MEGAs you probably want this to be pin 53
#define dc 9
#define rst 8  // you can also connect this to the Arduino reset

#include <color.h>
#include <ST7735.h>
#include <SPI.h>
// Option 1: use any pins but a little slower
//ST7735 tft = ST7735(cs, dc, mosi, sclk, rst);  

// Option 2: must use the hardware SPI pins 
// (for UNO thats sclk = 13 and sid = 11) and pin 10 must be 
// an output. This is much faster - also required if you want
// to use the microSD card (see the image drawing example)
ST7735 tft = ST7735(cs, dc, rst);
float p = 3.141592; // value for pi
int tft_width = 128;
int tft_height = 160;

int btns[] = {0,1,2,3};
int radius = 8;
int mode = 0;
int num_modes = 3;
int backlightPin = 5;
Color cur_color(1,1,1);
void setup(void) {
  pinMode(backlightPin, OUTPUT);
  
  tft.initR();               // initialize a ST7735R chip

  tft.writecommand(ST7735_DISPON);
  int bg = cur_color.get_color_16bit();
  tft.fillScreen(bg);
  delay(700);
  for (int i = 0 ; i < 4 ; i++) pinMode(btns[i],INPUT);
}
int cur_r = 0;
int cur_g = 0;
int cur_b = 0;
int cur_x = 60;
int cur_y = 60;
void loop() {
  digitalWrite (backlightPin,HIGH);
  float h = analogRead(4) ;
  float s = analogRead(3) ;
  float b = analogRead(2) ;
  h /= 1024.0;
  s /= 1024.0;
  b /= 1024.0;
  cur_color.convert_hcl_to_rgb(h,s,b);
  int color = cur_color.get_color_16bit(); 
  delay(60);
  if (mode == 2 ) radius = analogRead(2) >> 4; 
  joy_draw(color);
 
  if ( digitalRead(btns[1]) == HIGH) {
    mode = ++mode % num_modes;
    delay(500);
  } 
  if ( digitalRead(btns[2]) == HIGH) {
    tft.fillScreen(~color);
    delay(500);
  } 
}
void joy_draw(int color){
  int xraw = analogRead(0);
  int yraw = 1024-analogRead(1);
  xraw -= 512;
  yraw -= 512;
  xraw /= 140;
  yraw /= 140;
  cur_x+= xraw ;
  cur_x = constrain(cur_x, 0, tft_width - radius);
  cur_y+= yraw;
  cur_y = constrain(cur_y, 0, tft_height - radius);
  if (digitalRead( btns[0] ) == HIGH){
    if ( mode == 0 )tft.fillCircle(cur_x, cur_y, radius/2,color);
    else tft.fillRect(cur_x, cur_y, radius, radius,color);
  } else {
    if ( mode == 0 )tft.drawCircle(cur_x, cur_y, radius/2,color);
    else tft.drawRect(cur_x, cur_y, radius, radius,color);
  }
}

Parts

Title Description # Cost Link Picture
TFT LCD Screen 1.8 inch 160 x 128 pixels LCD screen. ST7735R driver. JDT-1800. 1 $9.95 Link Id618_lrg
Joystick Thumb joystick with push button. 1 $3.95 Link 09032-03-l
ATMEGA328P-AU Integrated Circuits (ICs) MCU AVR 32K FLASH 32TQFP Value: 1.8 V ~ 5.5 V 20MHz 1 $3.05 Link Screen_shot_2012-12-28_at_7.31.33_pm
Potentiometer POT ROTARY, Linear 10K OHM 9MM SNAPIN Value: 10k 3 $0.76 Link Screen_shot_2012-12-28_at_7.41.04_pm
USB connector USB Mini type B Value: female 1 $0.68 Link Usb-m26ftr
Crystal CRYSTAL 16.00000 MHZ 20PF SMD Value: 16MHz 1 $0.53 Link Ecs-270-20-3x-en-tr
Button 6mm Through Hole Tactile Switch Through Hole SPST-NO 0.05A 12V Value: 0.05A @ 12VDC 3 $0.1 Link Screen_shot_2012-12-28_at_7.41.40_pm
Permalink: http://lucidtronix.com/tutorials/12
Display bitmap images and text files and folders with this TFT LCD screen and SD Card navigator....
Our take on the classic bouncing ball, paddle game....
Print bitmaps, cellular automata, drawings and text.....
Mixing pixels from two face images together....
Play pong on a little LCD screen with two big joysticks....
From simple rules emerge mysterious and intricate patterns....
Handheld gaming machine, based on the Arduino Leonardo, equipped with joystick, SD card and more....
3d view of a face using an SD card, accelerometer and a TFT LCD Screen...