So, Anthropic finally broke the silence and released Claude 3.7 Sonnet, a hybrid model that can think step-by-step like a thinking model for complex reasoning tasks and answer instantly like a base model.
From the ARC-AGI benchmarks, Claude’s 3.7 Sonnet with thinking has scored on par with the o3-mini-high for 16k context. And the r1 compares with the base Sonnet model. Anthropic sure has done a great job.
For reference, the Deepseek r1 scored around 15%.
But I have been using Deepseek r1 for a while, and it gets many things done that matter. So, I was curious how it would stack against the new Claude 3.7 Sonnet.
I will compare both models across tasks like complex reasoning, Mathematics, Coding, and writing.
So, let’s get started.
Table of Contents
TL;DR
• Both Claude and Deepseek r1 fall in the same ballpark for day-to-day reasoning and math tasks.
• As Anthropic explicitly mentioned, they have trained the model for practical use cases; this is also reflected in the tests.
• It performs much better than Deepseek r1 in the coding department. There is not much comparison.
• Claude is good at technical writing, while Deepseek r1 is more human-like.
Claude 3.7 Sonnet vs. Deepseek r1
It would be criminal not to consider the pricing before any comparison. This is important for many users, especially those building applications on top of them.
DeepSeek R1 Pricing
• Input Tokens (Cache Hit): $0.14 per million tokens
• Input Tokens (Cache Miss): $0.55 per million tokens
• Output Tokens: $2.19 per million tokens
Claude 3.7 Sonnet Pricing
• Input Tokens: $3.00 per million tokens
• Output Tokens: $15.00 per million tokens
From a cost perspective, Deepseek r1 is still the king. This makes it an absolute beast for the reasoning capabilities it offers. It’s also open-source, and you can host it on your hardware, which is also important for privacy-sensitive enterprises.
But raw capability matters as well. So, let’s compare these two models.
Complex reasoning
1. Riddle to judge cognitive bias
This is a straightforward question, but most models I have tried fail to answer.
Prompt: A woman and her son are in a car accident. The woman is sadly killed. The boy is rushed to the hospital. When the doctor sees the boy, he says, “I can’t operate on this child; he is my son! How is this possible?
I have tweaked the question, and it falls apart.
*Prompt: The surgeon, who is the boy’s father, says, “I can’t operate on this child; he is my son”, who is the surgeon of this child. Be straightforward”.
*
It was the same case with the Deepseek r1 as well. This has become my go-to question for vibe-check reasoning models.
2. Blood Relationship
*Prompt: Jeff has two brothers, and each of his brothers has three sisters. Each of the sisters has four step-brothers and five step-sisters, for a total of eight siblings in this family.
*
Claude’s output was similar to Deepseek and even that of o3-mini.
However, Deepseek r1, as usual, has gems hidden in the CoT. Though the output was wrong, it got it correct in its Chain of thought.
3. Playing Tic-tac-toe
I asked Claude to make the next move that would ensure its victory. I expected it to answer correctly, but it failed.
Deepseek r1 is not a multi-modal model.
Mathematics
1. Find the GCD of this series set {n^99(n^60-1): n>1}
It was a fairly difficult question, and Claude couldn’t solve it.
However, Deepseek r1 was spot on.
2. Find (x-14)^10, where x is the number of vowels in the response
Claude 3.7 Sonnet was able to answer it correctly.
Deepseek r1 wasn’t able to get it right.
Summary of Math
Math ability is a mixed bag. You can never go wrong with either, but Deepseek’s cost-to-performance makes it unbeatable. But, well, Claude is clever, and Deepseek is nerdier.
Coding
Coding has always been Claude’s domain; they even specifically train the models on coding tokens to make them developer’s darling. This is Claude on SWE-Bench.
But let’s compare both of them.
1. Creating SVGs
This is an interesting test; I picked it from Simon Willison.
*Prompt: Create an SVG of a unicorn running in the field.
*
And this was Claude’s response.
Claude creating SVG
From Deepseek r1.
Deepseek drawing unicorn
Claude’s creation is a bit better, with a better background and view. Deepseek is decent, but not really there.
4. Balls in a geometrical object
Prompt: Write me a Python script for 10 balls inside a fast-spinning hexagon.
Code of the simulation
import pygame
import math
import sys
# Initialize Pygame
pygame.init()
# Screen settings
SCREEN_WIDTH = 800
SCREEN_HEIGHT = 600
screen = pygame.display.set_mode((SCREEN_WIDTH, SCREEN_HEIGHT))
pygame.display.set_caption("Spinning Hexagon with Balls")
# Colors
BACKGROUND_COLOR = (0, 0, 0)
HEXAGON_COLOR = (255, 255, 255)
BALL_COLOR = (255, 0, 0)
# Center coordinates
CENTER = (SCREEN_WIDTH // 2, SCREEN_HEIGHT // 2)
# Hexagon parameters
HEX_RADIUS = 200 # Distance from center to vertices
ROTATION_SPEED = 0.15 # Radians per frame
# Ball parameters
NUM_BALLS = 10
BALL_RADIUS = 10
BALL_ORBIT_RADIUS = 150 # Distance from center for ball positions
# Initialize rotation angle
angle = 0
# Main loop
clock = pygame.time.Clock()
running = True
while running:
for event in pygame.event.get():
if event.type == pygame.QUIT:
running = False
# Clear screen
screen.fill(BACKGROUND_COLOR)
# Update rotation angle
angle += ROTATION_SPEED
# Draw hexagon
hex_points = []
for i in range(6):
theta = angle + i * math.pi / 3 # 60 degrees between vertices
x = CENTER[0] + HEX_RADIUS * math.cos(theta)
y = CENTER[1] + HEX_RADIUS * math.sin(theta)
hex_points.append((x, y))
pygame.draw.polygon(screen, HEXAGON_COLOR, hex_points, 2)
# Draw balls
for i in range(NUM_BALLS):
ball_angle = angle + (2 * math.pi * i) / NUM_BALLS
x = CENTER[0] + BALL_ORBIT_RADIUS * math.cos(ball_angle)
y = CENTER[1] + BALL_ORBIT_RADIUS * math.sin(ball_angle)
pygame.draw.circle(screen, BALL_COLOR, (int(x), int(y)), BALL_RADIUS)
# Update display
pygame.display.flip()
clock.tick(60)
pygame.quit()
sys.exit()
Deepseek r1 output
import pygame
import math
import sys
# Initialize Pygame
pygame.init()
# Screen settings
SCREEN_WIDTH = 800
SCREEN_HEIGHT = 600
screen = pygame.display.set_mode((SCREEN_WIDTH, SCREEN_HEIGHT))
pygame.display.set_caption("Spinning Hexagon with Balls")
# Colors
BACKGROUND_COLOR = (0, 0, 0)
HEXAGON_COLOR = (255, 255, 255)
BALL_COLOR = (255, 0, 0)
# Center coordinates
CENTER = (SCREEN_WIDTH // 2, SCREEN_HEIGHT // 2)
# Hexagon parameters
HEX_RADIUS = 200 # Distance from center to vertices
ROTATION_SPEED = 0.15 # Radians per frame
# Ball parameters
NUM_BALLS = 10
BALL_RADIUS = 10
BALL_ORBIT_RADIUS = 150 # Distance from center for ball positions
# Initialize rotation angle
angle = 0
# Main loop
clock = pygame.time.Clock()
running = True
while running:
for event in pygame.event.get():
if event.type == pygame.QUIT:
running = False
# Clear screen
screen.fill(BACKGROUND_COLOR)
# Update rotation angle
angle += ROTATION_SPEED
# Draw hexagon
hex_points = []
for i in range(6):
theta = angle + i * math.pi / 3 # 60 degrees between vertices
x = CENTER[0] + HEX_RADIUS * math.cos(theta)
y = CENTER[1] + HEX_RADIUS * math.sin(theta)
hex_points.append((x, y))
pygame.draw.polygon(screen, HEXAGON_COLOR, hex_points, 2)
# Draw balls
for i in range(NUM_BALLS):
ball_angle = angle + (2 * math.pi * i) / NUM_BALLS
x = CENTER[0] + BALL_ORBIT_RADIUS * math.cos(ball_angle)
y = CENTER[1] + BALL_ORBIT_RADIUS * math.sin(ball_angle)
pygame.draw.circle(screen, BALL_COLOR, (int(x), int(y)), BALL_RADIUS)
# Update display
pygame.display.flip()
clock.tick(60)
pygame.quit()
sys.exit()
Claude had better overall output. The spinning hexagon has better ball-moving physics. Deepseek got the “fast-moving” part right. Overall, Claude was better.
3. 3d animation using 3js
Prompt: Can you make a 3d animation of a metropolitan city using 3js?
The code:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Metropolitan City - Three.js</title>
<style>
body {
margin: 0;
overflow: hidden;
background-color: #000;
}
canvas {
display: block;
}
.info {
position: absolute;
top: 10px;
left: 10px;
color: white;
font-family: Arial, sans-serif;
background-color: rgba(0, 0, 0, 0.5);
padding: 10px;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="info">
Click and drag to orbit. Scroll to zoom. Use arrow keys to move
camera.
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script>
// Main scene variables
let scene, camera, renderer;
let cityGroup, vehiclesGroup;
let clock = new THREE.Clock();
let cameraRotationSpeed = 0.003;
let autoRotate = true;
// Setup
function init() {
// Create scene
scene = new THREE.Scene();
scene.background = new THREE.Color(0x050518); // Night sky color
// Create camera
camera = new THREE.PerspectiveCamera(
60,
window.innerWidth / window.innerHeight,
0.1,
2000,
);
camera.position.set(150, 150, 150);
camera.lookAt(0, 0, 0);
// Create renderer
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
document.body.appendChild(renderer.domElement);
// Create groups
cityGroup = new THREE.Group();
vehiclesGroup = new THREE.Group();
scene.add(cityGroup);
scene.add(vehiclesGroup);
// Add lighting
addLights();
// Create fog for depth
scene.fog = new THREE.FogExp2(0x050518, 0.002);
// Create city elements
createGround();
createBuildings();
createStreets();
createVehicles();
createSkyline();
// Add event listeners
setupControls();
// Start animation loop
animate();
}
// Lighting setup
function addLights() {
// Ambient light
const ambientLight = new THREE.AmbientLight(0x404040, 0.5);
scene.add(ambientLight);
// Directional light (moonlight)
const moonLight = new THREE.DirectionalLight(0x8888ff, 0.5);
moonLight.position.set(100, 200, 100);
moonLight.castShadow = true;
moonLight.shadow.mapSize.width = 1024;
moonLight.shadow.mapSize.height = 1024;
moonLight.shadow.camera.near = 10;
moonLight.shadow.camera.far = 500;
moonLight.shadow.camera.left = -100;
moonLight.shadow.camera.right = 100;
moonLight.shadow.camera.top = 100;
moonLight.shadow.camera.bottom = -100;
scene.add(moonLight);
// Add point lights of various colors to simulate city lights
addCityLights();
}
// Add city lights
function addCityLights() {
const colors = [
0xff0000, 0x00ff00, 0x0000ff, 0xffff00, 0xff00ff, 0x00ffff,
0xffffff,
];
// Street lights
for (let i = 0; i < 30; i++) {
const x = (Math.random() - 0.5) * 200;
const z = (Math.random() - 0.5) * 200;
const streetLight = new THREE.PointLight(0xffffaa, 0.5, 30);
streetLight.position.set(x, 3, z);
scene.add(streetLight);
}
// Building lights
for (let i = 0; i < 50; i++) {
const x = (Math.random() - 0.5) * 200;
const y = 5 + Math.random() * 40;
const z = (Math.random() - 0.5) * 200;
const color =
colors[Math.floor(Math.random() * colors.length)];
const intensity = 0.2 + Math.random() * 0.5;
const distance = 10 + Math.random() * 20;
const buildingLight = new THREE.PointLight(
color,
intensity,
distance,
);
buildingLight.position.set(x, y, z);
scene.add(buildingLight);
}
}
// Create ground plane
function createGround() {
const groundGeometry = new THREE.PlaneGeometry(400, 400);
const groundMaterial = new THREE.MeshStandardMaterial({
color: 0x333333,
roughness: 0.8,
metalness: 0.2,
});
const ground = new THREE.Mesh(groundGeometry, groundMaterial);
ground.rotation.x = -Math.PI / 2;
ground.receiveShadow = true;
cityGroup.add(ground);
}
// Create buildings
function createBuildings() {
// Downtown area
createDowntown();
// Surrounding buildings
createSurroundingBuildings();
// Landmark building
createLandmarkBuilding();
}
// Create downtown area with skyscrapers
function createDowntown() {
// Create a grid of tall buildings
for (let x = -80; x <= 80; x += 30) {
for (let z = -80; z <= 80; z += 30) {
// Skip some positions to create streets
if (Math.abs(x) % 60 === 0 || Math.abs(z) % 60 === 0)
continue;
// Randomize building parameters
const width = 10 + Math.random() * 15;
const height = 20 + Math.random() * 80;
const depth = 10 + Math.random() * 15;
// Add some variation to positions
const xPos = x + (Math.random() - 0.5) * 10;
const zPos = z + (Math.random() - 0.5) * 10;
createBuilding(
xPos,
height / 2,
zPos,
width,
height,
depth,
);
}
}
}
// Create surrounding lower buildings
function createSurroundingBuildings() {
// Create outer areas with smaller buildings
for (let i = 0; i < 80; i++) {
const angle = Math.random() * Math.PI * 2;
const radius = 100 + Math.random() * 80;
const x = Math.cos(angle) * radius;
const z = Math.sin(angle) * radius;
const width = 5 + Math.random() * 15;
const height = 5 + Math.random() * 25;
const depth = 5 + Math.random() * 15;
createBuilding(x, height / 2, z, width, height, depth);
}
}
// Create a landmark tall building at the center
function createLandmarkBuilding() {
// Base
createBuilding(0, 50, 0, 25, 100, 25, 0x888899);
// Top section
createBuilding(0, 105, 0, 15, 30, 15, 0x8888aa);
// Spire
const spireGeometry = new THREE.ConeGeometry(3, 20, 8);
const spireMaterial = new THREE.MeshStandardMaterial({
color: 0xaaaacc,
metalness: 0.8,
roughness: 0.2,
});
const spire = new THREE.Mesh(spireGeometry, spireMaterial);
spire.position.set(0, 130, 0);
spire.castShadow = true;
cityGroup.add(spire);
// Beacon light
const beaconLight = new THREE.PointLight(0xff0000, 1, 50);
beaconLight.position.set(0, 140, 0);
scene.add(beaconLight);
}
// Helper function to create a building
function createBuilding(x, y, z, width, height, depth, color) {
// Create building geometry
const buildingGeometry = new THREE.BoxGeometry(
width,
height,
depth,
);
// Create building material with random color if not provided
const buildingColor =
color ||
new THREE.Color(
0.3 + Math.random() * 0.1,
0.3 + Math.random() * 0.1,
0.4 + Math.random() * 0.2,
);
const buildingMaterial = new THREE.MeshStandardMaterial({
color: buildingColor,
roughness: 0.7,
metalness: 0.2,
});
// Create building mesh
const building = new THREE.Mesh(
buildingGeometry,
buildingMaterial,
);
building.position.set(x, y, z);
building.castShadow = true;
building.receiveShadow = true;
cityGroup.add(building);
// Add window lights randomly to some buildings
if (Math.random() > 0.5 && height > 10) {
addBuildingWindows(x, y, z, width, height, depth);
}
return building;
}
// Add window lights to buildings
function addBuildingWindows(x, y, z, width, height, depth) {
const windowGeometry = new THREE.PlaneGeometry(1, 1);
const windowMaterial = new THREE.MeshBasicMaterial({
color: 0xffffcc,
opacity: 0.9,
transparent: true,
});
// Calculate number of windows based on building size
const windowsX = Math.floor(width / 3);
const windowsY = Math.floor(height / 4);
const windowsZ = Math.floor(depth / 3);
// Create windows on each side of the building
const sides = [
{ dir: "x", sign: 1, y: 0, z: 0 },
{ dir: "x", sign: -1, y: 0, z: 0 },
{ dir: "z", sign: 1, y: 0, x: 0 },
{ dir: "z", sign: -1, y: 0, x: 0 },
];
sides.forEach((side) => {
const isX = side.dir === "x";
const windowsHorizontal = isX ? windowsZ : windowsX;
for (let wx = 0; wx < windowsHorizontal; wx++) {
for (let wy = 0; wy < windowsY; wy++) {
// Skip some windows to create variation
if (Math.random() > 0.7) continue;
const window = new THREE.Mesh(
windowGeometry,
windowMaterial.clone(),
);
// Randomize window color slightly
if (Math.random() > 0.8) {
window.material.color.setHex(
[0xffffcc, 0xffcccc, 0xccffcc, 0xccccff][
Math.floor(Math.random() * 4)
],
);
}
// Position window on building face
let wx_pos, wy_pos, wz_pos;
if (isX) {
wx_pos = x + side.sign * (width / 2 + 0.01);
wy_pos = y - height / 2 + 2 + wy * 4;
wz_pos = z - depth / 2 + 1.5 + wx * 3;
window.rotation.y = Math.PI / 2;
} else {
wx_pos = x - width / 2 + 1.5 + wx * 3;
wy_pos = y - height / 2 + 2 + wy * 4;
wz_pos = z + side.sign * (depth / 2 + 0.01);
}
window.position.set(wx_pos, wy_pos, wz_pos);
cityGroup.add(window);
}
}
});
}
// Create streets
function createStreets() {
// Main streets
for (let i = -2; i <= 2; i++) {
// X-axis streets
createStreet(i * 60, 0, 0, 400, 20, 0);
// Z-axis streets
createStreet(0, 0, i * 60, 0, 20, 400);
}
// Street lamps
createStreetLamps();
}
// Create a street
function createStreet(x, y, z, width, depth, height) {
const streetGeometry = new THREE.BoxGeometry(
width,
0.1,
height,
);
const streetMaterial = new THREE.MeshStandardMaterial({
color: 0x333333,
roughness: 0.9,
metalness: 0,
});
const street = new THREE.Mesh(streetGeometry, streetMaterial);
street.position.set(x, 0.05, z);
street.receiveShadow = true;
cityGroup.add(street);
// Add road markings
addRoadMarkings(x, z, width, height);
}
// Add road markings
function addRoadMarkings(x, z, width, height) {
// Determine if this is an X or Z oriented street
const isXStreet = height > width;
// Set dimensions based on orientation
const markingLength = isXStreet ? 5 : width * 0.8;
const markingWidth = 1;
// Create geometry based on orientation
const markingGeometry = new THREE.PlaneGeometry(
isXStreet ? markingWidth : markingLength,
isXStreet ? markingLength : markingWidth,
);
const markingMaterial = new THREE.MeshBasicMaterial({
color: 0xffffff,
});
// For X-oriented streets (running along Z axis)
if (isXStreet) {
const numMarkings = Math.floor(height / 15); // One marking every 15 units
for (let i = 0; i < numMarkings; i++) {
const marking = new THREE.Mesh(
markingGeometry,
markingMaterial,
);
marking.rotation.x = -Math.PI / 2; // Rotate to lay flat
const zPos = z - height / 2 + i * 15 + 7.5; // Distribute evenly
marking.position.set(x, 0.1, zPos);
cityGroup.add(marking);
}
}
// For Z-oriented streets (running along X axis)
else {
const numMarkings = Math.floor(width / 15);
for (let i = 0; i < numMarkings; i++) {
const marking = new THREE.Mesh(
markingGeometry,
markingMaterial,
);
marking.rotation.x = -Math.PI / 2; // Rotate to lay flat
const xPos = x - width / 2 + i * 15 + 7.5; // Distribute evenly
marking.position.set(xPos, 0.1, z);
cityGroup.add(marking);
}
}
}
// Create street lamps
function createStreetLamps() {
// Place street lamps along the streets
for (let i = -2; i <= 2; i++) {
for (let j = -6; j <= 6; j++) {
if (j % 2 === 0) {
// X-axis streets
createStreetLamp(j * 30, i * 60);
// Z-axis streets
createStreetLamp(i * 60, j * 30);
}
}
}
}
// Create a street lamp
function createStreetLamp(x, z) {
// Pole
const poleGeometry = new THREE.CylinderGeometry(0.3, 0.3, 8, 8);
const poleMaterial = new THREE.MeshStandardMaterial({
color: 0x888888,
roughness: 0.7,
metalness: 0.3,
});
const pole = new THREE.Mesh(poleGeometry, poleMaterial);
pole.position.set(x, 4, z);
pole.castShadow = true;
cityGroup.add(pole);
// Lamp head
const headGeometry = new THREE.SphereGeometry(
0.8,
16,
8,
0,
Math.PI * 2,
0,
Math.PI / 2,
);
const headMaterial = new THREE.MeshStandardMaterial({
color: 0xaaaaaa,
roughness: 0.5,
metalness: 0.5,
});
const head = new THREE.Mesh(headGeometry, headMaterial);
head.position.set(x, 8, z);
head.rotation.x = Math.PI;
head.castShadow = true;
cityGroup.add(head);
// Light
const light = new THREE.PointLight(0xffffcc, 0.6, 15);
light.position.set(x, 7.8, z);
scene.add(light);
}
// Create vehicles that move along streets
function createVehicles() {
// Create 20 vehicles
for (let i = 0; i < 20; i++) {
// Determine street position and orientation
const onXStreet = Math.random() > 0.5;
const streetIndex = Math.floor(Math.random() * 5) - 2;
const streetPos = streetIndex * 60;
// Initial position on street
const alongStreet = (Math.random() - 0.5) * 180;
let x, z, direction;
if (onXStreet) {
x = alongStreet;
z = streetPos;
direction = alongStreet > 0 ? Math.PI : 0; // Direction based on position
} else {
x = streetPos;
z = alongStreet;
direction =
alongStreet > 0 ? Math.PI / 2 : -Math.PI / 2;
}
// Create the vehicle
createVehicle(x, z, direction, onXStreet);
}
}
// Create a single vehicle
function createVehicle(x, z, direction, onXStreet) {
const vehicleGroup = new THREE.Group();
// Car body
const bodyGeometry = new THREE.BoxGeometry(4, 1.5, 2);
// Random car color
const colors = [
0xff0000, 0x00ff00, 0x0000ff, 0xffff00, 0xff00ff, 0x00ffff,
0xffffff, 0x000000,
];
const bodyColor =
colors[Math.floor(Math.random() * colors.length)];
const bodyMaterial = new THREE.MeshStandardMaterial({
color: bodyColor,
roughness: 0.2,
metalness: 0.8,
});
const body = new THREE.Mesh(bodyGeometry, bodyMaterial);
body.position.y = 1;
body.castShadow = true;
vehicleGroup.add(body);
// Car roof
const roofGeometry = new THREE.BoxGeometry(2, 1, 1.8);
const roofMaterial = new THREE.MeshStandardMaterial({
color: bodyColor,
roughness: 0.2,
metalness: 0.8,
});
const roof = new THREE.Mesh(roofGeometry, roofMaterial);
roof.position.y = 2.25;
roof.position.x = -0.5;
roof.castShadow = true;
vehicleGroup.add(roof);
// Wheels
const wheelPositions = [
{ x: -1.2, y: 0.6, z: 1 },
{ x: -1.2, y: 0.6, z: -1 },
{ x: 1.2, y: 0.6, z: 1 },
{ x: 1.2, y: 0.6, z: -1 },
];
const wheelGeometry = new THREE.CylinderGeometry(
0.5,
0.5,
0.4,
12,
);
const wheelMaterial = new THREE.MeshStandardMaterial({
color: 0x111111,
roughness: 0.9,
metalness: 0.1,
});
wheelPositions.forEach((pos) => {
const wheel = new THREE.Mesh(wheelGeometry, wheelMaterial);
wheel.position.set(pos.x, pos.y, pos.z);
wheel.rotation.z = Math.PI / 2;
wheel.castShadow = true;
vehicleGroup.add(wheel);
});
// Headlights
const headlightGeometry = new THREE.SphereGeometry(0.2, 8, 8);
const headlightMaterial = new THREE.MeshBasicMaterial({
color: 0xffffff,
});
const headlightPositions = [
{ x: 2, y: 1, z: 0.7 },
{ x: 2, y: 1, z: -0.7 },
];
headlightPositions.forEach((pos) => {
const headlight = new THREE.Mesh(
headlightGeometry,
headlightMaterial,
);
headlight.position.set(pos.x, pos.y, pos.z);
vehicleGroup.add(headlight);
// Add headlight beam
const headlightBeam = new THREE.SpotLight(
0xffffee,
0.3,
20,
Math.PI / 6,
0.5,
);
headlightBeam.position.set(pos.x, pos.y, pos.z);
headlightBeam.target.position.set(pos.x + 10, pos.y, pos.z);
vehicleGroup.add(headlightBeam);
vehicleGroup.add(headlightBeam.target);
});
// Taillights (red)
const taillightGeometry = new THREE.SphereGeometry(0.2, 8, 8);
const taillightMaterial = new THREE.MeshBasicMaterial({
color: 0xff0000,
});
const taillightPositions = [
{ x: -2, y: 1, z: 0.7 },
{ x: -2, y: 1, z: -0.7 },
];
taillightPositions.forEach((pos) => {
const taillight = new THREE.Mesh(
taillightGeometry,
taillightMaterial,
);
taillight.position.set(pos.x, pos.y, pos.z);
vehicleGroup.add(taillight);
});
// Set vehicle position and rotation
vehicleGroup.position.set(x, 0, z);
vehicleGroup.rotation.y = direction;
// Add to vehicles group
vehiclesGroup.add(vehicleGroup);
// Add metadata for movement
vehicleGroup.userData = {
speed: 0.2 + Math.random() * 0.4,
onXStreet: onXStreet,
};
}
// Create skyline elements
function createSkyline() {
// Create stars in the night sky
createStars();
// Create moon
createMoon();
}
// Create stars
function createStars() {
const starsGeometry = new THREE.BufferGeometry();
const starsMaterial = new THREE.PointsMaterial({
color: 0xffffff,
size: 0.5,
transparent: true,
opacity: 0.8,
});
const starsVertices = [];
for (let i = 0; i < 1000; i++) {
const x = (Math.random() - 0.5) * 2000;
const y = Math.random() * 1000;
const z = (Math.random() - 0.5) * 2000;
starsVertices.push(x, y, z);
}
starsGeometry.setAttribute(
"position",
new THREE.Float32BufferAttribute(starsVertices, 3),
);
const stars = new THREE.Points(starsGeometry, starsMaterial);
scene.add(stars);
}
// Create moon
function createMoon() {
const moonGeometry = new THREE.SphereGeometry(20, 32, 32);
const moonMaterial = new THREE.MeshBasicMaterial({
color: 0xffffee,
});
const moon = new THREE.Mesh(moonGeometry, moonMaterial);
moon.position.set(500, 300, -400);
scene.add(moon);
// Add glow
const moonGlow = new THREE.PointLight(0xffffee, 0.3, 1000);
moonGlow.position.copy(moon.position);
scene.add(moonGlow);
}
// Setup controls
function setupControls() {
// Mouse controls for camera rotation
let isDragging = false;
let previousMousePosition = { x: 0, y: 0 };
let rotationSpeed = 0.003;
document.addEventListener("mousedown", (e) => {
isDragging = true;
previousMousePosition = { x: e.clientX, y: e.clientY };
autoRotate = false;
});
document.addEventListener("mousemove", (e) => {
if (isDragging) {
const deltaMove = {
x: e.clientX - previousMousePosition.x,
y: e.clientY - previousMousePosition.y,
};
camera.position.x =
Math.cos(deltaMove.x * rotationSpeed) *
camera.position.x -
Math.sin(deltaMove.x * rotationSpeed) *
camera.position.z;
camera.position.z =
Math.sin(deltaMove.x * rotationSpeed) *
camera.position.x +
Math.cos(deltaMove.x * rotationSpeed) *
camera.position.z;
const rotationMatrix =
new THREE.Matrix4().makeRotationAxis(
new THREE.Vector3(1, 0, 0),
deltaMove.y * rotationSpeed,
);
camera.position.applyMatrix4(rotationMatrix);
camera.lookAt(0, 0, 0);
previousMousePosition = { x: e.clientX, y: e.clientY };
}
});
document.addEventListener("mouseup", () => {
isDragging = false;
});
// Scroll to zoom
document.addEventListener("wheel", (e) => {
const zoomSpeed = 0.1;
const distance = Math.sqrt(
camera.position.x * camera.position.x +
camera.position.z * camera.position.z,
);
const direction = new THREE.Vector3(
camera.position.x / distance,
camera.position.y / distance,
camera.position.z / distance,
);
if (e.deltaY > 0) {
// Zoom out
camera.position.x += direction.x * zoomSpeed * 10;
camera.position.y += direction.y * zoomSpeed * 10;
camera.position.z += direction.z * zoomSpeed * 10;
} else {
// Zoom in
camera.position.x -= direction.x * zoomSpeed * 10;
camera.position.y -= direction.y * zoomSpeed * 10;
camera.position.z -= direction.z * zoomSpeed * 10;
}
// Limit minimum and maximum zoom
const newDistance = Math.sqrt(
camera.position.x * camera.position.x +
camera.position.y * camera.position.y +
camera.position.z * camera.position.z,
);
if (newDistance < 50) {
camera.position.x = direction.x * 50;
camera.position.y = direction.y * 50;
camera.position.z = direction.z * 50;
} else if (newDistance > 400) {
camera.position.x = direction.x * 400;
camera.position.y = direction.y * 400;
camera.position.z = direction.z * 400;
}
camera.lookAt(0, 0, 0);
});
// Keyboard controls for camera movement
document.addEventListener("keydown", (e) => {
const moveSpeed = 5;
autoRotate = false;
switch (e.key) {
case "ArrowUp":
camera.position.y += moveSpeed;
break;
case "ArrowDown":
camera.position.y -= moveSpeed;
break;
case "ArrowLeft":
camera.position.x -= moveSpeed;
break;
case "ArrowRight":
camera.position.x += moveSpeed;
break;
}
camera.lookAt(0, 0, 0);
});
// Handle window resize
window.addEventListener("resize", () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});
}
// Update vehicles
function updateVehicles(deltaTime) {
vehiclesGroup.children.forEach((vehicle) => {
const { speed, onXStreet } = vehicle.userData;
// Move vehicle based on its direction
if (onXStreet) {
// Vehicle is traveling along X axis
if (vehicle.rotation.y === 0) {
// Moving in positive X direction
vehicle.position.x += speed * deltaTime;
// If reached edge of map, turn around
if (vehicle.position.x > 190) {
vehicle.rotation.y = Math.PI;
}
} else {
// Moving in negative X direction
vehicle.position.x -= speed * deltaTime;
// If reached edge of map, turn around
if (vehicle.position.x < -190) {
vehicle.rotation.y = 0;
}
}
} else {
// Vehicle is traveling along Z axis
if (vehicle.rotation.y === Math.PI / 2) {
// Moving in positive Z direction
vehicle.position.z += speed * deltaTime;
// If reached edge of map, turn around
if (vehicle.position.z > 190) {
vehicle.rotation.y = -Math.PI / 2;
}
} else {
// Moving in negative Z direction
vehicle.position.z -= speed * deltaTime;
// If reached edge of map, turn around
if (vehicle.position.z < -190) {
vehicle.rotation.y = Math.PI / 2;
}
}
}
// Animate wheels (optional)
vehicle.children.forEach((child) => {
if (
child.geometry &&
child.geometry.type === "CylinderGeometry" &&
child.geometry.parameters.radiusTop === 0.5
) {
child.rotation.x += speed * 0.1;
}
});
});
}
// Animation loop
function animate() {
requestAnimationFrame(animate);
// Get delta time for smooth animation regardless of frame rate
const deltaTime = clock.getDelta();
// Update vehicles
updateVehicles(deltaTime);
// Auto rotate camera if enabled
if (autoRotate) {
const radius = Math.sqrt(
camera.position.x * camera.position.x +
camera.position.z * camera.position.z,
);
camera.position.x =
Math.cos(cameraRotationSpeed) * camera.position.x -
Math.sin(cameraRotationSpeed) * camera.position.z;
camera.position.z =
Math.sin(cameraRotationSpeed) * camera.position.x +
Math.cos(cameraRotationSpeed) * camera.position.z;
camera.lookAt(0, 0, 0);
}
// Render scene
renderer.render(scene, camera);
}
// Start the application
init();
</script>
</body>
</html>
Deepseek r1’s Output
<!DOCTYPE html>
<html>
<head>
<title>3D Metropolitan City</title>
<style>
body { margin: 0; }
canvas { display: block; }
</style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script>
let scene, camera, renderer, city;
let dayCycle = true;
let lights = [];
function init() {
// Create scene
scene = new THREE.Scene();
// Create camera
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 50, 100);
// Create renderer
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x87CEEB);
document.body.appendChild(renderer.domElement);
// Create city
createCity();
// Add lights
const ambientLight = new THREE.AmbientLight(0x404040);
scene.add(ambientLight);
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
directionalLight.position.set(0, 100, 0);
scene.add(directionalLight);
// Add event listeners
window.addEventListener('resize', onWindowResize, false);
window.addEventListener('click', toggleDayCycle, false);
}
function createCity() {
city = new THREE.Group();
// Create buildings
const buildingGeometry = new THREE.BoxGeometry(5, 1, 5);
for(let x = -50; x < 50; x += 10) {
for(let z = -50; z < 50; z += 10) {
if(Math.random() > 0.3) {
const height = Math.random() * 30 + 10;
const building = new THREE.Mesh(
buildingGeometry,
new THREE.MeshPhongMaterial({
color: new THREE.Color(Math.random(), Math.random(), Math.random()),
transparent: true,
opacity: 0.8
})
);
building.scale.y = height;
building.position.set(x, height/2, z);
city.add(building);
}
}
}
// Create roads
const roadGeometry = new THREE.PlaneGeometry(100, 5);
const roadMaterial = new THREE.MeshPhongMaterial({ color: 0x444444 });
for(let z = -45; z <= 45; z += 10) {
const road = new THREE.Mesh(roadGeometry, roadMaterial);
road.rotation.x = -Math.PI / 2;
road.position.y = 0.1;
road.position.z = z;
city.add(road);
}
scene.add(city);
}
function animate() {
requestAnimationFrame(animate);
// Rotate camera around city
const time = Date.now() * 0.001;
camera.position.x = Math.cos(time * 0.3) * 100;
camera.position.z = Math.sin(time * 0.3) * 100;
camera.lookAt(scene.position);
// Update day/night cycle
if(dayCycle) {
renderer.setClearColor(new THREE.Color().setHSL(
(Math.sin(time * 0.2) + 1) / 2, 0.5, 0.3
));
}
renderer.render(scene, camera);
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function toggleDayCycle() {
dayCycle = !dayCycle;
renderer.setClearColor(dayCycle ? 0x87CEEB : 0x000000);
}
init();
animate();
</script>
</body>
</html>
I don’t think there should be any double-think here. Claude blows Deepseek r1 out of the water here.
Summary of coding abilities
Claude 3.7 Sonnet is hands down a better model at coding than Deepseek r1; for both Python and three code, Claude was far ahead of Deepseek r1. This is unsurprising, considering Anthropic has explicitly made Claude better at coding.
Writing
I have used both models extensively. Claude is a lot better for professional writing, especially technical stuff. Deepseek r1 is weirdly creative and more human. When writing your thesis or explaining any technical concept, Claude shines, while Deepseek r1 is better if you want to talk to them.
Final Verdict
•For reasoning and mathematics, Claude feels more structured and mature.
• Deepseek r1 has a less professional tone but is enough for most real-world tasks.
• The Claude 3.7 Sonnet is currently the best coding model. It writes faster, better, and more transparent code than other models.
• Claude is better at technical writing. However, Deepseek has a more human tone and approach.
Top comments (0)