Kattoor · November 16, 2017 10:54
diff --git a/terrainGeneration.html b/terrainGeneration.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <title>Dag Randy</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
    </style>
 </head>
 <body>
 <canvas id="canvas"></canvas>
 <script>
    const canvas = document.getElementById('canvas');
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    const ctx = canvas.getContext('2d');
    ctx.fillStyle = "#0000FF";
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    const line = [];
    const quadraticCurvePoints = [];
    const pointsOnQuadraticCurve = [];

    for (let i = 0; i < 5; i++) {
        const x = canvas.width / 4 * i;
        const y = (canvas.height - 500) + Math.random() * 100;
        line.push({x, y});
    }

    /* Generate curve */
    ctx.beginPath();
    for (let i = 0; i < line.length; i++) {
        const point = line[i];

        if (i !== 0) {
            const previousPoint = line[i - 1];
            const quadraticCurvePoint = {
                x: Math.min(point.x, previousPoint.x) + Math.abs(point.x - previousPoint.x) / 2 + Math.random() * 500 - 250,
                y: Math.min(point.y, previousPoint.y) + Math.abs(point.y - previousPoint.y) / 2 + Math.random() * 500 - 250
            };
            ctx.moveTo(previousPoint.x, previousPoint.y);
            ctx.strokeStyle = '#000000';
            ctx.quadraticCurveTo(quadraticCurvePoint.x, quadraticCurvePoint.y, point.x, point.y);
            quadraticCurvePoints.push(quadraticCurvePoint);
        }
    }
    ctx.stroke();

    /* Show points */
    ctx.beginPath();
    for (let i = 0; i < line.length; i++) {
        const point = line[i];

        if (i !== 0) {
            const previousPoint = line[i - 1];

            const quadraticPointOnCurve = {
                x: (1 - 0.5) * ((1 - 0.5) * previousPoint.x + (0.5 * quadraticCurvePoints[i - 1].x)) + 0.5 * (((1 - 0.5) * quadraticCurvePoints[i - 1].x + (0.5 * point.x))),
                y: (1 - 0.5) * ((1 - 0.5) * previousPoint.y + (0.5 * quadraticCurvePoints[i - 1].y)) + 0.5 * (((1 - 0.5) * quadraticCurvePoints[i - 1].y + (0.5 * point.y)))
            };

            ctx.strokeStyle = '#00FF00';
            ctx.moveTo(quadraticPointOnCurve.x, quadraticPointOnCurve.y);
            ctx.lineTo(quadraticCurvePoints[i -1].x, quadraticCurvePoints[i - 1].y);

            drawPoint(quadraticCurvePoints[i - 1], 10, '#00FF00');
        }

        drawPoint(point, 10, '#FF0000');
    }
    ctx.stroke();

    for (let i = 0; i < line.length; i++) {
        const point = line[i];
        if (i !== 0) {
            const previousPoint = line[i - 1];
            for (let j = 0.1; j < 1; j += 0.2) {
                const pointOnQuadraticCurve = {
                    x: (1 - j) * ((1 - j) * previousPoint.x + (j * quadraticCurvePoints[i - 1].x)) + j * (((1 - j) * quadraticCurvePoints[i - 1].x + (j * point.x))),
                    y: (1 - j) * ((1 - j) * previousPoint.y + (j * quadraticCurvePoints[i - 1].y)) + j * (((1 - j) * quadraticCurvePoints[i - 1].y + (j * point.y)))
                };
                drawPoint(pointOnQuadraticCurve, 10, '#ffffff');
                pointsOnQuadraticCurve.push(pointOnQuadraticCurve);
            }
        }
    }


    /* Show all points on curve (line points + quadratic line points) */
    let allPointsOnCurve = line.slice();
    for (let i = 0; i < line.length; i++)
        allPointsOnCurve.splice(i * 6 + 1, 0, ...pointsOnQuadraticCurve.slice(i * 5, i * 5 + 5));
    ctx.beginPath();
    ctx.strokeStyle = '#FF00FF';
    for (let i = 0; i < allPointsOnCurve.length; i++) {
        const point = allPointsOnCurve[i];
        if (i === 0)
            ctx.moveTo(point.x, point.y - 5);
        else
            ctx.lineTo(point.x, point.y - 5);
    }
    ctx.stroke();

    /* Show perpendiculars */
    ctx.beginPath();
    ctx.strokeStyle = '#FFFFFF';
    for (let i = 0; i < allPointsOnCurve.length; i++) {
        if (i !== 0) {
            const previousPoint = allPointsOnCurve[i - 1];
            const point  = allPointsOnCurve[i];
            const slope = (point.y - previousPoint.y) / (point.x - previousPoint.x);
            const perpendicularSlope = -1/slope;
            const midOfPoints = {
                x: Math.min(point.x, previousPoint.x) + Math.abs(point.x - previousPoint.x) / 2,
                y: Math.min(point.y, previousPoint.y) + Math.abs(point.y - previousPoint.y) / 2
            };
            const pt1 = {x: midOfPoints.x - 5, y: midOfPoints.y - perpendicularSlope * 5};
            const pt2 = {x: midOfPoints.x + 5, y: midOfPoints.y + perpendicularSlope * 5};
            ctx.moveTo(pt1.x, pt1.y);
            ctx.lineTo(pt2.x, pt2.y);
            console.log(pt1, pt2)
        }
    }
    ctx.stroke();

    function drawPoint(point, size, color) {
        ctx.fillStyle = color;
        ctx.fillRect(point.x - size / 2, point.y - size / 2, size, size);
    }
 </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Dag Randy</title>
	<style>
	body {
	margin: 0;
	overflow: hidden;
	}
	</style>
	</head>
	<body>
	<canvas id="canvas"></canvas>
	<script>
	const canvas = document.getElementById('canvas');
	canvas.width = window.innerWidth;
	canvas.height = window.innerHeight;
	const ctx = canvas.getContext('2d');
	ctx.fillStyle = "#0000FF";
	ctx.fillRect(0, 0, canvas.width, canvas.height);

	const line = [];
	const quadraticCurvePoints = [];
	const pointsOnQuadraticCurve = [];

	for (let i = 0; i < 5; i++) {
	const x = canvas.width / 4 * i;
	const y = (canvas.height - 500) + Math.random() * 100;
	line.push({x, y});
	}

	/* Generate curve */
	ctx.beginPath();
	for (let i = 0; i < line.length; i++) {
	const point = line[i];

	if (i !== 0) {
	const previousPoint = line[i - 1];
	const quadraticCurvePoint = {
	x: Math.min(point.x, previousPoint.x) + Math.abs(point.x - previousPoint.x) / 2 + Math.random() * 500 - 250,
	y: Math.min(point.y, previousPoint.y) + Math.abs(point.y - previousPoint.y) / 2 + Math.random() * 500 - 250
	};
	ctx.moveTo(previousPoint.x, previousPoint.y);
	ctx.strokeStyle = '#000000';
	ctx.quadraticCurveTo(quadraticCurvePoint.x, quadraticCurvePoint.y, point.x, point.y);
	quadraticCurvePoints.push(quadraticCurvePoint);
	}
	}
	ctx.stroke();

	/* Show points */
	ctx.beginPath();
	for (let i = 0; i < line.length; i++) {
	const point = line[i];

	if (i !== 0) {
	const previousPoint = line[i - 1];

	const quadraticPointOnCurve = {
	x: (1 - 0.5) * ((1 - 0.5) * previousPoint.x + (0.5 * quadraticCurvePoints[i - 1].x)) + 0.5 * (((1 - 0.5) * quadraticCurvePoints[i - 1].x + (0.5 * point.x))),
	y: (1 - 0.5) * ((1 - 0.5) * previousPoint.y + (0.5 * quadraticCurvePoints[i - 1].y)) + 0.5 * (((1 - 0.5) * quadraticCurvePoints[i - 1].y + (0.5 * point.y)))
	};

	ctx.strokeStyle = '#00FF00';
	ctx.moveTo(quadraticPointOnCurve.x, quadraticPointOnCurve.y);
	ctx.lineTo(quadraticCurvePoints[i -1].x, quadraticCurvePoints[i - 1].y);

	drawPoint(quadraticCurvePoints[i - 1], 10, '#00FF00');
	}

	drawPoint(point, 10, '#FF0000');
	}
	ctx.stroke();

	for (let i = 0; i < line.length; i++) {
	const point = line[i];
	if (i !== 0) {
	const previousPoint = line[i - 1];
	for (let j = 0.1; j < 1; j += 0.2) {
	const pointOnQuadraticCurve = {
	x: (1 - j) * ((1 - j) * previousPoint.x + (j * quadraticCurvePoints[i - 1].x)) + j * (((1 - j) * quadraticCurvePoints[i - 1].x + (j * point.x))),
	y: (1 - j) * ((1 - j) * previousPoint.y + (j * quadraticCurvePoints[i - 1].y)) + j * (((1 - j) * quadraticCurvePoints[i - 1].y + (j * point.y)))
	};
	drawPoint(pointOnQuadraticCurve, 10, '#ffffff');
	pointsOnQuadraticCurve.push(pointOnQuadraticCurve);
	}
	}
	}


	/* Show all points on curve (line points + quadratic line points) */
	let allPointsOnCurve = line.slice();
	for (let i = 0; i < line.length; i++)
	allPointsOnCurve.splice(i * 6 + 1, 0, ...pointsOnQuadraticCurve.slice(i * 5, i * 5 + 5));
	ctx.beginPath();
	ctx.strokeStyle = '#FF00FF';
	for (let i = 0; i < allPointsOnCurve.length; i++) {
	const point = allPointsOnCurve[i];
	if (i === 0)
	ctx.moveTo(point.x, point.y - 5);
	else
	ctx.lineTo(point.x, point.y - 5);
	}
	ctx.stroke();

	/* Show perpendiculars */
	ctx.beginPath();
	ctx.strokeStyle = '#FFFFFF';
	for (let i = 0; i < allPointsOnCurve.length; i++) {
	if (i !== 0) {
	const previousPoint = allPointsOnCurve[i - 1];
	const point = allPointsOnCurve[i];
	const slope = (point.y - previousPoint.y) / (point.x - previousPoint.x);
	const perpendicularSlope = -1/slope;
	const midOfPoints = {
	x: Math.min(point.x, previousPoint.x) + Math.abs(point.x - previousPoint.x) / 2,
	y: Math.min(point.y, previousPoint.y) + Math.abs(point.y - previousPoint.y) / 2
	};
	const pt1 = {x: midOfPoints.x - 5, y: midOfPoints.y - perpendicularSlope * 5};
	const pt2 = {x: midOfPoints.x + 5, y: midOfPoints.y + perpendicularSlope * 5};
	ctx.moveTo(pt1.x, pt1.y);
	ctx.lineTo(pt2.x, pt2.y);
	console.log(pt1, pt2)
	}
	}
	ctx.stroke();

	function drawPoint(point, size, color) {
	ctx.fillStyle = color;
	ctx.fillRect(point.x - size / 2, point.y - size / 2, size, size);
	}
	</script>
	</body>
	</html>
No results found