Feedback!

LCD HSB Drawing

Views:10523Difficulty: 4 Status: Deprecated

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 .

Images

Bite-Sized Art Maker

Bite-Sized Art Maker

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!
Rainbow Sketcher

Make wild rainbow sketches by adjusting the three color channels. Depending on the mode they can control the Hue, Saturation and Brightness, or the RGB channels.
Silkscreen Detail

The hand drawing could be yours!
Smile!

Tiny smiley face silkscreened next to the happy button.
Schematic

Electrical schematic.
PCB File

Board layout file.

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!

Video

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.

Code

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.

Download File

/* 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 #include #include // 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 piint 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

parts

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
Joystick	Thumb joystick with push button.	1	$3.95	Link
ATMEGA328P-AU	Integrated Circuits (ICs) MCU AVR 32K FLASH 32TQFPValue:1.8 V ~ 5.5 V 20MHz	1	$3.05	Link
Potentiometer	POT ROTARY, Linear 10K OHM 9MM SNAPINValue:10k	3	$0.76	Link
USB connector	USB Mini type BValue:female	1	$0.68	Link
Crystal	CRYSTAL 16.00000 MHZ 20PF SMDValue:16MHz	1	$0.53	Link
Button 6mm Through Hole	Tactile Switch Through Hole SPST-NO 0.05A 12VValue:0.05A @ 12VDC	3	$0.1	Link