Programming in LOLGraphics 3.4/Graphics in LOLGraphics

Introduction

So, in the previous chapter you have learned how to make cli programs in LOLGraphics, and hopefully have gotten an appreciation of where the first 3 letters in the name of the programming language have come from. In this chapter you will learn the graphics portion of LOLGraphics, and in the next chapter, we will combine everything we have learned and make a simple game in LOLGraphics.

P.S. The “8462 demo“ will be in this chapter, the game in the next chapter will be more advanced.

Drawing a cheeseburger

We shouldn’t forget that this programming language was inspired by LOLCODE which in turn was inspired by the LOLCAT memes. One of the most famous of them is a cat with the text “I Can Has Cheezburger?” (lolspeak for Can I have a cheeseburger). Therefore, it only makes sense to include in LOLGraphics a command that draws a cheeseburger on the screen. If you write the following code, you will see a cheeseburger 🍔 on the top left of the screen:

HAI 3.4 0 100
IM IN UR CODE EXECUTIN UR KOMANDZ

I CAN HAS A CHEEZBURGER?

IM OUTTA UR CODE

And here’s the output of this program:

Now this is all interesting, but what if we want to draw cheeseburgers in different places in the screen, not just the top left?

Coordinates in LOLGraphics

In order to customize the location of the cheeseburger, we need to use LOLGraphics coordinates system, so first we need to understand how it works. It will be intuitive for people who have worked with graphics in languages other than scratch, but not for others.

The top left comer of the screen is the point (0,0) aka x=0, and y=0. The positive direction of the x axis is right, and the positive direction of the y axis is down. The negative axis of the x axis is left, and the negative axis of the y axis is up.

This might be confusing for people not accustomed with programming that are used from Mathematics that the positive direction of the y axis is up. However, in computers it’s down.

Customizing the location of the cheeseburger

The command I CAN HAS A CHEEZBURGER? does not accept any parameters. How then are we accepted to tell the interpreter where we want to draw the cheeseburgers? Using the command PLZ DELIVR MAH CHEEZBURGERS 2 <x> <y>! This command doesn’t affect the status of cheeseburgers already drawn on the screen (there can be as many cheeseburgers as you like) but only cheeseburgers that will be drawn after it. The command can accept as arguments numbers or two-byte variables.

The following code will draw 2 cheeseburgers on the screen, one on the top left, and one on the coordinates (200,200):

HAI 3.4 0 100
IM IN UR CODE EXECUTIN UR KOMANDZ

I CAN HAS A CHEEZBURGER?
PLZ DELIVR MAH CHEEZBURGERS 2 200 200
I CAN HAS A CHEEZBURGER?

IM OUTTA UR CODE

Now sometimes you might want to clear what was drawn on the screen and start from scratch. Thats why the command PLZ CLEAR TEH SCREEN exists.

8462 demo

The 8462 demo is similar to a WASD demo, only using the numpad. It is included in the editor as an example program. Now we have learned all the things necessary to make it. Here’s the source code:

HAI 2.5 0 1
IM IN UR CODE EXECUTIN UR KOMANDZ

I HAS A TWO BYTE DAT IZ CALLED X
I HAS A TWO BYTE DAT IZ CALLED Y
I HAS A ONE BYTE DAT IZ CALLED BUTTON

PLZ SET TWO BYTE X 150
PLZ SET TWO BYTE Y 100

PLZ DELIVR MAH CHEEZBURGERS 2 X Y
I CAN HAS A CHEEZBURGER?
FOREVER RUN CHECK

IM OUTTA UR CODE

IM IN UR SUBPROGRAM DAT IZ KALLED CHECK
PLZ SET ONE BYTE BUTTON -1
PLZ READ ONE BYTE BUTTON

SWITCH [BUTTON]
CASE 8 UP
CASE 2 DOWN
CASE 4 LEFT
CASE 6 RIGHT
CASE 86,68,9 UP_RIGHT
CASE 48,84,7 UP_LEFT
CASE 42,24,1 DOWN_LEFT
CASE 62,26,3 DOWN_RIGHT

IM OUTTA UR SUBPROGRAM

IM IN UR SUBPROGRAM DAT IZ KALLED UP
PLZ CLEAR TEH SCREEN
PLZ SET TWO BYTE Y Y-10
PLZ DELIVR MAH CHEEZBURGERS 2 X Y
I CAN HAS A CHEEZBURGER?
IM OUTTA UR SUBPROGRAM

