javascript - woodstockcs/support GitHub Wiki

how to draw an ellipse in khan academy

When drawing an ellipse online, there are four different numbers (points) that determine where the ellipse sits on a screen.

The first number is known as X. X controls how far the ellipse is from the left side of the canvas.
As you can see, if I changed the variable of X from 200 to 100; the frog would be moved more towards the left side of the canvas since the X determines how far the ellipse is from the left side of the canvas.

The second number is Y, Y moves the ellipse up and down on the canvas. As you can see, if I change the value of the variable Y from 250 to 50; The frog moves way up onto the canvas. If I changed the variable to 300, the frog would have moved down on the canvas. This is because Y controls how far up or down the image is on the canvas.

The third number is W. W controls the width of the ellipse. If I change line 8 on the third number- and change it from 200 to 100 the frog face gets smaller. If I were to change 100 to 300 the face would get much larger.

The fourth number is H. H controls the height of the ellipse. Because I changed the fourth number on line 17 from 72 to 20- you can see the mouth of the frog changed to a small slit instead of a tall gap. This is all because the height was changed.

How To Animate A Shape In Khan Academy

First define the variables xPos, yPos. This will look like "var xPos = 10; var yPos = 200;". These will be the starting position of the shape.

Than when you are writing the coordinates of the shape, put in xPos, yPos. Finally, write in the amount you want each variable to move. This will look like "xPos+= 5; yPos+= 0;"

A positive number will move the shape to the right if its the xPos and it'll move the shape up if its the yPos. A negative number will move the shape to the left if its the xPos and it'll move the shape up if its the yPos. O won't move the shape in any direction.

Animation

Today, you will be reading about how you will want to set up the right code to create some animations. If you were using javascript or you were to complete an animation assignment on Khan Academy, there a few steps you need to take in order to make your object actually move. First, you are going to create the object that you are going to want to move. Let’s just say you wanted to have a moving rectangle. To create your rectangle, enter:

	rect(x, a position, b position, c position) 

So this could look like rect(x, 200, 100, 20). A simple rectangle, there you go. Now, you are going to want this thing to move, but how? You are going to now have to add a number for the variable for the position of the rectangle. To do this, you can put:

	// position of the rectangle

	var x = 5;

This tells the computer that this is where it’s gonna start moving. And below that, you are going to put this following code in to let the computer know that anything below it will instantly run repeatedly and it will continue moving in a constant direction. Place the code that you have for your rectangle, add some color to the rectangle, and put it underneath the draw function.

	draw = function() {



	// rectangle

	fill(0, 13, 255) <— color [This would turn into a dark blue]

	rect(x, 200, 100, 20);

Do not forget the semicolon because without it, your object will not work at all if it’s being told the wrong information. And underneath that, you can put the code that activates the overall movement of the rectangle.

	x = x + 1;

};

a can be the number to set the movement speed of your rectangle. If you were to activate this code, your rectangle should be moving to the right, slowly. The higher the number, the faster it will go. If you were to put a negative number, the rectangle will start going to the left. And there you have it, you have your first animated object using javascript or on Khan Academy.