EsploraTFTEtchASketch

An Esplora implementation of the classic Etch-a-Sketch.

Esplora TFT EtchASketch

This example for the Arduino TFT screen and Esplora draws a white line on the screen, based on the position of the joystick. To clear the screen, shake the Esplora. The values from the accelerometer will determine if the screen should be cleared or not.

Hardware Required

  • Arduino Esplora

  • Arduino TFT screen

Circuit

Esplora GLCDEtchASketch

Attach the screen to the socket on your Esplora, with the label "SD Card" facing up.

Code

To use the screen you must first include the SPI and TFT libraries. Don't forget to include the Esplora library as well.

1#include <Esplora.h>
2#include <TFT.h>
3#include <SPI.h>

Set up the cursor's x & y position. In the example, it starts in the center of the screen; determined by dividing the height and width of the screen by 2.

1int xPos = EsploraTFT.width()/2;
2int yPos = EsploraTFT.height()/2;

In

setup()
, initialize the display and clear the screen's background.

1void setup() {
2
3 EsploraTFT.begin();
4
5 EsploraTFT.background(0,0,0);
6}

Read the values of the joystick and map it to a smaller number. It's possible that your joystick doesn't read 0 when it is in the center position. To make sure the cursor only moves when the joystick is intentionally moved, use an if statement to check if it's position is inside a threshold (in this case -10 to 10). If it's within that range, son;t update the cursor position. However, if it is outside of that, move the cursor in the appropriate direction.

1void loop()
2{
3
4 int xAxis = Esplora.readJoystickX();
5
6 int yAxis = Esplora.readJoystickY();
7
8 if (xAxis<10 && xAxis>-10){
9
10 xPos=xPos;
11
12 }
13
14 else{
15
16 xPos = xPos + (map(xAxis, -512, 512, 2, -2));
17
18 }
19
20 if (yAxis<10 && yAxis>-10){
21
22 yAxis=yAxis;
23
24 }
25
26 else{
27
28 yPos = yPos + (map(yAxis, -512, 512, -2, 2));
29
30 }

You'll want to keep the cursor from moving offscreen with a few

if()
statements before you draw the point.

1if(xPos > 159){
2
3 (xPos = 159);
4
5 }
6
7 if(xPos < 0){
8
9 (xPos = 0);
10
11 }
12
13 if(yPos > 127){
14
15 (yPos = 127);
16
17 }
18
19 if(yPos < 0){
20
21 (yPos = 0);
22
23 }
24
25 EsploraTFT.stroke(255,255,255);
26
27 EsploraTFT.point(xPos,yPos);

Finally, check the value of the accelerometer. If the value of the x or y axis is over the threshold you determine, clear the screen with

background()
.

1if(abs(Esplora.readAccelerometer(X_AXIS))>200 || abs(Esplora.readAccelerometer(Y_AXIS))>200){
2
3 EsploraTFT.background(0,0,0);
4
5 }
6
7 delay(33);
8}

The complete sketch is below :

1/*
2
3 Esplora TFT EtchASketch
4
5 This example for the Arduino TFT and Esplora draws
6
7 a white line on the screen, based on the position
8
9 of the joystick. To clear the screen, shake the
10
11 Esplora, using the values from the accelerometer.
12
13 This example code is in the public domain.
14
15 Created 15 April 2013 by Scott Fitzgerald
16
17 http://www.arduino.cc/en/Tutorial/EsploraTFTEtchASketch
18
19 */
20
21#include <Esplora.h>
22#include <TFT.h> // Arduino LCD library
23#include <SPI.h>
24
25// initial position of the cursor
26int xPos = EsploraTFT.width() / 2;
27int yPos = EsploraTFT.height() / 2;
28
29void setup() {
30
31 // initialize the display
32
33 EsploraTFT.begin();
34
35 // clear the background
36
37 EsploraTFT.background(0, 0, 0);
38}
39
40void loop() {
41
42 int xAxis = Esplora.readJoystickX(); // read the X axis
43
44 int yAxis = Esplora.readJoystickY(); // read the Y axis
45
46 // update the position of the line
47
48 // depending on the position of the joystick
49
50 if (xAxis < 10 && xAxis > -10) {
51
52 xPos = xPos;
53
54 } else {
55
56 xPos = xPos + (map(xAxis, -512, 512, 2, -2));
57
58 }
59
60 if (yAxis < 10 && yAxis > -10) {
61
62 yAxis = yAxis;
63
64 } else {
65
66 yPos = yPos + (map(yAxis, -512, 512, -2, 2));
67
68 }
69
70 // don't let the point go past the screen edges
71
72 if (xPos > 159) {
73
74 (xPos = 159);
75
76 }
77
78 if (xPos < 0) {
79
80 (xPos = 0);
81
82 }
83
84 if (yPos > 127) {
85
86 (yPos = 127);
87
88 }
89
90 if (yPos < 0) {
91
92 (yPos = 0);
93
94 }
95
96 // draw the point
97
98 EsploraTFT.stroke(255, 255, 255);
99
100 EsploraTFT.point(xPos, yPos);
101
102 // check the accelerometer values and clear
103
104 // the screen if it is being shaken
105
106 if (abs(Esplora.readAccelerometer(X_AXIS)) > 200 || abs(Esplora.readAccelerometer(Y_AXIS)) > 200) {
107
108 EsploraTFT.background(0, 0, 0);
109
110 }
111
112 delay(33);
113}

Contribute to Arduino

Join the community and suggest improvements to this article via GitHub. Make sure to read out contribution policy before making your pull request.

Missing something?

Check out our store and get what you need to follow this tutorial.

Suggest Changes

The content on docs.arduino.cc is facilitated through a public GitHub repository. You can read more on how to contribute in the contribution policy.