Skip to content

Commit bfc569a

Browse files
weijie-chenweijie-chen
committed
add cover perlin noise ball
1 parent 251b764 commit bfc569a

File tree

5 files changed

+504
-0
lines changed

5 files changed

+504
-0
lines changed

‎linear-algebra-with-python-book/css/styles.css

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
2+
* {
3+
margin: 0; /* Always Remove global margin */
4+
padding: 0; /* Always Remove global padding */
5+
box-sizing: border-box;
6+
text-decoration: none;
7+
border: none;
8+
outline: none;
9+
scroll-behavior: smooth;
10+
font-family: 'Raleway', 'Poppins', 'Roboto', sans-serif;
11+
}
12+
:root {
13+
--bg-color: #161616;
14+
--second-bg-color: #182538;
15+
--text-color: #e3e3e3ed;
16+
--main-color: #00ffee;
17+
--dark-slate-blue: #253B59;
18+
--medium-sky-blue: #14B5D9;
19+
--light-brown: #A6763C;
20+
--vermilion: #F2441D;
21+
--light-coral: #F29985;
22+
--dark-purple: #711c91;
23+
--vivid-magenta: #ea00d9;
24+
--alternate-magenta: #BD249B;
25+
--bright-cyan: #0abdc6;
26+
--dark-cerulean-blue: #133e7c;
27+
--midnight-blue: #091833;
28+
--profile-background: #19999C;
29+
}
30+
body {
31+
margin: 0;
32+
padding: 0;
33+
background-color: var(--bg-color);
34+
display: flex;
35+
flex-direction: column;
36+
justify-content: center;
37+
align-items: center;
38+
height: 100vh;
39+
color: var(--text-color);
40+
}
41+
42+
#scene-container {
43+
width: 100%;
44+
height: 80vh;
45+
background-color: var(--bg-color);
46+
}
47+
48+
#author-name {
49+
text-align: center;
50+
margin-top: 20px;
51+
}
52+
53+
#author-name h1 {
54+
font-size: 3em;
55+
margin: 0;
56+
font-weight: normal;
57+
}

‎linear-algebra-with-python-book/index.html

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<link href="https://fonts.googleapis.com" rel="preconnect">
5+
<link href="https://fonts.gstatic.com" rel="preconnect" crossorigin>
6+
<link
7+
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
8+
rel="stylesheet">
9+
<meta charset="UTF-8">
10+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
11+
<title>Linear Algebra With Python</title>
12+
<link rel="stylesheet" href="css/styles.css">
13+
</head>
14+
<body>
15+
<div id="scene-container"></div>
16+
<div id="author-name">
17+
<h1>Weijie Chen</h1>
18+
</div>
19+
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r126/three.min.js"></script>
20+
<script type="importmap">
21+
{
22+
"imports": {
23+
"three": "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js",
24+
"three/addons/": "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/"
25+
}
26+
}
27+
</script>
28+
<script type="module" src="scripts/cover-plot-1.js"></script>
29+
</body>
30+
</html>

‎linear-algebra-with-python-book/scripts/cover-plot-1.js

