• Welcome to TechPowerUp Forums, Guest! Please check out our forum guidelines for info related to our community.

Drawing fractals patterns with JavaScript canvas

Joined
Apr 9, 2018
Messages
68 (0.12/day)
This is an interesting programming project I did a few years ago when I was super interested in playing with code.
The "coolFractals" program was originally not mine (it was an example program included with Just Basic) but my idea was to port it to JavaScript.
Obviously the benefits of HTML is that the code can now be run on any computer using just a browser.
Anyone who's interested in experimenting with it, just copy the code into Notepad and save it with a ".html" extension.

'coolFractal.bas contributed by Rod
nomainwin
dim col$(12)
WindowWidth = DisplayWidth
WindowHeight = DisplayHeight
UpperLeftX = int((DisplayWidth-WindowWidth)/2)
UpperLeftY = int((DisplayHeight-WindowHeight)/2)
midx=int(WindowWidth/2)
midy=int(WindowHeight/2)
button #1, "Clear", [clear], LR, 50, 10
open "Fractals" for graphics_nsb as #1
print #1, "trapclose [quit]"

[clear]
print #1, "down ; fill black"

[draw]
'set up some random colors
for c=0 to 12
col$(c)=str$(int(rnd(0)*256))+" "+str$(int(rnd(0)*256))+" "+str$(int(rnd(0)*256))
next c

'set up some random starting positions
a=rnd(0)
b=0.9998
c=2-2*a
dots=12000
x=j=0
y=rnd(0)*12+0.1

'calculate and draw the points
for i=0 to dots
scan
z=x
x=b*y+j
j=a*x+c*(x^2)/(1+x^2)
y=j-z
xp=(x*20)+midx
yp=(y*20)+midy
print #1, "color ";col$(i/1000)
print #1, "set ";xp;" ";yp
next i
goto [draw]

[quit]
close #1
end

My updated version of the code for HTML:

HTML:
<!DOCTYPE html>
<html>

<body>

<canvas id="myCanvas" style="border:1px solid #000000">
</canvas>

<script language="javaScript">

//Variables
    var a;
    var b;
    var c;
    var x;
    var y;
    var z;
    var j;
    var dots;
    var xp;
    var yp;
    var i;
    var colors;
    var randomColour;
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");

//Resize and fill in canvas
canvas.width = screen.width;
canvas.height = screen.height;
context.fillStyle = "#000000";
context.fillRect(0, 0, canvas.width, canvas.height);

//Run code immediately to remove timeout() delay.
    //Set up some random starting positions
        a = Math.random();
        b = 0.9998;
        c = 2 - 2*a;
        dots = 80000;
        x = 0;
        j = 0;
        y = Math.random()*12 + 0.1;
    //Calculate and draw the points
        i = 0;
        function draw() {
            if (i<=dots) {
                z = x;
                x = b*y+j;
                j = a*x+(c*(Math.pow(x,2)))/(1+Math.pow(x,2));
                y = j-z;
                xp = (x*20) + (canvas.width/2);
                yp = (y*20) + (canvas.height/2);
                context.fillRect(xp, yp, 2, 2);
                i++;
                setTimeout(draw);
            };
        };
        setTimeout(draw)
    timeout();

function timeout() {
        //Generate a random hex colour
            colors = ["#FF0000","#FFD700","#008000","#0000FF"]
            randomColour = colors[Math.floor(Math.random() * colors.length)];
            context.fillStyle = randomColour;
    setTimeout(function () {
        //Set up some random starting positions
            a = Math.random();
            b = 0.9998;
            c = 2 - 2*a;
            dots = 50000;
            x = 0;
            j = 0;
            y = Math.random()*12 + 0.1;
        //Calculate and draw the points
            i = 0;
            function draw() {
                if (i<=dots) {
                    z = x;
                    x = b*y+j;
                    j = a*x+(c*(Math.pow(x,2)))/(1+Math.pow(x,2));
                    y = j-z;
                    xp = (x*20) + (canvas.width/2);
                    yp = (y*20) + (canvas.height/2);
                    context.fillRect(xp, yp, 2, 2);
                    i++;
                    setTimeout(draw);
                };
            };
            setTimeout(draw)
        timeout();
    }, 6000);
}

timeout();

</script>
  
</body>
</html>
Screenshot:

132346
 
Last edited:

Solaris17

Dainty Moderator
Staff member
Joined
Aug 16, 2005
Messages
20,870 (4.03/day)
Location
Florida
System Name Venslar
Processor I9 7980XE
Motherboard MSI x299 Tomahawk Arctic
Cooling EK Custom
Memory 32GB Corsair DDR4 3000mhz
Video Card(s) Nvidia Titan RTX
Storage 2x 2TB Micron SSDs | 1x ADATA 128SSD | 1x Drevo 256SSD | 1x 1TB 850 EVO | 1x 250GB 960 EVO
Display(s) 3x AOC Q2577PWQ (2k IPS)
Case Inwin 303 White (Thermaltake Ring 120mm Purple accent)
Audio Device(s) Realtek ALC 1220 on Audio-Technica ATH-AG1
Power Supply Seasonic 1050W Snow
Mouse Roccat Kone Aimo White
Keyboard Ducky Shine 6 Snow White
Software Windows 10 x64 Pro
This is cool thanks for sharing.
 
Joined
Mar 23, 2016
Messages
2,827 (2.17/day)
Processor Ryzen 5 3600
Motherboard MSI B450 Tomahawk ATX
Cooling Scythe Kotetsu with AM4 bracket
Memory PNY Anarchy-X XLR8 Red DDR4 3200 MHz C15-17-17-17-35
Video Card(s) MSI GeForce RTX 2060 GAMING Z 6G
Storage Samsung 970 EVO NVMe M.2 500 GB, SanDisk Ultra II 480 GB
Display(s) Samsung SyncMaster C27H711 OC refresh rate 110Hz
Case Phantek Eclipse P400S (PH-EC416PS)
Audio Device(s) On-board dead - Creative Labs Sound Blaster Audigy Rx
Power Supply EVGA 850 BQ
Mouse SteelSeries Rival 310
Keyboard Logitech G G413 Silver
Software Windows 10 Professional 64-bit v1903
Pegs the RTX 2060 more than the Ryzen 3600
Untitled.jpg
 

Solaris17

Dainty Moderator
Staff member
Joined
Aug 16, 2005
Messages
20,870 (4.03/day)
Location
Florida
System Name Venslar
Processor I9 7980XE
Motherboard MSI x299 Tomahawk Arctic
Cooling EK Custom
Memory 32GB Corsair DDR4 3000mhz
Video Card(s) Nvidia Titan RTX
Storage 2x 2TB Micron SSDs | 1x ADATA 128SSD | 1x Drevo 256SSD | 1x 1TB 850 EVO | 1x 250GB 960 EVO
Display(s) 3x AOC Q2577PWQ (2k IPS)
Case Inwin 303 White (Thermaltake Ring 120mm Purple accent)
Audio Device(s) Realtek ALC 1220 on Audio-Technica ATH-AG1
Power Supply Seasonic 1050W Snow
Mouse Roccat Kone Aimo White
Keyboard Ducky Shine 6 Snow White
Software Windows 10 x64 Pro
Top