Drawing Shapes with OLED Display #4697


#1

This is a discussion for the Drawing Shapes with OLED Display #4697 experiment. Feel free to connect with the Learning Team here, or to discuss experiment tips, ask questions, leave comments or suggest experiment variations here.


#2

Q: What is different about the y-axis from the OLED diagram above and the y-axis on a traditional coordinate grid?
A: Traditionally, down on the y-axis is represented by negative numbers, but in the case of the OLED, down on the y-axis is positive.

Q: Where is the origin located on the OLED?
A: Upper, left-hand corner of the screen is the origin (0, 0).

Q: What is the coordinate of the right eyeball of the smiley face in the picture above?
A: (8, 2)

Q: What is the maximum value of the x-axis on the OLED screen in the Because Learning kit?
A: 127

Q: What is the maximum value of the y-axis on the OLED screen in the Because Learning kit?
A: 31

Q: Describe how much of the smiley face is displayed on your OLED when you run the above block of code?
A: Just a portion of the smile part.

Q: Which line of code tells the Arduino to turn on the pixel located at the coordinate (6, 7)?
A: Line 24

Q: If you wanted to complete this line: display.drawPixel( , , WHITE); so that the Arduino knows to draw a LEFT eyeball, what would the coordinates be?
A: display.drawPixel(4, 2, WHITE);

Q: If you wanted to complete this line: display.drawPixel( , , WHITE); so that the Arduino knows to draw a RIGHT eyeball, what would the coordinates be?
A: display.drawPixel(8, 2, WHITE);

Q: In the pencil pixel art drawing above, what would the display.drawLine code look like to draw the bottom line of the pencil?
A: display.drawLine(5, 9, 27, 9, WHITE);

Q: Line 20 of the code in the picture above is telling the Arduino to draw what kind of figure on the OLED?
A: Pixel

Q: Explain what lines 21-22 tell the Arduino to do after it draws the figure to the OLED:
A: Line 21 tells the display to display what is to be drawn and line 22 tells the program to pause for 2000 milliseconds.

Q: What would the display.drawRect line look like to draw the rectangle described above?
A: display.drawRect(10, 5, 100, 20, WHITE);

Q: What is the coordinate of the top left corner of the rectangle in the line of code above?
A: (64, 16)

Q: What is the width and height of the rectangle in the line of code above?
A: Width is 30, height is 10

Q: What is the radius of the circle in the sample line of code above?
A: 15

Q: What is the coordinate of the center of the circle in the sample line of code above?
A: (64, 16)

Q: Try replacing display.drawCircle with display.fillCircle, what do you think will happen?
A: A solid circle will appear.