instructions
I wrote this post because I came across a formula r=a(1-cos theta) one day. I looked it up on the Internet. It turned out to be the polar equation for the Cartesian heart line.
And the purpose of this article is to draw the Cartesian heart line with the front end. Originally, I thought, such a classic formula, the Internet should have been implemented. I searched, have to admire the net friends, Java implementation, C# implementation, canvas implementation, also can use ECharts painting, can learn to learn.
Ok, start the text! Let’s take a look at the heart shape
A heart-shaped line, so named because it resembles a heart, is a fixed point on a circle that rolls around another circle with the same radius.
Since canvas is a cartesian coordinate system, let’s look at it first
Plane cartesian coordinate system
X ^2+y^2+ A *x=a* SQRT (x^2+y^2) and X ^2+y^2-a*x=a* SQRT (x^2+y^2)
Why are there two expressions? Since the horizontal and vertical directions of the heart-shaped line correspond to different equations, and the heart-shaped line drawn using the same equation expression will change direction by swapping the x and y coordinates of each point, there will be two equations.
All right, let’s go ahead and draw it, and let’s see what my friend did here and take the coordinates of all the points, connect them, fill them, and then you have a heart.
Parametric equations
x=a*(2*sin(t)+sin(2*t))
y=a*(2*cos(t)+cos(2*t))
Copy the codeX and y represent the x and y coordinates of a point, respectively. A: is a constant used to control the size of the heart, and t: represents radians. The value range of t: -pi<=t<= PI or 0<=t<=2* PI
code
<! doctype html> <html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<canvas width="400" height="400"></canvas>
<script>
var canvas = document.querySelector('canvas');
var context = canvas.getContext('2d'); context.lineWidth = 3; // move the origin of the canvas from (0,0) to (200,200) // move the origin so that the whole heart appears. Var t=0; Var maxt = 2* math.pi; Var vt = 0.01; Var maxi = math.ceil (maxt/vt); Var pointArr=[]; var pointArr=[]; Var x=0; Var y=0; var y=0; // Get the coordinates of all points according to the equationfor(var i=0; i<=maxi; i++){ // x=a*(2*sin(t)+sin(2*t)) x=50*(2*Math.sin(t)+Math.sin(2*t)); // y=a*(2*cos(t)+cos(2*t)) y=50*(2*Math.cos(t)+Math.cos(2*t)); t+=vt; pointArr.push([x,y]); Context. MoveTo (pointArr[0][0],pointArr[0][1]); draw();function draw(){
context.fillStyle='#c00'; // Connect the dotsfor(var i=1; i<pointArr.length; i++){ x = pointArr[i][0]; y = pointArr[i][1]; context.lineTo(x,y); } context.fill(); } </script> </body> </html>Copy the coderendering
Plane cartesian coordinate system (hollow heart)
The code above is to draw a solid heart, of course we can draw a hollow heart, just need to make a little change. All we need to do is change draw() from fill() to stroke() and set the strokeStyle color.
function draw(){
//context.fillStyle='#c00';
context.strokeStyle='#c00'; // Connect the dotsfor(var i=1; i<pointArr.length; i++){ x = pointArr[i][0]; y = pointArr[i][1]; context.lineTo(x,y); } //context.fill(); context.stroke(); }Copy the code
Polar coordinates
Polar coordinates look like this
In polar coordinates, the position of a point is determined by the pole (point O) and the Angle. For more information about polar coordinates, see here
Look what this friend did
According to the polar coordinate equation r=a(1+sinθ), get r, take R as the radius, draw a continuous arc according to R, after drawing a circle, the heart comes out.
Equation of polar coordinates r=a(1+sinθ)
code
<! doctype html> <html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<canvas width="400" height="400"></canvas>
<script>
var canvas = document.querySelector('canvas');
var context = canvas.getContext('2d'); // move the origin of the canvas from (0,0) to (200,100) // move the origin so that the whole heart appears. // Draw a heart draw();function drawVar r = 0; var r = 0; Var start = 0; Var end = 0; Var a = 100; var a = 100; context.fillStyle ='#e21f27'; // draw a continuous arcfor(var q = 0; q < 500; q++) { start += Math.PI * 2 / 500; Math.PI * 2; end = start + math. PI * 2/500; // R =a(1+sinθ) r=a * (1+ math.sin (start)); Context. arc(0, 0, r, start, end,false);
}
context.fill();
}
</script>
</body>
</html>
Copy the coderendering
Polar coordinate system (hollow heart)
If you draw a hollow heart in polar coordinates, you need to change the draw() function to stroke() instead of fill() and set the strokeStyle color.
function draw() {
var r = 0;
var start = 0;
var end = 0;
var a = 100;
//context.fillStyle = '#e21f27';
context.strokeStyle = '#e21f27';
for (var i = 0; i < 500; i++) {
start += Math.PI * 2 / 500;
end = start + Math.PI * 2 / 500;
r = a * (1 + Math.sin(start));
context.arc(0, 0, r, start, end, false); } //context.fill(); // Use the stroke() method context.stroke(); }Copy the code
You might not think it’s a pretty heart. Look at this parametric equation!
x=16 * (sin(t)) ^ 3; Y is equal to 13 cosine of t minus 5 cosine of 2 times t minus 2 cosine of 3 times t minus cosine of 4 times t.Copy the codeBased on this parametric equation, using the plane cartesian coordinate system described above, you can change the equation in the code and draw a heart that looks like this.
code
<! doctype html> <html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<canvas width="400" height="400"></canvas>
<script>
var canvas = document.querySelector('canvas');
var context = canvas.getContext('2d'); context.lineWidth = 3; // move the origin of the canvas from (0,0) to (200,200) // move the origin so that the whole heart appears. Var t=0; Var vt = 0.01; Var maxt = 2* math.pi; Var maxi = math.ceil (maxt/vt); Var pointArr=[]; var pointArr=[]; Var size = 10; Var x=0; Var y=0; var y=0; // Get the coordinates of all points according to the equationfor(var i=0; i<=maxi; i++){ // x=16 * (sin(t)) ^ 3; var x = 16 * Math.pow(Math.sin(t),3); // y=13 * cos(t) - 5 * cos(2 * t) - 2 * cos(3 * t) - cos(4 * t) var y = 13 * Math.cos(t) - 5 * Math.cos(2 * t) -2 * Math.cos(3 * t)- Math.cos(4 * t); t+=vt; pointArr.push([x*size,-y*size]); Context. MoveTo (pointArr[0][0],pointArr[0][1]); draw();function draw(){
context.fillStyle='#c00'; // Connect the dotsfor(var i=1; i<pointArr.length; i++){ x = pointArr[i][0]; y = pointArr[i][1]; context.lineTo(x,y); } context.fill(); } </script> </body> </html>Copy the codeMaybe we can do something else, like add some animation, check this out.
Download the source code here
conclusion
This article is mainly said to use The Cartesian heart-shaped line equation to draw hearts, but want to draw a heart is definitely a variety of ways, simple CSS can also be used, complex point with Bezier curve can also draw out, you might as well try, perhaps what new discovery.