DEV Community: Eduard Iudinkov

How to create and visualize a cardioid using javascript

Eduard Iudinkov — Fri, 24 Feb 2023 11:19:51 +0000

Hello everyone! Today we're going to create and visualize a cardioid using javaScript and canvas. Let's get started!

Preparation

A cardioid is a geometric shape that resembles a heart. It is formed by tracing the path of a point on a circle that is rolling around another circle of the same size. The resulting curve has a single cusp at the origin, which gives it its characteristic heart shape. Cardioids are fascinating mathematical shapes that can be used in many different applications, from engineering to art.

In this article, we will explore how to create a cardioid using javascript and the canvas. We will use the canvas to draw the curve of the cardioid and javascript to calculate the coordinates of each point along the curve. We will also discuss the underlying mathematics behind the cardioid and provide a step-by-step guide for creating one. By the end of this article, you will have a deeper understanding of cardioids and how to create them using javascript and canvas.

Theory

We start with a circle of radius r centered at the origin, and a fixed point P on the circle. We will draw a pencil of lines through P and rotate it around the circle.

To draw each line, we calculate the angle between the x-axis and the line using the formula theta = (2π/N) * i, where i is the index of the line.

For any angle theta, the line passing through P and intersecting the circle at angle theta is given by the equation:

xcos(theta) + ysin(theta) = rcos(theta)

To find the intersection points of the line and the circle, we substitute the equation of the line into the equation of the circle and solve for x and y. This gives us a system of equations:

xcos(theta) + ysin(theta) = rcos(theta)
x^2 + y^2 = r^2

By solving this system of equations for x and y, we get:

x = rcos(theta) + rcos(2theta)
y = rsin(theta) + rsin(2theta)

These equations give us the coordinates of the point of intersection of the line passing through P and intersecting the circle at a given angle theta.

To draw the cardioid, we simply plot the points of intersection as we vary the angle theta from 0 to 2π, and connect them with a smooth curve.

Environment setup

Let's define the Cardioid class that will store the state of the cardioid and have two main methods: drawing the cardioid on the screen and getting color of the line:

class Cardioid {
  constructor() {}

  get color() {}

  draw() {}
}

Next, we're going to define a new class called Canvas that will create the canvas element and call the draw method of the Cardioid class:

class Canvas {
  constructor(id) {
    this.canvas = document.createElement("canvas");

    this.canvas.id = id;
    this.canvas.width = window.innerWidth;
    this.canvas.height = window.innerHeight;

    document.body.appendChild(this.canvas);
    this.ctx = this.canvas.getContext("2d");
  }

  draw() {
    const cardioid = new Cardioid(this.ctx);
    const draw = () => {
      this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
      cardioid.draw();
      requestAnimationFrame(draw);
    };
    draw();
  }
}

Consequently, the preparatory phase of the project has been finalized and we can now proceed to the implementation of its principal functionalities.

Cardioid

To generate the most basic form of the cardioid, the initial parameters of the class are defined as the radius of the circle, the quantity of lines and the coordinates of the screen center to set the offset of the points:

class Cardioid {
  constructor(ctx) {
    this.ctx = ctx;
    this.radius = 400;
    this.num_lines = 200;
    this.translate = [window.innerWidth / 2, window.innerHeight / 2];
  }

  get color() {}

  draw() {}
}

The Cardioid class includes a draw method that is responsible for rendering the cardioid on a canvas element. The method does not take any arguments, as the required parameters are specified in the constructor.

To draw the cardioid, the draw method loops over the number of lines defined in the constructor, calculating the two points of intersection for each line using the theory above. Nevertheless, in order to connect two pairs of points with a line, it is necessary to decompose the original equations for x and y into a set of two equations of the following form:

x1 = rcos(theta) + offsetX
y1 = rsin(theta) + offsetY

x2 = rcos(2theta) + offsetX
y2 = rsin(2theta) + offsetY

Thus, the following implementation is obtained:

class Cardioid {
  constructor(ctx) {
    this.ctx = ctx;
    this.radius = 400;
    this.num_lines = 200;
    this.translate = [window.innerWidth / 2, window.innerHeight / 2];
  }

  get color() {}

  draw() {
    this.ctx.lineWidth = 1;

    for (let i = 0; i < this.num_lines; i++) {
      const theta = ((2 * Math.PI) / this.num_lines) * i;
      const x1 = this.radius * Math.cos(theta) + this.translate[0];
      const y1 = this.radius * Math.sin(theta) + this.translate[1];

      const x2 = this.radius * Math.cos(2 * theta) + this.translate[0];
      const y2 = this.radius * Math.sin(2 * theta) + this.translate[1];

      this.ctx.strokeStyle = this.color;
      this.ctx.beginPath();
      this.ctx.moveTo(x1, y1);
      this.ctx.lineTo(x2, y2);
      this.ctx.stroke();
    }
  }
}

Let's see how the cardioid looks in real time:

Since the cardioid resembles a heart, we can incorporate a beating effect. This can be accomplished by selecting a sin function to modulate the radius of the cardioid as follows:

