-
-
Save aurelianonava/519871e8ba78006132be588c27000929 to your computer and use it in GitHub Desktop.
Rotate point around ellipse// source https://jsbin.com/yobuko
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta name="description" content="Rotate point around ellipse"> | |
<script data-require="p5.js@*" data-semver="0.5.7" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.7/p5.min.js"></script> | |
</head> | |
<body> | |
Rotating point around ellipse</br> | |
<script id="jsbin-javascript"> | |
var x = 0; | |
var y = 0; | |
var speed = 5; | |
var radius =25; | |
var angle = 0; | |
//DIfferent Variables for the project | |
function setup() { | |
createCanvas(600, 400); // Canvas | |
} | |
function draw() { | |
background(255,0,0); //Red Background | |
translate(0,200); //Adds the numbers to x and y to make it easier to place things around | |
strokeWeight(5); //Next object will have a stroke of 5 | |
ellipse(x, y, radius*2, radius*2); //The eclipse, it is using a radius to make it easier to know the size to make a point follow it | |
fill(15, 15, 255); //Filling the eclipse with color | |
strokeWeight(18); //Next Object will have a stroke of 10 | |
point(x + radius * cos (angle), y - radius * sin (angle)); //the point that is on the eclipse using radious and cos and sin to follow the circle | |
angle = angle + speed * .05 | |
//This controls the point. Making it rotate around the sides of the circle | |
x = x + speed | |
//This is what makes the ellipse move along the x axis | |
if(x > width){ | |
speed = -5; | |
}else if(x < 0){ | |
speed = 5 | |
} | |
//This 'if' and 'else if' controls the eclipse to go back and forth to create a loop. When the point on the eclipse also reverses when it hits the edges. | |
} | |
</script> | |
<script id="jsbin-source-javascript" type="text/javascript"> var x = 0; | |
var y = 0; | |
var speed = 5; | |
var radius =25; | |
var angle = 0; | |
//DIfferent Variables for the project | |
function setup() { | |
createCanvas(600, 400); // Canvas | |
} | |
function draw() { | |
background(255,0,0); //Red Background | |
translate(0,200); //Adds the numbers to x and y to make it easier to place things around | |
strokeWeight(5); //Next object will have a stroke of 5 | |
ellipse(x, y, radius*2, radius*2); //The eclipse, it is using a radius to make it easier to know the size to make a point follow it | |
fill(15, 15, 255); //Filling the eclipse with color | |
strokeWeight(18); //Next Object will have a stroke of 10 | |
point(x + radius * cos (angle), y - radius * sin (angle)); //the point that is on the eclipse using radious and cos and sin to follow the circle | |
angle = angle + speed * .05 | |
//This controls the point. Making it rotate around the sides of the circle | |
x = x + speed | |
//This is what makes the ellipse move along the x axis | |
if(x > width){ | |
speed = -5; | |
}else if(x < 0){ | |
speed = 5 | |
} | |
//This 'if' and 'else if' controls the eclipse to go back and forth to create a loop. When the point on the eclipse also reverses when it hits the edges. | |
}</script></body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var x = 0; | |
var y = 0; | |
var speed = 5; | |
var radius =25; | |
var angle = 0; | |
//DIfferent Variables for the project | |
function setup() { | |
createCanvas(600, 400); // Canvas | |
} | |
function draw() { | |
background(255,0,0); //Red Background | |
translate(0,200); //Adds the numbers to x and y to make it easier to place things around | |
strokeWeight(5); //Next object will have a stroke of 5 | |
ellipse(x, y, radius*2, radius*2); //The eclipse, it is using a radius to make it easier to know the size to make a point follow it | |
fill(15, 15, 255); //Filling the eclipse with color | |
strokeWeight(18); //Next Object will have a stroke of 10 | |
point(x + radius * cos (angle), y - radius * sin (angle)); //the point that is on the eclipse using radious and cos and sin to follow the circle | |
angle = angle + speed * .05 | |
//This controls the point. Making it rotate around the sides of the circle | |
x = x + speed | |
//This is what makes the ellipse move along the x axis | |
if(x > width){ | |
speed = -5; | |
}else if(x < 0){ | |
speed = 5 | |
} | |
//This 'if' and 'else if' controls the eclipse to go back and forth to create a loop. When the point on the eclipse also reverses when it hits the edges. | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment