A Serendipitous Discovery
While exploring lines in MakeCode Arcade, we discovered amazing patterns. These patterns reminded us of a kaleidoscope through which one can see varying symmetric patterns. The slideshow below shows examples of generated patterns.
The animated GIF below illustrates pattern creation. Each pattern is created by drawing lines from the origin point,which is usually the center of the pattern, to a point on the outer edge of the pattern. The origin usually remains stationary while the end point travels sequentially around the perimeter. When a pattern is completed, a new pallet is generated by selecting random colors from the 15 available in Arcade. With each new pattern, the number of colors in the pallet is increased varying from 2 to 15 with the restriction that the number of pixels in the perimeter be evenly divisible by (that is, a factor of) the number of colors in the pattern. Each line has a new color chosen sequentially from the pallet. The sequential choice is key to the pattern magic.
Why Kaleidoscope Works
In mathematics, a line is drawn between two points. Such a line has only one dimension and the points hove neither width nor height. In Arcade, however, the points are pixels that do have width and height. A line consists of the two end pixels and the pixels that are closest to the theoretical line between the ends. The result is jagged lines as shown in the screenshot below. Successive lines may have pixels that are the same as those of a preceding line, thus overwriting them. The “pixelated” lines enable the creation of Kaleidoscope’s patterns. This is illustrated in the enlarged screenshot below.
Why the Unused Pixels on the Bottom and Right?
For the pattern to be perfectly symmetric, it must have an exact center pixel. This is not possible with an even number of pixels per side. Thus, pattern width and height must be an odd number of pixels, leaving unused pixels on the bottom and right edges.
How to Use Kaleidoscope
When Kaleidoscope Starts It Will Automatically Be Running Patterns
When the program Kaleidoscope starts, it will be running a sequence of patterns until the player does some action (e.g., Button A pauses Kaleidoscope).
Use of A and B Buttons
When operating, Kaleidoscope has two modes: Pattern Cycling and Pattern Paused. When Cycling, the program automatically generates pattern after pattern, each based on a new randomly generated pattern. When Paused, the programs generates a new pattern only when Button B is pressed. When button B is pressed and held, the program resumes Cycling. The following summarizes the use of Buttons A and B.
- Cycling Mode: Button A Quick Press — pauses cycling of patterns in order to view a pattern or save it (screen capture). While paused, the A and B Button have the following special functions:
- Paused Mode: Burton A Quick Press — removes the color-palette display near the bottom of the pattern display.
- Paused Mode: Button B Quick Press — Advances one pattern and pauses again.
- Paused Mode: Button B Press and Hold — Resumes automatic pattern cycling.
- Cycling Mode: Button A Press and Hold — Enables the player to change various parameters of the program (e.g., the width and height of a pattern). Changing settings is described in the next section.
- Cycling Mode: Button B — In cycling mode, the B button is not used.
Change Pattern Settings — Press and Hold Button B
The game will ask the player a a series of questions. After each question, the player must press either button B or Button. Button B (cancel) causes the program to continue to the next question and leaves values at the default. Button A answers “yes” to the question, in which case, the game may ask the player for a number to set a value. The flowchart below illustrates the process of getting input from the player. Each step is described below the drawing.
Pause After Line?
If this feature is enabled, the program will pause briefly after each line is drawn, then continue automatically after the pause. Using this feature the effect of each line can be see enabling the player to better understand how Kaleidoscope works.
- Button B — Program will not pause after each line. This is the default.
- Button A — Program pause after each line. This feature should rarely be used as it dramatically slows down the program. The pause time is not changeable by the player
Change Pattern Wait?
The pattern-wait feature enables viewing a pattern for a longer time between patterns. This is useful when selecting patterns to save (suing screen capture).
- Button B — Leaves the default wait time at 500 milliseconds.
- Button A — Changes the wait time to the value specified by the player, which must be between 100 milliseconds to 10,000 milliseconds ( 10 seconds).
Random Width and Height?
If this feature is chosen, the program will chose a new random pattern width and height after each color palette is completed. That is, first, the program choses a palette, then, cycles through the color set adding one color each cycle until the palette is complete, at which time, the program chooses another random width and height. If this feature is chosen, not other input will be requested.
- Button B — Continue with default: not random width and height.
- Button A — Enable random width and height.
Square?
If this feature is enabled, all patterns will be square; that is, have the same width and height, which can be set by the player by electing the Change Side option (see next section).
- Button B — Not square — continue to Change Width question.
- Button A — Elect square pattern and ask Change Side question.
Change Side?
This question is asked only when Square is chosen. This question completes player input because no further options are possible.
- Button B — Continue with the default width and height, which is the maximum height.
- Button A — Enables the player to change the side to values from 21 to 119 pixels. Note: pixels must be an odd number so that an exact center of the pattern is possible. If an even number is entered, the program adds 1.
Change Width?
If patterns are not to be square, the player has the option to select both width and height.
- Button B — Continue with default width (maximum).
- Button A — Player enters a selected width from 21 to 159. Note: pixels must be an odd number so that an exact center of the pattern is possible.
Chanage Height?
If patterns are not to be square, the player has the option to select both width and height.
- Button B — Continue with default height (maximum).
- Button A — Player enters a selected height from 21 to 119. Note: pixels must be an odd number so that an exact center of the pattern is possible.
Arrow Buttons Press and Hold (Repeat)
Arrow buttons are used to change the position of the origin, usually while patterns are cycling so that the new origin can be seen. Only Press and Hold works; Quick Press has no effect. The Screenshot below is an example of a pattern that was make by moving the origin towards the lower-right corner.
Kaleidoscope Code
The code for Kaleidoscope is described in Code for Kaleidoscope in MakeCode Arcade. The top-level code showing the main program loop as well as the primary player inputs are shown in the screenshot below.
