pixelImage

by SQShu

HTML

<!DOCTYPE html>
<html>

<body>
    <!-- The Canvas tag sets up a screen in the browser that we can draw to. -->
    <canvas></canvas>

    <script type="text/javascript">
        // This is where we are going to store the mouse information
        var mouseX = 0;
        var mouseY = 0;

        // This gets a reference to the canvas in the browser
        var canvas = document.querySelector("canvas");
        // All your drawing will be done in this canvas
        // This creates a 2d drawing 'context' in your canvas
        var context = canvas.getContext("2d");
        //This tells the browser to get the mouse information from the function we've called getMouse
        canvas.addEventListener('mousemove', getMouse, false);

        // This sets the width and height to the document window
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        // Be aware that when you resize the window, you will need to call (do) this again

        //Create a new object called imageData that we can use to create some Image data 
        var imageData = context.createImageData(canvas.width, canvas.height);


        function draw() {

            var position = 0;

            // draw the image where the mouse is
          	// iterate through every pixel
          	// Decide what colour each pixel should be based on an expression
            for (var y = 0; y < imageData.height; y++) {
                for (var x = 0; x < imageData.width; x++) {

                    var x1 = x ;//- mouseX;
                    var y1 = y ;//- mouseY;
                  	// This is the basic expression
                  	// You should have some ideas about different ones maybe
                    var t = Math.sin(Math.sqrt(x1 * x1 + y1 * y1) * 0.0125 );
                  	// scale and get the absolute value
                    var c = Math.abs(t * 255);

                    // set red, green, blue, and alpha:
                  	// It's black and white so all...