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 thumb|center|500x500px 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: thumb|center|500x500px 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 thumb|center|500x500px 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. center|thumb|400x400px 100%