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

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

 向 豆包 提问:编写一个 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…...

RISC-V医疗芯片工程师复合型转型的路径与策略

从RISC-V到医疗芯片:工程师复合型转型的路径与策略 一、引言 1.1 研究背景 在科技快速发展的当下,芯片技术已然成为推动各行业进步的核心驱动力之一。其中,RISC-V 架构作为芯片领域的新兴力量,正以其独特的优势迅速崛起,对整个芯片产业的格局产生着深远影响。RISC-V 架…...

HTML 文本格式化

HTML 文本格式化 在构建网页的过程中&#xff0c;文本的格式化是一个至关重要的环节。HTML&#xff08;HyperText Markup Language&#xff09;提供了丰富的标签和属性来帮助我们实现各种文本格式化的需求。本文将详细介绍HTML中常见的文本格式化方法&#xff0c;包括字体、颜…...

基于RNN+微信小程序+Flask的古诗词生成应用

项目介绍 平台采用B/S结构&#xff0c;后端采用主流的Flask框架进行开发&#xff0c;古诗词生成采用RNN模型进行生成&#xff0c;客户端基于微信小程序开发。是集成了Web后台开发、微信小程序开发、人工智能&#xff08;RNN&#xff09;等多个领域的综合性应用&#xff0c;是课…...

【算法】图论 —— Dijkstra算法 python

引入 求非负权边的单源最短路 时间复杂度 O( m l o g n mlogn mlogn) 模板 https://www.luogu.com.cn/problem/P4779 import heapq as hq def dijkstra(s): # dis表示从s到i的最短路 dis [float(inf)] * (n 1) # vis表示i是否出队列 vis [0] * (n 1) q [] dis[s…...

Java:LocalDatTime(代替Calendar)、ZoneDateTime(时区时间)

文章目录 Local(代替Calendar)方法&#xff1a;获取当前代码 LocalDate&#xff08;年月日星期&#xff09;LocalTime&#xff08;时分秒纳秒&#xff09;LocalDateTime(最常用&#xff1a;年月日时分秒纳秒)ZoneId 时区表示方法 ZoneDateTime(时区时间)方法世界标准时间&#…...

HOW - React 如何在在浏览器绘制之前同步执行 - useLayoutEffect

目录 useEffect vs useLayoutEffectuseEffectuseLayoutEffect主要区别总结选择建议注意事项 useLayoutEffect 使用示例测量 DOM 元素的尺寸和位置示例&#xff1a;自适应弹出框定位 同步更新样式以避免闪烁示例&#xff1a;根据内容动态调整容器高度 图像或 Canvas 绘制前的准备…...

PyTorch系列教程:编写高效模型训练流程

当使用PyTorch开发机器学习模型时&#xff0c;建立一个有效的训练循环是至关重要的。这个过程包括组织和执行对数据、参数和计算资源的操作序列。让我们深入了解关键组件&#xff0c;并演示如何构建一个精细的训练循环流程&#xff0c;有效地处理数据处理&#xff0c;向前和向后…...

VS2019,VCPKG - 为VS2019添加VCPKG

文章目录 VS2019,VCPKG - 为VS2019添加VCPKG概述笔记前置条件迁出vcpkg到本地验证库安装更新已经安装的库删除指定的包安装VS2019能用的boostvcpkg 2025.02.14 版本可以给VS2019用用VCPKG的好处备注END VS2019,VCPKG - 为VS2019添加VCPKG 概述 开源工程用到了VCPKG管理的包。…...

linux下 jq 截取json文件信息

背景&#xff1a;通过‘登录名‘ 获取该对象的其他个人信息如名字。 环境准备&#xff1a;麒麟操作系统V10 jq安装包 jq安装包获取方式&#xff1a;yum install jq 或 使用附件中的rpm 或 git自行下载 https://github.com/stedolan/jq/releases/download/ 实现过程介绍&am…...

测试大语言模型在嵌入式设备部署的可能性-ollama本地部署测试

