# 05 Arduino How? Let’s Play With a Potentiometer

Date:  May 21, 2017

Last lesson, we managed to draw a pong ball, and make it move and bounce off wall.  That is the basic of Pong Game.  If you hit something, you bounce off.

Now, let’s remove a wall.  Instead of using u8g2_drawFrame() function to draw a box.  You basically use the u8g2.drawVLine() and u8g2.drawHLine() to draw the vertical and horizontal lines.

``` // draw playing area
u8g2.drawVLine(0,0,64);
u8g2.drawHLine(0,0,128);
u8g2.drawHLine(0,63,128);```

Once you change the code, and run it, you will get three wall, the top, the bottom and the left wall.

Next thing we do, is to install a potentiometer.

What is a potentiometer?

This is a potentiometer.  It is a knob that you can turn, just like the volume knob.  There are three pins.  The right pin (as shown in photo) goes to 3.3V or 5V.  And the left pin goes to GND ground.  The middle pin can connect to analog input A0 on Arduino.

This is also a potentiometer.  A small one.

Let’s hook one potentiometer to our circuit board.

Let’s modify our codes.

1.  Let’s define some definitions.  We are reading the potentiometer at Analog A0 pin.  Let’s also define some PADDLE features.
```#define CONTROL_A A0       // Potentiometer reading the Analog pin A0
#define PADDLE_WIDTH 2     // The paddle has a width of 2 pixel
#define PADDLE_HEIGHT 20   // The paddle has a height of 20
#define PADDLE_PADDING 1```

2.  Let’s define some GLOBAL variables.

```int controlA;
int paddlePositionA = 0;
int lastPaddlePositionA = 0;```

3.  Let’s draw the paddle in the draw() function block.  Now, we have to figure out what is paddlePositionA.

``` // draw paddle
u8g2.drawBox(SCREEN_WIDTH-1-PADDLE_WIDTH, paddlePositionA, PADDLE_WIDTH, PADDLE_HEIGHT);```

4.  Hey, we have a screen, let’s make use of it to print extra information on it.  I want to know what is the reading of controlA.  I also want to know where is my paddlePostionA now in corresponding to this Analog reading of voltage of the potentiometer.

``` u8g2.setFont(u8g2_font_helvB08_tf);
u8g2.setCursor(20,30);
u8g2.print(paddlePositionA);

u8g2.setCursor(50,30);
u8g2.print(controlA);```

5.  Let’s figure out the movement.  Let’s add in this code in the initial part of the Movement() function block.

Now, in this code, there is a new function.  Which we call a map() function.  As you tu

``` controlA = analogRead(CONTROL_A);

paddlePositionA = map(controlA, 2, 680, 0, SCREEN_HEIGHT-PADDLE_HEIGHT);

int paddleSpeedA = paddlePositionA - lastPaddlePositionA;```

Now, in this code, there is a new function.  Which we call a map() function.  As you turn the potentiometer, it change the resistor value.  When you change the resistor value, the voltage reading will be different.  So, there is a RANGE, of what your potentiometer can do.  So, I found out that my potentiometer meter will have a maximum range of reading from 2 to 680.  And if that is the case, then, the map() function will map this range of (2,680) to your paddle y-axis position which is from 0 to 44.  Because your paddle has a height of 20 pixel, so, 44+20 equal to 64 which is your maximum height of your screen.

We printed the values of controlA & paddlePositionA to see these maximum values.

Now you have a paddle.  So, we will need to figure out how to use this MOVING paddle to bounce the pong ball in the next lesson.