Hello again, today I want to share with you a sample code (source and explanation) that generates random parameters, creates unique patterns out of them, every second, until the end of time! Sound intriguing? I love doing this kind of stuff. I code for fun, learning, and experimentation. I don’t consider myself a programmer because I don’t make (never wanted to, never will) a living specializing on specific coding language. Rather, I dabble with many different languages around and instead of going deep into the syntax (which are man-made, and ever-changing), I go deep into the understanding of the computer science behind them…the design, architecture, and logic. Once you have a solid grasp on those, you can adapt and pick up any language because the differences are their syntax and capabilities. Nothing more to it!
Okay, so this program I decided to code in JavaScript only because the compiler is light-weight and it’s just so easy to share with anyone with Internet connection on ANY device. It’s actually a lot of fun on smartphones and tablets with touch-screens because you can zoom in/out as you wish. The objective of this code is to demonstrate a few things:
- Generating random numbers from which you can do ANYTHING! Yes, anything (I’ll explain more)
- Make sense or awe at the computation and your own code and how you start to see pattern in entropy! (It exists in nature too)
- Explain the logic and encourage you to take it further to make something really intriguing
So, I have to admit I love coding stuff and watch the computers go at it and do their thing, and I watch, I watch, and I watch…there’s something hypnotic about it, even meditative, if not stimulating (brain-wise)!
This is NOT a coding course! This is NOT a computer language lesson! Rather, it’s meant to open up your minds to software design (in ANY language that calls you, or imprisons you) such that you can create your own things, in your own comfort zone, while being curious! Curious about how things work. Curious about why. Curious about what else can be done!
Ok, let me get started here with this one (there’ll will be more, be assured)…
Backstory:
About 29 years ago I was “playing” with programming and I wrote a program similar to this, except with more complexity. The random numbers I generated, I placed them in PC memory, then manipulated them, added logic to them (e.g. if I load them into an array, and its adjacent value is x, and if it’s a matrix there are other possibilities, then what if I added some more conditions to them such that either I or the computer can take additional actions). That was the basis of my old DOS program…each number was loaded into memory in a matrix, then I imagined they were living cells. Then adding some association logic I came up with creation, recreation, destruction of the cells. Sound familiar? That was similar to the idea of “Life”. Except I didn’t start with their source code at all (although it’s been available for free for ages) but wanted to challenge myself to start with a clean slate. My rudimentary DOS program was born…and you can read about that one here in my earlier blog. But let’s get back to this one, which is a simpler version but only to open up possibilities of farther experimentation and enhancement…if nothing else, for curiosity in STEM!
FFWD>>>:
Fast-forward to now. The simple code output is best demonstrated here in this short-clip I uploaded in youtube…
Looks a lot like DNA sequencing, doesn’t it? But it’s not really…but it sure could be! Or, each dot/block could be a cat, or puppy, or a cancerous cell. Imagine! The point is, you can represent anything and any way you like, depending on the context.
However, watching random numbers generated by computers (and me converting them to shapes and further manipulating, operating on those to make a ‘story’) fly by is mesmerizing and satisfying to me 🙂 Tickles my brain when I have some “idle” time.
What’s Going On Here?
I’m generating a series of pseudo-random numbers (there are more advanced ways to generate truer random numbers, maybe that’s another post but not now), and transpose and transform them into some visible shapes (more interesting to creatures’ eyes, you know). Then these things keep generating and re-generating like cancerous cells within a matrix. I keep track of some of the basic parameters while the computer is going crazy computing.
I apply a simple logic to each generated number…if there’s a remainder, let’s transform this digit to this shape, otherwise, make it another shape. I simply use Unicode characters for the “graphics”, which are really glyphs from the Unicode character set for rendering. But we could fairly easily use another table to map them to our own custom images (jpg, png, gif, etc.). But this is NOT a programming course, remember? So, how to do that depends on language/syntax and I’m trying to stay away from that for this post.
The unicode characters I used (you can use whatever you like and I encourage you to!) are mainly : ▖▝
So they appear next to each other in some variations of: ▚ or ▞
(Their codes are documented everywhere including on wikipedia here) Depending on the language, they have to be coded differently (I know, that’s why you should never get stuck on syntax! Always understand the underlying logic and design). In JavaScript, I use 4 variables with these values:
var symb1 = ‘\u2596’;
var symb2 = ‘\u259D’;
var symb3 = ‘\u2598’;
var symb4 = ‘\u2597’;
So, simply put if a computer-generated number passes some muster in my code which I’ll arbitrarily say: var a = Math.floor(Math.random() * 3); if (a % 2) ? symbol1 : otherwise use symbol2 (this is pseudo-code explanation by me, to see real syntax, view my actual source code that I share below). And to make it more interesting, I do it twice for more variables to give it a range of 4 different glyphs (as shown above in Unicode).
So I render them, and do this forever in a loop. There are many ways to do loop using timer events in javascript as well as in HTML. I purposefully chose the simplest version by using meta tag of HTML (again, see the source, this is NOT a language lesson), but I could’ve easily done it (and did in other more complex versions) via javascript API such as setTimeout, setInterval.
Now the gears are turning and the computer is pumping out a number at a time, and my code is converting them to one of 4 glyphs and it’s in a timer loop to run FOREVER! Cool. That’s it really! The only other thing I do (for fun) is to create 2 arrays in memory each of which stores the values of the random values generated in each of the two loops I mentioned above. You could do just 1 loop! You could use less glyphs/images! But I used two, so as I load those values into the arrays, I also display what’s in them (mostly for my debugging but it’s just so much fun to see what’s happening behind the curtain!). They appear on the page as this:
and they’re constantly changing with every loop and within the loop (of course, 2 loops: 1 for each row, and within each row there are several columns right? So we have to append each glyph next to each other until the row is done. As in any matrix. Nothing revolutionary here I hope). The number of rows X the number of columns will determine the size of the arrays obviously [a 50×50 would generate 2500 values in each array], and since the user-friendly rending of the matrix on screen is NOT how the memory in computer works, I had to do 2 things to display the “dump” of the arrays’ values. 1) Reduce the font size to fit as many digits legibly. 2) Truncate the list of values at some point so we don’t have to scroll to the waaaaay right to see all the values (hence the “…” at end)…the interesting part isn’t the complete list to be shown on screen anyway. That’s where the array splicing method comes in. Again, every language has its own way of doing this (Python has powerful ways, C/C++ has its own, and C# has its own, etc.), so just look up the syntax for your favorite language and use it. In my code I chop off 500 digits from the top so they look nice enough with the matrix of glyphs below them.
How Do I Run It?
All you have to do is point your phone’s browser, PC browser, or Tablet browser to here!
Remember that it’s an endless loop (on purpose) and it’ll use up some of your device resources as well as my server’s (I host the page on my own server)…Not much, but some. So please don’t run it for hours! Not more than a few minutes at a time. Otherwise, I’d have to implement some restrictions. Better yet, though, download the code from below and run it on your own device! No wifi/internet connection needed and NO restrictions 🙂 See bottom of the blog.
Big Deal! You Say
Yes, it’s not supposed to be a big deal, it’s supposed to be fun, thought-prov0king, remember? So, let me throw in a few follow-up challenges/assignments for you…
- Create a story around this. Each number translates to a creature. A creature is rendered as an image (based on the random numbers). So, create an array/list of your custom images to transpose to from numbers.
- Add more interactivity…e.g. Stop the loop. Make it prettier. Modify the size of the matrix and its layout.
- What if you added logic that associates numbers adjacent to each other…meaning, if these 2 particular ones are next to each other, a new one is generated (hint: Rooster+Hen=Fertile Egg=>Chick. Hen=Egg but NO chick, etc.).
- Can you log the pattern in each cycle and store many of them in a way for later comparison to see how many cycles it took to repeat a pattern? Or how closely correlated each ones are over X cycles? How would you implement that?
- Re-write the loop to do without meta tag, but with a timer in a function (hint: don’t overwrite the whole page but specific part(s)).
I just laid the bricks, go have fun with it and please share your amazing creations! Even if it’s “not that great” you think, share it! More importantly, have fun with coding…no matter what your language is.
Cheers!