前言 当今各种大语言模型百花齐放&#xff0c;为了方便使用者更加自由的使用大模型&#xff0c;将大模型变成如同棒球棍一样每个人都能用&#xff0c;并且顺手方便的工具&#xff0c;本地私有化具有重要意义。 本次测试使用ollama完成模型下载&#xff0c;过程简单快捷。 1、进…...

C语言基础系列【21】memcpy、memset

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

云曦春季开学考复现(2025)

Crypto 划水的dp和dq 下载附件后是简单的RSA算法题&#xff0c;之所以说简单是因为给了公钥e 趁热打铁&#xff0c;昨天刚学的RSA&#xff0c;既然有p有q&#xff0c;也有e&#xff0c;而np*q&#xff0c;可以算出欧拉函数值phi&#xff08;p-1&#xff09;*&#xff08;q-1&…...

探秘 Netty 通信中的 SslHandler 类:保障网络通信安全的基石

引言 在当今数字化时代&#xff0c;网络安全是每一个应用程序都必须重视的关键因素。尤其是在数据传输过程中&#xff0c;防止数据被窃取、篡改至关重要。Netty 作为一个高性能的网络编程框架&#xff0c;为开发者提供了强大的功能来构建可靠的网络应用。其中&#xff0c;SslH…...

Llama factory微调后的模型怎么通过ollama发布

接上一篇博客:用Llama Factory单机多卡微调Qwen2.5时报torch.OutOfMemoryError: CUDA out of memory的解决办法_llama-factory cuda out of memory-CSDN博客 把Lora模块和其基模型merge到一起之后,就可以通过ollama之类的框架提供服务了。不过还是有些格式转换的工作要做: …...

ubuntu 20.04下ZEDmini安装使用

提前安装好显卡驱动和cuda&#xff0c;如果没有安装可以参考我的这两篇文章进行安装&#xff1a; ubuntu20.04配置YOLOV5&#xff08;非虚拟机&#xff09;_ubuntu20.04安装yolov5-CSDN博客 ubuntu20.04安装显卡驱动及问题总结_乌班图里怎么备份显卡驱动-CSDN博客 还需要提前…...

CmBacktrace的学习跟移植思路

学习移植CmBacktrace需要从理解其核心功能、适用场景及移植步骤入手&#xff0c;结合理论学习和实践操作。以下是具体的学习思路与移植思路&#xff1a; 一、学习思路 理解CmBacktrace的核心功能 CmBacktrace是针对ARM Cortex-M系列MCU的错误追踪库&#xff0c;支持自动诊断Har…...

Android Glide 缓存模块源码深度解析

一、引言 在 Android 开发领域&#xff0c;图片加载是一个极为常见且关键的功能。Glide 作为一款被广泛使用的图片加载库&#xff0c;其缓存模块是提升图片加载效率和性能的核心组件。合理的缓存机制能够显著减少网络请求&#xff0c;降低流量消耗&#xff0c;同时加快图片显示…...

蓝桥杯备赛:炮弹

题目解析 这道题目是一道模拟加调和级数&#xff0c;难的就是调和级数&#xff0c;模拟过程比较简单。 做法 这道题目的难点在于我们在玩这个跳的过程&#xff0c;可能出现来回跳的情况&#xff0c;那么为了解决这种情况&#xff0c;我们采取的方法是设定其的上限步数。那么…...

死锁问题分析工具

使用 gdb 调试 gdb ./your_program (gdb) run (gdb) thread apply all bt还可以分析pthread_mutex内部&#xff0c;查看owen字段分析哪个线程占用的锁&#xff0c;一个可能的 pthread_mutex 内部结构可以大致表示为&#xff1a; typedef struct pthread_mutex_t {int state; …...

装饰器模式--RequestWrapper、请求流request无法被重复读取

目录 前言一、场景二、原因分析三、解决四、更多 前言 曾经遇见这么一段代码&#xff0c;能看出来是把request又重新包装了一下&#xff0c;核心信息都不会改变 后面了解到这叫 装饰器模式&#xff08;Decorator Pattern&#xff09; &#xff1a;也称为包装模式(Wrapper Pat…...

