<repo_name>LaurieJS/WIA<file_sep>/FollowAlongFiles/jQuery/1-Starting/js/Fade.js
$(function() { 
	$("#fadeout").click(function(){
        $("#theDiv").fadeOut("normal");
    });//end of the fadeout click function

    $("#fadein").click(function(){
        $("#theDiv").fadeIn("normal");
    });

    $("#fadeto3").click(function(){
        $("#theDiv").fadeTo(2000, .3);
    });

    $("#fadeup").click(function(){
        $("#theDiv").fadeTo(2000, 1, function(){
            alert("You have located the Div");
        });
    });
            
});//end of the ready function<file_sep>/FollowAlongFiles/CreateJS/1-Starting/js/Tween.js
window.onload = function() {
	
	//get canvas element
	var canvas = document.getElementById("canvas1");
	
	//Create our stage wrapped around our canvas
	var stage = new createjs.Stage(canvas);

    //create ball
    var ball = new createjs.Shape();
    ball.graphics.setStrokeStyle(5, "round");
    ball.graphics.beginStroke("black");
    ball.graphics.beginFill("red");
    ball.graphics.drawCircle(0, 0, 50);
    ball.graphics.endStroke();
    ball.graphics.endFill();

    //draw a line from the center to the outer edge
    ball.graphics.ss(1, "round", "round");
    ball.graphics.beginStroke("black");
    ball.graphics.mt(0,0);
    ball.graphics.lt(0,50);
    ball.graphics.endStroke();

    //move the ball
    ball.x = 100;
    ball.y = -100;

    //create the tween createjs.Tween.get(display object, {optional props: loop, ignorGlobal} duration, easing)
    //will loop the file
    var tween = createjs.Tween.get(ball, {loop: true})
            .to({x:ball.x, y:canvas.height -55, rotation: -360}, 1500, createjs.Ease.bounceOut )
            .wait(1000)
            .to({x:canvas.width - 55, rotation: 360}, 2500, createjs.Ease.bounceOut)
            .wait(1000)
            .call(tester)
            .to({scaleX:.5, scaleY:.5, x:30, rotation: -360, y:canvas.height -30, alpha: 0}, 2500, createjs.Ease.bounceOut)

        ;//end of the tween variable

    function tester(){
        console.log("The tween has reached this point");
    }

    stage.addChild(ball);
    //stage.update();

    //create a ticker--auto update the stage
    createjs.Ticker.addEventListener("tick", stage);



};<file_sep>/FollowAlongFiles/CreateJS/1-Starting/js/Strokes.js
window.onload = function() {

    var canvas = document.getElementById("canvas1");
    var stage = new createjs.Stage(canvas);

    //set up shape
	var shape = new createjs.Shape();

    //set up stroke
    shape.graphics.beginStroke("purple");

    //setup properties
    //setStrokeStyle(width, caps, joints, miter)
    shape.graphics.setStrokeStyle(10, "round", "round");

    //draw a line
    shape.graphics.moveTo(25, 25);
    shape.graphics.lineTo(250, 25);

    shape.graphics.moveTo(50, 50);
    //graphics.quadraticCurveTo(cpx, cpy, x, y)(control points, and ending points)
    //shape.graphics.quadraticCurveTo(50, 175, 250, 250);


    //arcTo(x1, y1, x2, y2, radius)
    //shape.graphics.arcTo(100, 50, 100, 500, 60);

    //bezier curves
    //bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)(1st set of control, second set of cp's, ending point)
    shape.graphics.bezierCurveTo(100, 50, 100, 200, 250, 250);


    shape.graphics.lineTo(50, 250);

    //Add to stage
    stage.addChild(shape);

    //update the stage
    stage.update();
	
};<file_sep>/FollowAlongFiles/CreateJS/1-Starting/js/Fills.js
window.onload = function() {
	//Set up canvas and stage
    var canvas = document.getElementById("canvas1");
    var stage = new createjs.Stage(canvas);

    //Draw a rectangle
    var rect1 = new createjs.Shape();

    //Create the fill
    //rect1.graphics.beginFill("purple");
    //rect1.graphics.beginFill("rgb(162, 216, 255)");
    //rect1.graphics.beginFill(createjs.Graphics.getRGB(162, 216, 255, .5));

    //make a linear gradient  [colors][ratio](where to start color)(where to end color)
    // [colors] and [ratios] should have the same number of items in array
    //rect1.graphics.beginLinearGradientFill(["yellow","purple", "red"], [0, .5, 1], 50, 50, 150, 150);

    //create a radial gradient [colors][ratios](x,y,r 1st center point & radius)(x,y,r 2nd center point & radius)
    rect1.graphics.beginRadialGradientFill(["yellow", "red"], [0, 1], 150, 150, 0, 150, 150, 150);

    //Draw the rectangle
    rect1.graphics.rect(50, 50, 100, 100);

    //Add to stage
    stage.addChild(rect1);

    //Update the stage
    stage.update();
	
	
			
};<file_sep>/FollowAlongFiles/FollowAlong_Wk1/js/main.js
/*
 <NAME>
 Web Interaction and Animation
 Follow Along-Week 1
 July 2014
 */