IM IN UR SUBPROGRAM DAT IZ KALLED DOWN
PLZ CLEAR TEH SCREEN
PLZ SET TWO BYTE Y Y+10
PLZ DELIVR MAH CHEEZBURGERS 2 X Y
I CAN HAS A CHEEZBURGER?
IM OUTTA UR SUBPROGRAM

IM IN UR SUBPROGRAM DAT IZ KALLED LEFT
PLZ CLEAR TEH SCREEN
PLZ SET TWO BYTE X X-10
PLZ DELIVR MAH CHEEZBURGERS 2 X Y
I CAN HAS A CHEEZBURGER?
IM OUTTA UR SUBPROGRAM

IM IN UR SUBPROGRAM DAT IZ KALLED RIGHT
PLZ CLEAR TEH SCREEN
PLZ SET TWO BYTE X X+10
PLZ DELIVR MAH CHEEZBURGERS 2 X Y
I CAN HAS A CHEEZBURGER?
IM OUTTA UR SUBPROGRAM

IM IN UR SUBPROGRAM DAT IZ KALLED UP_RIGHT
PLZ CLEAR TEH SCREEN
PLZ SET TWO BYTE X X+10
PLZ SET TWO BYTE Y Y-10
PLZ DELIVR MAH CHEEZBURGERS 2 X Y
I CAN HAS A CHEEZBURGER?
IM OUTTA UR SUBPROGRAM

IM IN UR SUBPROGRAM DAT IZ KALLED UP_LEFT
PLZ CLEAR TEH SCREEN
PLZ SET TWO BYTE X X-10
PLZ SET TWO BYTE Y Y-10
PLZ DELIVR MAH CHEEZBURGERS 2 X Y
I CAN HAS A CHEEZBURGER?
IM OUTTA UR SUBPROGRAM

IM IN UR SUBPROGRAM DAT IZ KALLED DOWN_RIGHT
PLZ CLEAR TEH SCREEN
PLZ SET TWO BYTE X X+10
PLZ SET TWO BYTE Y Y+10
PLZ DELIVR MAH CHEEZBURGERS 2 X Y
I CAN HAS A CHEEZBURGER?
IM OUTTA UR SUBPROGRAM

IM IN UR SUBPROGRAM DAT IZ KALLED DOWN_LEFT
PLZ CLEAR TEH SCREEN
PLZ SET TWO BYTE X X-10
PLZ SET TWO BYTE Y Y+10
PLZ DELIVR MAH CHEEZBURGERS 2 X Y
I CAN HAS A CHEEZBURGER?
IM OUTTA UR SUBPROGRAM

Scrolling background

Using what you learned above it’s possible to easily make a scrolling background. Such a demo is included in the LOLGraphics editor as an example program. However for this, you need an image that is larger than the screen so that you will actually have to scroll through. It’s possible to load that image from a file (you will learn how in this chapter), however the example program uses a very large image that is included in LOLGraphics. Can be drawn using the command PLZ DRAW BACKGROUND.

Just don’t forget that if you want to move left, you are actually moving the image right. If you want to move right, you are actually moving the image left. If you want to move up, you are actually moving the image down, and if you want to move down, you are actually moving the image up.

Scrolling background source code

 
HAI 3.4 0 1
IM IN UR CODE EXECUTIN UR KOMANDZ

I HAS A TWO BYTE DAT IZ CALLED X
I HAS A TWO BYTE DAT IZ CALLED Y
I HAS A ONE BYTE DAT IZ CALLED BUTTON

PLZ SET TWO BYTE X 0
PLZ SET TWO BYTE Y 0
PLZ DRAW BACKGROUND

FOREVER RUN CHECK

IM OUTTA UR CODE

IM IN UR SUBPROGRAM DAT IZ KALLED CHECK
PLZ SET ONE BYTE BUTTON -1
PLZ READ ONE BYTE BUTTON

SWITCH [BUTTON]
CASE 8 UP
CASE 2 DOWN
CASE 4 LEFT
CASE 6 RIGHT
CASE 86,68,9 UP_RIGHT
CASE 48,84,7 UP_LEFT
CASE 42,24,1 DOWN_LEFT
CASE 62,26,3 DOWN_RIGHT

IM OUTTA UR SUBPROGRAM

