dominiccooney/80-column-graphics.html

## 80-column-graphics.html
<!DOCTYPE html>
<style>
canvas {
  width: 640px;
  height: 480px;
  background: black;
}
</style>
<title>80 COLUMN GRAPHICS</title>
<canvas></canvas>
<script>
var c = document.querySelector('canvas').getContext('2d');

// The ad says the graphics unit has a 320x200 display; so do we.
c.canvas.width = 320;
c.canvas.height = 200;

var p = 160;
var q = 100;
var xp = 144;
var xr = 1.5 * Math.PI;
var yp = 56;
var yr = 1;
var zp = 64;
var xf = xr / xp;
var yf = yp / yr;
var zf = xr / zp;

for (var zi = -q; zi < q; zi++) {
  if (zi < -zp || zi > zp) {
    continue;
  }
  var zt = zi * xp / zp;
  var zz = zi;
  var xl = Math.round(Math.sqrt(xp * xp - zt * zt));

  for (var xi = -xl; xi <= xl; xi++) {
    var xt = Math.sqrt(xi * xi + zt * zt) * xf;
    var xx = xi;
    var yy = (Math.sin(xt) + 0.4 * Math.sin(3 * xt)) * yf;

    var x1 = xx + zz + p;
    var y1 = yy - zz + q;

    c.beginPath();
    c.strokeStyle = 'green';
    c.moveTo(x1, c.canvas.height - y1);
    c.lineTo(x1, c.canvas.height - (y1 - 1));
    c.stroke();

    c.beginPath();
    c.strokeStyle = 'black';
    c.moveTo(x1, c.canvas.height - (y1-1));
    c.lineTo(x1, c.canvas.height);
    c.stroke();
  }
}
</script>

<p>
Translated from this Commodore PET BASIC code in an ad for a
&#147;MTU K-1008-43&#148;
in <a href="https://archive.org/stream/creativecomputing-1981-06/Creative_Computing_v07_n06_1981_June?ui=embed#page/n49/mode/2up"><i>Creative
Computing,</i> June 1981, p. 47:</a>

<pre>
 10 VISMEM: CLEAR
 20 P=160: Q=100
 30 XP=144: XR=1.5*3.1415927
 40 YP=56: YR=1: ZP=64
 50 XF=XR/XP: YF=YP/YR: ZF=XR/ZP
 60 FOR ZI=-Q TO Q-1
 70 IF ZI&lt;-ZP OR ZI&gt;ZP GOTO 150
 80 ZT=ZI*XP/ZP: ZZ=ZI
 90 XL=INT(.5+SQR(XP*XP-ZT*ZT))
100 FOR XI=-XL TO XL
110 XT=SQR(XI*XI+ZT*ZT)*XF: XX=XI
120 YY=(SIN(XT)+.4*SIN(3*XT))*YF
130 GOSUB 170
140 NEXT XI
150 NEXT ZI
160 STOP
170 X1=XX+ZZ+P
180 Y1=YY-ZZ+Q
190 GMODE 1: MOVE X1,Y1: WRPIX
200 IF Y1=0 GOTO 220
210 GMODE 2: LINE X1,Y1-1,X1,0
220 RETURN
</pre>
	<!DOCTYPE html>
	<style>
	canvas {
	width: 640px;
	height: 480px;
	background: black;
	}
	</style>
	<title>80 COLUMN GRAPHICS</title>
	<canvas></canvas>
	<script>
	var c = document.querySelector('canvas').getContext('2d');

	// The ad says the graphics unit has a 320x200 display; so do we.
	c.canvas.width = 320;
	c.canvas.height = 200;

	var p = 160;
	var q = 100;
	var xp = 144;
	var xr = 1.5 * Math.PI;
	var yp = 56;
	var yr = 1;
	var zp = 64;
	var xf = xr / xp;
	var yf = yp / yr;
	var zf = xr / zp;

	for (var zi = -q; zi < q; zi++) {
	if (zi < -zp \|\| zi > zp) {
	continue;
	}
	var zt = zi * xp / zp;
	var zz = zi;
	var xl = Math.round(Math.sqrt(xp * xp - zt * zt));

	for (var xi = -xl; xi <= xl; xi++) {
	var xt = Math.sqrt(xi * xi + zt * zt) * xf;
	var xx = xi;
	var yy = (Math.sin(xt) + 0.4 * Math.sin(3 * xt)) * yf;

	var x1 = xx + zz + p;
	var y1 = yy - zz + q;

	c.beginPath();
	c.strokeStyle = 'green';
	c.moveTo(x1, c.canvas.height - y1);
	c.lineTo(x1, c.canvas.height - (y1 - 1));
	c.stroke();

	c.beginPath();
	c.strokeStyle = 'black';
	c.moveTo(x1, c.canvas.height - (y1-1));
	c.lineTo(x1, c.canvas.height);
	c.stroke();
	}
	}
	</script>

	<p>
	Translated from this Commodore PET BASIC code in an ad for a
	MTU K-1008-43
	in <a href="https://archive.org/stream/creativecomputing-1981-06/Creative_Computing_v07_n06_1981_June?ui=embed#page/n49/mode/2up"><i>Creative
	Computing,</i> June 1981, p. 47:</a>

	<pre>
	10 VISMEM: CLEAR
	20 P=160: Q=100
	30 XP=144: XR=1.5*3.1415927
	40 YP=56: YR=1: ZP=64
	50 XF=XR/XP: YF=YP/YR: ZF=XR/ZP
	60 FOR ZI=-Q TO Q-1
	70 IF ZI<-ZP OR ZI>ZP GOTO 150
	80 ZT=ZI*XP/ZP: ZZ=ZI
	90 XL=INT(.5+SQR(XPXP-ZTZT))
	100 FOR XI=-XL TO XL
	110 XT=SQR(XIXI+ZTZT)*XF: XX=XI
	120 YY=(SIN(XT)+.4SIN(3XT))*YF
	130 GOSUB 170
	140 NEXT XI
	150 NEXT ZI
	160 STOP
	170 X1=XX+ZZ+P
	180 Y1=YY-ZZ+Q
	190 GMODE 1: MOVE X1,Y1: WRPIX
	200 IF Y1=0 GOTO 220
	210 GMODE 2: LINE X1,Y1-1,X1,0
	220 RETURN
	</pre>