MTK Android12 桌面上显示文件管理器图标

文章目录 需求解决 需求 在MTK平台上&#xff0c;Android12的文件管理器图标未显示在桌面&#xff0c;但在设置里面可以看到&#xff0c;文件管理器是安装的。根据客户要求&#xff0c;需要将文件管理器的图标显示在桌面上。解决 路径&#xff1a;packages/apps/DocumentsUI/…...

SpringBoot实现文件上传

1. 配置文件上传限制 application.yml spring:servlet:multipart:max-file-size: 10MBmax-request-size: 10MB2. 创建文件上传控制器 import org.springframework.web.bind.annotation.PostMapping; import org.springframework.web.bind.annotation.RestController; import…...

【开源免费】基于SpringBoot+Vue.JS青年公寓服务平台(JAVA毕业设计)

本文项目编号 T 233 &#xff0c;文末自助获取源码 \color{red}{T233&#xff0c;文末自助获取源码} T233&#xff0c;文末自助获取源码 目录 一、系统介绍二、数据库设计三、配套教程3.1 启动教程3.2 讲解视频3.3 二次开发教程 四、功能截图五、文案资料5.1 选题背景5.2 国内…...

django中视图作用和视图功能 以及用法

在 Django REST Framework(DRF)中,视图(View)是处理 HTTP 请求并返回响应的核心组件。DRF 提供了多种视图类,适用于不同的场景和需求。以下是 DRF 中常见的视图类及其作用、使用方法的详细说明: 一、DRF 视图的分类 DRF 的视图可以分为以下几类: 基于函数的视图(Func…...

大语言模型在患者交互任务中的临床使用评估框架

An evaluation framework for clinical use of large language models in patient interaction tasks An evaluation framework for clinical use of large language models in patient interaction tasks | Nature Medicine 2025.1 收到时间&#xff1a;2023 年 8 月 8 日 …...

Python—类class复习

Python——类&#xff08;class&#xff09;复习 根据类来创建对象的方法被称为实例化 因此学会使用类&#xff08;class&#xff09;来进行编程就是初步进入面向对象编程的大门 1.1 创建和使用类 首先编写一个小狗的简单类Dog&#xff0c;它表示的不是特定的小狗&#xff…...

QT | 信号与槽(超详解)

前言 对qt信号和槽的详细解释 &#x1f493; 个人主页&#xff1a;普通young man-CSDN博客 ⏩ 文章专栏&#xff1a;C_普通young man的博客-CSDN博客 ⏩ 本人giee: 普通小青年 (pu-tong-young-man) - Gitee.com 若有问题 评论区见&#x1f4dd; &#x1f389;欢迎大家点赞&am…...

Codecraft-17 and Codeforces Round 391 E. Bash Plays with Functions 积性函数

题目链接 题目大意 定义函数 f r ( n ) f_r(n) fr​(n) : 在 r 0 r0 r0时&#xff0c;为满足 p p p ⋅ \cdot ⋅ q n qn qn , 且 g c d ( p , q ) 1 gcd(p,q)1 gcd(p,q)1 的有序对 ( p , q ) (p,q) (p,q) 个数&#xff1b;在 r r r ≥ \geq ≥ 1 1 1时&#xff0…...

粉尘环境下的智能生产革命 ——助力矿山行业实现高效自动化作业

在矿山开采领域&#xff0c;运输系统是保障生产连续性的核心环节。然而&#xff0c;粉尘弥漫、环境恶劣、设备分散等问题&#xff0c;长期制约着矿山运输的效率与安全性。传统的集中式控制系统难以适应复杂工况&#xff0c;而远程分布式 IO 模块与 PLC 的深度融合&#xff0c;正…...

更新vscode ,将c++11更新到c++20

要在CentOS系统中安装最新版本的GCC&#xff0c;你可以使用SCL&#xff08;Software Collections&#xff09;仓库&#xff0c;它提供了开发工具的最新版本。以下是安装步骤&#xff1a; 1、 添加SCL仓库&#xff1a; 首先&#xff0c;添加CentOS的SCL仓库&#xff0c;该仓库…...

Numpy实训:读取并分析iris数据集中鸢尾花的相关数据

实训中相关数据集&#xff0c;请联系博主邮箱"1438077481qq.com"&#xff0c;在邮箱内发送"iris.csv"即可快速获取&#xff0c;无任何套路&#xff0c;秉承开源精神&#xff01; 1、导入模块 #导入模块 import numpy as np import csv 2、获取数据 iri…...

nats jetstream server code 分析

对象和缩写 jetstream导入两个对象&#xff1a;stream and consumer&#xff0c;在stream 之上构造jetstreamapi。在nats代码中&#xff0c;以下是一些常见的缩写 1.mset is stream 2.jsX is something of jetstream 3.o is consumer 代码分析 对于producer &#xff0c;发送…...

德鲁伊连接池

德鲁伊连接池&#xff08;Druid Connection Pool&#xff09;是一个开源的Java数据库连接池项目&#xff0c;用于提高数据库连接的性能和可靠性。德鲁伊连接池通过复用数据库连接、定时验证连接的可用性、自动回收空闲连接等机制&#xff0c;有效减少了数据库连接的创建和销毁开…...

Python从入门到精通1:FastAPI

引言 在现代 Web 开发中&#xff0c;API 是前后端分离架构的核心。FastAPI 凭借其高性能、简洁的语法和自动文档生成功能&#xff0c;成为 Python 开发者的首选框架。本文将从零开始&#xff0c;详细讲解 FastAPI 的核心概念、安装配置、路由设计、请求处理以及实际应用案例&a…...

C语言经典案例-菜鸟经典案例

1.输入某年某月某日&#xff0c;判断这一天是这一年的第几天&#xff1f; //输入某年某月某日&#xff0c;判断这一天是这一年的第几天&#xff1f; #include <stdio.h>int isLeapYear(int year) {// 闰年的判断规则&#xff1a;能被4整除且&#xff08;不能被100整除或…...

SpringBoot过滤器(Filter)的使用:Filter接口、FilterRegistrationBean类配置、@WebFilter注释

1、过滤器(Filter)的介绍 Spring Boot 的过滤器用于对数据进行过滤处理。通过 Spring Boot 的过滤器,程序开发人员不仅可以对用户通过 URL 地址发送的请求进行过滤处理(例如:过滤一些错误的请求或者请求中的敏感词等),而且可以对服务器返回的数据进行过滤处理(例如:压…...

采用内存局部性分配有什么好处?

内存分配时的局部性分配&#xff08;Locality of Allocation&#xff09;是指将相关的内存对象分配在相邻或相近的内存区域中。这种分配策略在现代计算机系统中具有显著的好处&#xff0c;主要体现在以下几个方面&#xff1a; 1. 提高缓存命中率 现代计算机系统依赖于多级缓存…...

一周热点-OpenAI 推出了 GPT-4.5,这可能是其最后一个非推理模型

在人工智能领域,大型语言模型一直是研究的热点。OpenAI 的 GPT 系列模型在自然语言处理方面取得了显著成就。GPT-4.5 是 OpenAI 在这一领域的又一力作,它在多个方面进行了升级和优化。 1 新模型的出现 GPT-4.5 目前作为研究预览版发布。与 OpenAI 最近的 o1 和 o3 模型不同,…...

分布式ETCD面试题及参考答案

目录 ETCD 适用的六大场景及其实现原理 ETCD 与 Redis 在分布式锁实现上的差异 解释 ETCD 的 Watch 机制及其应用场景 ETCD 如何实现服务发现?与 ZooKeeper 有何不同? ETCD 实现服务发现的方式 与 ZooKeeper 的不同 ETCD 的键值存储模型支持哪些操作? 为什么 ETCD 适…...

MySQL进阶-关联查询优化

采用左外连接 下面开始 EXPLAIN 分析 EXPLAIN SELECT SQL_NO_CACHE * FROM type LEFT JOIN book ON type.card book.card; 结论&#xff1a;type 有All ,代表着全表扫描&#xff0c;效率较差 添加索引优化 ALTER TABLE book ADD INDEX Y ( card); #【被驱动表】&#xff0…...

ESP32驱动OV3660摄像头实现EdgeImpulse图像识别(摄像头支持红外夜视、边缘AI计算)

目录 1、传感器特性 2、硬件原理图 3、驱动程序 ESP32-S3 AI智能摄像头模块是一款专为智能家居和物联网应用打造的高性能边缘AI开发模组。它集成了摄像头、麦克风、音频功放、环境光传感器和夜视补光灯,无需依赖云端即可实现本地化AI推理。 凭借TensorFlow Lite、YOLO和O…...

SpringSecurity认证授权完整流程

SpringSecurity认证流程&#xff1a;loadUserByUsername&#xff08;&#xff09;方法内部实现。 实现步骤&#xff1a; 构建一个自定义的service接口&#xff0c;实现SpringSecurity的UserDetailService接口。建一个service实现类&#xff0c;实现此loadUserByUsername方法。…...

java_了解反射机制

目录 1. 定义 2. 用途 3. 反射基本信息 4. 反射相关的类 4.1 class类&#xff08;反射机制的起源&#xff09; 4.1.1 Class类中的相关方法&#xff08;方法的具体使用在后面的示例中&#xff09; 4.2 反射的示例 4.2.1 获得Class对象的三种方式 4.2.2 反射的使用 Fiel…...

【赵渝强老师】管理MongoDB的运行

MongoDB提供了mongod命令用于启动MongoDB服务器端&#xff1b;而停止MongoDB服务器却可以通过几种不同的方式完成。下面分别进行介绍。 一、【实战】启动MongoDB服务器 通过执行下面的语句可以查看启动MongoDB服务器的帮助信息&#xff1a; mongod --help# 输出的信息如下&a…...

【学习思维模型】

学习思维模型 一、理解类模型二、记忆类模型三、解决问题类模型四、结构化学习模型五、效率与习惯类模型六、高阶思维模型七、实践建议八、新增学习思维模型**1. 波利亚问题解决四步法****2. 主动回忆(Active Recall)****3. 鱼骨图(因果图/Ishikawa Diagram)****4. MECE原则…...

阿里发布新开源视频生成模型Wan-Video,支持文生图和图生图,最低6G就能跑,ComFyUI可用!

Wan-Video 模型介绍&#xff1a;包括 Wan-Video-1.3B-T2V 和 Wan-Video-14B-T2V 两个版本&#xff0c;分别支持文本到视频&#xff08;T2V&#xff09;和图像到视频&#xff08;I2V&#xff09;生成。14B 版本需要更高的 VRAM 配置。 Wan2.1 是一套全面开放的视频基础模型&…...

安孚科技携手政府产业基金、高能时代发力固态电池,开辟南孚电池发展新赛道

安孚科技出手&#xff0c;发力固态电池。 3月7日晚间&#xff0c;安孚科技&#xff08;603031.SH&#xff09;发布公告称&#xff0c;公司控股子公司南孚电池拟与南平市绿色产业投资基金有限公司&#xff08;下称“南平绿色产业基金”&#xff09;、高能时代&#xff08;广东横…...

moodle 开源的在线学习管理系统(LMS)部署

一、Moodle 简介 Moodle&#xff08;Modular Object-Oriented Dynamic Learning Environment&#xff09;是一个开源的在线学习管理系统&#xff08;LMS&#xff09;&#xff0c;广泛应用于教育机构和企业培训。其核心功能包括课程管理、作业提交、在线测试、论坛互动和成绩跟…...

设备树的概念

可以理解为设备树的树干是系统总线&#xff0c;树枝上面是其他的不同的通信协议线。对于不同通信协议的设备挂载在对应的节点即可 在设备树出现以前&#xff0c;所有关于设备的具体信息都要写在驱动里&#xff0c;一旦外围设备变化&#xff0c;驱动代码就要重写。 ​ 引入了设…...