Kittenbot Meowbit | We Code MakeCode

This post describes the MakeCode program for the program Random Lines. Our prior post The Art of Random Lines in MakeCode Arcade is about how to use Random Lines. This project was started because we wanted to experiment with a slider, a gadget that we had found useful in other programming environments. And, of course, we needed something that changes as the slider changes; thus, Random Lines.

We have tested Random Lines on several browsers and on Meowbit, which is shown above. YouTube channel MakeCode and Arcade tested it on several other platforms. We are grateful. In the YouTube video below, they called the program Kaleidoscope, which is another program. The one shown here is Random Lines.

The Code

Overview

The screenshot below shows the main code for Random Lines, which provides insight into the overall operation of Random Lines. Initialization is done by the On-Start block. In the middle and to the right is the code that responds to player button presses. This program does not have game loops that are common in Arcade programs. Rather, after initialization, Random Lines responds only to player input.

Initialization Code

The On Start block (above) initializes Random Lines by setting constants, setting state variables, creating background and slider sprites as well as providing the player the option to have instructions presented.

Make Background and the Sprite On Which to Draw Random Lines

The screenshot below shows the programs layout: light-blue background, black sprite to draw on, cyan slider below with red cursor displaying the number of random lines that have been drawn

This function Make_background sets the color for the Arcade background and builds the sprite “sprite_to_draw_on,” which has the image named “SI.” Random lines are drawn in SI, which is 100 x 100 pixels.

Perimeter Array

A array is used to hold the coordinates of all the pixels on the perimeter of the image SI on which random lines are drawn. For each perimeter pixel, the x coordinate is stored in Ax and the y coordinate is stored in the corresponding position in Ay. Therefore, a perimeter point is identified by an index into the arrays. A variable is set to the length of the arrays minus one, which is useful in other functions.

The Slider

The slider as at the heart of the program operation. The slider value controls the number of random lines drawn from 0 to 100. The slider is increased with the right arrow button and decreased with left arrow button. Both quick press and repeat events are programmed.

The function make_slider is called once from Initialization. It creates the cyan slider image and its red cursor. In Initialization, the slider value is initialized to 50, the midpoint.

The slider has a red cursor that is positioned on the slider bar to indicate he slider’s value. The value is displayed using the say feature of the cursor sprite. The variable curser_base is set to the x coordinate associated with the 0 value of the cursor. The right and left button pressed and repeat events (below) cause the slider to move and its value to change.

The slider_right function is simple. It increases the slider by 1 and adds one line to the displayed random lines. The slider value is required to be 100 or less. It set_slider with the new value of the slider.

The slider_left function is more complex than its companion. If the slider value is 0, drawn lines are cleared by setting the arrays that hold drawn lines and line colors to empty. The counts of rejected duplicates and same-side lines are also initialized to 0. If the slider value is not 0, the slider value is decreased by 1 and the last line drawn is removed from arrays and the display. This is done by removing the last entry in the arrays saved_line_points and saved_colors then redrawing the saved lines, which, of course, is one fewer lines.

The function set_slider below is called from functions that need to change the slider value, for example, the functions slider_left and slider_right above. The function has the parameter n that is the new value of the slider. It sets the slider value to n, positions the cursor appropriately and uses the sprite say action to display the new cursor value.

Line Drawing Functions

A line is defined by its two endpoints on the perimeter of the drawing area and the color of the line. These values are stored in arrays so that, when needed, lines can be redrawn in a different color or in random colors. Only lines that are not duplicates and do not have points on the same side of the square are drawn and saved

Add One Line

This function draws one line. The while loop loops until a valid random line is found. When a valid line is found, it is drawn and its defining characteristics — the two endpoints and color — are saved in case the line must be redrawn. Each saved line is a string with the two points as strings separated by “|.” In the string, the lowest point index is leftmost in the string, a convention important to the is_line_valid function.

Is Line Valid Function

This function determines whether or not a line is valid; that is, not a duplicate and does not have its points on the same side of the drawing area. The parameters of this function are the two points as integer indices into the Ax and Ay arrays packed into a string. Two lines are on the same side if the two x values are the same or the two y values are the same. A line is a duplicate if it is already in the array of saved point. This function returns a Boolean variable representing the line’s validity.

Get Next Color

This function returns the variables next_color used to draw the current line. The color is returned as a random color or the current cycle color depending on the Boolean value b_random_color.

Pack and Unpack Line Points

A line is represented by two points defined by indices into the Ax and Ay arrays, which contain the x and y values, respectively, of the points. The function pack_s_line puts the the two numerical points into a string separated by the character “|”. The second function unpack_s_line splits the passed string into two numbers that are the indices of two points

Draw Line

The draw_line function takes as arguments a string with the two endpoints of the line and a number that is the color to be used. This function calls unpack_s_line to convert the string to points P1 and P2, the calls points to coordinates to convert the P1 to A,B and P2 to X,Y the coordinates of the endpoints. The line is drawn in the image Si, which is the square drawing area.

Points to Coordinates

This function converts two points, which are function arguments, represented by indices in to the Ax and Ay array to the coordinates A,B for the first point and X,Y for the second point.

Do Lines Slider Value Lines from 1

This function first colors the background area SI, which is the image related to sprite_to_draw_on; thus, erasing all previously drawn lines. It then clears all saved lines and sets various counts to 0. It then loops the value of slider times drawing one line each time through the loop.

Redraw from Saved

This function clears the drawing image then redraws all the saved lines. It has the option to use the saved color or to use a current or random color. If a new color is used it overwrites the saved color.

Colors

Up/Down Arrows — Cycle Single Color Display

The up-down arrows rotate through the 15 available colors for single-color line displays. The up/down events call a function up_down with a parameter specifying the change in the y coordinate.

After changing the color to be used for single color drawings, the up_down function calls a function to redraw the current line pattern using the changed color.

Button A — Random Colors and Extra Output

Button A has two meanings. One turns the optional output on and off. This A Button function is available only when the Slider is 0 as shown in the left screenshot below. The screenshot on the right is an example of the extra output.

If Slider is not 0, an A Button press sets colors to random and redraws the lines from the saved points. This is done even if colors are already random, which results in redrawing the lines with different random color. Colors for new lines will be random until the up/down Buttons are used to select a single color.

Button B — Drawing Background

Button B flips the line drawing background — not the Arcade screen background — between black and white as shown below.

Output

Create Output Sprites

We have found that providing messages to the player using the sprite Say block is useful because messages can be programmed to disappear from the screen after a specified time, rather than the user having to respond. dWe often use this capability during debugging as well as to provide information to the player. This function makes four sprites that are used only for such output. They are stacked vertically with 12 pixel spacing.

Extra Output Messages — Same Side and Duplicate Rejections

This function provides messages to the player with the count of lines that have been rejected because they are on the same side. The second function provides output for the count of rejections because of duplicates. These messages are provided only if elected by the player by pressing the moving the slider to 0 and pressing the A Button. The same action turns this extra output off if it was on when the A Button was pressed.