许昌网站开发,关键词指数查询,国家住房部和城乡建设部 网站首页,网页设计图片居右代码向 豆包 提问#xff1a;编写一个 p5.js 脚本#xff0c;模拟 42 个彩色小球在一个3D大球体内部弹跳。每个小球都应留下一条逐渐消失的轨迹。大球体应缓慢旋转#xff0c;并显示透明的轮廓线。请确保实现适当的碰撞检测#xff0c;使小球保持在球体内部。
cd p5-demo copy… 向 豆包 提问编写一个 p5.js 脚本模拟 42 个彩色小球在一个3D大球体内部弹跳。每个小球都应留下一条逐渐消失的轨迹。大球体应缓慢旋转并显示透明的轮廓线。请确保实现适当的碰撞检测使小球保持在球体内部。
cd p5-demo copy .\node_modules\p5\lib\p5.min.js . 编写 p5_3d_42_balls.html 如下
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title3D Bouncing Balls in Sphere/titlescript srcp5.min.js/script
/headbody
scriptlet balls [];let sphereRadius 200;let rotationSpeed 0.01;function setup() {createCanvas(800, 600, WEBGL);for (let i 0; i 42; i) {balls.push(new Ball());}}function draw() {background(0);rotateX(frameCount * rotationSpeed);rotateY(frameCount * rotationSpeed);// 绘制大球体stroke(255, 100);noFill();sphere(sphereRadius);// 更新并绘制小球for (let ball of balls) {ball.update();ball.display();}}class Ball {constructor() {this.pos p5.Vector.random3D().mult(random(0, sphereRadius));this.vel p5.Vector.random3D().mult(random(1, 3));this.color color(random(255), random(255), random(255));this.trail [];this.trailLength 20;}update() {this.pos.add(this.vel);// 碰撞检测let distanceToCenter this.pos.mag();if (distanceToCenter sphereRadius) {let normal this.pos.copy().normalize();this.vel.reflect(normal);// 确保小球回到球体内this.pos normal.mult(sphereRadius - 0.1); }// 更新轨迹this.trail.push(this.pos.copy());if (this.trail.length this.trailLength) {this.trail.shift();}}display() {// 绘制轨迹for (let i 0; i this.trail.length; i) {let alpha map(i, 0, this.trail.length, 255, 0);stroke(this.color.levels[0], this.color.levels[1], this.color.levels[2], alpha);if (i 0) {line(this.trail[i - 1].x, this.trail[i - 1].y, this.trail[i - 1].z, this.trail[i].x, this.trail[i].y, this.trail[i].z);}}// 绘制小球fill(this.color);noStroke();push();translate(this.pos.x, this.pos.y, this.pos.z);sphere(5);pop();}}
/script
/body
/html双击打开 p5_3d_42_balls.html 交互式分形树 描述: 创建一个分形树用户可以通过鼠标或键盘控制树的生长角度、分支长度等参数。 编写 p5_branch.html 如下 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titlep5 branch Example/titlescript srcp5.min.js/script
/head
body
script
// 创建分形树用户可以通过鼠标控制树的生长角度、分支长度等参数。function setup() {createCanvas(800, 600);angleMode(DEGREES);}function draw() {background(50);stroke(255);translate(width/2, height);branch(map(mouseX, 0, width, 50, 150));}function branch(len) {line(0, 0, 0, -len);translate(0, -len);if (len 4) {push();rotate(map(mouseY, 0, height, 20, 60));branch(len * 0.67);pop();push();rotate(-map(mouseY, 0, height, 20, 60));branch(len * 0.67);pop();}}
/script
/body
/html双击打开 p5_branch.html 动态波形生成器 描述: 创建一个动态波形用户可以通过鼠标或键盘控制波形的频率、振幅或颜色。 编写 p5_wave.html 如下 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titlep5 wave Example/titlescript srcp5.min.js/script
/head
body
scriptlet angle 0;let amplitude 100;let frequency 0.02;function setup() {createCanvas(windowWidth, windowHeight);}function draw() {background(0);noFill();stroke(255);strokeWeight(2);beginShape();for (let x 0; x width; x 10) {let y height / 2 sin(angle x * frequency) * amplitude;vertex(x, y);}endShape();angle 0.05;}function mouseMoved() {amplitude map(mouseY, 0, height, 50, 200);frequency map(mouseX, 0, width, 0.01, 0.1);}
/script
/body
/html双击打开 p5_wave.html
