三句话生成 P5.js 粒子特效代码,人人都可以做交互式数字艺术

简介: 短短几分钟,两个完全不懂P5.js的人类,和通义灵码AI程序员一起,共同完成了有真实物理引擎和碰撞检测的3D仿真动画。人类扮演的角色更像产品经理和架构师,提出开发需求和迭代修改方案,而AI的作用更像码农,任劳任怨,熟练用各种编程语言完成技术底层的脏活累活。这只是AI编程的冰山一角,未来,每一个艺术家都能快速做出自己的创意原型,每一个数学老师都能轻松做出自己的教学动画。

前几天在上海西岸艺术中心的全球开发者先锋大会GDC2025,通义灵码的老朋友-@同济子豪兄受邀参会,并带领大家观看了本届大会两大重磅看点:具身智能人形机器人和 AI 程序员编程写代码。

观看视频:https://www.bilibili.com/video/BV1pcPqekEJ2/

此外,WayToAGI 社区的张梦飞老师也受邀与阿里云联合举办了 AI 实训营。子豪和张梦飞老师带现场的数十位零基础开发者,快速上手阿里云AI编程助手通义灵码。

image.png

通义灵码可以帮你解释祖传代码、实现复杂需求、智能帮改BUG、生成单元测试、提供优化建议、润色注释文档,分分钟就能开发出Python爬虫、Web网页、小游戏。

通义灵码的【智能问答】功能,接入了推理能力王炸的 DeepSeek-R1和DeepSeek-V3!DeepSeek 满血版在 VSCode 和 IDEA 中怎么用?手把手教程来了

来问问R1:

Prompt:推荐几个酷炫的P5.js特效,最好有互动性

AI瞬间生成出磁吸粒子风、流体画笔、流体波纹、声音可视化、互动分形树、火花爆炸的粒子特效。

image.png

image.png

image.png

每一个作品放在设计学院,都是让人眼前一亮的交互艺术作品!

通义灵码新上线的【AI程序员】功能,接入了阿里扛把子通义大模型 Qwen2.5 和DeepSeek-V3,几秒钟就可以对多个代码文件,自动增删改查。比如想可视化三体运动,AI程序员帮忙写出 js 和 html 代码,有一种三日凌空的随机和绚烂。帮忙写一个P5.js代码,实现三体运动的3D可视化,三个天体受到彼此万有引力的吸引,进而运动,并绘制出每个天体的轨迹。

image.png

image.png

还记得DeepSeek-R1刚发布的时候,国外大佬们都在测试【2D六边形里一个小球受重力碰撞反弹】的效果。

image.png

子豪和现场观众昊男一起,给AI上个强度,实现【100个小球在大球里碰撞反弹的3D】效果。

image.png

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

image.png

  • 第一步:在通义灵码【AI程序员】中提出初步需求,实现最基础的几何元素和物理碰撞检测;
  • 第二步:把2D动画变成3D动画;
  • 第三步:给小球赋予不同的颜色,并添加轨迹;
  • 第四步:增加【鼠标拖拽旋转视角,滚轮缩放视角】的3D操作;
  • 第五步:增加更多自定义需求,比如小球碰撞之后变成蓝色

image.png

image.png

短短几分钟,两个完全不懂P5.js的人类,和通义灵码AI程序员一起,共同完成了有真实物理引擎和碰撞检测的3D仿真动画。人类扮演的角色更像产品经理和架构师,提出开发需求和迭代修改方案,而AI的作用更像码农,任劳任怨,熟练用各种编程语言完成技术底层的脏活累活。

这只是AI编程的冰山一角,未来,每一个艺术家都能快速做出自己的创意原型,每一个数学老师都能轻松做出自己的教学动画。


下载体验通义灵码:https://lingma.aliyun.com/lingma/download

目录
打赏
0
2
2
1
12712
分享
相关文章
【Javascript系列】Terser除了压缩代码之外,还有优化代码的功能
Terser 是一款广泛应用于前端开发的 JavaScript 解析器和压缩工具,常被视为 Uglify-es 的替代品。它不仅能高效压缩代码体积,还能优化代码逻辑,提升可靠性。例如,在调试中发现,Terser 压缩后的代码对删除功能确认框逻辑进行了优化。常用参数包括 `compress`(启用压缩)、`mangle`(变量名混淆)和 `output`(输出配置)。更多高级用法可参考官方文档。
98 11
JavaScript 中通过Array.sort() 实现多字段排序、排序稳定性、随机排序洗牌算法、优化排序性能,JS中排序算法的使用详解(附实际应用代码)
Array.sort() 是一个功能强大的方法,通过自定义的比较函数,可以处理各种复杂的排序逻辑。无论是简单的数字排序,还是多字段、嵌套对象、分组排序等高级应用,Array.sort() 都能胜任。同时,通过性能优化技巧(如映射排序)和结合其他数组方法(如 reduce),Array.sort() 可以用来实现高效的数据处理逻辑。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
JavaScript中通过array.map()实现数据转换、创建派生数组、异步数据流处理、复杂API请求、DOM操作、搜索和过滤等,array.map()的使用详解(附实际应用代码)
array.map()可以用来数据转换、创建派生数组、应用函数、链式调用、异步数据流处理、复杂API请求梳理、提供DOM操作、用来搜索和过滤等,比for好用太多了,主要是写法简单,并且非常直观,并且能提升代码的可读性,也就提升了Long Term代码的可维护性。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
【通义灵码】三句话生成P5.js粒子特效代码,人人都可以做交互式数字艺术
我发掘出的通义灵码AI程序员新玩法:三句话生成P5.js粒子特效代码,人人都可以做交互式数字艺术
109 6
通过array.some()实现权限检查、表单验证、库存管理、内容审查和数据处理;js数组元素检查的方法,some()的使用详解,array.some与array.every的区别(附实际应用代码)
array.some()可以用来权限检查、表单验证、库存管理、内容审查和数据处理等数据校验工作,核心在于利用其短路机制,速度更快,节约性能。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
通过array.every()实现数据验证、权限检查和一致性检查;js数组元素检查的方法,every()的使用详解,array.some与array.every的区别(附实际应用代码)
array.every()可以用来数据验证、权限检查、一致性检查等数据校验工作,核心在于利用其短路机制,速度更快,节约性能。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
JavaScript中通过array.filter()实现数组的数据筛选、数据清洗和链式调用,JS中数组过滤器的使用详解(附实际应用代码)
用array.filter()来实现数据筛选、数据清洗和链式调用,相对于for循环更加清晰,语义化强,能显著提升代码的可读性和可维护性。博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
【译】如何编写避免垃圾开销的实时 JavaScript 代码
本文讲的是【译】如何编写避免垃圾开销的实时 JavaScript 代码,哇,这篇文章已经写了有很长一段时间了,十分感谢那些精彩的回复!其中有一些对于一些技术的指正,如使用 'delete' 。我知道了使用它可能会导致其他的降速问题,因此,我们在引擎中极少使用它。
1184 0

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等