window.onload = function(){

    //Video 1--setting up canvas
    //Make a reference to the canvas element
    var canvasElem = document.getElementById("canvas1");

    //To change the width and height of the canvas
    /*canvasElem.width = 700;
    canvasElem.height = 300;*/


    //Video 16 Animation
    if(canvasElem && canvasElem.getContext){
        var ctx = canvasElem.getContext("2d");
        if(ctx){
            //begin here
            var srcImg = document.getElementById("img1");
            var rotation = 0;
            ctx.translate(canvasElem.width/2, canvasElem.height/2);

            setInterval(function(){
                rotation += 8;
                ctx.clearRect(-300, -300, canvasElem.width, canvasElem.height);
                ctx.rotate(rotation * (Math.PI/180));

                //minus half of the image's width and height to center
                ctx.drawImage(srcImg, -75, -75);

            }, 500);

        }//end of ctx if statement
    }//end of canvasElem if statement, end of video 16


    /*
    //Video 15 Compositing, I used the Compositing files as well
    if(canvasElem && canvasElem.getContext){
        var ctx = canvasElem.getContext("2d");
        if(ctx){
            //begin drawing here

            ctx.globalAlpha = 1;

            // Create an array of rectangles
            var rects = [
                {x:20, y:20, width:75, height:75 },
                {x:40, y:50, width:75, height:75 },
                {x:150, y:20, width:75, height:75 },
                {x:170, y:50, width:75, height:75 },
                {x:280, y:20, width:75, height:75 },
                {x:300, y:50, width:75, height:75 },
                {x:410, y:20, width:75, height:75 },
                {x:430, y:50, width:75, height:75 }
            ];//end of the rects array

            for(var i = 0; i < rects.length; i+=2){
                ctx.fillStyle = "blue";
                ctx.fillRect(rects[i].x, rects[i].y, rects[i].width, rects[i].height);

                ctx.fillStyle = "red";
                ctx.fillRect(rects[i+1].x, rects[i+1].y, rects[i+1].width, rects[i+1].height);

                //to lower the opacity of the rects
                ctx.globalAlpha -=.3;
            }//end of the for loop


        }//end of the ctx if statement
    }//end of the canvasElem if statement
*/

    /*
    //Video 14 Transforms
    if(canvasElem && canvasElem.getContext){
        var ctx = canvasElem.getContext("2d");
        if(ctx){

            ctx.fillStyle = "blue";
            ctx.fillRect(150, 50, 100, 50);

            ctx.translate(200, 75);
            ctx.rotate(.5);
            ctx.fillStyle = "red";
            ctx.fillRect(-50, -25, 100, 50);

            //Make a starburst, rotate transform
            var radians = (Math.PI/180) * 20;
            ctx.translate(ctx.canvas.width/2, ctx.canvas.height/2);

            for(var degrees = 0; degrees < 360; degrees+=20){

                ctx.beginPath();
                ctx.moveTo(0, 0);
                ctx.lineTo(100, 0);
                ctx.stroke();
                ctx.rotate(radians);

            }//end of the for loop

            //Scale
            ctx.save();
            ctx.fillStyle = "blue";
            ctx.fillRect(0, 0, 100, 50);

            //scale transform
            ctx.scale(1.5, 2);
            ctx.fillRect(0, 50, 100, 50);

            ctx.restore();
            //create third rectangle
            ctx.fillStyle = "purple";
            ctx.scale(.5, .5);
            ctx.fillRect(0, 100, 100, 50);

            //Diff section
            ctx.save();
            //begin drawing here
            ctx.fillStyle = "blue";
            ctx.fillRect(0, 0, 100, 50);

            //translate the origin to the middle of the canvas
            ctx.translate(ctx.canvas.width/2, ctx.canvas.height/2);

            ctx.fillRect(-50, -25, 100, 50);
            ctx.restore();
            ctx.fillStyle = "red";
            ctx.fillRect(0, 0, 100, 50);

        }//end of the ctx if statement
    }//end of the canvasElem if statement
/*


    /*
    //Video 13 Clipping Masks
    if(canvasElem && canvasElem.getContext){
        var ctx = canvasElem.getContext("2d");
        if(ctx){
            //create variables for x, y, radius, and offset
            var x = canvasElem.width/2;
            var y = canvasElem.height/2;
            var radius = 75;
            var offset = 50;

            ctx.save();

            ctx.beginPath();
            ctx.arc(x, y, radius, 0, 2 * Math.PI, false);
            ctx.clip();

            //draw a blue circle inside the clipping mask
            ctx.beginPath();
            ctx.arc(x-offset, y-offset, radius, 0, 2 * Math.PI, false);
            ctx.fillStyle = "blue";
            ctx.fill();

            //draw a yellow circle inside the clipping mask
            ctx.beginPath();
            ctx.arc(x + offset, y, radius, 0, 2 * Math.PI, false);
            ctx.fillStyle = "yellow";
            ctx.fill();

            //draw a red circle inside the clipping mask
            ctx.beginPath();
            ctx.arc(x, y + offset, radius, 0, 2 * Math.PI, false);
            ctx.fillStyle = "red";
            ctx.fill();

            //to release clipping mask, to get the full stroke
            ctx.restore();

            //stroke the circle
            ctx.beginPath();
            ctx.arc(x, y, radius, 2 * Math.PI, false);
            ctx.lineWidth = 10;
            ctx.strokeStyle = "blue";
            ctx.stroke();


            //begin drawing here
            var srcImg = document.getElementById("img1");

            //The image of the train
            //ctx.drawImage(srcImg, 0, 0);

            //create a circle clipping path
            //ctx.beginPath();
            //ctx.arc(ctx.canvas.width/2, ctx.canvas.height/2, 250, 0, 2 * Math.PI);
            //ctx.clip();

            //The image of the train, moved the train here to be clipped
           // ctx.drawImage(srcImg, 0, 0);

            //Create a path shape clipping mask
            ctx.beginPath();
            ctx.moveTo(105, 200);
            ctx.lineTo(250, 200);
            ctx.lineTo(525, 50);
            ctx.lineTo(475, 285);
            ctx.closePath();

            ctx.clip();

            //The image of the train, moved the train here to be clipped
            ctx.drawImage(srcImg, 0, 0);

        }//end of the ctx if statement
    }//end of the canvasElem if statement
*/


    /*
    //Video 12 Using Images
    if(canvasElem && canvasElem.getContext){
        var ctx = canvasElem.getContext("2d");
        if(ctx){
            //begin drawing here
            //Variable to hold the image
            var srcImg = document.getElementById("img1");

            //Draw image directly onto the canvas
            //ctx.drawImage(srcImg, 0, 0);

            //draw a scaled down drawImage(srcImg, dx, dy, dw, dh)
            //ctx.drawImage(srcImg, 50, 50, 240, 300);

            //drawing a slice of an image drawImage(srcImg, sx, sy, sw, dx, dw, dh)
            //ctx.drawImage(srcImg, 285, 40, 95, 140, 50, 50, 190, 280);

            //create a variable that holds a video
            var srcVid = document.getElementById("vid1");
            srcVid.play();

            //setInterval(function, time-ms);
            setInterval(function(){
                ctx.drawImage(srcVid, 0, 0, 480, 270);

            }, 30);//end of the setInterval

        }//end of the ctx if statement
    }//end of the canvasElem if statement
*/


    /*
    //Video 11-Creating Gradients
    if(canvasElem && canvasElem.getContext){
        var ctx = canvasElem.getContext("2d");
        if(ctx){
            //Begin drawing here

            //create a linear gradient createLinearGradient(x0, y0, x1, y1)
            var linGradient = ctx.createLinearGradient(20, 20, 20, 280);

            //Adding color stops
            linGradient.addColorStop(0, "#f00");
            linGradient.addColorStop(.5, "#00f");
            linGradient.addColorStop(1, "#0f0");

            //create a rectangle
            ctx.fillStyle = linGradient;
            ctx.fillRect(10, 10, 200, 280);

            //create a radial gradient (x0, y0, r0, x1, y1, r1)
            var radGradient = ctx.createRadialGradient(525, 150, 20, 525, 150, 100);

            //add color stops
            radGradient.addColorStop(0, "#f00");
            radGradient.addColorStop(.5, "#00f");
            radGradient.addColorStop(1, "#0f0");

            ctx.fillStyle = radGradient;
            ctx.beginPath();
            ctx.arc(525, 150, 100, 0, 2 * Math.PI);
            ctx.fill();

        }//end of the ctx if statement
    }//end of the canvasElem if statement
*/

    /*
    //Video 10 Drawing Using Patterns
    if(canvasElem && canvasElem.getContext){
        var ctx = canvasElem.getContext("2d");
        if(ctx){
            //Begin here


            //create a pattern from an image
            var patImage = new Image();

            //When the image loads, use the pattern
            patImage.onload = function(){
                ctx.fillStyle = ctx.createPattern(patImage, "repeat");
                ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);

            };//end of the onload function

            //Add an image--just downloaded an image of blocks
            patImage.src ="images/blocks.png";


            //create a pattern from another canvas
            var patCanvas = document.getElementById("canvas2");
            var patCtx = patCanvas.getContext("2d");

            patCanvas.width = 35;
            patCanvas.height = 35;

            //draw a red line in our pattern canvas
            patCtx.strokeStyle = "red";
            patCtx.lineWidth = 1;
            patCtx.beginPath();
            patCtx.moveTo(0, 0);
            patCtx.lineTo(25, 25);
            patCtx.stroke();

            //use pattern canvas as an outline on the other canvas
            var strokePat = ctx.createPattern(patCanvas, "repeat");
            ctx.strokeStyle = strokePat;
            ctx.lineWidth = 25;
            ctx.strokeRect(50, 50, 200, 200);

        }//end of the ctx if statement
    }//end of the canvasElem if statement

*/


/*
    //Video 9 Creating Shadows
    if(canvasElem && canvasElem.getContext){
        var ctx = canvasElem.getContext("2d");
        if(ctx){

            //No shadow--for use later
            ctx.save();

            //var originalShadowColor = ctx.shadowColor;
            //Set up the shadow
            ctx.shadowColor = "#000000";
            ctx.shadowOffsetX = 10;
            ctx.shadowOffsetY = 10;
            ctx.shadowBlur = 10;


            //Draw a simple rectangle
            ctx.fillStyle = "blue";
            ctx.fillRect(20, 20, 200, 100);

            //draw text with a shadow(styles first)
            ctx.fillStyle = "green";
            ctx.shadowColor = "rgba(0, 100, 100, .5)";
            ctx. shadowOffsetX = 5;
            ctx.shadowOffsetY = 5;
            ctx.shadowBlur = 5;

            //text info
            ctx.font = "25pt Georgia";
            ctx.fillText("Drawing Text On A Canvas", 250, 75);

            //Draw a red line with a purple shadow
            ctx.lineCap = "round";
            ctx.lineWidth = 25;
            ctx.shadowColor = "purple";
            ctx.shadowOffsetX = -15;
            ctx.shadowOffsetY = 5;
            ctx.shadowBlur = 15;

            ctx.strokeStyle = "red";
            ctx.beginPath();
            ctx.moveTo(50, 200);
            ctx.lineTo(450, 200);
            ctx.stroke();

            //Rectangle with no shadow
            //ctx.shadowColor = originalShadowColor;
            //restore to the original w/no shadow
            ctx.restore();
            ctx.fillStyle = "blue";
            ctx.fillRect(20, 225, 200, 50);

        }//end of the ctx if statement
    }//end of the canvasElem if statement
*/


    /*
    //Video8 Text Rendering
    //text is not affected by CSS rules
    if(canvasElem && canvasElem.getContext){
        var ctx = canvasElem.getContext("2d");

        if(ctx){
            var myString = "Drawing text on a Canvas";

            //begin drawing here
            //fillText(variable, x-right, y-down)
            //simple text using defaults
            ctx.fillText(myString, 20, 20);

            //Text with font and fill styles
            ctx.font = "25pt Georgia";
            ctx.fillStyle = "blue";
            ctx.fillText(myString, 20, 60);

            //Text with font, stroke, baseline and fill styles
            ctx.font = "32pt Verdana";
            ctx.fillStyle = "yellow";
            ctx.textBaseline = "middle";
            ctx.strokeStyle = "rgba(0, 255, 0, .5)";
            ctx.fillText(myString, 20, 160);
            ctx.strokeText(myString, 20, 160);

        }//end of the ctx if statement
    }//end of the canvasElem if statement
*/

/*
    //Video 7-Creating complex curves bezier and quadratic curves
    if(canvasElem && canvasElem.getContext){
        var ctx = canvasElem.getContext("2d");
        if(ctx){
            //Drawing begins here
            ctx.strokeStyle = "blue";
            ctx.lineWidth = 5;

            //Make a bezier curve
            ctx.beginPath();
            //starting point
            ctx.moveTo(50, 200);
            //bezierCurveTo(cx1, cy1(first set of control points), cx2, cy2(second set of control points), x, y(ending coordinates))
            ctx.bezierCurveTo(50, 100, 200, 300, 200, 150);
            ctx.closePath();
            ctx.fill();
            ctx.stroke();

            //Code for quadraticCurveTo(cx, cy(control points), x, y(ending points))
            ctx.beginPath();
            //starting point
            ctx.moveTo(400, 200);
            ctx.quadraticCurveTo(400, 100, 600, 150);
            ctx.stroke();

        }//end of the ctx if statement
    }//end of the canvasElem if statement

*/

/*Video6-Drawing arcs and circles
    if(canvasElem && canvasElem.getContext){
        var ctx = canvasElem.getContext("2d");
        if(ctx){

            //Begin drawing here
            ctx.strokeStyle = "blue";
            ctx.fillStyle = "red";
            ctx.lineWidth = 5;

            //Stroke a quarter of an arc
            ctx.beginPath();
            //basic structure of an arc (x, y, r, sA, eA, aC(bool/anti-clockwise))
            ctx.arc(50, 150, 100, 1.5 * Math.PI, 2 * Math.PI);
            ctx.stroke();

            //stroke a 3/4 arc
            ctx.beginPath();
            ctx.arc(250, 150, 100, 1.5 * Math.PI, Math.PI);
            ctx.stroke();

            //full circle degrees = 360. Changed to 180 to cut the circle in half
            //and closed the path to give a border
            var degrees = 180;
            var radians = (degrees/180 * Math.PI);

            ctx.beginPath();
            ctx.arc(550, 150, 100, 0, radians);
            ctx.closePath();
            ctx.fill();
            ctx.stroke();

        }//end of ctx if statement
    }//end of canvasElem if statement
*/

    /*Video 5 Trapezoid
    //Video 5 Drawing Paths using fill() and stroke()
    if(canvasElem && canvasElem.getContext){
        var ctx = canvasElem.getContext("2d");
        if(ctx){
            //Drawing begins here
            ctx.strokeStyle = "blue";
            ctx.fillStyle = "orange";
            ctx.lineWidth = 5;

            //Draw an open path
            ctx.beginPath();
            ctx.moveTo(25, 175);
            ctx.lineTo(50, 25);
            ctx.lineTo(125, 50);
            ctx.lineTo(175, 175);
            //to close the path to create a shape
            ctx.closePath();
            //to fill the shape
            ctx.fill();
            ctx.stroke();

        }//end of ctx if statement
    }//end of canvasElem if statement
*/

/*Fourth Video
    //Video 4 Saving and Restoring Canvas States
    if (canvasElem && canvasElem.getContext){
        var ctx = canvasElem.getContext("2d");
        if(ctx){
            //drawing begins here
            ctx.strokeStyle = "red";
            ctx.fillStyle = "yellow";
            ctx.lineWidth = 10;
            //Draw a rectangle
            ctx.fillRect(25, 25, 100, 125);
            ctx.strokeRect(25, 25, 100, 125);

            //Save the state of the previous styles, or settings
            ctx.save();

            //Draw a rectangle with different settings
            ctx.strokeStyle = "green";
            ctx.fillStyle = "blue";
            ctx.lineWidth = 5;
            ctx.fillRect(175, 25, 100, 125);
            ctx.strokeRect(175, 25, 100, 125);

            //Restore the saved drawing state, the third rectangle uses the saved styles
            ctx.restore();

            //Draw third rectangle with the same settings as above
            ctx.fillRect(325, 25, 100, 125);
            ctx.strokeRect(325, 25, 100, 125);

        }//end of ctx if statement
    }//end of the canvasElem if statement
*/


/*Info from the 2nd & 3rd videos
    //If the canvas element is available (Video 2 lines and strokes)
    if(canvasElem && canvasElem.getContext){
        //Get the drawing context from the element
        var ctx = canvasElem.getContext("2d");
        if(ctx){
            //draw here

            //draw a stroked rectangle--styles first, then the rectangle/video2
            ctx.strokeStyle = "orange";
            ctx.lineWidth = 5;
            ctx.strokeRect(10, 10, 80, 80);

            //draw a filled rectangle/video2
            ctx.fillStyle = "purple";
            ctx.fillRect(200, 10, 80, 80);

            //draw a filled and stroked rectangle/video2
            ctx.strokeStyle = "red";
            ctx.fillStyle = "white";
            ctx.lineWidth = 3;
            ctx.strokeRect(10, 197, 100, 100);
            ctx.fillRect(10, 197, 100, 100);

            //clearing a rectangle (to see the background)video2
            ctx.clearRect(0, 20, 350, 20);

            //drawing lines-video3
            //To make different line widths
            for(var i = 0; i < 10; i++){
                //To being drawing beginPath() is required
                ctx.beginPath();
                ctx.strokeStyle = "blue";
                ctx.lineWidth = 5 + i;
                ctx.moveTo(70, 30 + i * 20);
                ctx.lineTo(220, 30 + i * 20);
                //Stroke is required
                ctx.stroke();
            }//end of the for loop

        }//end of the ctx if statement
    }//end of the canvasElem if statement

    //Video 3 drawing lines & making a new canvas
    //Targeting the canvas2 element
    var canvasElem2 = document.getElementById("canvas2");

    if(canvasElem2 && canvasElem2.getContext){
        var ctx2 = canvasElem2.getContext("2d");

        if(ctx2){
            //draw here

            //Draw guide lines
            ctx2.strokeStyle = "red";
            ctx2.lineWidth = 1;
            ctx2.beginPath();
            ctx2.moveTo(50, 25);
            ctx2.lineTo(50, 175);
            ctx2.moveTo(350, 25);
            ctx2.lineTo(350, 175);
            ctx2.stroke();

            //Lines with different end caps
            //Style first--Butt
            ctx2.lineWidth = 25;
            ctx2.strokeStyle = "black";
            //Butt has no edge, and stays within the lines
            ctx2.lineCap = "butt";
            //Then create the path
            ctx2.beginPath();
            ctx2.moveTo(50, 50);
            ctx2.lineTo(350, 50);
            ctx2.stroke();

            //Style first--Round
            ctx2.lineWidth = 25;
            ctx2.strokeStyle = "black";
            //Rounded corners extend beyond the guidelines
            ctx2.lineCap = "round";
            //Then create the path
            ctx2.beginPath();
            ctx2.moveTo(50, 100);
            ctx2.lineTo(350, 100);
            ctx2.stroke();

            //Style first--Square
            ctx2.lineWidth = 25;
            ctx2.strokeStyle = "black";
            //Square corners extend beyond the guidelines
            ctx2.lineCap = "square";
            //Then create the path
            ctx2.beginPath();
            ctx2.moveTo(50, 150);
            ctx2.lineTo(350, 150);
            ctx2.stroke();

        }//end of ctx2 if statement
    }//end of canvasElem2 if statement


    //Targeting the canvas3 element-video3 drawing Joined Lines
    var canvasElem3 = document.getElementById("canvas3");

    if(canvasElem3 && canvasElem3.getContext){
        var ctx3 = canvasElem3.getContext("2d");

        if(ctx3){
            //draw here
            //guide line, they all seem to extend above the guideline
            ctx3.strokeStyle = "magenta";
            ctx3.lineWidth = 3;
            ctx3.beginPath();
            ctx3.moveTo(15, 50);
            ctx3.lineTo(490, 50);
            ctx3.stroke();

            //Joined line style examples
            ctx3.lineWidth = 15;
            ctx3.strokeStyle = "black";

            //Rounded joined lines
            ctx3.lineJoin = "round";
            ctx3.beginPath();
            ctx3.moveTo(25, 150);
            ctx3.lineTo(75, 50);
            ctx3.lineTo(125, 150);
            ctx3.stroke();


            //Beveled joined lines
            ctx3.lineJoin = "bevel";
            ctx3.beginPath();
            ctx3.moveTo(175, 150);
            ctx3.lineTo(225, 50);
            ctx3.lineTo(275, 150);
            ctx3.stroke();

            //Mitered joined lines
            ctx3.lineJoin = "miter";
            ctx3.beginPath();
            ctx3.moveTo(325, 150);
            ctx3.lineTo(375, 50);
            ctx3.lineTo(425, 150);
            ctx3.stroke();

        }//end of the ctx3 if statement
    }//end of the canvasElem3 if statement
*/

    //Begin video 2--fills and strokes (x, y, width, height)
   /* ctx.fillStyle = "rgb (20, 20, 20)";
    ctx.fillRect(25, 50, 100, 100);*/

    //use rgba for alpha transparency
    /*ctx.strokeStyle = "rgba (70, 70, 70, 1)";
    ctx.strokeRect(130, 200, 40, 70);*/


};//end of the window onload function