IM IN UR SUBPROGRAM DAT IZ KALLED UP
PLZ SET TWO BYTE Y Y+10
PLZ DELIVR MAH CHEEZBURGERS 2 X Y
PLZ CLEAR TEH SCREEN
PLZ DRAW BACKGROUND
IM OUTTA UR SUBPROGRAM

IM IN UR SUBPROGRAM DAT IZ KALLED DOWN
PLZ SET TWO BYTE Y Y-10
PLZ DELIVR MAH CHEEZBURGERS 2 X Y
PLZ CLEAR TEH SCREEN
PLZ DRAW BACKGROUND
IM OUTTA UR SUBPROGRAM

IM IN UR SUBPROGRAM DAT IZ KALLED LEFT
PLZ SET TWO BYTE X X+10
PLZ DELIVR MAH CHEEZBURGERS 2 X Y
PLZ CLEAR TEH SCREEN
PLZ DRAW BACKGROUND
IM OUTTA UR SUBPROGRAM

IM IN UR SUBPROGRAM DAT IZ KALLED RIGHT
PLZ SET TWO BYTE X X-10
PLZ DELIVR MAH CHEEZBURGERS 2 X Y
PLZ CLEAR TEH SCREEN
PLZ DRAW BACKGROUND
IM OUTTA UR SUBPROGRAM

IM IN UR SUBPROGRAM DAT IZ KALLED UP_RIGHT
PLZ SET TWO BYTE X X-10
PLZ SET TWO BYTE Y Y+10
PLZ DELIVR MAH CHEEZBURGERS 2 X Y
PLZ CLEAR TEH SCREEN
PLZ DRAW BACKGROUND
IM OUTTA UR SUBPROGRAM

IM IN UR SUBPROGRAM DAT IZ KALLED UP_LEFT
PLZ SET TWO BYTE X X+10
PLZ SET TWO BYTE Y Y+10
PLZ DELIVR MAH CHEEZBURGERS 2 X Y
PLZ CLEAR TEH SCREEN
PLZ DRAW BACKGROUND
IM OUTTA UR SUBPROGRAM

IM IN UR SUBPROGRAM DAT IZ KALLED DOWN_RIGHT
PLZ SET TWO BYTE X X-10
PLZ SET TWO BYTE Y Y-10
PLZ DELIVR MAH CHEEZBURGERS 2 X Y
PLZ CLEAR TEH SCREEN
PLZ DRAW BACKGROUND
IM OUTTA UR SUBPROGRAM

IM IN UR SUBPROGRAM DAT IZ KALLED DOWN_LEFT
PLZ SET TWO BYTE X X+10
PLZ SET TWO BYTE Y Y-10
PLZ DELIVR MAH CHEEZBURGERS 2 X Y
PLZ CLEAR TEH SCREEN
PLZ DRAW BACKGROUND
IM OUTTA UR SUBPROGRAM

Drawing lines & shapes

To draw a line, write PLZ DRAW LINE <x1> <y1> <x2> <y2>. The coordinates x1, y1, x2, y2 can be either numbers or 2-byte variables. You can also draw in custom colors using PLZ CHANGE PAINT BRUSH <color>. Like with custom locations for cheeseburgers, custom paint colors will not affect what is already on the screen, only what will be drawn after that.

You can draw a rectangle using the command PLZ DRAW RECT <x1> <y1> <width> <height>, fill a rectangle using the command PLZ FILL RECT <x1> <y1> <width> <height>. In addition, you can draw an ellipse using the command PLZ DRAW ELLIPSE <x1> <y1> <width> <height>, and fill using the command PLZ FILL ELLIPSE <x1> <y1> <width> <height>. You can also draw a custom polygon using the command PLZ DRAW POLY <points>. Replace <points> with an even number of arguments that is greater or equal to 6 which represent x,y coordinates of at least 3 points.

All the above commands accept as arguments numbers or 2 byte variables. Also if you want to draw a shape with an outline, first call the fill command, them change the paint color, and only then call the draw command.

Also, it’s possible to fill the entire screen by the color of the paintbrush using the command PLZ FILL TEH SCREEN.

Loading images from file

To load an image use the command PLZ LOAD IMAGE EXAMPLE EXAMPLE.PNG. If you want to draw example.png on the screen, type PLZ DRAW IMAGE EXAMPLE. This will draw the image on the location set for cheeseburgers.