Lines changed: 143 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,143 @@
1+
import * as THREE from 'https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js';
2+
import { OrbitControls } from 'https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/controls/OrbitControls.js';
3+
4+
// Get the container element
5+
const container = document.getElementById('scene-container');
6+
7+
// Create the scene
8+
let scene = new THREE.Scene();
9+
10+
// Create a camera
11+
let camera = new THREE.PerspectiveCamera(75, container.clientWidth / container.clientHeight, 0.1, 1000);
12+
camera.position.set(0, 2, 5);
13+
14+
// Create a renderer
15+
let renderer = new THREE.WebGLRenderer({ antialias: true });
16+
renderer.setSize(container.clientWidth, container.clientHeight);
17+
container.appendChild(renderer.domElement);
18+
19+
// Add orbit controls for mouse interaction
20+
let controls = new OrbitControls(camera, renderer.domElement);
21+
22+
// Create a geometry
23+
let geometry = new THREE.SphereGeometry(2.3, 128, 128);
24+
25+
// Create a shader material
26+
const vertexShader = `
27+
varying vec3 vNormal;
28+
varying vec3 vPosition;
29+
uniform float time;
30+
uniform float noiseScale;
31+
32+
// Improved Perlin Noise Function
33+
vec3 mod289(vec3 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
34+
vec4 mod289(vec4 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
35+
vec4 permute(vec4 x) { return mod289(((x*34.0)+1.0)*x); }
36+
vec4 taylorInvSqrt(vec4 r) { return 1.79284291400159 - 0.85373472095314 * r; }
37+
38+
float snoise(vec3 v) {
39+
const vec2 C = vec2(1.0/6.0, 1.0/3.0);
40+
const vec4 D = vec4(0.0, 0.5, 1.0, 2.0);
41+
vec3 i = floor(v + dot(v, C.yyy) );
42+
vec3 x0 = v - i + dot(i, C.xxx);
43+
vec3 g = step(x0.yzx, x0.xyz);
44+
vec3 l = 1.0 - g;
45+
vec3 i1 = min( g.xyz, l.zxy );
46+
vec3 i2 = max( g.xyz, l.zxy );
47+
vec3 x1 = x0 - i1 + C.xxx;
48+
vec3 x2 = x0 - i2 + C.yyy;
49+
vec3 x3 = x0 - D.yyy;
50+
i = mod289(i);
51+
vec4 p = permute( permute( permute( i.z + vec4(0.0, i1.z, i2.z, 1.0 )) + i.y + vec4(0.0, i1.y, i2.y, 1.0 )) + i.x + vec4(0.0, i1.x, i2.x, 1.0 ));
52+
float n_ = 0.142857142857;
53+
vec3 ns = n_ * D.wyz - D.xzx;
54+
vec4 j = p - 49.0 * floor(p * ns.z * ns.z);
55+
vec4 x_ = floor(j * ns.z);
56+
vec4 y_ = floor(j - 7.0 * x_ );
57+
vec4 x = x_ *ns.x + ns.yyyy;
58+
vec4 y = y_ *ns.x + ns.yyyy;
59+
vec4 h = 1.0 - abs(x) - abs(y);
60+
vec4 b0 = vec4( x.xy, y.xy );
61+
vec4 b1 = vec4( x.zw, y.zw );
62+
vec4 s0 = floor(b0)*2.0 + 1.0;
63+
vec4 s1 = floor(b1)*2.0 + 1.0;
64+
vec4 sh = -step(h, vec4(0.0));
65+
vec4 a0 = b0.xzyw + s0.xzyw*sh.xxyy ;
66+
vec4 a1 = b1.xzyw + s1.xzyw*sh.zzww ;
67+
vec3 p0 = vec3(a0.xy,h.x);
68+
vec3 p1 = vec3(a0.zw,h.y);
69+
vec3 p2 = vec3(a1.xy,h.z);
70+
vec3 p3 = vec3(a1.zw,h.w);
71+
vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2,p2), dot(p3,p3)));
72+
p0 *= norm.x;
73+
p1 *= norm.y;
74+
p2 *= norm.z;
75+
p3 *= norm.w;
76+
vec4 m = max(0.6 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0);
77+
m = m * m;
78+
return 42.0 * dot( m*m, vec4( dot(p0,x0), dot(p1,x1), dot(p2,x2), dot(p3,x3) ) );
79+
}
80+
81+
void main() {
82+
vNormal = normal;
83+
vPosition = position;
84+
float speed = 0.5; // Adjust this value to change the speed
85+
vec3 newPosition = position + normal * snoise(position * noiseScale + time * speed) * 0.4;
86+
gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0);
87+
}
88+
`;
89+
90+
const fragmentShader = `
91+
varying vec3 vNormal;
92+
varying vec3 vPosition;
93+
94+
void main() {
95+
vec3 color1 = vec3(20.0 / 255.0, 181.0 / 255.0, 217.0 / 255.0); // #14B5D9
96+
vec3 color2 = vec3(189.0 / 255.0, 36.0 / 255.0, 155.0 / 255.0); // #BD249B
97+
float h = 0.5 + 0.5 * vPosition.y;
98+
vec3 color = mix(color1, color2, h);
99+
gl_FragColor = vec4(color, 1.0);
100+
}
101+
`;
102+
103+
const uniforms = {
104+
time: { value: 0.0 },
105+
noiseScale: { value: 1.0 }
106+
};
107+
108+
const material = new THREE.ShaderMaterial({
109+
uniforms: uniforms,
110+
vertexShader: vertexShader,
111+
fragmentShader: fragmentShader,
112+
wireframe: true
113+
});
114+
115+
const mesh = new THREE.Mesh(geometry, material);
116+
scene.add(mesh);
117+
118+
// Add lighting
119+
const ambientLight = new THREE.AmbientLight(0x404040);
120+
scene.add(ambientLight);
121+
122+
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
123+
directionalLight.position.set(5, 10, 7.5).normalize();
124+
scene.add(directionalLight);
125+
126+
let noiseSpeed = 0.02; // Change this value to control the speed
127+
128+
// Handle window resize
129+
window.addEventListener('resize', () => {
130+
camera.aspect = container.clientWidth / container.clientHeight;
131+
camera.updateProjectionMatrix();
132+
renderer.setSize(container.clientWidth, container.clientHeight);
133+
});
134+
135+
// Animation loop
136+
function animate() {
137+
requestAnimationFrame(animate);
138+
controls.update();
139+
uniforms.time.value += noiseSpeed;
140+
renderer.render(scene, camera);
141+
}
142+
143+
animate();