y = abs(sin(x) - 0.5)

As a result, we get the following picture:

Next, let's depart from the standard procedure for constructing a cardioid and introduce a variable factorthat depends on time. Additionally, instead of simply doubling the value of the angle theta, we will use this variable to compute the second pair of points:

factor = 1 + 0.0001 * time

Next, let's modify the approach of calculating the time value. To achieve this, we can define the startTime value as performance.now() within the constructor of the Cardioid class and subsequently implement the time getter as the difference between performance.now() and startTime:

get time() {
  return performance.now() - this.startTime;
}

The resulting outcome is presented below:

Conclusion

In conclusion, we have explored the theory of the cardioid as the envelope of a pencil of lines and demonstrated how this concept can be used to create cardioids in javascript using the canvas element. Furthermore, we have showcased various techniques that can be used to add visual effects to the cardioid, such as a beating effect. By leveraging the power of javascript and the canvas element, the possibilities for creating engaging and interactive cardioids are endless and you can try to create your own implementation right now!

Creating the effect of traveling through space

Eduard Iudinkov — Sun, 29 Jan 2023 16:16:45 +0000

Hello everyone! Today we're going to create the effect of traveling through space using javascript and canvas. Let's get started!

Theory

This effect is based on the simplest way of obtaining a perspective projection of a point from three-dimensional space onto a plane. For our case, we need to divide the value of the x and y coordinates of a three-dimensional point by their distance from the origin:

P'X = Px / Pz
P'Y = Py / Pz

Environment setup

Let's define the Star class that will store the states of the star and have three main methods: updating the state of the star, drawing the star on the screen, and getting its position in 3D space:

class Star {
  constructor() {}

  getPosition() {}

  update() {}

  draw(ctx) {}
}

Next, we need a class that will be used to create and manage the instances of the Star class. Let's call it Space and create an array of Star objects in its constructor, each one representing a star:

class Space {
  constructor() {
    this.stars = new Array(STARS).fill(null).map(() => new Star());
  }
}

It will also have three methods: update, draw, and run. The run method will iterate through the star instances by first calling the update method, and then drawing them with the draw method:

class Space {
  constructor() {
    this.stars = new Array(STARS).fill(null).map(() => new Star());
  }

  update() {
    this.stars.forEach((star) => star.update());
  }

  draw(ctx) {
    this.stars.forEach((star) => star.draw(ctx));
  }

  run(ctx) {
    this.update();
    this.draw(ctx);
  }
}

Next, we should define a new class called Canvas that will create the canvas element and call the run method of the Space class:

class Canvas {
  constructor(id) {
    this.canvas = document.createElement("canvas");

    this.canvas.id = id;
    this.canvas.width = window.innerWidth;
    this.canvas.height = window.innerHeight;

    document.body.appendChild(this.canvas);
    this.ctx = this.canvas.getContext("2d");
  }


  draw() {
    const space = new Space();
    const draw = () => {
      this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
      space.run(this.ctx);
      requestAnimationFrame(draw);
    };
    draw();
  }
}

Thus, the preparatory part of the project has been completed and we can begin to implement its main functionality.

Main functionality

The first step we need to take is to define a uniform function that generates random numbers in a given range of numbers. To do this, we will create a random object and implement the function in it using the Math.random() method:

const random = {
  uniform: (min, max) => Math.random() * (max - min) + min,
};

Once we need a class to implement the space vectors Vec, since javascript does not support working with vectors. What is a vector? A vector is a mathematical object that describes directions in space. Vectors are built from the numbers that form their components. In the picture below you can see a 2D vector with two components:

Vector operations

Consider two vectors. The following basic operations are defined for these vectors:

Addition: V + W = (Vx + Wx, Vy + Wy)

Subtraction: V - W = (Vx - Wx, Vy - Wy)

Division: V / W = (Vx / Wx, Vy / Wy)

Scaling: aV = (aVx, aVy)

Multiplication: V * W = (Vx * Wx, Vy * Wy)

Based on this information, we will implement the main methods of working with vectors that we will need in future:

class Vec {
  constructor(...components) {
    this.components = components;
  }

  add(vec) {
    this.components = this.components.map((c, i) => c + vec.components[i]);
    return this;
  }

  sub(vec) {
    this.components = this.components.map((c, i) => c - vec.components[i]);
    return this;
  }

  div(vec) {
    this.components = this.components.map((c, i) => c / vec.components[i]);
    return this;
  }

  scale(scalar) {
    this.components = this.components.map((c) => c * scalar);
    return this;
  }

  multiply(vec) {
    this.components = this.components.map((c, i) => c * vec.components[i]);
    return this;
  }
}

Implementation

First, let's define the center of the screen as a two-dimensional vector and make a set of several colors for our stars:

const CENTER = new Vec(window.innerWidth / 2, window.innerHeight / 2);
const COLORS = ["#FF7900", "#F94E5D", "#CA4B8C"];

