Benchmark: Test sin computing

HTML Preparation code:

<canvas id="myCanvas" width="400" height="400" style="border:1px solid #000;"></canvas>

Script Preparation code:

canvas = document.getElementById('myCanvas');
context = canvas.getContext('2d');

centerX = canvas.width / 2;
centerY = canvas.height / 2;
radius = 100; // Adjust this value to change the size of the circle

numLines = 60;

angleIncrement = (2 * Math.PI) / numLines;

cos={}
sin={}

  for (let i = 0; i < 60; i++) {
    var angle = i * angleIncrement;
    cos[angle] = Math.cos(angle);
    sin[angle] = Math.sin(angle);
  }

Tests:

Math
for (var i = 0; i < numLines; i++) { var angle = i*angleIncrement var x1 = centerX + radius * Math.cos(angle); var y1 = centerY + radius * Math.sin(angle); var x2 = centerX + (radius -10) * Math.cos(angle); var y2 = centerY + (radius -10) * Math.sin(angle); context.beginPath(); context.moveTo(x1, y1); context.lineTo(x2, y2); context.stroke(); }
cache
for (var i = 0; i < numLines; i++) { var angle = i*angleIncrement var x1 = centerX + radius * cos[angle]; var y1 = centerY + radius * sin[angle]; var x2 = centerX + (radius -10) * cos[angle]; var y2 = centerY + (radius -10) * sin[angle]; context.beginPath(); context.moveTo(x1, y1); context.lineTo(x2, y2); context.stroke(); }
With rotate
for (var i = 0; i < numLines; i++) { var angle = i*angleIncrement // Save the current canvas state context.save(); // Rotate the canvas context.translate(centerX, centerY); context.rotate(angle); // Draw the line from the center to the point on the circle context.beginPath(); context.moveTo(radius, 0); context.lineTo(radius - 10, 0); context.stroke(); // Restore the canvas state for the next iteration context.restore(); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Math
cache
With rotate

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

Autogenerated LLM Summary (model llama3.1:latest, generated one year ago):

LLMs can make mistakes. Check important info.

Let's break down the benchmark definition and results.

**Benchmark Overview**

The benchmark tests the performance of drawing lines on a canvas element in different ways. The test case involves drawing 60 lines from the center of a circle to points on its circumference, with each line representing a small change in angle.

**Test Cases**

There are three test cases:

1. **Math**: This test uses `Math.cos` and `Math.sin` functions to calculate the coordinates of each point.
2. **cache**: This test caches the results of `Math.cos` and `Math.sin` calculations for 60 angles, storing them in objects (`cos` and `sin`) to reuse them throughout the loop.
3. **With rotate**: This test uses the canvas's rotation feature to rotate the coordinate system by the angle, eliminating the need for explicit trigonometric calculations.

**Benchmark Results**

The results show that:

* The **Math** test runs at 1827.19 executions per second (EPS) on a Firefox 48 browser.
* The **cache** test runs at 926.30 EPS, which is roughly half the speed of the **Math** test.
* The **With rotate** test runs at 635.18 EPS, which is even slower than the **cache** test.

**What's Being Compared**

The benchmark compares three approaches:

1. **Explicit Math Functions**: Using `Math.cos` and `Math.sin` functions to calculate coordinates directly.
2. **Cache-Based Calculations**: Precomputing and caching trigonometric values for reuse throughout the loop.
3. **Canvas Rotation**: Utilizing the canvas's rotation feature to simplify calculations.

**Pros and Cons**

* **Explicit Math Functions**:
	+ Pros: Easy to understand, straightforward implementation.
	+ Cons: May incur performance overhead due to repeated function calls.
* **Cache-Based Calculations**:
	+ Pros: Can improve performance by reducing repeated trigonometric calculations.
	+ Cons: Requires extra memory for caching and may not be necessary if the number of iterations is small.
* **Canvas Rotation**:
	+ Pros: Simplifies calculations, potentially improving performance.
	+ Cons: May have overhead from canvas rotation and state management.

**Other Considerations**

When to use each approach:

* If performance is critical and the number of iterations is large, consider using caching or canvas rotation.
* For small-scale or simple applications, explicit math functions might be sufficient.
* When readability and maintainability are crucial, consider using explicit math functions for their simplicity and ease of understanding.

**Other Alternatives**

While not tested here, other alternatives to these approaches include:

* Using a library like Three.js or Pixi.js that provides optimized rendering capabilities.
* Utilizing Web Workers or parallel processing to offload computationally intensive tasks.
* Employing hardware acceleration through WebGL or GPU-based rendering.

Related benchmarks:

Test sin computing (version: 0)

Comparing performance of: Math vs cache vs With rotate

Created: 2 years ago by: Guest

Jump to the latest result

Math

cache

With rotate

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

Autogenerated LLM Summary (model llama3.1:latest, generated one year ago):