3D Vector Field
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D Vector Field</title>
<script src="https://d3js.org/d3.v7.min.js"></script>
<style>
body {
margin: 0;
}
canvas {
display: block;
}
</style>
</head>
<body>
<script>
// Set up the canvas and context
const width = window.innerWidth;
const height = window.innerHeight;
const canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
document.body.appendChild(canvas);
const context = canvas.getContext('2d');
// Function to generate a rainbow color
function getRainbowColor(t) {
const colors = [
[255, 0, 0], // Red
[255, 127, 0], // Orange
[255, 255, 0], // Yellow
[0, 255, 0], // Green
[0, 0, 255], // Blue
[75, 0, 130], // Indigo
[148, 0, 211] // Violet
];
const pos = t % 1;
const index = Math.floor(pos * (colors.length - 1));
const weight = pos * (colors.length - 1) - index;
const color1 = colors[index];
const color2 = colors[index + 1];
const r = Math.round(color1[0] + weight * (color2[0] - color1[0]));
const g = Math.round(color1[1] + weight * (color2[1] - color1[1]));
const b = Math.round(color1[2] + weight * (color2[2] - color1[2]));
return `rgb(${r}, ${g}, ${b})`;
}
// Function to draw the vector field
function drawVectorField(t) {
context.clearRect(0, 0, width, height);
const numVectors = 20;
const vectorLength = 50;
const spacing = width / numVectors;
for (let i = 0; i < numVectors; i++) {
for (let j = 0; j < numVectors; j++) {
const x = i * spacing;
const y = j * spacing;
const angle = Math.atan2(y - height / 2, x - width / 2);
const magnitude = Math.sqrt((x - width / 2) ** 2 + (y - height / 2) ** 2);
const vx = Math.cos(angle) * magnitude;
const vy = Math.sin(angle) * magnitude;
context.strokeStyle = getRainbowColor(t + i + j);
context.beginPath();
context.moveTo(x, y);
context.lineTo(x + vx * vectorLength, y + vy * vectorLength);
context.stroke();
}
}
}
// Animation loop
let t = 0;
function animate() {
t += 0.01;
drawVectorField(t);
requestAnimationFrame(animate);
}
animate();
</script>
</body>
</html>
<!--
This conversation was generated with Duck.ai (https://duck.ai) using Mistral AI's Mistral Small 3 Model. AI chats may display inaccurate or offensive information (see https://duckduckgo.com/duckai/privacy-terms for more info).
====================
User prompt 1 of 1 - 2/16/2026, 7:35:34 PM:
Create me a 3d vector field with d3js which changes color to rainbow pallete with requestAnimationFrame.
Mistral Small 3:
Creating a 3D vector field with D3.js that changes color to a rainbow palette using `requestAnimationFrame` involves several steps. Below is a complete example that demonstrates how to achieve this. This example assumes you have a basic understanding of HTML, CSS, and JavaScript.
First, ensure you have included the necessary D3.js library in your HTML file:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D Vector Field</title>
<script src="https://d3js.org/d3.v7.min.js"></script>
<style>
body {
margin: 0;
overflow: hidden;
}
canvas {
display: block;
}
</style>
</head>
<body>
<script>
// Set up the canvas and context
const width = window.innerWidth;
const height = window.innerHeight;
const canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
document.body.appendChild(canvas);
const context = canvas.getContext('2d');
// Function to generate a rainbow color
function getRainbowColor(t) {
const colors = [
[255, 0, 0], // Red
[255, 127, 0], // Orange
[255, 255, 0], // Yellow
[0, 255, 0], // Green
[0, 0, 255], // Blue
[75, 0, 130], // Indigo
[148, 0, 211] // Violet
];
const pos = t % 1;
const index = Math.floor(pos * (colors.length - 1));
const weight = pos * (colors.length - 1) - index;
const color1 = colors[index];
const color2 = colors[index + 1];
const r = Math.round(color1[0] + weight * (color2[0] - color1[0]));
const g = Math.round(color1[1] + weight * (color2[1] - color1[1]));
const b = Math.round(color1[2] + weight * (color2[2] - color1[2]));
return `rgb(${r}, ${g}, ${b})`;
}
// Function to draw the vector field
function drawVectorField(t) {
context.clearRect(0, 0, width, height);
const numVectors = 20;
const vectorLength = 50;
const spacing = width / numVectors;
for (let i = 0; i < numVectors; i++) {
for (let j = 0; j < numVectors; j++) {
const x = i * spacing;
const y = j * spacing;
const angle = Math.atan2(y - height / 2, x - width / 2);
const magnitude = Math.sqrt((x - width / 2) ** 2 + (y - height / 2) ** 2);
const vx = Math.cos(angle) * magnitude;
const vy = Math.sin(angle) * magnitude;
context.strokeStyle = getRainbowColor(t + i + j);
context.beginPath();
context.moveTo(x, y);
context.lineTo(x + vx * vectorLength, y + vy * vectorLength);
context.stroke();
}
}
}
// Animation loop
let t = 0;
function animate() {
t += 0.01;
drawVectorField(t);
requestAnimationFrame(animate);
}
animate();
</script>
</body>
</html>
```
### Explanation:
1. **Canvas Setup**: A canvas element is created and appended to the body. The canvas size is set to the window's dimensions.
2. **Rainbow Color Function**: The `getRainbowColor` function generates a rainbow color based on a time parameter `t`. This function interpolates between predefined colors to create a smooth transition.
3. **Vector Field Drawing**: The `drawVectorField` function draws the vector field. It calculates the position and direction of each vector based on its position in the grid. The color of each vector is determined by the `getRainbowColor` function.
4. **Animation Loop**: The `animate` function updates the time parameter `t` and calls `drawVectorField` to redraw the vector field. `requestAnimationFrame` is used to create a smooth animation loop.
This code will create a 3D vector field that changes color to a rainbow palette over time.
-->