and also introduce the constant Z, which will be used to indicate the distance along the z axis from which stars will start moving:

const Z = 35;

Next, we will assign the position of each star in three-dimensional space to the attributes. We will do this by implementing the getPosition method of our Star class. This method uses a unit circle with a random radius to generate coordinates using sin and cos. These functions are mathematically related to unit circles; therefore they can be used to represent points in three-dimensional space.

Thus we get the following code:

getPosition() {
  const angle = random.uniform(0, 2 * Math.PI);
  const radius = random.uniform(0, window.innerHeight);

  const x = Math.cos(angle) * radius;
  const y = Math.sin(angle) * radius;

  return new Vec(x, y, Z);
}

Now let's call it in the class constructor:

class Star {
  constructor() {
    this.pos = this.getPosition();
  }
}

Next, in the constructor we set the speed of the star, its color and position on the screen in terms of a two-dimensional vector and its size:

class Star {
  constructor() {
    this.size = 10;
    this.pos = this.getPosition();
    this.screenPos = new Vec(0, 0);
    this.vel = random.uniform(0.05, 0.25);
    this.color = COLORS[Math.floor(Math.random() * COLORS.length)];
  }
}

Next, we will move the star along the Z axis at a set speed and when it reaches its minimum value, we will call a getPosition method to randomly set its new position:

update() {
  this.pos.components[2] -= this.vel;
  this.pos = this.pos.components[2] < 1 ? this.getPosition() : this.pos;
}

The coordinates of a star on the screen can be calculated by dividing the X and Y coordinates by the value of the Z component, taking the center of the screen into account:

update() {
  this.pos.components[2] -= this.vel;
  this.pos = this.pos.components[2] < 1 ? this.getPosition() : this.pos;
  this.screenPos = new Vec(this.pos.components[0], this.pos.components[1])
      .div(new Vec(this.pos.components[2], this.pos.components[2]))
      .add(CENTER);
}

Next, we will display the star on the screen by using the draw method. To do this, we use rect method:

draw(ctx) {
  ctx.fillStyle = this.color;

  ctx.beginPath();
  ctx.rect(this.screenPos.components[0], this.screenPos.components[1], this.size, this.size);
  ctx.closePath();
  ctx.fill();
}

Let's see how the stars move in real time. As you can see, the stars move as expected, but their size does not change:

To solve this problem, we divide the value of the Z constant by the current value of the star along the axis Z. The result is as follows:

If you look closely, you'll see that the stars that are farther away are drawn on top of the nearby stars. To solve this problem, we will use the so-called Z Buffer and sort the stars by distance until they are drawn. Let's do this sorting in the run method of the Space class:

run(ctx) {
  this.update();
  this.stars.sort((a, b) => b.pos.components[2] - a.pos.components[2]);
  this.draw(ctx);
  }

In addition, we will introduce a scale factor in the getPosition method of the Star class to scale our visualization by increasing the random radius to create larger stars:

getPosition(scale = 35) {
  const angle = random.uniform(0, 2 * Math.PI);
  const radius =
      random.uniform(window.innerHeight / scale, window.innerHeight) * scale;

  const x = Math.cos(angle) * radius;
  const y = Math.sin(angle) * radius;

  return new Vec(x, y, Z);
}

and also slightly change the function for the value of the projection of the star to a more suitable one:

update() {
  this.pos.components[2] -= this.vel;
  this.pos = this.pos.components[2] < 1 ? this.getPosition() : this.pos;
  this.screenPos = new Vec(this.pos.components[0], this.pos.components[1])
      .div(new Vec(this.pos.components[2], this.pos.components[2]))
      .add(CENTER);

  this.size = (Z - this.pos.components[2]) / (this.pos.components[2] * 0.2);
}

As a result, we get a complete space picture:

In addition we can rotate the XY plane by a small angle. To do this, we calculate the new values of x and y using sin and cos:

rotateXY(angle) {
  const x = this.components[0] * Math.cos(angle) - this.components[1] * Math.sin(angle);
  const y = this.components[0] * Math.sin(angle) + this.components[1] * Math.cos(angle);
  this.components[0] = x;
  this.components[1] = y;
}

and call this method in the update method of the Star class:

update() {
  this.pos.components[2] -= this.vel;
  this.pos = this.pos.components[2] < 1 ? this.getPosition() : this.pos;
  this.screenPos = new Vec(this.pos.components[0], this.pos.components[1])
      .div(new Vec(this.pos.components[2], this.pos.components[2]))
      .add(CENTER);

  this.size = (Z - this.pos.components[2]) / (this.pos.components[2] * 0.2);
  this.pos.rotateXY(0.003);
}

As a result, we get the following picture:

Moreover, if we slightly change the initial parameters and calculate the random radius differently, we can get the effect of traveling through a tunnel:

Conclusion

We created a visualization of movement through space and learned how to do this kind of visualization.

Additional resources

Jony Hayama has created UI for the simulation, so if you want to play with variables more conveniently check this link out - https://jony.dev/traveling-through-space/