About the App
This application is designed as an educational utility, especially for lessons involving math-infused art. It was created as a free resource to help users quickly make artistic patterns with a variation of the Vedic square. Magic squares in a broader sense have numerous variations and certain properties that define them.
A Vedic square is a variation on a multiplication table, usually 9 x 9 but may be any size, where the entry in each cell is the digital root of the multiplication products.
The square in the studio is 10 x 10, omits row and column headings, and includes zeroes. The process of finding the digital sums is illustrated below as the studio is made to get right to the point of making patterns. Hundreds of patterns may be made from this one square, many of which contain an assortment of geometric shapes and familiar symbols. When satisfied, users may paste their patterns into an image program to crop or add effects with filters, textures, and other tools before printing. Creations can be used for Desktop wallpaper tiles, web site backgrounds, quilting, or to make templates for any craft project that calls for patterns.
The square in the studio is 10 x 10, omits row and column headings, and includes zeroes. The process of finding the digital sums is illustrated below as the studio is made to get right to the point of making patterns.
Hundreds of patterns may be made from this one square, many of which contain an assortment of geometric shapes and familiar symbols.
When satisfied, users may paste their patterns into an image program to crop or add effects with filters, textures, and other tools before printing. Creations can be used for Desktop wallpaper tiles, web site backgrounds, quilting, or to make templates for any craft project that calls for patterns.
The Math
HTML5 - Currently available for Desktop PC's only.
What does that button do?
Overview of the GUI
Option Hints
All options in the app have brief hints, which may be turned on or off at will by clicking the "i" at the bottom of the Studio.
Number Selectors
The first set of buttons on the right side of the Studio is a row of numbers. They control the colors of cell backgrounds for corresponding digits and may be enabled individually or in groups. It's made to allow experimenting with different sets of numbers to create a variety of patterns. Zero through four mirrors five through nine.
Hash/Number Symbol
Select to change the number text color.
Grid / Borders
Select to change the line color.
Picture Frame
Select to change the frame color.
Eyes
Click to Show or Hide the number text, grid lines, frame, or studio background canvas texture when these options are selected. Selections may be done individually or multiple at the same time, which allows users to experiment with gradual changes before deciding on the look they like best. Check out the gallery to see how the visibility of certain parts affects patterns.
Eraser
Reset colors on selected options. Also functions as a shortcut to black (left click) and white (right click).
Buckets
The Red, Green, and Blue buckets serve as color pickers and display the values. Only one set of values can be displayed at a time, in the interests of keeping the GUI design clean and uncluttered. The rainbow bucket gives random values for all options. If multiple options are enabled, different colors will be generated for all of them even if their values are not displayed in the buckets. Selecting options individually will allow you to view its values and create new hues or tints from them.
Pipette & Palette
The pipette is a special option; it's designed specifically for mixing hues to be saved ("sampled") to the palette as desired and the color inside it is generated independently from other options. The pipette nearly always contains 'residual' colors from different options unless it is reset, which is what allows shades to be mixed. The palette can hold up to six custom hues.
Turtle & Rabbit/Hare
Selecting one or the other allows you to control how fast the color values change.
The normal speed is pretty fast if you're getting 40-60 FPS and you can somewhat control it with the how long the mouse button is held; "short clicks" will raise the values a bit slower than "long clicks". If you want super fast jumps, click the Rabbit. He'll help you hop right to bright red, green, blue, yellow, cyan, or magenta.
The Turtle, of course, makes the pickers very slow and you have to keep clicking to change the values. He's the ideal choice for slight adjustments, fine grained tuning of a mix, and may also help users that are sensitive to flickering lights, especially when using the rainbow bucket on selected options.
Background Icon
At the bottom left of the screen, near the hint option, you can use the background/foreground icon to change the appearance of the studio. When you use the buckets to change the background color, some text and icons will change automatically depending on how light or dark your chosen hue is. The canvas texture may be shown or hidden with the eye options as mentioned above.
If you've used the app before or find the earlier examples, you'll probably notice that this was the "frame" icon.
FAQ's
Answers to common questions
How do I save and edit my patterns?
Take a screenshot and paste the image into a program such as MS Paint,
GIMP,
Krita,
Artweaver, Photoshop, or any other that you might prefer to crop and edit. Let your creativity do the rest! If you want to add textures or other effects, software that supports layers will make it easier to edit and add things without losing the original pattern.
How do I use [insert name of image editor here]?
Answering that is more in depth than this article is intended to go. Most of the suggested programs provide their own documentation of features and YouTube may have tutorials for them as well. At some point, we may provide our own under another tab with a focus on the app and how to use it with our preferred image editor (Krita).
Why isn't there a mobile version?
We're sorry for the inconvenience; we are planning to make one though! You can (sort of) use the current Desktop version on mobile devices, but it's not recommended as at least half of the usage instructions don't apply and it will likely be frustrating. For example; you can only add color, not subtract and select options, but not deselect. Mobile needs its own layout, perhaps slightly different buttons, and touch events for the best experience. If you can overlook and work around the flaws for now, feel free to try it in your mobile browser - preferably Google Chrome.
Why do the selected parts turn black sometimes?
When selected for the first time, all options turn black by default to indicate the absence of color, so you can begin by adding color. After you've adjusted the values and deselected the option, the values you set are saved and this will be shown on the buckets if you select the same option again later, so you can make small adjustments to existing hues.
Why don't picker values match my selected options when I use the rainbow bucket?
The rainbow bucket is set up to apply random hues to all possible options, but the RGB buckets can only display one set of values at a time. Remember the Pipette always has its own values that can be different from selected options. If you want to see and/or change the values for a particular option, it needs to be enabled by itself.
Why does everything turn black or white with the rainbow bucket?
This happens when you click and hold the mouse buttons, which continuously adds or subtracts within the minimum and maximum range of values. Eventually, all values for selected options will become 0, 0, 0 (black) or 255, 255, 255 (white). All you have to do is use the opposite button to keep cycling through colors.
How can I make the rainbow bucket give me nice color combinations?
Since the values are all randomly generated, there's no way to control it other than to manually edit the values on options that you find cringe-worthy. If it's all of them, you should continue to cycle through until there is an overall "scheme" that you're happy with. Then you can select options individually to make minor adjustments according to your taste. With that said, this bucket is more artistically adventurous than artifically intelligent.
Why allow users to color [option]?
To be more adaptable for individual preferences. As an artistic app, we want users to feel free to create their own palettes and use whichever combination of hues they like on the different areas that can be colored, instead of being locked into a particular preset value. In the future, there may be a selection of common "schemes" to choose from, which would be applicable to any available option.
Why allow the studio background color to change?
It's simple a way to create and manage your own theme; added with users who find darker or lighter backgrounds to be kinder on their eyes in mind. Plus, since painting is an integral part of the app, it was a logical step to include this as an option. Double plus, sometimes it may help your patterns, especially if you hide the frame and you need a more contrasting shade to guide cropping.
Is this app available in other languages, or will you be adding this feature?
It's definitely something we'd like to do, but not at this time. "Popular demand" and volunteers to translate are needed first.
Why not arrange the numbers in the shape of objects; faces, etc?
Our goal was to provide a free online tool as a resource for educational activities that involve exploring the shapes and art that can be made with the results of performing certain math operations. Arranging the numbers ourselves would defeat this purpose.
Why is the painting slow?
If you didn't select the Turtle, it could be the browser you're using or you may have too many apps running at once on your machine.
Why not 'game-ify' the app since it is made with the game engine, GDevelop?
A few reasons for this: 1) We wanted to keep the app as easy to use as possible. 2) Creative expression doesn't need all the bells & whistles [high scores, sound effects, and so on] to be fun for artistic people or those that enjoy art for its own sake. 3) We were curious to test how flexible GDevelop is/can be in terms of building other types of applications, to see what else it is capable of beyond the scope of game development.
Does it work in Firefox?
Due to a problem with Pixi.js, a component of the GDevelop engine, the app may crash when attempting to navigate to "About" either by clicking the menu item or pressing the keyboard shortcut "a" in Firefox. The Studio is usable in Firefox, however, Chromium powered browsers are still recommended for the best performance.
Free software / money saver. MS Paint is "free" with a purchase of the Windows Operating System.
