ongspxm/script.js

## script.js
const WIDTH = 128;
const COLOUR = document.getElementById("colour").getContext("2d");
const HEIGHT = document.getElementById("height").getContext("2d");
const COMBIN = document.getElementById("combin").getContext("2d");

var X=WIDTH/2, Y=WIDTH/2;
var ANGLE=0, DOP=WIDTH/2;

var img_height = "https://cdn.glitch.com/3bb25b2e-fb56-49fd-96e9-a9af83d391d2%2Fheight.jpg?1513785075480";
var img_color = "https://cdn.glitch.com/3bb25b2e-fb56-49fd-96e9-a9af83d391d2%2Fcolor.jpg?1513785075766";

function getPoints(dist){
    var left = ANGLE-(Math.PI/4);
    var right = ANGLE+(Math.PI/4);

    return [
        [X+Math.sin(left)*dist, Y-Math.cos(left)*dist],
        [X+Math.sin(right)*dist, Y-Math.cos(right)*dist]
    ];
}

function getDiff(pt1, pt2){
    return [
        (pt2[0] - pt1[0])/WIDTH,
        (pt2[1] - pt1[1])/WIDTH
    ];
}

function getDist(pt1, pt2){
    var dx = pt1[0]-pt2[0];
    var dy = pt1[1]-pt2[1];
    return Math.sqrt(dx*dx + dy*dy);
}

function getColor(data, x, y){
    var start = ((y*WIDTH)+x)*4;
    return data.slice(start, start+4);
}

function setColor(clr){
    COMBIN.fillStyle = "rgb("+
        clr[0]+","+
        clr[1]+","+
        clr[2]
    +")";
}

function render(){
    setColor([0,0,0]);
    COMBIN.fillRect(0,0,WIDTH,WIDTH);

    var colors = COLOUR.getImageData(0, 0, WIDTH, WIDTH);
    var height = HEIGHT.getImageData(0, 0, WIDTH, WIDTH);
    var pts = getPoints(DOP);
    var dd = getDiff(pts[0], pts[1]);

    var scale_y = 1;
    var scale_h = WIDTH/255;
    var s = "";
    for(var i=0; i<DOP; i++){
        var dist = DOP-i;
        var pts = getPoints(dist);
        var dd = getDiff(pts[0], pts[1]);

        var scale_x = WIDTH/getDist(pts[0], pts[1]);
        for(var x=0; x<WIDTH; x++){
            var ox = parseInt(pts[0][0]+dd[0]*x);
            var oy = parseInt(pts[0][1]+dd[1]*x);
            var cr = getColor(colors.data, ox, oy);
            var ht = getColor(height.data, ox, oy)[0];

            s += " "+ht;
            setColor(cr);
            var y = Math.max(0, WIDTH/2+i*scale_y-(ht*scale_h));
            COMBIN.fillRect(x, y, scale_x, WIDTH-y);
        }
    }
    ANGLE += Math.PI/24;
    setTimeout(render, 1000);
}

(function(){
    var img = new Image();
    img.crossOrigin = "Anonymous";
    img.src = img_color;
    img.onload = function(){
        COLOUR.drawImage(img, 0, 0, WIDTH, WIDTH);
    };

    var img2 = new Image();
    img2.crossOrigin = "Anonymous";
    img2.src = img_height;
    img2.onload = function(){
        HEIGHT.drawImage(img2, 0, 0, WIDTH, WIDTH);
    };
})();

## vortex-space.html
<html>
  <body>
    <button onclick="render();">render</button>
    <canvas width="128" height="128" id="combin"></canvas>
    <canvas width="128" height="128" id="colour"></canvas>
    <canvas width="128" height="128" id="height"></canvas>
    <script src="script.js"></script>
  </body>
</html>
	const WIDTH = 128;
	const COLOUR = document.getElementById("colour").getContext("2d");
	const HEIGHT = document.getElementById("height").getContext("2d");
	const COMBIN = document.getElementById("combin").getContext("2d");

	var X=WIDTH/2, Y=WIDTH/2;
	var ANGLE=0, DOP=WIDTH/2;

	var img_height = "https://cdn.glitch.com/3bb25b2e-fb56-49fd-96e9-a9af83d391d2%2Fheight.jpg?1513785075480";
	var img_color = "https://cdn.glitch.com/3bb25b2e-fb56-49fd-96e9-a9af83d391d2%2Fcolor.jpg?1513785075766";

	function getPoints(dist){
	var left = ANGLE-(Math.PI/4);
	var right = ANGLE+(Math.PI/4);

	return [
	[X+Math.sin(left)dist, Y-Math.cos(left)dist],
	[X+Math.sin(right)dist, Y-Math.cos(right)dist]
	];
	}

	function getDiff(pt1, pt2){
	return [
	(pt2[0] - pt1[0])/WIDTH,
	(pt2[1] - pt1[1])/WIDTH
	];
	}

	function getDist(pt1, pt2){
	var dx = pt1[0]-pt2[0];
	var dy = pt1[1]-pt2[1];
	return Math.sqrt(dxdx + dydy);
	}

	function getColor(data, x, y){
	var start = ((yWIDTH)+x)4;
	return data.slice(start, start+4);
	}

	function setColor(clr){
	COMBIN.fillStyle = "rgb("+
	clr[0]+","+
	clr[1]+","+
	clr[2]
	+")";
	}

	function render(){
	setColor([0,0,0]);
	COMBIN.fillRect(0,0,WIDTH,WIDTH);

	var colors = COLOUR.getImageData(0, 0, WIDTH, WIDTH);
	var height = HEIGHT.getImageData(0, 0, WIDTH, WIDTH);
	var pts = getPoints(DOP);
	var dd = getDiff(pts[0], pts[1]);

	var scale_y = 1;
	var scale_h = WIDTH/255;
	var s = "";
	for(var i=0; i<DOP; i++){
	var dist = DOP-i;
	var pts = getPoints(dist);
	var dd = getDiff(pts[0], pts[1]);

	var scale_x = WIDTH/getDist(pts[0], pts[1]);
	for(var x=0; x<WIDTH; x++){
	var ox = parseInt(pts[0][0]+dd[0]*x);
	var oy = parseInt(pts[0][1]+dd[1]*x);
	var cr = getColor(colors.data, ox, oy);
	var ht = getColor(height.data, ox, oy)[0];

	s += " "+ht;
	setColor(cr);
	var y = Math.max(0, WIDTH/2+iscale_y-(htscale_h));
	COMBIN.fillRect(x, y, scale_x, WIDTH-y);
	}
	}
	ANGLE += Math.PI/24;
	setTimeout(render, 1000);
	}

	(function(){
	var img = new Image();
	img.crossOrigin = "Anonymous";
	img.src = img_color;
	img.onload = function(){
	COLOUR.drawImage(img, 0, 0, WIDTH, WIDTH);
	};

	var img2 = new Image();
	img2.crossOrigin = "Anonymous";
	img2.src = img_height;
	img2.onload = function(){
	HEIGHT.drawImage(img2, 0, 0, WIDTH, WIDTH);
	};
	})();
	<html>
	<body>
	<button onclick="render();">render</button>
	<canvas width="128" height="128" id="combin"></canvas>
	<canvas width="128" height="128" id="colour"></canvas>
	<canvas width="128" height="128" id="height"></canvas>
	<script src="script.js"></script>
	</body>
	</html>