thales17/pixi-sine-wave.html

## pixi-sine-wave.html

<!DOCTYPE HTML>
<html>
<head>
	<title>Pixi Sine Wave</title>
	<style>
		body {
			margin: 0;
			padding: 0;
			background-color: #000000;

		}
	</style>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.5.1/pixi.js"></script>

</head>
<body>
	<script>
	const width = 800;
    const height = 480;
    const gridPoints = [];
    var tx = Math.PI / 9;
    var ty = Math.PI / 4;
    var xFreq = 1.0;
    var yFreq = 1.0;
    var xFreqDir = 1.0;
    var yFreqDir = 1.0;
    var cols = Math.ceil(width / 100);
    var rows = Math.ceil(height / 100);
    var cellWidth = Math.ceil(width / cols);
    var cellHeight = Math.ceil(height / rows);

    // Col Points
    for(var i = 0; i < cols-1; i++) {
		var x = i*cellWidth + cellWidth;
		for(var j = 0; j < height; j++) {
			gridPoints.push({x: x, y: j});
		}
	}

    // Row Points
	for(var i = 0; i < rows-1; i++) {
		var y = i*cellHeight + cellHeight;
		for(var j = 0; j < width; j++) {
			gridPoints.push({x: j, y: y})
		}
	}

    const app = new PIXI.Application({
        width: width,
        height: height,
    });

	// create an new instance of a pixi stage
	var stage = app.stage

	// add render view to DOM
	document.body.appendChild(app.view);

	var graphics = new PIXI.Graphics();

	var drawPoint = function(x, y) {
        graphics.beginFill(0x00FF00);
        graphics.drawRect(x, y, 1, 1);
    }

    var updateDistortionState = function() {
		xFreq += 0.1 * xFreqDir;
		if(xFreq > 25 || xFreq < 1) {
			xFreqDir *= -1;
		}
		yFreq += 0.1 * yFreqDir;
		if(yFreq > 30 || yFreq < 1) {
			yFreqDir *= -1
		}
	}

    var sineWaveDistortXY = function(x, y, w, h) {
		var normalizedX = x / w;
		var normalizedY = y / h;

		var xOffset = 50 * (Math.sin(xFreq*normalizedY+xFreq*normalizedX+2*Math.PI*tx)) * 0.5;
		var yOffset = 50 * (Math.sin(xFreq*normalizedY+yFreq*normalizedX+2*Math.PI*ty)) * 0.5;
        return {
            x: x + xOffset,
            y: y + yOffset
        }
	}

	stage.addChild(graphics);

	requestAnimationFrame(animate);

	function animate() {

		graphics.clear();

        for(var i in gridPoints) {
            newPoint = sineWaveDistortXY(gridPoints[i].x, gridPoints[i].y, width, height);
            drawPoint(newPoint.x, newPoint.y);
        }
	    app.render()
        updateDistortionState();
	    requestAnimationFrame(animate);
	}

	</script>

	</body>
</html>

	<!DOCTYPE HTML>
	<html>
	<head>
	<title>Pixi Sine Wave</title>
	<style>
	body {
	margin: 0;
	padding: 0;
	background-color: #000000;

	}
	</style>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.5.1/pixi.js"></script>

	</head>
	<body>
	<script>
	const width = 800;
	const height = 480;
	const gridPoints = [];
	var tx = Math.PI / 9;
	var ty = Math.PI / 4;
	var xFreq = 1.0;
	var yFreq = 1.0;
	var xFreqDir = 1.0;
	var yFreqDir = 1.0;
	var cols = Math.ceil(width / 100);
	var rows = Math.ceil(height / 100);
	var cellWidth = Math.ceil(width / cols);
	var cellHeight = Math.ceil(height / rows);

	// Col Points
	for(var i = 0; i < cols-1; i++) {
	var x = i*cellWidth + cellWidth;
	for(var j = 0; j < height; j++) {
	gridPoints.push({x: x, y: j});
	}
	}

	// Row Points
	for(var i = 0; i < rows-1; i++) {
	var y = i*cellHeight + cellHeight;
	for(var j = 0; j < width; j++) {
	gridPoints.push({x: j, y: y})
	}
	}

	const app = new PIXI.Application({
	width: width,
	height: height,
	});

	// create an new instance of a pixi stage
	var stage = app.stage

	// add render view to DOM
	document.body.appendChild(app.view);

	var graphics = new PIXI.Graphics();

	var drawPoint = function(x, y) {
	graphics.beginFill(0x00FF00);
	graphics.drawRect(x, y, 1, 1);
	}

	var updateDistortionState = function() {
	xFreq += 0.1 * xFreqDir;
	if(xFreq > 25 \|\| xFreq < 1) {
	xFreqDir *= -1;
	}
	yFreq += 0.1 * yFreqDir;
	if(yFreq > 30 \|\| yFreq < 1) {
	yFreqDir *= -1
	}
	}

	var sineWaveDistortXY = function(x, y, w, h) {
	var normalizedX = x / w;
	var normalizedY = y / h;

	var xOffset = 50 * (Math.sin(xFreqnormalizedY+xFreqnormalizedX+2Math.PItx)) * 0.5;
	var yOffset = 50 * (Math.sin(xFreqnormalizedY+yFreqnormalizedX+2Math.PIty)) * 0.5;
	return {
	x: x + xOffset,
	y: y + yOffset
	}
	}

	stage.addChild(graphics);

	requestAnimationFrame(animate);

	function animate() {

	graphics.clear();

	for(var i in gridPoints) {
	newPoint = sineWaveDistortXY(gridPoints[i].x, gridPoints[i].y, width, height);
	drawPoint(newPoint.x, newPoint.y);
	}
	app.render()
	updateDistortionState();
	requestAnimationFrame(animate);
	}

	</script>

	</body>
	</html>