Plotting psuedorandom jagged parallel lines

Question

Plotting psuedorandom jagged parallel lines

351 Views Asked by Bumbble Comm At 28 Mar 2026 - 12:38

I'm very interested in the morphogenic freehand drawings of John Franzen. I am looking to develop an algorithm which can draw lines such as these with some "entropy". That is, somewhat jagged or crooked. I was thinking of drawing a vector or random length, turning some slight random angle < n degrees, and repeating until I reached the end of the canvas. Then, I would draw a line parallel to that with similar entropy. Ultimately, I'm thinking this might have a moire effect.

Where would a good starting point be? Should I be creating matrices? Edges and vertices in cartesian space? Open to any suggestions.

Original Q&A

There are 1 best solutions below

**Bumbble Comm** · Answer 1 · 2013-12-12 13:51:39

Here is an implementation in HTML 5 and Javascript using the <canvas> element:

<html> 
    <head> 
        <style>
            * { padding: 0; margin: 0 }
        </style>
        <script>
            /*
                Copyright (c) 2013, Luca Béla Palkovics
                All rights reserved.

                Redistribution and use in source and binary forms, with or without modification,
                are permitted provided that the following conditions are met:

                  Redistributions of source code must retain the above copyright notice, this
                  list of conditions and the following disclaimer.

                  Redistributions in binary form must reproduce the above copyright notice, this
                  list of conditions and the following disclaimer in the documentation and/or
                  other materials provided with the distribution.

                THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
                ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
                WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
                DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR
                ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
                (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
                LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON
                ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
                (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
                SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

            */

            /*
                Luca's response to https://plus.google.com/115110308859529655232/posts/MRiEbyyaVuX

                http://kokutoru.urotukok.net/
            */
            //parameters for my fav ;)
            var A = 3.419384662527591;
            var B = 2.0158889752347022;
            var C = 19.479697084985673;
            var D = 61.006212908774614;
            var F = 1.3449991745874286;
            var G = 1.9590223710983992;
            var H = 5.129501734860241;

            function rand()
            {
                A = 3+Math.random()*10;
                B = 1+Math.random()*5;
                C = 1+Math.random()*20;
                D = 1+Math.random()*200;
                F = 1+Math.random()*2;
                G = 1+Math.random()*20;
                H = 1+Math.random()*20;
            }

            function draw()
            {
                //generate random points
                var points = new Array();
                var points_space = new Array();
                var points_energy = new Array();

                var canvas = document.getElementById('screen');

                canvas.width = document.body.clientWidth;
                canvas.height = document.body.clientHeight;

                var w = canvas.width;
                var h = canvas.height;

                if (canvas.getContext)
                {
                    canvas = canvas.getContext('2d');

                    canvas.clearRect ( 0 , 0 , w , h );

                    for(var y = 0; y < h; ++y)
                    {
                        points[y] = 0;
                        points_space[y] = 0;
                        points_energy[y] = 0;
                    }

                    var min_x = 0;
                    while(min_x < w)
                    {
                        canvas.beginPath();
                        min_x = w;
                        var lrand = 0;
                        for(var y = 1; y < h; ++y)
                        {
                            points_space[y] += (points_space[y-1]-points_space[y])/F;
                        }
                        for(var y = 0; y < h; ++y)
                        {
                            lrand += (Math.random()-0.5)/C;

                            new_point = points[y] + points_space[y] + lrand;
                            points_space[y] = (new_point - points[y])+points_energy[y]/G;
                            points_space[y] += (A-points_space[y])/D;
                            points_energy[y] /= H;
                            if (points_space[y] < B)
                            {
                                points_energy[y] = points_space[y]-B;
                                points_space[y] = B;
                            }
                            points[y] += points_space[y];

                            if (min_x > points[y]) min_x = points[y];
                            if (y == 0)
                            {
                                canvas.moveTo(points[y], y);
                            }
                            else
                            {
                                canvas.lineTo(points[y], y);
                            }
                        }
                        canvas.stroke();
                    }
                }
            }
        </script>
    </head>
    <body onLoad="draw();" onResize="draw();">
        <canvas id="screen" width="10" height="10" onClick="rand();draw();"></canva>
    </body>
</html>

Plotting psuedorandom jagged parallel lines

There are 1 best solutions below

Related Questions in GRAPHING-FUNCTIONS

Related Questions in RANDOM

Related Questions in RANDOM-GRAPHS

Trending Questions

Popular # Hahtags

Popular Questions