Click here to Skip to main content
14,975,416 members
Articles / Web Development / HTML
Posted 14 Oct 2012


7 bookmarked

Kaleidoscope Paint - Ultrabook Windows 8 Application

Rate me:
Please Sign up or sign in to vote.
5.00/5 (5 votes)
14 Oct 2012CPOL3 min read
Kaleidoscope Paint - Creative application that lets uses windows 8 and ultrabook features to create an infinite number of kaleidoscopic patterns.

Image 1


Kaleidoscope Paint is a creative app that lets you create an infinite number of kaleidoscopic patterns. Use it as an aid to meditation or for mindless amusement. The features of ultrabook and windows 8 like availability of gestures, touch, accelerometer, gyroscopes and ambient light sensors are all used by users for application interactivity and to draw. 

Key Functionality

  • Totally new metro look tile based UI.
  • Create amazingly beautiful patterns and drawings   
  •  Support for Snap view, Fill view, and Full view for Windows 8.
  • Uses touch for drawing
  • Gestures for Zoom in Zoom Out
  • Accelerometer and Gyroscopes for Timeline navigation
  • Ambient light sensors for background setting, and in app screen saver
  • Fully comparable with Mouse and Keyboard  
  • Ability to share your creating via Skydrive, Facebook, Twitter etc. 
  • Save picture to the Picture Library,
  • Load different background  

Application Overview 

Kaleidoscope Paint (also called 5 Minute Kaleidoscope) is a simple app that lets you create an infinite number of kaleidoscopic patterns. Use it as an aid to meditation or for mindless amusement.

The tube-based kaleidoscope was invented in 1816 by Scottish born Sir David Brewster (a scientist and inventor, among other professions). He named his invention kaleidoscope from the Greek words, kalos (beautiful), eidos (form), and scopes (watcher). Simply put, the kaleidoscope is a "beautiful form watcher."

Kaleidoscopes are enchanting devices. This enchantment stems from the symmetric and colorful designs that occur as tubes containing bits of colored glass and mirrors rotate.

This app have been created to reveal this symmetry. This app paints an endless variety of symmetric and colorful designs.

Currently this divides its drawing area into 15 quadrants. Randomly located and colored lines are drawn in the first quadrant. Symmetry occurs by reflecting that quadrant's lines into the other 14 quadrants.

Home Screen of the app, the screen is divided in 14 quadrants. 

Image 2

Only one class is necessary for the Kaleidoscope; one that incorporates a constructor and a Paint() method.

The app make extensive use of loops, as new shapes constantly appear on the Kaleidoscope i.e Draw Screen. In this app, the screen is divided into 15 triangles with a common point in the middle of the screen. The final division looks somewhat like the British flag with fifteen triangles. Every object that is drawn in one of the fifteen triangles, is also drawn in perspective in the other fourteen triangles, i.e. flipped, rotated, and/or mirrored.

For each iteration A, a color chosen by user is picked; then two pairs of coordinates are randomly chosen. For each sub-iteration B, the random points are checked, and should they lie outside the triangle, the pairs are chosen again, until they both lie within the triangle. End of iteration B. Now, two "steps" are randomly chosen. These numbers lie between 0 and 4. For each of 40 iterations C, the first of the two previously picked pairs of coordinates are continuously incremented by step1 (both x and y), and the same for the second pair using step2. End of iteration C. After 50 iterations of A, B, and C, the screen is swiped from left to right, and the algorithm starts anew.

Drawing made in under 30 seconds 

Image 3

Sample Algorithm  

Start by randomly selecting 2 vertices of a triangle. We will call the first three vertices

( x1 , y1 ) and ( x2 , y2 )

This is the "parent" point. All the reflected versions are called "children." Other positions of the children points are calculated rather easily. Just take each of the thw (x,y) coordinates, and negate them, or shuffle them in all the possible ways: 


This produces a kaleidoscopic symmetry. To insure that the initially selected random points of the triangle fall within the triangular region of the plane, we actually swap "x" and "y" whenever a randomly selected "x" is greater than a "y" in an (x,y) pair. The pseudocode shows how to do this.

How to Create a Computer Kaleidoscope.

DO FOR i = 1 to 15
    x1 = random;   y1 = random
    x2 = random;   y2 = random
    x3 = random;   y3 = random
    /* Confine initial pattern to lower right quadrant */
    if ( x1 > y1 ) then (save=x1; x1=y1; y1=save;)
    if ( x2 > y2 ) then (save=x2; x2=y2; y2=save;)
    if ( x3 > y3 ) then (save=x3; x3=y3; y3=save;)
    /* Create 7 reflected images /
    DO FOR j = 1 to 7
        Flip (x,y) Points as Described in Text
        DrawTriangleAt (x1,y1,x2,y2,x3,y3)

Settings for colors 

Image 4

Redraw-ed with changed colors, screen was cleared by just shaking 

Image 5

Just Stamps

Image 6

Further Work 

There are a number of more features planned, like adding different brushes, Creating animation sequence of drawings.  


13th October, 2012 - Initial version. 


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

United States United States
No Biography provided

Comments and Discussions

QuestionWhere can I get the source code? Pin
AndySolo26-Mar-18 3:32
MemberAndySolo26-Mar-18 3:32 
GeneralMy vote of 5 Pin
ojanacek14-Oct-12 22:14
Memberojanacek14-Oct-12 22:14 
GeneralMy vote of 5 Pin
KashviGupta14-Oct-12 6:02
MemberKashviGupta14-Oct-12 6:02 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.