<file_sep>/FollowAlongFiles/CreateJS/1-Starting/js/Setup.js
window.onload = function() {

    //create a new stage and wrap it around the existing canvas
    var canvas = document.getElementById("canvas1");
    var stage = new createjs.Stage(canvas);
	
	//create a blue circle
    var circleGraphic = new createjs.Graphics();
    circleGraphic.beginFill("blue");
    circleGraphic.drawCircle(0, 0, 50);//centers at the origin

    //create the shape
    //shape is a display object that handles vector graphics
    var circleShape = new createjs.Shape(circleGraphic);

    //access some of the shape circle properties
    circleShape.x = 50;//move the shape 50 on the x-axis
    circleShape.y = 50;

    //add the shape to the stage's display list
    stage.addChild(circleShape);

    //To show on screen Need to update the stage
    stage.update();
	
			
};<file_sep>/FollowAlongFiles/Image Galleries/1-Starting/3-DIYbox/js/lBox.js
window.onload = function() {
	$(".lightbox_trigger").click(function(e){

        //prevent default
        e.preventDefault();

        //get the clicked link href
        var image_href = $(this).attr("href");

        //set up the lightbox if it doesn't exist or use the lightbox

        if($("#lightbox").length > 0){

            //lightbox div is created
            //place the clicked href into an image
            $("#content").html('<img src=" ' +image_href + '  " />');
            $("#lightbox").slideDown(1000);

        }else {
            //first time the lightbox div will not exist
            //create the lightbox
            var lightbox =
                '<div id="lightbox">' +
                '<p>Click Anywhere to Close</p>' +
                '<div id="content">' +
                '<img src=" ' + image_href + ' "  />'  +
                '</div>' +
                '</div>';

            //insert the lightbox HTML into the page
            $("body").append(lightbox);

            $("#lightbox").hide();
            $("#lightbox").slideDown(1000);
        }//end of the if/else

    });//end of the click function



    //setup the click to close
    $("#lightbox").live('click', function(){
        $("#lightbox").slideUp(1000);

    });//end of the live function--inserts into the DOM
	

};<file_sep>/FollowAlongFiles/CreateJS/1-Starting/js/Text.js
window.onload = function() {
	var canvas = document.getElementById("canvas1");
	var stage = new createjs.Stage(canvas);

    //text is a display object
    var sentence = new createjs.Text();

    //modify the text property
    sentence.text = "<NAME> 2016!";

    //font property
    sentence.font = "bold 30px Times";

    //specify font color
    sentence.color = "blue";

    sentence.x = 150;
    sentence.y = 50;
    //sentence.rotation = 45;

    //textAlign "left, right, center"
    sentence.textAlign = "center";

    //lineWidth max width of the column of text--like padding
    sentence.lineWidth = 150;
    //lineHeight
    sentence.lineHeight = 35;
    //outline (boolean)
    sentence.outline = false;


    //combine into one line of code (.text, .font, .color)
    var sentence2 = new createjs.Text("<NAME> 2020", "bold 30px Times", "blue");



    stage.addChild(sentence);
    stage.addChild(sentence2);
    stage.update();
	
};<file_sep>/shuck_laurie_Homework1/js/main.js
/*
     Name: <NAME>
     Date: July 10, 2014
     Class & Section:  WIA-Section 1
     Comments: "HTML5 Canvas Drawing"
 */

