Cyberpunk, matrices and canvas

    I. Foreword.



    Once upon a time, an episode from a cyberpunk novel fell into my memory: one hero shows another a screen on which pixels quickly replace each other. Each screen state is represented by a certain number, the program gradually goes through the options.

    One can imagine that sooner or later various amazing things could appear on such a screen: a page from “War and Peace”, “Mona Lisa”, the first bars of the “Moonlight Sonata”, an ingenious solution to a well-known equation, a photograph of any person, this Habr page, message about an unknown event of the past or a detailed prediction of the future.

    Since then, I periodically tried to do something tangentially, there were some small crafts on Perl. And recently I wanted to do something similar in JavaScript.

    II. Terms of sale.



    Implementing such an enumeration and its graphical display is simple. The only available scales will be quite small.

    Suppose for simplicity that each point on the screen is represented by two states - white and black, which corresponds to zero and one in the binary representation of the number. The successive coordinates of the points correspond to the ordinal position of the number in the number.

    At the moment, in JavaScript, the maximum integer with preservation of accuracy of calculations is 2 to the power of 53. Math.pow(2,53) == Math.pow(2,53) + 1gives true. This number is represented by 54 binary positions:

    0b100000000000000000000000000000000000000000000000000000
    0x20000000000000
    9007199254740992


    The number will be answered by a matrix of only 9 by 6 pixels. Suppose my computer can perform about 50 million operations per second. To sort through all the options for the matrix, he will need rough estimates

    Math.pow(2,53) / 50000000 / 60 / 60 / 24 / 365- about six years.

    A stronger computer will need less, but people will not be able to analyze the search with such an extreme speed. Suppose matrix states will succeed each other with a traditional broadcast frequency of 25 frames per second. Then, in order to sort through with visual speed all the states of a tiny piece of two-dimensional black-and-white reality, we will need 1,428,082 years.

    And yet it’s interesting to create something like that. The mentioned maximum number is not very convenient for this, because when the upper left point becomes unity (it is repainted in black), you will no longer draw anything on this matrix. Therefore, we can never fully use the extreme upper and left lines in our micrographics. Therefore, let’s take a slightly smaller number, the matrix of which can be completely filled with black, can take any state and have a relatively proportional shape. This will be a 10 by 5 matrix with a maximum of 50 binary orders:

    parseInt(
    "1111111111" +
    "1111111111" +
    "1111111111" +
    "1111111111" +
    "1111111111"
    , 2)


    0b11111111111111111111111111111111111111111111111111
    0x3ffffffffffff
    1125899906842623


    All further implementations have been successfully tested on the latest versions of Chrome, Firefox, Opera and Safari. Unfortunately, I can’t test on the ninth IE, and on the eighth only examples will work without using canvas.

    Any matrix can be saved, edited, if necessary, code and run locally.

    I understand that everything further is like a kindergarten. Therefore, I ask for leniency towards a person with a humanitarian mindset trying to play with other people's toys. All this is just for (slightly metaphysical) fun :)

    III. Sequential matrix.


    Since the matrix is ​​very small, it is not very convenient and clear to implement it on a pixel graphic, therefore, for simplicity and ease of scaling, we will have a simple table of 10 by 5 cells with a changing color. The first order is in the lower right corner.

    For starters, I wrote a number-to-number graphics converter for such a matrix. Each mouse click on a cell changes color and accordingly switches the order in the number between unity and zero. Above the plate, the number itself is displayed in decimal format. The cell size in pixels can be set by a parameter scalein the page address.

    Converter

    It remains to write the matrix itself with a sequential change of states. This will be the same table, but with a different behavior. So that nothing distracts the page from the clarity of presentation, the controls in this and the following crafts will be distributed between the mouse and the parameters in the URL.

    Our matrix has three parameters with the following defaults:

    scale=10- the already mentioned cell size in pixels;
    fps=25- frame rate per second;
    start=1- the number from which the search begins.

    Each mouse click increases the number by one and changes the state of the matrix. If you click and hold Ctrl, automatic search starts / stops. The current number is displayed in the title of the document (windows, tabs).

    10x5 serial matrix

    Let's say betweena state displaying a graphic unit :



    and a state displaying a graphic two :



    passes 7697662480391 - 1100586419201 = 6597076061190frames. With FPS, by default it is about 8368 years of contemplation :)

    The higher and left the point is, the more time passes before it appears.

    You can, for example, see how the main answer to the main question turns little by little into some other answer .



    IV. Random matrices.



    1. One number.


    Our sequential enumeration matrix can be transformed into a matrix sorting through random values. The parameter of the initial number loses its meaning, otherwise everything remains the same (except that by default we reduced the frame rate to 1 per second, otherwise it will be illegible flickering).

    One of the random states, oddly enough - with the perfect letter A:



    Random 10x5 matrix

    2. Sets of numbers.


    In order to somehow diversify our matrix reality, we will go beyond the boundaries of enumerating one number. We will create matrices that are not limited in size. Their states will be set by a set of random numbers according to different principles. We will implement them using canvas.

    a. Random whole images.


    Here, each frame of the matrix will be completely different from the other. Each point of the frame is given by one random number. We will analyze the default parameters (previous and future links include these parameters for clarity: these settings are used if you do not specify any parameters).

    w=400- matrix width in pixels
    h=300- matrix height in pixels
    fps=1- frame rate

    As before, one click replaces one frame. A click with a key Ctrlstarts a random state change. But now some more features are added.

    When you click the middle mouse button in a new tab or in a new window, a copy of the matrix in PNG format opens, if suddenly for some reason you need to save the picture (by the way, all subsequent illustrations are obtained that way).

    Left-click with the pressed key Shifttoggles the color depth of the picture: black and white mode, grayscale, color mode. If you hold down the keys Shift+Alt, switching is performed in the reverse order.

    Of course, the randomness of each point means that in the vast majority of states we get a graphic noise like the screen of an unconfigured television. After all, alternations are distributed on such a space relatively evenly. However, people with a rich imagination and sensitive perception can see interesting plots in this noise or unexpectedly recall something exciting because of whimsical associations.







    Random Images

    b. Random points.


    In this type of matrix, random points are successively added to the constant background. We introduce one more parameter:

    bg=w- background color (w - white (white), b - black (black)). Another color mode is also added, there are now four of them: single-color (black or white dots on the opposite background; sooner or later they can fill the entire canvas and the state will stop visually changing) and the previous three modes (filling in them does not occur, because even in the minimum in black and white mode, the previous state may be painted over with a new one).

    Dots appearing on a black background in the grayscale or color mode are similar to igniting stars of different brightness.



    And if you turn the background white, start the animation and zoom in on the page, over time you can play a game often found in children's magazines: connect the dots to get a picture. True picture will not be known in advance.

    Random points

    in. Random lines.


    In this kind of matrix random lines are constantly added to the background. I remember that at school we often played another similar game: a blank sheet is taken, one player draws an arbitrary pattern on it without looking, then, in turn, the remaining players circle the images they see. Patterns similar to the initial fields of this game appear on our matrix.

    Two more factors are added to the former randomness factors (point coordinates and color). New parameters are responsible for them:

    lines=r - the type of lines (can take three values: s - only straight lines, c - only curves (curve), r - random alternation of lines and curves (random); when drawing curves to two random points of origin and at the end of the segment, two more random points that control the bend are added - the usual parameters for Bezier curves);

    traverse=r- a method of drawing (also takes three values: y - draw without taking your hand from the paper (yes), n - each time start a line with a new random point (no), r - random alternation of separation with an uninterrupted continuation (random)).

    The previous four color modes remain here.





    Random lines

    d. Random figures.


    Now we will close the lines and paint over them. Random “strokes” will be obtained. The traverse parameter loses its meaning, but three new random factors with their parameters are added.

    alpha=y- randomly change the level of color transparency (two values, y (yes) or n (no), respectively use transparency or not). When using transparency, the first three modes of color depth (monochrome, black and white and shades of gray) become very similar to each other.

    minnodes=3- the minimum number of nodes in the figure

    maxnodes=10- the maximum number of nodes in the figure.

    By default, restrictions are set from 3 (it makes no sense to set less, because the figures will not work) to 10 (this upper limit can be edited in the code). The shape parameter already has a big influence on the shape of the figures (polygons or more complex shapes, respectively, are obtained). It should be borne in mind that the figures will often be self-intersecting, so filling will be difficult, with a variety of spaces.

    The following are examples of different color modes on a different background, using transparency and without using an alpha channel.













    Random shapes

    You can also connect all the described types of drawing (fragments of whole images, points, lines, shapes). I provide this game with code to those who are interested. Sincere thanks to all for your attention :)

    Links to all described matrices .

    Also popular now: