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');
// Define the vector field
const numPoints = 20;
const points = [];
for (let i = 0; i < numPoints; i++) {
for (let j = 0; j < numPoints; j++) {
points.push({
x: i * (width / numPoints),
y: j * (height / numPoints),
vx: Math.random() * 2 - 1,
vy: Math.random() * 2 - 1
});
}
}
// Rainbow color palette
const rainbowColors = [
'#FF0000', '#FF7F00', '#FFFF00', '#00FF00', '#0000FF', '#4B0082', '#8B00FF'
];
// Animation loop
let frame = 0;
function animate() {
context.clearRect(0, 0, width, height);
points.forEach(point => {
// Update position
point.x += point.vx;
point.y += point.vy;
// Wrap around the canvas
if (point.x > width) point.x = 0;
if (point.x < 0) point.x = width;
if (point.y > height) point.y = 0;
if (point.y < 0) point.y = height;
// Draw the point with a rainbow color
const colorIndex = Math.floor((frame / 10) % rainbowColors.length);
context.fillStyle = rainbowColors[colorIndex];
context.beginPath();
context.arc(point.x, point.y, 5, 0, 2 * Math.PI);
context.fill();
});
frame++;
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:38:30 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');
// Define the vector field
const numPoints = 20;
const points = [];
for (let i = 0; i < numPoints; i++) {
for (let j = 0; j < numPoints; j++) {
points.push({
x: i * (width / numPoints),
y: j * (height / numPoints),
vx: Math.random() * 2 - 1,
vy: Math.random() * 2 - 1
});
}
}
// Rainbow color palette
const rainbowColors = [
'#FF0000', '#FF7F00', '#FFFF00', '#00FF00', '#0000FF', '#4B0082', '#8B00FF'
];
// Animation loop
let frame = 0;
function animate() {
context.clearRect(0, 0, width, height);
points.forEach(point => {
// Update position
point.x += point.vx;
point.y += point.vy;
// Wrap around the canvas
if (point.x > width) point.x = 0;
if (point.x < 0) point.x = width;
if (point.y > height) point.y = 0;
if (point.y < 0) point.y = height;
// Draw the point with a rainbow color
const colorIndex = Math.floor((frame / 10) % rainbowColors.length);
context.fillStyle = rainbowColors[colorIndex];
context.beginPath();
context.arc(point.x, point.y, 5, 0, 2 * Math.PI);
context.fill();
});
frame++;
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. **Vector Field**: A grid of points is created, each with a random velocity vector.
3. **Rainbow Colors**: An array of rainbow colors is defined.
4. **Animation Loop**: The `animate` function updates the position of each point and wraps them around the canvas edges. The color of each point changes based on the frame count, cycling through the rainbow colors.
5. **requestAnimationFrame**: The `requestAnimationFrame` function is used to create a smooth animation loop.
This code will create a 3D vector field where points move across the canvas and change color in a rainbow palette over time.
-->