/*******************************************
HTML5 Shape Drawing Activity
    1.  Setup the canvas and 2d context
    2.  Draw out each shape in the sections below
     
********************************************/
window.onload = function(){
/*******************************************
FILE SETUP

// Setup up 7 different Canvases in index.html one for each problem.
//Link Modernizr.js
// Link the main.js file
// Setup the call to that canvas and get it's 2d context
//Use Modernizr to verify that your browser supports canvas, include a fallback message

/*******************************************
PART 1

Draw a rectangle starting at point (0 ,0)
That has a width of 50 px and a height of 100px
Set the color of the rectangle to a shade of blue.
Set the stroke color to black and the dimension of the stroke are the same as the rectangle.

Reminder - set the style first then draw.
********************************************/
//In one of the videos it mentioned that we needed to use Modernizr for each section. The user will receive a lot of alerts
//if their browser does not support the Canvas element
if(Modernizr.canvas){
    //Set up the canvas and get the context
    var canvasRect = document.getElementById("canvas1");
    var ctx1 = canvasRect.getContext("2d");

    //Styles
    ctx1.fillStyle = "#b5d8e2";
    ctx1.strokeStyle = "black";
    ctx1.lineWidth = 1;

    //Draw Rectangle here
    ctx1.fillRect(0, 0, 50, 100);
    ctx1.strokeRect(0, 0, 50, 100);

    //If the user's browser does not support canvas
}else{
    //Add a full page image or something
    alert("Sorry, your browser does not support the canvas element.");
}//end of the Modernizr.canvas if statement


/*******************************************
PART 2

Draw a circle starting at point (50 ,50)
That has a radius of 20 px 
Set the color of the circle to a shade of red and set the alpha to .5
Set the stroke color to black and use a radius of 30px for this circle.

Reminder - set the style first then draw.
Use the arc method
********************************************/
//I was not sure if we were supposed to draw two circles, or a circle with a stroke. I created 2 circles.
if(Modernizr.canvas){
    //Set up the canvas and get the context
    var canvasCirc = document.getElementById("canvas2");
    var ctx2 = canvasCirc.getContext("2d");

    //Styles-Outer circle to create a stroke around the inner circle
    ctx2.lineWidth = 2;
    ctx2.strokeStyle = "black";
    ctx2.fillStyle = "black";

    //draw outer circle
    ctx2.beginPath();
    ctx2.arc(50, 50, 30, 0, 2 * Math.PI);
    ctx2.fill();
    ctx2.stroke();

    //Inner circle Style
    ctx2.fillStyle = "rgba(242, 34, 62, .5)";

    //draw Circle here
    ctx2.beginPath();
    ctx2.arc(50, 50, 20, 0, 2 *Math.PI);
    ctx2.fill();

}else{
    //Add fallback content
    alert("Sorry, your browser does not support the canvas element.");
}//end of the Modernizer if/else


/*******************************************
PART 3

Practice using Path drawing.
Create a 5-point star shaped pattern using the lineTo method.
Begin this shape at (100, 100)

Height and width and color are up to you.

********************************************/
if(Modernizr.canvas){
    //Set up the canvas and get the context
    var canvasStar = document.getElementById("canvas3");
    var ctx3 = canvasStar.getContext("2d");

    //Styles
    ctx3.fillStyle = "yellow";
    ctx3.strokeStyle = "black";
    ctx3.lineWidth = 20;

    //Draw Star here
    ctx3.beginPath();
    ctx3.moveTo(100, 100);
    ctx3.lineTo(125, 50);//top point--left
    ctx3.lineTo(150, 100);//top point--right
    ctx3.lineTo(200, 100);//top-right point--top
    ctx3.lineTo(150, 150);//top-right point--bottom
    ctx3.lineTo(180, 200);//bottom-right point--top
    ctx3.lineTo(125, 175);//bottom-right point--bottom
    ctx3.lineTo(70, 200);//bottom-left point--bottom
    ctx3.lineTo(100, 150);//bottom-left point-top
    ctx3.lineTo(50, 100);//top-left point-bottom
    ctx3.closePath();//close path
    ctx3.stroke();
    ctx3.fill();

}else{
    //Add fallback content
    alert("Sorry, your browser does not support the canvas element.");
}//end of the Modernizer if/else


/*******************************************
PART 4

Practice drawing with Bezier curves.
Try drawing the top to an umbrella.
This should have one large arc (a half circle) on the top and scalloped edges on the bottom.

Position, height, width and color are your choice.
Do not overlap any other object.

********************************************/
if(Modernizr.canvas){
    //Set up the canvas and get the context
    var canvasUmbrella = document.getElementById("canvas4");
    var ctx4 = canvasUmbrella.getContext("2d");

    //Styles
    ctx4.fillStyle = "orange";
    ctx4.strokeStyle = "black";
    ctx4.lineWidth = 3;

    //Draw Umbrella top here
    ctx4.beginPath();
    ctx4.arc(100, 100, 80, 0, Math.PI, true);
    //ctx4.stroke();

    //Draw bezier curves--I am not sure if I need to begin a new path with each curve
    //ctx4.beginPath();
    //ctx4.moveTo(18, 100);
    ctx4.bezierCurveTo(40, 80, 50, 80, 70, 100);
    //ctx4.stroke();

    //ctx4.beginPath();
    //ctx4.moveTo(70, 100);
    ctx4.bezierCurveTo(90, 80, 100, 80, 125, 100);
    //ctx4.stroke();

    //ctx4.beginPath();
    //ctx4.moveTo(125, 100);
    ctx4.bezierCurveTo(140, 80, 150, 80, 182, 100);
    ctx4.fill();
    ctx4.stroke();
    ctx4.closePath();

}else{
    //Add fallback content
    alert("Sorry, your browser does not support the canvas element.");
}//end of the Modernizer if/else


/*******************************************
PART 5

Practice using text.
Draw text into your canvas.  It can say whatever you would like in any color.

********************************************/

if(Modernizr.canvas){
    //Set up the canvas and get the context
    var canvasText = document.getElementById("canvas5");
    var ctx5 = canvasText.getContext("2d");

    //variables for text
    var myText = "War is a Racket!";
    var myText2 = "Bring the troops home now.";

    //saving the context to remove shadows for the 2nd sentence
    ctx5.save();

    //First Sentence Styles
    ctx5.font = "25pt Century Gothic";
    ctx5.fillStyle = "red";
    ctx5.textBaseline = "middle";
    ctx5.strokeStyle = "black";
    ctx5.shadowColor = "#717171";
    ctx5.shadowOffsetX = 1;
    ctx5.shadowOffsetY = 3;
    ctx5.shadowBlur = 2;

    //Draw first sentence
    ctx5.fillText(myText, 10, ctx5.canvas.height/2);
    ctx5.strokeText(myText, 10, ctx5.canvas.height/2);

    //Clear the shadow
    ctx5.restore();

    //Style the 2nd Sentence
    ctx5.font = "15pt Century Gothic";
    ctx5.textBaseline = "middle";

    //Draw second sentence
    ctx5.fillText(myText2, 5, ctx5.canvas.height/2 + 55);

}else{
    //Add fallback content
    alert("Sorry, your browser does not support the canvas element.");
}//end of the Modernizer if/else


/*******************************************
PART 6

Pixel manipulation.
Draw the image logo.png into the canvas in the following 3 ways.
1. The image exactly as it is.
2. Shrink the image by 50%
3. Slice a section of the logo out and draw that onto the canvas.

Reminder to use the drawImage method for all 3 of the ways.

********************************************/
//window.onload = function(){
if(Modernizr.canvas){
    //Set up the canvas and get the context
    var canvasImg = document.getElementById("canvas6");
    var ctx6 = canvasImg.getContext("2d");

    //variable for the image
    var srcImg = document.getElementById("img1");

    //Normal sized image
    ctx6.drawImage(srcImg, 0, 0);

    //Scaled image
    //ctx6.drawImage(srcImg, 0, 1100, 1450, 544);
    ctx6.drawImage(srcImg, 0, 1100, srcImg.width/2, srcImg.height/2);

    //Sliced image, I sliced out the word "Web"
    ctx6.drawImage(srcImg, 0, 0, 1100, 500, 0, 1600, 400, 200);

}else{
    //Add fallback content
    alert("Sorry, your browser does not support the canvas element.");
}//end of the Modernizer if/else


/*******************************************
PART 7

Putting it all together. 

Using a combination of all the methods. 
Create a complex scene.
You must use at least 3 different methods.

********************************************/
//I used images, text, shadows, a shape(rectangle), and a gradient
if(Modernizr.canvas){
    //Set up the canvas and get the context
    var canvasScene = document.getElementById("canvas7");
    var ctx7 = canvasScene.getContext("2d");

    //variables for the images
    var drPaulImg = document.getElementById("img2");
    var crowdImg = document.getElementById("img3");
    var stairsImg = document.getElementById("img4");

    //Draw images
    //Main image
    ctx7.drawImage(drPaulImg, 0, 0);
    //Inset images
    ctx7.drawImage(stairsImg, 0, 0, 350, 350);
    ctx7.drawImage(crowdImg, 0, 350, 350, 370);

    //create a rectangle with linear gradient
    //create a linear gradient createLinearGradient(x0, y0, x1, y1)
    var linGradient = ctx7.createLinearGradient(655, 0, 655, 150);

    //Adding color stops
    linGradient.addColorStop(0, "#cccccc");
    linGradient.addColorStop(.2, "#ffffff");

    //Style
    ctx7.fillStyle = linGradient;

    //Draw Rectangle
    ctx7.fillRect(350, 0, 610, 150);

    //Variables for the text-sentences
    var drPaul1 = "My Day with Dr. <NAME>";
    var drPaul2 = "April 9, 2014";

    //Styles for text
    ctx7.font = "25pt Century Gothic";
    ctx7.fillStyle = "black";
    ctx7.strokeStyle = "black";
    ctx7.lineWidth = 2;
    //Text Shadow
    ctx7.shadowColor = "#717171";
    ctx7.shadowOffsetX = 1;
    ctx7.shadowOffsetY = 2;
    ctx7.shadowBlur = 2;

    // Draw text-sentences
    ctx7.fillText(drPaul1, 460, 60);
    ctx7.strokeText(drPaul1, 460, 60);

    ctx7.fillText(drPaul2, 565, 110);
    ctx7.strokeText(drPaul2, 565, 110);

}else{
    //Add fallback content
    alert("Sorry, your browser does not support the canvas element.");
}//end of the Modernizer if/else

};//end of the window onload






