当前位置： 首页 > news >正文

p5.js：模拟 n个彩色小球在一个3D大球体内部弹跳

news 2026/3/27 17:02:38

 向 豆包 提问：编写一个 p5.js 脚本，模拟 42 个彩色小球在一个3D大球体内部弹跳。每个小球都应留下一条逐渐消失的轨迹。大球体应缓慢旋转，并显示透明的轮廓线。请确保实现适当的碰撞检测，使小球保持在球体内部。

cd p5-demo
copy .\node_modules\p5\lib\p5.min.js .
编写  p5_3d_42_balls.html  如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>3D Bouncing Balls in Sphere</title><script src="p5.min.js"></script>
</head><body>
<script>let 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 lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>p5 branch Example</title><script src="p5.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 lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>p5 wave Example</title><script src="p5.min.js"></script>
</head>
<body>
<script>let 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 

相关文章：

p5.js：模拟 n个彩色小球在一个3D大球体内部弹跳

向 豆包 提问&#xff1a;编写一个 p5.js 脚本&#xff0c;模拟 42 个彩色小球在一个3D大球体内部弹跳。每个小球都应留下一条逐渐消失的轨迹。大球体应缓慢旋转&#xff0c;并显示透明的轮廓线。请确保实现适当的碰撞检测&#xff0c;使小球保持在球体内部。 cd p5-demo copy…...

编程日记 2025/3/9 22:30:06

Kali WebDAV 客户端工具——Cadaver 与 Davtest

1. 工具简介 在 WebDAV 服务器管理和安全测试过程中&#xff0c;Cadaver 和 Davtest 是两款常用的命令行工具。 Cadaver 是一个 Unix/Linux 命令行 WebDAV 客户端&#xff0c;主要用于远程文件管理&#xff0c;支持文件上传、下载、移动、复制、删除等操作。Davtest 则是一款…...

编程日记 2025/3/9 22:27:58

MySQL复习笔记

MySQL复习笔记 1.MySQL 1.1什么是数据库 数据库(DB, DataBase) 概念&#xff1a;数据仓库&#xff0c;软件&#xff0c;安装在操作系统&#xff08;window、linux、mac…&#xff09;之上 作用&#xff1a;存储数据&#xff0c;管理数据 1.2 数据库分类 关系型数据库&#…...

编程日记 2025/3/9 22:23:49

六十天前端强化训练之第十四天之深入理解JavaScript异步编程

欢迎来到编程星辰海的博客讲解 目录 一、异步编程的本质与必要性 1.1 单线程的JavaScript运行时 1.2 阻塞与非阻塞的微观区别 1.3 异步操作的性能代价 二、事件循环机制深度解析 2.1 浏览器环境的事件循环架构 核心组件详解&#xff1a; 2.2 执行顺序实战分析 2.3 Nod…...

编程日记 2025/3/9 22:21:47

集合论--形式化语言里的汇编码

如果一阶逻辑是数学这门形式化语言里的机器码&#xff0c;那么集合论就是数学这门形式化语言里的汇编码。 基本思想&#xff1a;从集合出发构建所有其它。 构建自然数构建整数构建有理数构建实数构建有序对、笛卡尔积、关系、函数、序列等构建确定有限自动机(DFA) 全景图 常…...

编程日记 2025/3/9 22:20:44

2025最新群智能优化算法：山羊优化算法（Goat Optimization Algorithm, GOA）求解23个经典函数测试集，MATLAB

一、山羊优化算法 山羊优化算法&#xff08;Goat Optimization Algorithm, GOA&#xff09;是2025年提出的一种新型生物启发式元启发式算法&#xff0c;灵感来源于山羊在恶劣和资源有限环境中的适应性行为。该算法旨在通过模拟山羊的觅食策略、移动模式和躲避寄生虫的能力&…...

编程日记 2025/3/9 22:16:39

MySQL数据实时同步至Elasticsearch的高效方案：Java实现+源码解析，一文搞定！

引言&#xff1a;为什么需要实时同步&#xff1f; MySQL擅长事务处理&#xff0c;而Elasticsearch&#xff08;ES&#xff09;则专注于搜索与分析。将MySQL数据实时同步到ES&#xff0c;可以充分发挥两者的优势&#xff0c;例如&#xff1a; 构建高性能搜索服务 实时数据分析…...

编程日记 2025/3/9 22:15:38

Spring-事务

Spring 事务 事务的基本概念 &#x1f539; 什么是事务&#xff1f; 事务是一组数据库操作&#xff0c;它们作为一个整体&#xff0c;要么全部成功&#xff0c;要么全部回滚。 常见的事务场景&#xff1a; 银行转账&#xff08;扣款和存款必须同时成功&#xff09; 订单系统…...

编程日记 2025/3/9 22:14:37

Git系列之git tag和ReleaseMilestone

