How to make this circle revolve around this circle?
Question
- I am trying to move blue circle around the red circle and draw on canvas using only red circle.
Problems:
I was unable to understand how can I maintain centers of two circles while blue circle is revolving around the red circle and moving at the same time.
how can I draw using only red circle without making the blue circle drawing while it is revolving around the red circle.
const canvas = document.getElementById('canvas1'); const ctx = canvas.getContext('2d'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; let positionX = 100; let positionY = 100; let X = 50; let Y = 50; let angle = 0; function circle(){ ctx.fillStyle = 'red'; ctx.beginPath(); ctx.arc(X, Y, 20, 0, Math.PI*2); ctx.closePath(); ctx.fill(); } function direction(){ ctx.fillStyle = 'blue'; ctx.beginPath(); ctx.arc(positionX, positionY, 10, 0, Math.PI*2); ctx.closePath(); ctx.fill(); } function animate(){ ctx.clearRect(0,0, canvas.width, canvas.height); circle(); direction(); positionX += 0.5 * Math.sin(angle); positionY += 0.5 * Math.cos(angle); angle += 0.1; requestAnimationFrame(animate); } animate();
#canvas1{ position: absolute; top:0; left: 0; width: 100%; height: 100%; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Canvas basics</title> <link rel="stylesheet" href="style.css"> </head> <body> <canvas id="canvas1"></canvas> <script src="script.js"></script> </body> </html>
2 answers
solution1
1 2021-05-20 21:12:39
I did not get all your problem clearly, but to revolve blue circle around red you just need to properly set values.
UPDATED: added rotation to red circle + minor description in code comments.
const canvas = document.getElementById('canvas1'); const ctx = canvas.getContext('2d'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; // Here we set our start positions of // circles. Keep in mind, that they will rotare not // around it's centers, they will START rotation path // from their centers let positionX = 30; let positionY = 59; let X = 70; let Y = 70; let angle = 0; let angle2 = 360; function circle(){ ctx.fillStyle = 'red'; ctx.beginPath(); ctx.arc(X, Y, 20, 0, Math.PI*2); ctx.closePath(); ctx.fill(); } function direction(){ ctx.fillStyle = 'blue'; ctx.beginPath(); ctx.arc(positionX, positionY, 10, 0, Math.PI*2); ctx.closePath(); ctx.fill(); } function animate(){ ctx.clearRect(0,0, canvas.width, canvas.height); circle(); direction(); // Basically you use geometry and math, // you can search for Sin and Cos online. // Here we calculate angle position on each frame // // Calc animation for first circle // It (animation path) starts from the center of circle and goes counterclockwise // And returns to its position after 360 deg. positionX += 4 * Math.sin(angle); positionY += 4 * Math.cos(angle); // Calc animation for second circle // Same as previous but with less amount // And our start position (angle2) is 360 X += 1 * Math.sin(angle2); Y += 1 * Math.cos(angle2); // Set angle of orbit - increase value each frame angle += 0.1; angle2 += 0.1; requestAnimationFrame(animate); } animate();
#canvas1{ position: absolute; top:0; left: 0; width: 100%; height: 100%; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Canvas basics</title> </head> <body> <canvas id="canvas1"></canvas> </body> </html>
solution2
1 ACCPTED 2021-05-20 22:21:47
Do you mean like this? - I've animated the red circ to move right. The blue circ orbits.
const canvas = document.getElementById('canvas1'); const ctx = canvas.getContext('2d'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; let positionX = 100; let positionY = 100; let X = 50; let Y = 50; let angle = 0; function circle(){ ctx.fillStyle = 'red'; ctx.beginPath(); ctx.arc(X, Y, 20, 0, Math.PI*2); ctx.closePath(); ctx.fill(); } function direction(){ ctx.fillStyle = 'blue'; ctx.beginPath(); ctx.arc(positionX, positionY, 10, 0, Math.PI*2); ctx.closePath(); ctx.fill(); } function animate(){ ctx.clearRect(0,0, canvas.width, canvas.height); circle(); direction(); positionX = X + 35 * Math.sin(angle); positionY = Y + 35 * Math.cos(angle); X+=1; angle += 0.1; requestAnimationFrame(animate); } animate();
#canvas1{ position: absolute; top:0; left: 0; width: 100%; height: 100%; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Canvas basics</title> <link rel="stylesheet" href="style.css"> </head> <body> <canvas id="canvas1"></canvas> <script src="script.js"></script> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to make responsive circle border around an element?
How to make the image transparent around the circle
How to make a circle around a particular city on a map?
Make an indicator move around a circle
How do I make a Sprite revolve around a point in Phaser 3?
How to make text around the circle not overlapping when rotating
How to make a canvas circle to rotate as the Earth around the Sun?
How to make css-animation of rotation around full circle
How to add stroke around whole circle and animate to rotate circle in svg?
How to grab and drag an element around a circle?
Related Tags