Gemini 2.5 pro 的编码能力被称为地表最强,实力碾压Claude 3.7 sonnet 和o3,这个到底如何,我今天也想从几个问题一起来测试一下这个
借用网上比较好的一个例子,用了一个例子,可能有一些偏颇,仅供参考一下
创建一个简单的 JavaScript 脚本,用于可视化一个球在旋转的四维超立方体(Tesseract)内部弹跳的过程。当球碰撞到某一面时,需高亮显示该面以表示发生了撞击
Gemini 2.5 pro-0506
以下是生成的完整代码,我直接放上来
<!DOCTYPE html>
<html>
<head>
<title>Bouncing Ball in Tesseract</title>
<style>
body { margin: 0; overflow: hidden; background-color: #000; display: flex; justify-content: center; align-items: center; height: 100vh; }
canvas { border: 1px solid #333; }
</style>
</head>
<body>
<canvas id="tesseractCanvas"></canvas>
<script>
const canvas = document.getElementById('tesseractCanvas');
const ctx = canvas.getContext('2d');
let width, height;
const tesseractSize = 1; // Half-length of the tesseract edges
// --- Tesseract Geometry ---
const vertices = [];
for (let i = 0; i < 16; i++) {
vertices.push({
x: (i & 1) ? tesseractSize : -tesseractSize,
y: (i & 2) ? tesseractSize : -tesseractSize,
z: (i & 4) ? tesseractSize : -tesseractSize,
w: (i & 8) ? tesseractSize : -tesseractSize,
});
}
const edges = [];
for (let i = 0; i < 16; i++) {
for (let j = i + 1; j < 16; j++) {
let diff = 0;
if (vertices[i].x !== vertices[j].x) diff++;
if (vertices[i].y !== vertices[j].y) diff++;
if (vertices[i].z !== vertices[j].z) diff++;
if (vertices[i].w !== vertices[j].w) diff++;
if (diff === 1) {
edges.push([i, j]);
}
}
}
// --- Ball ---
const ball = {
pos: { x: 0, y: 0, z: 0, w: 0 },
vel: { x: 0.01, y: 0.015, z: 0.005, w: 0.008 },
radius: 0.1, // For visual representation, not true 4D radius
};
let collidedFaceInfo = null; // { dim: 0-3 (x,y,z,w), sign: -1 or 1 }
let highlightTimer = 0;
const HIGHLIGHT_DURATION = 30; // frames
// --- Rotation Angles ---
let angleXY = 0;
let angleZW = 0;
let angleXW = 0;
let angleYZ = 0;
// Add more angles for other planes if desired (XZ, YW)
// --- Projection Parameters ---
const perspectiveDistance = 4; // Distance for w-coordinate perspective
function resizeCanvas() {
width = Math.min(window.innerWidth, window.innerHeight) * 0.9;
height = width;
canvas.width = width;
canvas.height = height;
}
// --- 4D Rotation Functions ---
// Apply rotation to a 4D point {x, y, z, w}
function rotatePoint4D(point, rXY, rZW, rXW, rYZ) {
let x = point.x;
let y = point.y;
let z = point.z;
let w = point.w;
let newX, newY, newZ, newW;
// XY rotation
if (rXY) {
newX = x * Math.cos(rXY) - y * Math.sin(rXY);
newY = x * Math.sin(rXY) + y * Math.cos(rXY);
x = newX; y = newY;
}
// ZW rotation
if (rZW) {
newZ = z * Math.cos(rZW) - w * Math.sin(rZW);
newW = z * Math.sin(rZW) + w * Math.cos(rZW);
z = newZ; w = newW;
}
// XW rotation
if (rXW) {
newX = x * Math.cos(rXW) - w * Math.sin(rXW);
newW = x * Math.sin(rXW) + w * Math.cos(rXW);
x = newX; w = newW;
}
// YZ rotation
if (rYZ) {
newY = y * Math.cos(rYZ) - z * Math.sin(rYZ);
newZ = y * Math.sin(rYZ) + z * Math.cos(rYZ);
y = newY; z = newZ;
}
// Add other rotations (XZ, YW) here if needed
return { x, y, z, w };
}
// --- Projection Function (4D to 2D) ---
function project4Dto2D(point) {
// Perspective based on w
const wFactor = perspectiveDistance / (perspectiveDistance - point.w);
// Project to 3D using wFactor
let x3d = point.x * wFactor;
let y3d = point.y * wFactor;
let z3d = point.z * wFactor; // z can be used for depth cueing (e.g. line thickness or color)
// Simple orthographic projection from 3D to 2D (ignoring z3d for position)
// You could add another perspective projection here if desired
return {
x: x3d * (width / 4) + width / 2, // Scale and center
y: y3d * (height / 4) + height / 2, // Scale and center
scaleFactor: wFactor // Can be used for size/color changes
};
}
function updateBall() {
ball.pos.x += ball.vel.x;
ball.pos.y += ball.vel.y;
ball.pos.z += ball.vel.z;
ball.pos.w += ball.vel.w;
collidedFaceInfo = null; // Reset collision for this frame
// Collision detection and response
if (ball.pos.x > tesseractSize) {
ball.pos.x = tesseractSize; ball.vel.x *= -1;
collidedFaceInfo = { dim: 0, sign: 1 };
} else if (ball.pos.x < -tesseractSize) {
ball.pos.x = -tesseractSize; ball.vel.x *= -1;
collidedFaceInfo = { dim: 0, sign: -1 };
}
if (ball.pos.y > tesseractSize) {
ball.pos.y = tesseractSize; ball.vel.y *= -1;
collidedFaceInfo = { dim: 1, sign: 1 };
} else if (ball.pos.y < -tesseractSize) {
ball.pos.y = -tesseractSize; ball.vel.y *= -1;
collidedFaceInfo = { dim: 1, sign: -1 };
}
if (ball.pos.z > tesseractSize) {
ball.pos.z = tesseractSize; ball.vel.z *= -1;
collidedFaceInfo = { dim: 2, sign: 1 };
} else if (ball.pos.z < -tesseractSize) {
ball.pos.z = -tesseractSize; ball.vel.z *= -1;
collidedFaceInfo = { dim: 2, sign: -1 };
}
if (ball.pos.w > tesseractSize) {
ball.pos.w = tesseractSize; ball.vel.w *= -1;
collidedFaceInfo = { dim: 3, sign: 1 };
} else if (ball.pos.w < -tesseractSize) {
ball.pos.w = -tesseractSize; ball.vel.w *= -1;
collidedFaceInfo = { dim: 3, sign: -1 };
}
if (collidedFaceInfo) {
highlightTimer = HIGHLIGHT_DURATION;
}
}
function draw() {
ctx.fillStyle = '#000';
ctx.fillRect(0, 0, width, height);
// Rotate tesseract vertices
const rotatedVertices = vertices.map(v => rotatePoint4D(v, angleXY, angleZW, angleXW, angleYZ));
const projectedVertices = rotatedVertices.map(project4Dto2D);
// Draw edges
edges.forEach(edge => {
const v1 = vertices[edge[0]]; // Original vertices for face check
const v2 = vertices[edge[1]];
const p1 = projectedVertices[edge[0]];
const p2 = projectedVertices[edge[1]];
let edgeColor = 'rgba(255, 255, 255, 0.5)'; // Default edge color
let lineWidth = 1;
// Check if this edge is part of the currently highlighted face
if (highlightTimer > 0 && collidedFaceInfo) {
let onFace = false;
const dim = collidedFaceInfo.dim;
const sign = collidedFaceInfo.sign;
const val = tesseractSize * sign;
if (dim === 0 && v1.x === val && v2.x === val) onFace = true;
else if (dim === 1 && v1.y === val && v2.y === val) onFace = true;
else if (dim === 2 && v1.z === val && v2.z === val) onFace = true;
else if (dim === 3 && v1.w === val && v2.w === val) onFace = true;
if (onFace) {
edgeColor = `rgba(255, 0, 0, ${highlightTimer / HIGHLIGHT_DURATION})`; // Red highlight, fading
lineWidth = 2.5;
}
}
ctx.beginPath();
ctx.moveTo(p1.x, p1.y);
ctx.lineTo(p2.x, p2.y);
ctx.strokeStyle = edgeColor;
ctx.lineWidth = lineWidth * Math.min(p1.scaleFactor, p2.scaleFactor, 1.5); // Adjust line width by perspective
ctx.stroke();
});
// Draw ball
// The ball's position is in the Tesseract's local space.
// So, we need to rotate it with the Tesseract before projecting.
const rotatedBallPos = rotatePoint4D(ball.pos, angleXY, angleZW, angleXW, angleYZ);
const projectedBall = project4Dto2D(rotatedBallPos);
ctx.beginPath();
ctx.arc(projectedBall.x, projectedBall.y, ball.radius * width / 20 * projectedBall.scaleFactor, 0, Math.PI * 2);
ctx.fillStyle = 'rgba(0, 255, 255, 0.8)'; // Cyan ball
ctx.fill();
// Update angles for next frame
angleXY += 0.005;
angleZW += 0.003;
angleXW += 0.002;
angleYZ += 0.004;
if (highlightTimer > 0) {
highlightTimer--;
}
}
function gameLoop() {
updateBall();
draw();
requestAnimationFrame(gameLoop);
}
// Initialization
window.addEventListener('resize', resizeCanvas);
resizeCanvas();
gameLoop();
</script>
</body>
</html>
并且在最后做了解释+改进意见+运行方法
运行效果截图展示(感兴趣的小伙伴儿们可以直接复制上面的完整代码运行看动态效果)
Claude 3.7sonnet
给了html和javascript两部分代码
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tesseract - 超立方体内球体弹跳</title>
<style>
body { margin: 0; overflow: hidden; }
canvas { display: block; }
#info {
position: absolute;
top: 10px;
width: 100%;
text-align: center;
color: white;
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<div id="info">四维超立方体内球体弹跳可视化</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="script.js"></script>
</body>
</html>
// 主要渲染和场景设置
let scene, camera, renderer;
let tesseract, sphere;
let velocity = new THREE.Vector3(0.02, 0.03, 0.01);
let faceHighlights = [];
let originalFaceMaterials = [];
// 初始化函数
function init() {
// 创建场景
scene = new THREE.Scene();
scene.background = new THREE.Color(0x000000);
// 创建相机
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;
// 创建渲染器
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 添加光源
const ambientLight = new THREE.AmbientLight(0x404040);
scene.add(ambientLight);
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(1, 1, 1);
scene.add(directionalLight);
// 创建四维超立方体的3D投影 (立方体框架)
createTesseract();
// 创建球体
createSphere();
// 监听窗口大小变化
window.addEventListener('resize', onWindowResize);
// 开始动画
animate();
}
// 创建超立方体
function createTesseract() {
tesseract = new THREE.Group();
// 创建立方体骨架
const size = 1.5;
const geometry = new THREE.BoxGeometry(size, size, size);
const edges = new THREE.EdgesGeometry(geometry);
const line = new THREE.LineSegments(edges, new THREE.LineBasicMaterial({ color: 0x00ffff }));
tesseract.add(line);
// 创建立方体面
const faces = [];
// 前后面
faces.push(createFace(size/2, 0, 0, size, size, 0, 0x4444ff, 0.5));
faces.push(createFace(-size/2, 0, 0, size, size, 0, 0x4444ff, 0.5));
// 上下面
faces.push(createFace(0, size/2, 0, size, 0, size, 0xff4444, 0.5));
faces.push(createFace(0, -size/2, 0, size, 0, size, 0xff4444, 0.5));
// 左右面
faces.push(createFace(0, 0, size/2, size, size, 0, 0x44ff44, 0.5));
faces.push(createFace(0, 0, -size/2, size, size, 0, 0x44ff44, 0.5));
// 存储原始材质颜色
faces.forEach(face => {
tesseract.add(face);
originalFaceMaterials.push(face.material.clone());
faceHighlights.push({
face: face,
highlighted: false,
timer: 0
});
});
scene.add(tesseract);
}
// 创建立方体面
function createFace(x, y, z, width, height, depth, color, opacity) {
let geometry;
if (depth === 0) {
geometry = new THREE.PlaneGeometry(width, height);
} else if (height === 0) {
geometry = new THREE.PlaneGeometry(width, depth);
geometry.rotateX(Math.PI / 2);
} else {
geometry = new THREE.PlaneGeometry(height, depth);
geometry.rotateY(Math.PI / 2);
}
const material = new THREE.MeshBasicMaterial({
color: color,
transparent: true,
opacity: opacity,
side: THREE.DoubleSide
});
const plane = new THREE.Mesh(geometry, material);
plane.position.set(x, y, z);
return plane;
}
// 创建球体
function createSphere() {
const geometry = new THREE.SphereGeometry(0.1, 32, 32);
const material = new THREE.MeshPhongMaterial({ color: 0xffff00 });
sphere = new THREE.Mesh(geometry, material);
scene.add(sphere);
}
// 窗口大小变化时调整
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
// 检测球体与面的碰撞
function checkCollisions() {
const spherePos = sphere.position;
const size = 1.5;
const radius = 0.1;
// 检查每个面的碰撞
if (Math.abs(spherePos.x) + radius > size/2) {
velocity.x *= -1;
highlightFace(spherePos.x > 0 ? 0 : 1);
}
if (Math.abs(spherePos.y) + radius > size/2) {
velocity.y *= -1;
highlightFace(spherePos.y > 0 ? 2 : 3);
}
if (Math.abs(spherePos.z) + radius > size/2) {
velocity.z *= -1;
highlightFace(spherePos.z > 0 ? 4 : 5);
}
}
// 高亮显示被撞击的面
function highlightFace(faceIndex) {
if (faceIndex >= 0 && faceIndex < faceHighlights.length) {
const highlight = faceHighlights[faceIndex];
highlight.face.material.color.set(0xffffff);
highlight.face.material.opacity = 0.8;
highlight.highlighted = true;
highlight.timer = 0;
}
}
// 更新高亮状态
function updateHighlights() {
faceHighlights.forEach((highlight, index) => {
if (highlight.highlighted) {
highlight.timer++;
if (highlight.timer > 20) {
// 恢复原始颜色
highlight.face.material.copy(originalFaceMaterials[index]);
highlight.highlighted = false;
}
}
});
}
// 动画循环
function animate() {
requestAnimationFrame(animate);
// 让四维超立方体旋转
tesseract.rotation.x += 0.005;
tesseract.rotation.y += 0.01;
// 移动球体
sphere.position.x += velocity.x;
sphere.position.y += velocity.y;
sphere.position.z += velocity.z;
// 检测碰撞
checkCollisions();
// 更新高亮状态
updateHighlights();
// 渲染场景
renderer.render(scene, camera);
}
// 启动应用
init();
最后给了一个简答的说明
运行截图展示(没太整懂这个中间这个面是什么意思)
OpenAI o3
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8"/>
<title>Tesseract 内弹跳的小球</title>
<style>
body {margin:0;overflow:hidden;background:#000;}
#info {position:fixed;top:8px;left:8px;color:white;font-family:sans-serif;}
</style>
</head>
<body>
<div id="info">4-D Tesseract + 球碰撞演示 (Three.js)</div>
<script type="module">
import * as THREE from "https://cdn.jsdelivr.net/npm/three@0.158/build/three.module.js";
/* ====== 场景 / 相机 / 渲染器 ====== */
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(50, innerWidth/innerHeight, 0.1, 100);
camera.position.set(0,0,7);
const renderer= new THREE.WebGLRenderer({antialias:true});
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);
/* ====== 1. 构造 4D Tesseract 顶点 ====== */
const rawVerts4D = []; // 16 个 [x,y,z,w]
for(let x of [-1,1])
for(let y of [-1,1])
for(let z of [-1,1])
for(let w of [-1,1])
rawVerts4D.push([x,y,z,w]);
/* ====== 计算 32 条边 ====== */
function edgesFromVerts(verts){
const edges=[];
for(let i=0;i<verts.length;i++)
for(let j=i+1;j<verts.length;j++){
// 两个顶点只有一个坐标不同 ⇒ 它们连成一条边
const diff = verts[i].filter((v,idx)=>v!==verts[j][idx]).length;
if(diff===1) edges.push([i,j]);
}
return edges;
}
const edges = edgesFromVerts(rawVerts4D);
/* ====== Three.js 里的几何体 (只存 3D 投影坐标) ====== */
const geo = new THREE.BufferGeometry();
geo.setAttribute("position", new THREE.BufferAttribute(new Float32Array(edges.length*2*3),3));
const material = new THREE.LineBasicMaterial({color:0x888888});
const tesseractLine = new THREE.LineSegments(geo, material);
scene.add(tesseractLine);
/* ====== 2. 球 ====== */
const ballMesh = new THREE.Mesh(
new THREE.SphereGeometry(0.08, 16, 16),
new THREE.MeshBasicMaterial({color:0xffff00})
);
scene.add(ballMesh);
/* ====== 球的 4D 位置 & 速度 ====== */
let ballPos4 = new Float32Array([0.2, 0.3,-0.1, 0.4]);
let ballVel4 = new Float32Array([0.7,-0.6, 0.5,-0.8]);
const SPEED_SCALE = 0.7;
/* ====== 3. 4D → 3D 透视投影辅助 ====== */
/* 给 w 维度一个“超深度摄影平面”,值越接近 +1 看起来越近 */
const W_CAMERA = 3; // 越大,w 方向透视效果越弱
function project4Dto3D(v4){
// 简单一点:把 w 映射到一个透视因子 s,s = W_CAMERA / (W_CAMERA - w)
const s = W_CAMERA / (W_CAMERA - v4[3]);
return new THREE.Vector3(v4[0]*s, v4[1]*s, v4[2]*s);
}
/* ====== 4. 4D 旋转矩阵(仅两平面:XY 与 ZW)====== */
function rotate4D(v, t){ // v: [x,y,z,w],t: 时间(秒)
const a = t*0.4; // XY 平面角速度
const b = t*0.7; // ZW 平面角速度
// XY 旋转
let x = v[0]*Math.cos(a) - v[1]*Math.sin(a);
let y = v[0]*Math.sin(a) + v[1]*Math.cos(a);
// ZW 旋转
let z = v[2]*Math.cos(b) - v[3]*Math.sin(b);
let w = v[2]*Math.sin(b) + v[3]*Math.cos(b);
return [x,y,z,w];
}
/* ====== 5. 高亮逻辑 ====== */
const HIGHLIGHT_TIME = 400; // 毫秒
let activeAxis = null; // "x+","x-","y+","y-","z+","z-","w+","w-"
let highlightTimer=0;
/* ====== 6. 动画循环 ====== */
const clock = new THREE.Clock();
function animate(){
const dt = clock.getDelta();
const t = clock.elapsedTime;
/* --- 更新球 --- */
for(let i=0;i<4;i++){
ballPos4[i] += ballVel4[i]*dt*SPEED_SCALE;
if(ballPos4[i] > 1){
ballPos4[i] = 1;
ballVel4[i]*= -1;
activeAxis = ["x","y","z","w"][i] + "+";
highlightTimer = HIGHLIGHT_TIME;
}else if(ballPos4[i] < -1){
ballPos4[i] = -1;
ballVel4[i]*= -1;
activeAxis = ["x","y","z","w"][i] + "-";
highlightTimer = HIGHLIGHT_TIME;
}
}
/* --- 把球投影到 3D --- */
const ballProj = project4Dto3D( rotate4D(ballPos4, t) );
ballMesh.position.copy(ballProj);
/* --- 更新 tesseract 顶点位置 --- */
const posArr = geo.attributes.position.array;
let pIndex=0;
for(const [i,j] of edges){
const v1 = project4Dto3D( rotate4D(rawVerts4D[i], t) );
const v2 = project4Dto3D( rotate4D(rawVerts4D[j], t) );
// 写入缓冲区
posArr[pIndex++] = v1.x; posArr[pIndex++] = v1.y; posArr[pIndex++] = v1.z;
posArr[pIndex++] = v2.x; posArr[pIndex++] = v2.y; posArr[pIndex++] = v2.z;
}
geo.attributes.position.needsUpdate = true;
/* --- 根据碰撞结果决定颜色 --- */
if(highlightTimer>0){
highlightTimer -= dt*1000;
material.color.set(0xff3333); // 高亮红
}else{
material.color.set(0x888888); // 普通灰
}
renderer.render(scene,camera);
requestAnimationFrame(animate);
}
animate();
/* ====== 自适应窗口大小 ====== */
addEventListener("resize", ()=>{
camera.aspect = innerWidth/innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(innerWidth,innerHeight);
});
</script>
</body>
</html>
这里实际运行的时候发现给的https://cdn.jsdelivr.net/npm/three@0.158/build/three.module.js这个链接没办法打开,导致无法看到实际运行结果,所以我这边让更换了一下,给了我2个方案,我换了一个,最后可以打开了
运行截图展示
这个有一个问题,每次碰撞的时候,后全部红色高亮显示
DeepSeek r1
最后拿r1试了一下
<!DOCTYPE html>
<html>
<head>
<title>Tesseract Bouncing Ball</title>
<style>
canvas { background: #000; }
</style>
</head>
<body>
<canvas id="canvas" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
// 初始化四维超立方体
const vertices = Array.from({length: 16}, (_, i) => [
(i & 8) ? 1 : -1, // x
(i & 4) ? 1 : -1, // y
(i & 2) ? 1 : -1, // z
(i & 1) ? 1 : -1 // w
]);
const edges = vertices.reduce((acc, v, i) => {
for (let j = i+1; j < 16; j++)
if (v.reduce((d, c, k) => d + (c !== vertices[j][k]), 0) === 1)
acc.push([i, j]);
return acc;
}, []);
// 物理参数
let ballPos = [0, 0, 0, 0];
let ballSpeed = [0.02, 0.03, 0.04, 0.01];
let highlightEdges = new Set();
let collisionTimer = 0;
// 投影参数
const project = (v, angle) => {
const rotate4D = (p, a, b) => [
p[0]*Math.cos(a) - p[3]*Math.sin(a),
p[1]*Math.cos(b) - p[2]*Math.sin(b),
p[1]*Math.sin(b) + p[2]*Math.cos(b),
p[0]*Math.sin(a) + p[3]*Math.cos(a)
];
let p = rotate4D(v, angle, angle/2);
let scale = 2 + p[3];
return [
p[0]/scale * 300 + 400,
p[1]/scale * 300 + 300,
p[2]/scale * 300
];
};
// 动画循环
let angle = 0;
function animate() {
ctx.clearRect(0, 0, 800, 600);
// 更新球的位置和碰撞检测
ballPos = ballPos.map((p, i) => {
let newPos = p + ballSpeed[i];
if (Math.abs(newPos) > 1) {
ballSpeed[i] *= -1;
highlightEdges = new Set(edges.filter(([a, b]) =>
vertices[a][i] === Math.sign(newPos) &&
vertices[b][i] === Math.sign(newPos)
));
collisionTimer = 30;
return Math.sign(newPos) * 0.99;
}
return newPos;
});
// 绘制四维超立方体
ctx.strokeStyle = '#fff2';
edges.forEach(([a, b]) => {
let p1 = project(vertices[a], angle);
let p2 = project(vertices[b], angle);
ctx.beginPath();
ctx.moveTo(p1[0], p1[1]);
ctx.lineTo(p2[0], p2[1]);
ctx.stroke();
});
// 高亮碰撞面
if (collisionTimer-- > 0) {
ctx.strokeStyle = '#f00';
ctx.lineWidth = 2;
highlightEdges.forEach(([a, b]) => {
let p1 = project(vertices[a], angle);
let p2 = project(vertices[b], angle);
ctx.beginPath();
ctx.moveTo(p1[0], p1[1]);
ctx.lineTo(p2[0], p2[1]);
ctx.stroke();
});
ctx.lineWidth = 1;
}
// 绘制弹跳球
let ballProj = project(ballPos, angle);
ctx.fillStyle = `hsl(${angle*50}, 80%, 50%)`;
ctx.beginPath();
ctx.arc(ballProj[0], ballProj[1], 5 + ballProj[2]/2, 0, Math.PI*2);
ctx.fill();
angle += 0.02;
requestAnimationFrame(animate);
}
animate();
</script>
</body>
</html>
运行结果截图
r1生成的完全没看懂给是啥
就这个问题综合来讲,确实Gemini 2.5 pro一次生成的结果跟实际要求更相符
单纯就这一个问题来讲,效果排序是:Gemini 2.5 pro > o3 > xclaude 3.7 sonnet > DeepSeek r1
仅仅测试了一个编程项目,可能结果具有一定的偏颇,但是也是验证了Gemini 2.5 pro的代码能力确实可以了
如果还不好一次性都能用上这几个模型,同事做测评的话,可以看一下这个,我测评用的平台,国内外主流的最新大模型都有,直接再普通对话提问即可,欢迎一起来交流
DocGPT - 第二大脑GPT加真实论文库,自动生成论文报告等,可用于科研文献分析、学术报告、编程开发、写作等各个领域https://chat.phitrellis.com/chat