Old Tricks on New Canvas

I found my old notes, which included creating some maths-based graphics using IBM PC BASICA (not Visual Basic, but some very old BASIC variation). Interestingly those algorithms still work with HTML5 Canvas with very minimal changes.
I used W3 Schools Try It Editor to draw them.

Sphere with Wings

The original

FOR X1=0 TO 319
X2=120+100*SIN(X1/30) : Y2=90+100*COS(X1/30)
LINE(X1,100)-(X2,Y2)
NEXT

JavaScript with Canvas

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="1000" height="1000" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
y1 = 100;
for(x1=0;x1320;x1++)
{
    ctx.beginPath();
    x2 = 120 + 100 * Math.sin(x1 / 30);
    y2 = 90 + 100 * Math.cos(x1 / 30);
    ctx.moveTo(150 + x1, 150 + y1);
    ctx.lineTo(150 + x2, 150 + y2);
    ctx.stroke();
}

</body>
</html>

Result

sphere

Simple Caleidoscope

The original

FOR I=1 TO 1500
X=INT(160*RND(1)) : Y=INT(100*RND(1))
PSET(X,Y),2 : PSET(319-X,199-Y),2
PSET(319-X,Y),2 : PSET(X,199-Y),2
NEXT

JavaScript with Canvas (slightly modified)

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="1000" height="1000" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>


var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
for(i = 0; i  1500; i++)
{
    x = Math.floor(160 * Math.random());
    y = Math.floor(100 * Math.random());
    s = 1 + Math.floor(5 * Math.random());
    r = Math.floor(255 * Math.random());
    g = Math.floor(255 * Math.random());
    b = Math.floor(255 * Math.random());
    ctx.fillStyle = 'rgb(' + r + ',' + g + ',' + b + ')';
    ctx.fillRect(x, y , s, s);
    ctx.fillRect(319-x, y, s, s);
    ctx.fillRect(319-x, 199-y, s, s);
    ctx.fillRect(x, 199-y, s, s);
}


</body>
</html>

Result

caleidoscope

Spiderweb

The original

N=18
DIM X(N), Y(N)
R=99
DT=2*3.1416/N
T=0
FOR I=1 TO N
T=T+DT
X(I)=160+R*COS(T) : Y(I)=100-R*SIN(T)
NEXT
FOR I=1 TO N-1
FOR J=I+1 TO N
LINE(X(I),Y(I))-X(J),Y(J))
NEXT
NEXT

JavaScript with Canvas (slightly modified)

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="1000" height="1000" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>


var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
n = 18;
r = 199;
dt = 2 * 3.1416 / n;
t = 0;
var x = [];
var y = [];
for(i = 1; i  n; i++)
{
    t = t + dt;
    x[i] = 160 + r * Math.cos(t);
    y[i] = 100 - r * Math.sin(t);
}
for(i = 1; i  n - 1; i++)
{
    for(j = i + 1; j  n; j++)
    {
        ctx.beginPath();
        ctx.moveTo(r + x[i], r + y[i]);
        ctx.lineTo(r + x[j], r + y[j]);
        ctx.stroke();
    }
}


</body>
</html>

Result

spiderweb

Runaway Square

The original

DIM X(3),Y(3),XD(3),YD(3)
R=100
XL=100 : YU=50
N=30
X(0)=XL : X(1)=XL+R : X(2)=XL+R : X(3)=XL
X(0)=YU : X(1)=YU+R : X(2)=YU+R : X(3)=YU
SMU=.08 : RMU=1-SMU
FOR I=1 TO N
FOR J=0 TO 3
XD(J)=RMU*X(J)+SMU*X((J+1) mod 4)
YD(J)=RMU*Y(J)+SMU*Y((J+1) mod 4)
NEXT
FOR J=0 TO 3
LINE(X(J),Y(J))-(X((J+1) mod 4), Y((J+1) mod 4))
NEXT
FOR J=0 TO 3
X(J)=XD(J)
Y(J)=YD(J)
NEXT
NEXT

JavaScript with Canvas

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="1000" height="1000" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>


