-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
81f4230
commit f233a2a
Showing
9 changed files
with
525 additions
and
4 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,66 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <title>Improved Ray Traced Scene</title> | ||
| <style> | ||
| body { background-color: #f0f0f0; margin: 0; overflow: hidden; } | ||
| canvas { display: block; margin: auto; } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <canvas id="sceneCanvas" width="400" height="300"></canvas> | ||
| <script> | ||
| const canvas = document.getElementById('sceneCanvas'); | ||
| const ctx = canvas.getContext('2d'); | ||
|
|
||
| // Light source position | ||
| const lightSource = {x: 300, y: 50}; | ||
|
|
||
| // Function to draw a sphere with shading | ||
| function drawSphere(x, y, radius, color, lightReflection = true) { | ||
| const gradient = ctx.createRadialGradient(x, y, 0, x, y, radius); | ||
| gradient.addColorStop(0, 'white'); // Highlight from light source | ||
| gradient.addColorStop(0.1, color); | ||
| gradient.addColorStop(1, 'black'); // Shadow on the opposite side | ||
|
|
||
| ctx.fillStyle = gradient; | ||
| ctx.beginPath(); | ||
| ctx.arc(x, y, radius, 0, Math.PI * 2); | ||
| ctx.fill(); | ||
|
|
||
| if (lightReflection) { | ||
| // Add a specular highlight | ||
| const highlightX = x - radius / 3; | ||
| const highlightY = y - radius / 3; | ||
| ctx.fillStyle = 'rgba(255,255,255,0.5)'; | ||
| ctx.beginPath(); | ||
| ctx.arc(highlightX, highlightY, radius / 5, 0, Math.PI * 2); | ||
| ctx.fill(); | ||
| } | ||
| } | ||
|
|
||
| // Draw red sphere with shading | ||
| drawSphere(200, 150, 50, 'red'); | ||
|
|
||
| // Draw blue sphere with shading | ||
| drawSphere(100, 170, 48, 'blue'); | ||
|
|
||
| // Improved reflection of red sphere on blue sphere | ||
| ctx.globalAlpha = 0.7; | ||
| ctx.fillStyle = 'rgba(255,0,0,0.5)'; | ||
| ctx.beginPath(); | ||
| // The reflection should be elliptical due to perspective and sphere curvature | ||
| ctx.ellipse(130, 180, 10, 15, Math.PI / 4, 0, Math.PI * 2); | ||
| ctx.fill(); | ||
|
|
||
| // Simple shadow for depth (this is very basic, real ray tracing would calculate this) | ||
| ctx.globalAlpha = 0.3; | ||
| ctx.fillStyle = 'black'; | ||
| ctx.beginPath(); | ||
| ctx.ellipse(205, 205, 40, 15, 0, 0, Math.PI * 2); // Shadow for red sphere | ||
| ctx.ellipse(105, 220, 38, 15, 0, 0, Math.PI * 2); // Shadow for blue sphere | ||
| ctx.fill(); | ||
| </script> | ||
| </body> | ||
| </html> |
53 changes: 53 additions & 0 deletions
53
blog/briefly-evaluating-qwq-preview/spat-llama-vision-90.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,53 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <title>Simple Scene</title> | ||
| </head> | ||
| <body> | ||
| <canvas id="sceneCanvas" width="400" height="300"></canvas> | ||
| <script> | ||
| const canvas = document.getElementById('sceneCanvas'); | ||
| const ctx = canvas.getContext('2d'); | ||
|
|
||
| // Light properties | ||
| const lightDirection = { x: -0.5, y: -1 }; | ||
| const lightIntensity = 1; | ||
| const ambientLight = 0.2; | ||
|
|
||
| function diffuseLighting(point) { | ||
| const dotProduct = (point.x * lightDirection.x + point.y * lightDirection.y); | ||
| return Math.max(dotProduct, ambientLight) * lightIntensity; | ||
| } | ||
|
|
||
| // Draw red sphere in the middle | ||
| ctx.fillStyle = 'red'; | ||
| ctx.beginPath(); | ||
| ctx.arc(200, 150, 50, 0, Math.PI * 2); | ||
|
|
||
| const gradientRed = ctx.createRadialGradient(200, 150, 0, 200, 150, 50); | ||
| gradientRed.addColorStop(0, 'rgb(255, 0, 0)'); // Surface color | ||
| gradientRed.addColorStop(1, 'rgba(255, 0, 0, 0.2)'); // Lighten towards the edge | ||
| ctx.fillStyle = gradientRed; | ||
| ctx.fill(); | ||
|
|
||
| // Draw blue sphere to the left | ||
| ctx.beginPath(); | ||
| ctx.arc(100, 170, 48, 0, Math.PI * 2); | ||
|
|
||
| const gradientBlue = ctx.createRadialGradient(100, 170, 0, 100, 170, 48); | ||
| gradientBlue.addColorStop(0, 'rgb(0, 0, 255)'); // Surface color | ||
| gradientBlue.addColorStop(1, 'rgba(0, 0, 255, 0.2)'); // Lighten towards the edge | ||
| ctx.fillStyle = gradientBlue; | ||
| ctx.fill(); | ||
|
|
||
| // Draw reflection of red sphere on blue sphere (simplified) | ||
| ctx.globalAlpha = 0.5; // Semi-transparent for the reflection effect | ||
| ctx.beginPath(); | ||
| ctx.arc(138, 206, 19, 0, Math.PI * 2); | ||
| ctx.fillStyle = 'rgba(255, 0, 0, 0.3)'; // Reflection color with alpha | ||
| ctx.fill(); | ||
|
|
||
| </script> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,46 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <title>Simple Scene</title> | ||
| <style> | ||
| body { | ||
| background-color: #000; /* Black background for better contrast */ | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| height: 100vh; | ||
| margin: 0; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <canvas id="sceneCanvas" width="400" height="300"></canvas> | ||
| <script> | ||
| const canvas = document.getElementById('sceneCanvas'); | ||
| const ctx = canvas.getContext('2d'); | ||
|
|
||
| // Function to draw a sphere with shading and highlight | ||
| function drawSphere(x, y, radius, color) { | ||
| const grd = ctx.createRadialGradient(x, y, 0, x, y, radius); | ||
| grd.addColorStop(0, 'white'); // Highlight at the center | ||
| grd.addColorStop(1, color); // Main color at the edge | ||
| ctx.fillStyle = grd; | ||
| ctx.beginPath(); | ||
| ctx.arc(x, y, radius, 0, Math.PI * 2); | ||
| ctx.fill(); | ||
| } | ||
|
|
||
| // Draw red sphere in the middle with shading and highlight | ||
| drawSphere(200, 150, 50, 'red'); | ||
|
|
||
| // Draw blue sphere to the left with shading and highlight | ||
| drawSphere(138, 170, 46, 'blue'); | ||
|
|
||
| // Simplified reflection of red sphere on blue sphere | ||
| ctx.globalAlpha = 0.5; // Semi-transparent for the reflection effect | ||
| drawSphere(129, 195, 18, 'red'); | ||
| </script> | ||
| </body> | ||
| </html> | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <title>Simple Scene</title> | ||
| </head> | ||
| <body> | ||
| <canvas id="sceneCanvas" width="400" height="300"></canvas> | ||
| <script> | ||
| const canvas = document.getElementById('sceneCanvas'); | ||
| const ctx = canvas.getContext('2d'); | ||
|
|
||
| // Draw red sphere in the middle | ||
| ctx.fillStyle = 'red'; | ||
| ctx.beginPath(); | ||
| ctx.arc(200, 150, 50, 0, Math.PI * 2); | ||
| ctx.fill(); | ||
|
|
||
| // Draw blue sphere to the left | ||
| ctx.fillStyle = 'blue'; | ||
| ctx.beginPath(); | ||
| ctx.arc(100, 170, 48, 0, Math.PI * 2); | ||
| ctx.fill(); | ||
|
|
||
| // Draw reflection of red sphere on blue sphere (simplified) | ||
| ctx.globalAlpha = 0.5; // Semi-transparent for the reflection effect | ||
| ctx.beginPath(); | ||
| ctx.arc(138, 206, 19, 0, Math.PI * 2); | ||
| ctx.fillStyle = 'red'; | ||
| ctx.fill(); | ||
| </script> | ||
| </body> | ||
| </html> |
Oops, something went wrong.