# Category: JavaScript

## Mandelbrot Set ASCII Viewer

The Mandelbrot Set is the set of all complex points which, when one iteratively and infinitely applies the function , converge to a value. This simple rule results in stunning complexity and beauty.

Many Mandelbrot Set animations use regularly colored pixels to represent the number of iterations needed at the fractal’s edges to escape converging. Yet this mathematical object can also be represented as ASCII characters — similar to what I did in my Curses Cam post. The characters are chosen according to their opaqueness. A full stop (‘.’) looks lighter than a dollar sign (‘$’), so they represent a smaller or larger number of iterations needed. The order of characters used is taken from this post by Paul Borke.

As there are only 70 characters used, each frame is being rendered twice to determine the minimum number of iterations needed by every point in that frame. Thereby the full visual character range is used.

The characters shown below represent a Mandelbrot Set still. To see the zoom in action, either run the program (listed below) or take a look at this Mandelbrot Set ASCII journey.

..................''''''''``"">>II``''''...... ..................''''''''``^^,,ii::^^``''''...... ..................''''''''``^^::ww$$++,,````''''...... ................''''''''``^^^^""::$$$$$$::""^^``''''...... ..............''''''````""{{;;XX$$$$$$$$uuUU,,,,""''...... ............''''``````^^,,rr$$$$$$$$$$$$$$$$<<$$--``........ ........''``````````^^""LL$$$$$$$$$$$$$$$$$$$$__""``''...... ..''''''^^!!"""",,""""::__$$$$$$$$$$$$$$$$$$$$$$ll""''........ ''''````^^::__IIYYii::ll$$$$$$$$$$$$$$$$$$$$$$$$pp^^''........ ''``````"";;[[$$$$$$++__$$$$$$$$$$$$$$$$$$$$$$$$$$^^''''...... ``^^^^,,;;>>$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ww``''''...... "",,,,II$$nn$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$""``''''...... "",,,,II$$nn$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$""``''''...... ``^^^^,,;;>>$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ww``''''...... ''``````"";;[[$$$$$$++__$$$$$$$$$$$$$$$$$$$$$$$$$$^^''''...... ''''````^^::__IIYYii::ll$$$$$$$$$$$$$$$$$$$$$$$$pp^^''........ ..''''''^^!!"""",,""""::__$$$$$$$$$$$$$$$$$$$$$$ll""''........ ........''``````````^^""LL$$$$$$$$$$$$$$$$$$$$__""``''...... ............''''``````^^,,rr$$$$$$$$$$$$$$$$<<$$--``........ ..............''''''````""{{;;XX$$$$$$$$uuUU,,,,""''...... ................''''''''``^^^^""::$$$$$$::""^^``''''...... ..................''''''''``^^::ww$$++,,````''''...... ..................''''''''``^^,,ii::^^``''''......

The fractal viewer is written in Python 2.7 and works by determining the terminal’s size and then printing a string of according size. This creates the illusion of a moving image, as the terminal will hopefully always perfectly scroll so that only one frame is visible at a time.

In the code’s first non-comment line one can change the complex point at the image’s center, (really, its conjugate, which is partially irrelevant as the set is symmetric along the real axis) the initial zoom value (complex distance above the image’s center), the zoom factor (the factor by which the zoom value gets multiplied after a frame), the total number of frames (-1 means there is no upper limit), the delay between frames (in seconds, can be floating-point) and the color characters used.

The program’s source code may not be particularly easy to read, yet it does its job and only requires seven non-comment lines! The code is shown below, though the .py file can also be downloaded.

To achieve the JavaScript animation linked to above, I wrote a simple Python converter which takes in the fractal renderer’s output and it spits out an HTML page. This converter’s code is not listed, though the .py file can be downloaded. Instructions on how to use the converter can be seen in its source code.

```
# Python 2.7 Code; Jonathan Frech, 15th and 16th of June 2017
P,Z,F,N,D,K=-.707+.353j,3,.9,-1,.1," .'`^\",:;Il!i><~+_-?][}{1)(|\\/tfjrxnuvczXYUJCLQ0OZmwqpdbkhao*#MW&8%B@$"
import os,time,sys;H,W,S,n=map(int,os.popen("stty size").read().split())+[sys.stdout,0];W/=2
def C(c):
global m;z,i=0j,-1
while abs(z)<=2 and i<len(K)-1+M:z,i=z*z+c,i+1
m=min(m,i);return K[i-M]*2
while n<N or N==-1:h=Z*2.;w=h*W/H;R=lambda:"\n\n"*(n!=0)+"\n".join("".join(C(P-complex(w/2-w*x/W,h/2-h*y/H))for x in range(W))for y in range(H));M,m=0,len(K);R();M=max(M,m);S.write(R());S.flush();Z,n=Z*F,n+1;time.sleep(D)
```

## T-3PO — Tic-Tac-Toe Played Optimally

Tic-Tac-Toe, noughts and crosses, Xs and Os, three in a row or whatever you want to call it may be the simplest perfect information game that is enjoyable by humans. Two players set their pieces (X or O) on an 3×3 grid, alternating their turns. The first player to get three of their pieces in a line, wins. If no player succeeds to get a line, the game ends in a draw.

Tic-Tac-Toe’s simplicity may become clear, if you consider that skilled players — people who have played a few rounds — can reliably achieve a draw, thereby playing perfectly. Two perfect players playing Tic-Tac-Toe will — whoever starts — always tie, so one may call the game virtually pointless, due to there practically never being a winner.

Because of its simple rules and short maximal number of turns (nine) it is also a game that can be solved by a computer using brute-force and trees.

The first Tic-Tac-Toe-playing program I wrote is a Python shell script. It lets you, the human player, make the first move and then calculates the best possible move for itself, leading to it never loosing. On its way it has a little chat whilst pretending to think about its next move. The Python source code can be seen below or downloaded here.

The second Tic-Tac-Toe-playing program I wrote uses the exact same method of optimizing its play, though it lets you decide who should begin and is entirely written in JavaScript. You can play against it by following this link.

Both programs look at the entire space of possible games based on the current board’s status, assumes you want to win and randomly picks between the moves that either lead to a win for the computer or to a draw. I did not include random mistakes to give the human player any chance of winning against the computer. Other Tic-Tac-Toe-playing computers, such as Google’s (just google the game), have this functionality.

```
# Python 2.7.7 Code
# Jonathan Frech, 31st of March 2017
# edited 1st of April 2017
```