‎linear-algebra-with-python-book/scripts/cover-plot.js

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
// Set up the scene, camera, and renderer
2+
const scene = new THREE.Scene();
3+
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
4+
const renderer = new THREE.WebGLRenderer({ antialias: true });
5+
renderer.setSize(window.innerWidth, window.innerHeight * 0.8);
6+
document.getElementById('scene-container').appendChild(renderer.domElement);
7+
8+
// Set camera position
9+
camera.position.set(0, 20, 40);
10+
camera.lookAt(0, 0, 0);
11+
12+
// Create a grid of vectors (arrows) to represent the gradient field
13+
const arrowHelperArray = [];
14+
const arrowLength = 1.5;
15+
const gridSize = 10;
16+
const gridSpacing = 2;
17+
18+
for (let x = -gridSize; x <= gridSize; x += gridSpacing) {
19+
for (let y = -gridSize; y <= gridSize; y += gridSpacing) {
20+
for (let z = -gridSize; z <= gridSize; z += gridSpacing) {
21+
// Compute the gradient (example: f(x, y, z) = x^2 + y^2 + z^2)
22+
const gradient = new THREE.Vector3(2 * x, 2 * y, 2 * z).normalize();
23+
24+
// Create an arrow to represent the vector
25+
const arrowHelper = new THREE.ArrowHelper(
26+
gradient,
27+
new THREE.Vector3(x, y, z),
28+
arrowLength,
29+
0xffffff
30+
);
31+
32+
scene.add(arrowHelper);
33+
arrowHelperArray.push(arrowHelper);
34+
}
35+
}
36+
}
37+
38+
// Lighting for better visibility
39+
const ambientLight = new THREE.AmbientLight(0x404040);
40+
scene.add(ambientLight);
41+
42+
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
43+
directionalLight.position.set(1, 1, 1).normalize();
44+
scene.add(directionalLight);
45+
46+
// Animation loop
47+
function animate() {
48+
requestAnimationFrame(animate);
49+
50+
// Animate the gradient vectors
51+
arrowHelperArray.forEach(arrow => {
52+
// Apply a rotation to each vector over time
53+
arrow.setDirection(new THREE.Vector3(
54+
arrow.position.x + Math.sin(Date.now() * 0.001),
55+
arrow.position.y + Math.cos(Date.now() * 0.001),
56+
arrow.position.z + Math.sin(Date.now() * 0.001)
57+
).normalize());
58+
});
59+
60+
renderer.render(scene, camera);
61+
}
62+
63+
animate();
64+
65+
// Handle window resize
66+
window.addEventListener('resize', () => {
67+
renderer.setSize(window.innerWidth, window.innerHeight * 0.8);
68+
camera.aspect = window.innerWidth / window.innerHeight * 0.8;
69+
camera.updateProjectionMatrix();
70+
});

0 commit comments

Comments
 (0)