以下是关于 Git Tag、Release 和 Milestone 的深度融合内容&#xff0c;并补充了关于 Git Tag 的所有命令、详细解释和指令实例&#xff0c;条理清晰&#xff0c;结合实际使用场景和案例。 1. Git Tag 1.1 定义 • Tag 是 Git 中用于标记特定提交&#xff08;commit&#xf…...

编程日记 2025/3/9 22:12:35

考研机试常见基本题型

1、求100以内的素数 sqrt()函数在cmath头文件中。 #include <iostream> #include <cmath> using namespace std;int main() {int count 0; // 用于统计素数的个数// 遍历 100 到 200 之间的每一个数for (int num 100; num < 200; num) {bool isPrime true…...

编程日记 2025/3/9 22:10:33

Android AudioFlinger（四）—— 揭开PlaybackThread面纱

前言&#xff1a; 继上一篇Android AudioFlinger&#xff08;三&#xff09;—— AndroidAudio Flinger 之设备管理我们知道PlaybackThread继承自Re’fBase&#xff0c; 在被第一次引用的时候就会调用onFirstRef&#xff0c;实现如下&#xff1a; void AudioFlinger::Playbac…...

编程日记 2025/3/9 22:09:32

C语言基础系列【20】内存管理

博主介绍&#xff1a;程序喵大人 35- 资深C/C/Rust/Android/iOS客户端开发10年大厂工作经验嵌入式/人工智能/自动驾驶/音视频/游戏开发入门级选手《C20高级编程》《C23高级编程》等多本书籍著译者更多原创精品文章&#xff0c;首发gzh&#xff0c;见文末&#x1f447;&#x1f…...

编程日记 2025/3/9 22:08:30

JavaScript基础-递增和递减运算符

在JavaScript编程中&#xff0c;递增&#xff08;&#xff09;和递减&#xff08;--&#xff09;运算符是用于对数值进行加一或减一操作的基础工具。它们简洁且强大&#xff0c;但如果不正确地使用&#xff0c;可能会导致混淆或错误。本文将详细介绍这两种运算符的不同形式及其…...

编程日记 2025/3/9 22:06:26

计算机毕业设计SpringBoot+Vue.js社区医疗综合服务平台(源码+文档+PPT+讲解)

温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 作者简介&#xff1a;Java领…...

编程日记 2025/3/9 21:59:17

3.6c语言

#define _CRT_SECURE_NO_WARNINGS #include <math.h> #include <stdio.h> int main() {int sum 0,i,j;for (j 1; j < 1000; j){sum 0;for (i 1; i < j; i){if (j % i 0){sum i;} }if (sum j){printf("%d是完数\n", j);}}return 0; }#de…...

编程日记 2025/3/9 21:54:13

Unity开发——CanvasGroup组件介绍和应用

CanvasGroup是Unity中用于控制UI的透明度、交互性和渲染顺序的组件。 一、常用属性的解释 1、alpha&#xff1a;控制UI的透明度 类型&#xff1a;float&#xff0c;0.0 ~1.0&#xff0c; 其中 0.0 完全透明&#xff0c;1.0 完全不透明。 通过调整alpha值可以实现UI的淡入淡…...

编程日记 2025/3/9 21:53:11

深度学习驱动的跨行业智能化革命：技术突破与实践创新

第一章 深度学习的技术范式演进与核心架构 1.1 从传统机器学习到深度神经网络的跨越 深度学习的核心在于通过多层次非线性变换自动提取数据特征，其发展历程可划分为三个阶段：符号主义时代的规则驱动（1950s-1980s）、连接主义时代的浅层网络（1990s-2000s）以及深度学习时代…...

编程日记 2025/3/9 21:52:10

php配置虚拟主机

在PHP中配置虚拟主机&#xff0c;通常是通过Apache或Nginx等Web服务器来进行设置的。下面我将分别介绍如何在Apache和Nginx中配置PHP虚拟主机。 1. Apache 配置虚拟主机 Apache是最常用的Web服务器之一&#xff0c;配置虚拟主机的步骤如下&#xff1a; 步骤一&#xff1a;确保A…...

编程日记 2025/3/9 21:47:06

RESTful API 设计指南

RESTful API 介绍 大佬的总结&#xff1a;RESTful API 设计指南 - 阮一峰的网络日志 json-server github地址 这里介绍一个快速搭建 REST API 服务的工具包 接口测试工具 介绍几个接口测试工具 apipost apifox postman https://www.apipost.cn/ (中文) https://www.apifox…...

编程日记 2025/3/9 21:46:04

在虚拟机上安装Hadoop

以下是在虚拟机上安装Hadoop的一般步骤&#xff1a; 准备工作 - 安装虚拟机软件&#xff1a;如VMware Workstation或VirtualBox等。 - 创建虚拟机&#xff1a;选择合适的操作系统镜像&#xff0c;如Ubuntu或CentOS等Linux发行版&#xff0c;为虚拟机分配足够的CPU、内存和磁盘…...

编程日记 2025/3/9 21:35:55