var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
r = 400;
xl = 200;
yu = 50;
n = 30;
var x = [xl, xl + r, xl + r, xl];
var y = [yu + r, yu + r, yu, yu];
var xd = [];
var yd = [];
smu = 0.08;
rmu = 1 - smu;
for(i = 1; i  n; i++)
{
    for(j = 0; j  3; j++)
    {
        xd[j] = rmu * x[j] + smu * x[(j + 1) % 4];
        yd[j] = rmu * y[j] + smu * y[(j + 1) % 4];
    }

    for(j = 0; j  3; j++)
    {
        ctx.beginPath();
        ctx.moveTo(x[j], y[j]);
        ctx.lineTo(x[(j + 1) % 4], y[(j + 1) % 4]);
        ctx.stroke();
    }

    for(j = 0; j  3; j++)
    {
        x[j] = Math.floor(xd[j]);
        y[j] = Math.floor(yd[j]);
    }
}


</body>
</html>

Result

perspective

Rotating Lines

The original

DIM X(3),Y(3),XD(3),YD(3)
R=60 : XL=10 : YU=17
FOR K=1 TO 2
FOR L=1 TO 3
X(0)=XL : X(1)=XL+R : X(2)=XL+R : X(3)=XL
IF K MOD 2 = 0 AND L MOD 2 = 0 THEN GOTO 28
IF K MOD 2 = 1 AND L MOD 2 = 1 THEN GOTO 28
28: Y(0)=YU+R : Y(1)=YU : Y(2)=YU : Y(3)=YU+R
GOTO 40
40: SMU=.08 : RMU=1-SMU
FOR I=1 TO 21
FOR J=0 TO 3
XD(J)=RMU*X(J)+SMU*X((J+1) mod 4)
YD(J)=RMU*Y(J)+SMU*Y((J+1) mod 4)
NEXT
FOR J=0 TO 3
LINE(X(J),Y(J))-(X((J+1) mod 4),Y((J+1) mod 4))
NEXT
FOR J=0 TO 3
X(J)=XD(J)
Y(J)=YD(J)
NEXT
NEXT
XL=XL+R
NEXT
XL=10 : YU=YU+R
NEXT

JavaScript with Canvas

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="1000" height="1000" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>


var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
r = 150;
xl = 10;
yu = 17;
var x = [];
var y = [];
var xd = [];
var yd = [];
for(k = 0; k  2; k++)
{
    for(l = 1; l  3; l++)
    {
        x = [xl, xl + r, xl + r, xl];
        if(k % 2  != l % 2)
        {
            y = [yu + r, yu + r, yu, yu];
        }
        else
        {
            y = [yu, yu, yu + r, yu + r];
        }
        smu = 0.08;
        rmu = 1 - smu;
        for(i = 1; i 21; i++)
        {
            for(j = 0; j  3; j++)
            {
                xd[j] = rmu * x[j] + smu * x[(j + 1) % 4];
                yd[j] = rmu * y[j] + smu * y[(j + 1) % 4];
            }
            for(j = 0; j  3; j++)
            {
                ctx.beginPath();
                ctx.moveTo(x[j], y[j]);
                ctx.lineTo(x[(j + 1) % 4], y[(j + 1) % 4]);
                ctx.stroke();
            }
            for(j = 0; j  3; j++)
            {
                x[j] = Math.floor(xd[j]);
                y[j] = Math.floor(yd[j]);
            }         
        }
        xl = xl + r;
    }
    xl = 10;
    yu = yu + r;  
}


</body>
</html>

Result

rotating

Advertisements
Old Tricks on New Canvas

Platform-Independent Newline for Strings in Java

For any Java version:

private static final String BR = System.getProperty("line.separator");
// e.g.
String x = "a" + BR + "b";

Java 1.7 has a shortcut for this method:

private static final String BR = System.lineSeparator();
// e.g.
String x = "a" + BR + "b";

When formatting strings in Java 1.5 or higher there’s a nicer option:

// use String.format("%n"), e.g.
String x = String.format("a%nb");

Finally, to replace the arbitrary newline, with the one appropriate for current platform:

// use replaceAll("(\\r\\n|\\n\\r|\\r|\\n)+", ), e.g.
 
private static final String BR = System.getProperty("line.separator");
 
String correctNewline(String source)
{
    return source.replaceAll("(\\r\\n|\\n\\r|\\r|\\n)+", BR);
}
 
// Example:
 
String n = correctNewline("a\nb");    // Linux and Mac
String r = correctNewline("a\rb");    // Old Mac, nowadays usually a bug
String rn = correctNewline("a\r\nb"); // Windows
String nr = correctNewline("a\n\rb"); // Not a real sequence, but a common bug
Platform-Independent Newline for Strings in Java