<file_sep>/FollowAlongFiles/drawscript/js/main.js
/*window.onload = function(){

    var theCanvas = document.getElementById("canvas1");

    if(theCanvas && theCanvas.getContext){
        var ctx = theCanvas.getContext("2d");

        if(ctx){
            //begin drawing here; ctx is the context
            //code from DrawScript--which is awesome!!!
            ctx.fillStyle="rgb(48,115,165)";
            ctx.fillRect(53,99,169,93);
            ctx.fill();

            ctx.fillStyle="rgb(204,77,0)";
            ctx.beginPath();
            ctx.moveTo(524,182);
            ctx.bezierCurveTo(524,244,474,294,412,294);
            ctx.bezierCurveTo(350,294,299,244,299,182);
            ctx.bezierCurveTo(299,120,350,69,412,69);
            ctx.bezierCurveTo(474,69,524,120,524,182);
            ctx.fill();

            ctx.fillStyle="rgb(255,91,11)";
            ctx.beginPath();
            ctx.moveTo(410,228);
            ctx.lineTo(397,197);
            ctx.lineTo(364,191);
            ctx.lineTo(389,168);
            ctx.lineTo(385,135);
            ctx.lineTo(414,152);
            ctx.lineTo(445,138);
            ctx.lineTo(437,171);
            ctx.lineTo(460,196);
            ctx.lineTo(426,199);
            ctx.lineTo(410,228);
            ctx.fill();

            ctx.fillStyle="rgb(0,0,0)";
            ctx.lineStyle="rgb(0,0,0)";
            ctx.lineWidth=4.808443546295166;
            ctx.beginPath();
            ctx.moveTo(155,149);
            ctx.lineTo(155,129);
            ctx.bezierCurveTo(155,128,156,127,156,126);
            ctx.bezierCurveTo(157,125,158,125,159,125);
            ctx.lineTo(169,125);
            ctx.bezierCurveTo(169,125,171,124,173,123);
            ctx.bezierCurveTo(176,122,178,122,180,121);
            ctx.bezierCurveTo(182,121,184,120,187,120);
            ctx.lineTo(190,120);
            ctx.bezierCurveTo(193,120,196,121,198,123);
            ctx.bezierCurveTo(199,125,200,127,200,130);
            ctx.lineTo(200,130);
            ctx.bezierCurveTo(202,132,202,134,202,136);
            ctx.lineTo(202,137);
            ctx.bezierCurveTo(203,139,203,140,203,142);
            ctx.bezierCurveTo(203,143,203,143,203,144);
            ctx.bezierCurveTo(204,146,205,147,205,149);
            ctx.bezierCurveTo(205,152,204,153,202,155);
            ctx.bezierCurveTo(201,157,199,158,196,158);
            ctx.lineTo(191,158);
            ctx.bezierCurveTo(192,160,192,162,192,164);
            ctx.bezierCurveTo(192,166,192,168,191,170);
            ctx.bezierCurveTo(190,171,189,172,188,173);
            ctx.bezierCurveTo(186,174,185,174,183,174);
            ctx.bezierCurveTo(182,174,181,174,180,173);
            ctx.bezierCurveTo(179,172,179,171,178,170);
            ctx.bezierCurveTo(178,169,178,168,177,167);
            ctx.bezierCurveTo(177,166,177,165,177,165);
            ctx.bezierCurveTo(177,164,176,163,176,162);
            ctx.bezierCurveTo(175,161,174,160,173,158);
            ctx.bezierCurveTo(170,156,169,154,168,153);
            ctx.lineTo(159,153);
            ctx.bezierCurveTo(158,153,157,153,156,152);
            ctx.bezierCurveTo(156,151,155,150,155,149);
            ctx.fill();
            ctx.stroke();

            ctx.fillStyle="rgb(0,0,0)";
            ctx.lineStyle="rgb(0,0,0)";
            ctx.lineWidth=4.808443546295166;
            ctx.beginPath();
            ctx.moveTo(160,129);
            ctx.bezierCurveTo(159,130,159,130,159,131);
            ctx.bezierCurveTo(159,131,159,132,160,132);
            ctx.bezierCurveTo(160,133,161,133,161,133);
            ctx.bezierCurveTo(162,133,162,133,163,132);
            ctx.lineTo(163,131);
            ctx.bezierCurveTo(163,130,163,130,163,129);
            ctx.bezierCurveTo(162,129,162,129,161,129);
            ctx.lineTo(160,129);
            ctx.fill();
            ctx.stroke();

            ctx.fillStyle="rgb(0,0,0)";
            ctx.lineStyle="rgb(0,0,0)";
            ctx.lineWidth=4.808443546295166;
            ctx.beginPath();
            ctx.moveTo(168,149);
            ctx.lineTo(169,149);
            ctx.bezierCurveTo(169,149,169,149,170,150);
            ctx.lineTo(171,150);
            ctx.bezierCurveTo(171,151,172,151,172,152);
            ctx.bezierCurveTo(173,152,173,152,174,153);
            ctx.bezierCurveTo(174,154,174,154,175,154);
            ctx.bezierCurveTo(175,155,175,155,176,156);
            ctx.bezierCurveTo(176,156,176,157,177,157);
            ctx.bezierCurveTo(178,158,179,159,179,160);
            ctx.bezierCurveTo(180,160,181,162,181,163);
            ctx.bezierCurveTo(181,165,182,166,182,167);
            ctx.bezierCurveTo(182,168,183,169,183,170);
            ctx.bezierCurveTo(185,170,186,169,187,168);
            ctx.bezierCurveTo(188,167,188,166,188,164);
            ctx.bezierCurveTo(188,162,188,161,187,159);
            ctx.bezierCurveTo(186,156,185,155,185,153);
            ctx.lineTo(196,153);
            ctx.bezierCurveTo(197,153,198,153,199,152);
            ctx.bezierCurveTo(200,151,200,150,200,149);
            ctx.bezierCurveTo(200,149,200,148,200,147);
            ctx.bezierCurveTo(199,146,199,145,198,145);
            ctx.lineTo(199,144);
            ctx.bezierCurveTo(199,143,199,142,199,142);
            ctx.bezierCurveTo(199,140,199,139,197,138);
            ctx.bezierCurveTo(198,137,198,137,198,136);
            ctx.bezierCurveTo(198,135,198,134,198,133);
            ctx.bezierCurveTo(197,133,197,132,196,132);
            ctx.bezierCurveTo(196,131,196,130,196,130);
            ctx.bezierCurveTo(196,128,196,127,195,126);
            ctx.bezierCurveTo(194,125,192,125,190,125);
            ctx.lineTo(186,125);
            ctx.bezierCurveTo(183,125,180,125,175,127);
            ctx.bezierCurveTo(175,127,175,127,174,127);
            ctx.lineTo(173,128);
            ctx.lineTo(172,128);
            ctx.bezierCurveTo(171,128,171,128,171,128);
            ctx.bezierCurveTo(170,128,170,129,170,129);
            ctx.bezierCurveTo(169,129,169,129,169,129);
            ctx.lineTo(168,129);
            ctx.lineTo(168,149);
            ctx.fill();
            ctx.stroke();






        }//end of the ctx if statement
    }//end of the getContext if statement


};//end of the window.onload function*/