ElasticSearch查询集群及设置

Elasticsearch查询集群API示例 查看集群状态及监控 参考资料 https://www.elastic.co/guide/en/elasticsearch/reference/6.6/cluster-health.html https://www.elastic.co/guide/en/elasticsearch/reference/6.6/cluster-nodes-stats.html 查看集群状态 健康状态 curl -XGE…...

编程新知 2026/3/27 16:51:33

OpenClaw+Qwen3.5-4B-Claude：个人知识库自动更新系统

OpenClawQwen3.5-4B-Claude&#xff1a;个人知识库自动更新系统 1. 为什么需要自动化知识管理 作为一个技术从业者&#xff0c;我每天都会接触到大量信息——技术博客、论文摘要、行业动态、代码库更新等等。过去三年里&#xff0c;我尝试过各种笔记工具和知识管理方法&#…...

编程新知 2026/3/27 16:31:28

打破BIM模型Web化壁垒：Revit2GLTF的轻量化转换技术革新

打破BIM模型Web化壁垒&#xff1a;Revit2GLTF的轻量化转换技术革新 【免费下载链接】Revit2GLTF view demo 项目地址: https://gitcode.com/gh_mirrors/re/Revit2GLTF 在数字化建筑设计流程中&#xff0c;BIM模型的高效协作与展示一直是行业痛点。设计团队常常面临这样的…...

编程新知 2026/3/27 15:22:56

构建大规模数据导入系统：技术选型与工程实践

在现代数据密集型应用中&#xff0c;将海量数据高效、可靠地导入目标存储系统是一项基础但极具挑战的任务。表面上看&#xff0c;“写入数据库”只是一个简单的操作&#xff1b;然而&#xff0c;当数据规模达到TB级、业务逻辑涉及合并去重、系统架构包含多个存储引擎时&#xf…...

编程新知 2026/3/27 15:12:51

手把手调试Android触摸反馈：用Systrace和日志追踪小圆点显示的全过程

Android触摸反馈调试实战&#xff1a;从Systrace到Logcat的全链路追踪 在移动应用开发中&#xff0c;触摸反馈的准确性和即时性直接影响用户体验。当用户手指接触屏幕时&#xff0c;那个跟随指尖跳动的小圆点看似简单&#xff0c;背后却隐藏着复杂的系统级交互。本文将带你深入…...

编程新知 2026/3/27 13:04:54

HDMI设备开发必看：EDID/E-EDID数据结构全解析（附实战代码）

HDMI设备开发实战&#xff1a;EDID/E-EDID二进制解析与工程实现 当你的HDMI设备无法正确识别显示器分辨率时&#xff0c;屏幕闪烁或黑屏的瞬间是否让你抓狂&#xff1f;作为连接数字世界的桥梁&#xff0c;EDID&#xff08;Extended Display Identification Data&#xff09;就…...

编程新知 2026/3/27 12:40:49

Qwen3-0.6B-FP8效果展示：中英混合输入、长上下文保持、多轮记忆实测

Qwen3-0.6B-FP8效果展示&#xff1a;中英混合输入、长上下文保持、多轮记忆实测 1. 开篇&#xff1a;小模型&#xff0c;大能耐 你可能听过很多关于大语言模型的讨论&#xff0c;动辄几十亿、上百亿参数&#xff0c;部署起来对硬件要求极高。但今天我想跟你聊点不一样的——一…...

编程新知 2026/3/27 12:28:47

【实战解析】PVE无显卡启动后网络失联：从硬件自检到系统绑定的完整排障指南

1. 无显卡启动的硬件准备与BIOS调试 当你准备在Proxmox VE&#xff08;PVE&#xff09;环境下实现无显卡启动时&#xff0c;首先要确保硬件层面支持这个特性。我遇到过不少用户直接拔掉显卡就期待系统能正常启动&#xff0c;结果发现连最基本的网络连接都失效了。这其实是个典型…...

编程新知 2026/3/27 9:31:04

工业数智化转型路径：JBoltAI 工具与定制化服务实践

当前&#xff0c;我国工业数智化已进入高质量发展、规模化推广的新阶段&#xff0c;成为推动制造业转型升级、构建先进工业体系的核心动力。结合行业发展现状与企业实际需求&#xff0c;JBoltAI推出针对性数智化工具及定制服务&#xff0c;为工业企业转型提供实用支撑。一、工业…...

编程新知 2026/3/27 9:18:51

LeagueAkari终极教程：英雄联盟玩家的智能辅助工具完全指南

LeagueAkari终极教程&#xff1a;英雄联盟玩家的智能辅助工具完全指南 【免费下载链接】League-Toolkit 兴趣使然的、简单易用的英雄联盟工具集。支持战绩查询、自动秒选等功能。基于 LCU API。 项目地址: https://gitcode.com/gh_mirrors/le/League-Toolkit LeagueAkar…...

编程新知 2026/3/27 9:00:47