I used a query selector to access the p5.js canvas, converted it to a blob, and then put that blob into FormData. It takes an html element and converts it to binary (which is essentially what a blob is). Obviously the information I needed to persist to my database existed. But what if I just want to send it straight to my backend? And wouldn’t that be rude to save that image to the user’s computer just so I can have it in my server?
Kaleidoscope app javascript code#
Writing code to let a user save an asset to their local hard drive is a relatively easy thing to do. Now that I had a react-p5 proof of concept, I needed to know whether or could successfully send a p5 sketch to my backend as an image, persist it, and then be able to render it to my front end. Start by randomly selecting 2 vertices of a triangle.The p5 code I ended up implementing for my react-p5 experiment ended up being very much based upon the Coding Train’s Kaleidescope Snowflake Challenge by the famous Dan Shiffman (who was a former professor of mine). After 50 iterations of A, B, and C, the screen is swiped from left to right, and the algorithm starts anew. 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. 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. flipped, rotated, and/or mirrored.įor each iteration A, a color chosen by user is picked then two pairs of coordinates are randomly chosen. Every object that is drawn in one of the fifteen triangles, is also drawn in perspective in the other fourteen triangles, i.e. The final division looks somewhat like the British flag with fifteen triangles. In this app, the screen is divided into 15 triangles with a common point in the middle of the screen. The app make extensive use of loops, as new shapes constantly appear on the Kaleidoscope i.e Draw Screen. Only one class is necessary for the Kaleidoscope one that incorporates a constructor and a Paint() method. Home Screen of the app, the screen is divided in 14 quadrants. Symmetry occurs by reflecting that quadrant's lines into the other 14 quadrants. Randomly located and colored lines are drawn in the first quadrant. This app paints an endless variety of symmetric and colorful designs.Ĭurrently this divides its drawing area into 15 quadrants.
This app have been created to reveal this symmetry. This enchantment stems from the symmetric and colorful designs that occur as tubes containing bits of colored glass and mirrors rotate. Simply put, the kaleidoscope is a "beautiful form watcher." He named his invention kaleidoscope from the Greek words, kalos (beautiful), eidos (form), and scopes (watcher). The tube-based kaleidoscope was invented in 1816 by Scottish born Sir David Brewster (a scientist and inventor, among other professions). Use it as an aid to meditation or for mindless amusement.
Kaleidoscope Paint (also called 5 Minute Kaleidoscope) is a simple app that lets you create an infinite number of kaleidoscopic patterns.
Kaleidoscope app javascript full#
0 kommentar(er)