window.onload = function(){
    //get the canvas element
    var canvas = document.getElementById("canvas1");
    //create the stage
    var stage = new createjs.Stage(canvas);
    //create a graphic
    var shape = new createjs.Shape();

    //draw shape here
    shape.graphics.f("rgba(189,204,212,254)").p("EB82B9KMh8/AAAMAAAh9AMB8/AAAMAAAB9A").cp().ef().f("rgba(122,201,67,254)").p("EADmBi6MAAAhKiYAAmGCMlUEYkYYEYkYFUiMGGAAMBKiAAAYGGAAFUCMEYEYYEYEYCCFUAAGG<KEY>();






    //add to the stage
    stage.addChild(shape);
    //update the stage
    stage.update();


};//end of the onload function<file_sep>/FollowAlongFiles/Data Viz/1-Staring Files/3-Chart.js-master/js/LineGraph.js
$(function() { 
	var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");

    var lineChartData = {
        labels: ["PB n J", "Hot Dogs", "Top Ramen", "Grilled Cheese", "Hot Pockets", "Mac N Cheese", "Beans N Rice"],
        datasets:[
            {
                fillColor: "rgba(166, 209, 122, .5)",
                strokeColor: "rgab(166, 209, 122, 1)",
                pointColor: "black",
                pointStrokeColor: "#fff",
                data:[1, 20, 40, 20, 60, 75, 40]

            }//data
        ]//labels


    };//line chart data

    var myLine = new Chart(ctx).Line(lineChartData);


		
});

<file_sep>/FollowAlongFiles/jQuery/1-Starting/js/ShowHide.js
$(function() {

	//add a click function to the button
    //Hide
    $("#hide").click(function(){
        $("#theDiv").hide("slow", function(){
            //alert("The Div has received the invisibility cloak...");
            $("#theDiv").css("background-color", "red");
        });//end of the hide slow function
    });//end of the hide click function

    //Show
    $("#show").click(function(){
        $("#theDiv").show("slow");
    });//end of the show click function

    //Toggle
    $("#toggle").click(function(){
        $("#theDiv").toggle("slow");
    });//end of the toggle click function

});//end of the ready function


<file_sep>/FollowAlongFiles/CreateJS/1-Starting/js/Bitmap.js
window.onload = function() {
			
			//Canvas & Stage
			var canvas=document.getElementById("canvas");
			
			var stage= new createjs.Stage(canvas);
			
	        var bmp = new createjs.Bitmap();

            //load the image in & wait until it is fully loaded
            var img = new Image();
            img.src = "images/ship.svg";
            img.onload = updateStage;

            //updateStage function
		    function updateStage(e){
                bmp = new createjs.Bitmap(e.target);
                var centerX = canvas.width/2;
                var centerY = canvas.height/2;

                //move the ship to the center of the stage
                bmp.x = centerX;
                bmp.y = centerY;

                //change the registration point
                bmp.regX = 50;
                bmp.regY = 50;

                //scale it up (times 4)
                bmp.scaleX = 4;
                bmp.scaleY = 4;

                stage.addChild(bmp);
                //stage.update();
            }//end of the updateStage function

    //ticker to control timer
    createjs.Ticker.addEventListener("tick", tick);

    function tick(e){
        bmp.rotation += 2;
        bmp.x += 1;
        stage.update();
    }//end of the tick function

};<file_sep>/FollowAlongFiles/Starting AV Files/3-SoundJS/js/manifest.js
window.onload = function() {
    if(!createjs.Sound.initializeDefaultPlugins()){
        return;
    }//end of the if

    //create a variable to hold a path to the audio files
    var audioPath = "audio/";

    //create an array of objects--each object is a sound, which is called a manifest
    var manifest = [
        {id: "Music", src: audioPath+"music.mp3|"+audioPath+"music.ogg"},
        {id: "Thunder", src: audioPath+"Thunder1.mp3|"+audioPath+"Thunder1.ogg"}


    ];//end of the array

    //register the manifest with Soundjs
    createjs.Sound.registerManifest(manifest);

    //listen for files to load
    createjs.Sound.addEventListener("fileload", handleLoad);

    function handleLoad(event){
        //This will run once each time the file is initially loaded
        //createjs.Sound.play(event.src);
    }//end of the handleLoad function


	
	};//end of the window.onload

function playMusic(){
    createjs.Sound.play("Music");
}

function playThunder(){
    //BRING the Thunder ROFL
    createjs.Sound.play("Thunder");
}