开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何使用parcel.js运行p5.js代码？

Parcel.js是一个快速、零配置的Web应用打包工具，而p5.js是一个用于创作交互式图形和动画的JavaScript库。下面是使用Parcel.js运行p5.js代码的步骤：

首先，确保你的计算机已经安装了Node.js和npm（Node.js的包管理器）。你可以在Node.js官方网站上下载并安装最新版本的Node.js。
打开终端或命令提示符，进入你的项目目录。
在项目目录中，运行以下命令来初始化一个新的npm项目：

npm init -y

这将创建一个默认的package.json文件，用于管理项目的依赖。

接下来，安装Parcel.js和p5.js的依赖。运行以下命令：

npm install parcel-bundler p5

这将安装Parcel.js和p5.js到你的项目中。

创建一个新的HTML文件，例如index.html，并在文件中引入p5.js的库文件。你可以从p5.js官方网站上下载最新版本的库文件，或者使用以下CDN链接：

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>

在index.html文件中，创建一个p5.js的画布，并编写你的p5.js代码。例如：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>p5.js Example</title>
</head>
<body>
  <script>
    function setup() {
      createCanvas(400, 400);
      background(220);
    }

    function draw() {
      ellipse(mouseX, mouseY, 50, 50);
    }
  </script>
</body>
</html>

保存index.html文件。
在终端或命令提示符中，运行以下命令来启动Parcel.js的开发服务器：

npx parcel index.html

这将启动一个本地开发服务器，并自动打开你的网页。

现在，你可以在浏览器中看到你的p5.js代码运行的效果了。你可以通过修改index.html文件中的代码来进行实时调试和修改。

总结：使用Parcel.js运行p5.js代码的步骤如上所述。Parcel.js提供了零配置的打包工具，使得在开发过程中可以更加便捷地使用p5.js库。p5.js是一个强大的JavaScript库，用于创作交互式图形和动画。通过使用Parcel.js，你可以快速搭建一个开发环境，并实时预览和调试你的p5.js代码。

腾讯云相关产品和产品介绍链接地址：

腾讯云官网：https://cloud.tencent.com/
云服务器（CVM）：https://cloud.tencent.com/product/cvm
云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
云存储（COS）：https://cloud.tencent.com/product/cos
人工智能（AI）：https://cloud.tencent.com/product/ai
物联网（IoT）：https://cloud.tencent.com/product/iotexplorer
移动开发（移动推送、移动分析）：https://cloud.tencent.com/product/mobile
区块链（BCS）：https://cloud.tencent.com/product/bcs
元宇宙（Tencent XR）：https://cloud.tencent.com/product/xr

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

在github pages快速部署你的P5.js

最近在家也不能出门，突然想到自己之前hackathon上面用P5.js做的一些小项目，虽然在本地上面写完了，但是在演示环节还是要部署在网页上，因为我自己也没有接触过网页搭建，所以当时比赛的时候，硬生生的没搞出来，最后还是放在了Openprocessing上面，那可想而知，网站实在是太慢了，整个体验效果并不是很好，所以我也一直在琢磨着有没有什么别的方法可以快速实现呢。正好我最近也在研究一些GitHub的玩法，很多人都用github pages搭建自己的网站，那我也寻思了一下，是不是也可以用github pages部署自己的p5.js代码呢，稍微尝试了一下，发现还是很容易的。

02

p5.js 使用npm安装p5.js后如何使用？

在《p5.js 光速入门》中都是使用 CDN 的方式去使用 p5.js 的，不太符合当下的开发习惯。

01

p5.js 光速入门

本文的目标是和各位工友一起有序的快速上手 p5.js ，会讲解 p5.js 的基础用法。

04

p5.js 视频播放指南

在刚接触 p5.js 时我以为这只是一个艺术方向的 canvas 库，没想到它还支持视频文件和视频流的播放。

05

p5.js画布操作实战：创建，绑定指定元素，动态调整大小，隐藏滚动条，删除画布

学习本文前你需要具备一点 p5.js 的知识，想了解的请查看《p5.js 光速入门》。

04

p5.js 3D图形-立方体

前面写了几篇 p5.js 文章都还没涉及到3D图形，但其实 p5.js 是提供了基础的3D图形的。

04

p5.js 变换操作

在 canvas 里，变换是基础功能。很多基于 canvas 封装的库都有这功能，比如《Fabric.js 变换视窗》。

01

p5.js 状态管理

原生 canvas 提供了 save() 和 restore() 两个方法去管理画布状态。p5.js 作为一个 canvas 库，也理所当然的提供了状态管理的方法。在 p5.js 里这两个方法叫 push() 和 pop()。

02

伴随 P5.js 入坑创意编程

上一篇文章：填坑！完结娱乐圈明星关系图谱发布后，古柳印象里过往留下的坑貌似只剩下图像检索（一）：因缘际会与前瞻的后续实践代码（原文里给了参考代码链接）和在豆瓣Top250电影海报上的尝试效果了。

05

Parcel Vs Webpack

横空出世的Parcel近日成为了前端圈的又一大热点，在短短几周内就获得了13K的Star。作为前端构建工具新人的Parcel为什么能在短期内获得这么多赞同？他和老大哥Webpack比起来到底有什么优势呢？

02

p5.js 开发点彩画派的绘画工具

然后我又继续想啊想，想到我们用 canvas 好像也能做出一款点彩画的绘图工具，但用原生的方式写是不可能的，因为我懒。思前想后，还是觉得用 p5.js 写会好点，毕竟这个库也是个比较知名的艺术库。

03

从0到1教你如何使用 p5.js 绘制简单的动画

在本文中，我们将学习在 p5.js 中通过使用线条、矩形和椭圆来制作房屋的各个部分来制作房屋的简单动画。

03

在浏览器中使用TensorFlow.js和Python构建机器学习模型（附代码）

你最喜欢用什么工具来编写机器学习模型？数据科学家们对这个永恒的问题会给出各种不同的答案。一些人喜欢RStudio，另一些人更喜欢Jupyter Notebooks。我绝对属于后者。

00

独家 | 在浏览器中使用TensorFlow.js和Python构建机器学习模型（附代码）

本文首先介绍了TensorFlow.js的重要性及其组件，并介绍使用其在浏览器中构建机器学习模型的方法。然后，构建使用计算机的网络摄像头检测身体姿势的应用程序。

02

如何从广度与深度衡量打包工具的好坏

同时，在webpack势力范围之外，存在一些在某些方面很突出的打包工具满足一部分细分领域的需求。

03

p5.js 到底怎么设置背景图？

在《p5.js 光速入门》里我们学过加载图片元素，学过过背景色的用法，但当时没提到背景图要怎么使用。

03

使用 CCD 或 FABRIK 实现逆向动力学

动力学主要分为正向动力学（FK）和反向动力学（IK）。正向动力学实现起来十分简单，了解点基本原理，或者网上一搜，都能写出来。反向动力学中比较流行的方法则是 Cyclic Coordinate Descent（CCD）和 Forward And Backward Reaching Inverse Kinematics (FABRIK)。还有几何分析与雅可比矩阵的方法，计算起来比较复杂，用的不是太多。

02

比 Tesorflow 还强！？

Python是机器学习和深度学习的首选编程语言，但绝不是唯一。训练机器学习/深度学习模型并部署对外提供服务（尤其是通过浏览器）JavaScript 是一个不错的选择，市面上也出现了很多机器学习库，比较著名的就是谷歌的 TensorFlow.js。我在《用浏览器玩机器学习，赞！》一文中已详细介绍它的用法，感兴趣的同学可以去看看。

02

p5.js map映射

p5.js 为开发者提供了很多有用的方法，这些方法实现起来可能不难，但却非常实用，能大大减少我们的开发时间。

05

如何在p5.js里控制相机？

但是当学校课程要求（比如今年UCL的DFPI），或者没有其他前端基础的情况下，想把processing里的一些效果在网页上展示，这时候可能就不得不使用p5.js了。

02

Processing手部追踪

起初我以为牛兄是用 Processing Java 做的，我记得没有好用的手部识别库，而一个 OpenCV 识别脸部的还各种报错。是用 Kinect 做的吗？经过和牛兄的沟通，原来是使用 p5js 实现的，使用的是一个叫做Handtrack.js的一个 js 库。

05

canvas 状态管理

canvas 绘图时会根据当前状态来绘制。很多的 canvas 库都利用到这一特性。比如 p5.js 利用了 canvas 状态特性衍生出 push 和 pop 函数实现状态隔离（既然提到了，下一篇就讲这个）。

02

前端构建这十年

前端模块化/构建工具从最开始的基于浏览器运行时加载的 RequireJs/Sea.js 到将所有资源组装依赖打包 webpack/rollup/parcel的bundle类模块化构建工具，再到现在的bundleless基于浏览器原生 ES 模块的 snowpack/vite，前端的模块化/构建工具发展到现在已经快 10 年了。

01

AI实践精选：艺术家如何应用RNN（循环神经网络）创作AI化的艺术作品

文章导读：这篇文章不是为了全面深入的介绍循环神经网络（recurrent neural networks），而是为那些没有任何机器学习（machine learning）背景知识的读者提供一种思路，意在展示艺术家和设计师运用简单的Javascript和p5.js库构造预训练神经网络、进而创作出交互式数字作品的过程。引言近年来，对于那些富有创造性的群体来说，机器学习已经成为一种流行的工具。风格迁移（style transfer）、t-sne算法、自编码器（autoencoders）、生成对抗网络（

07

从0实现一个React（一）：JSX和虚拟DOM

React是前端最受欢迎的框架之一，解读其源码的文章非常多，但是我想从另一个角度去解读React：从零开始实现一个React，从API层面实现React的大部分功能，在这个过程中去探索为什么有虚拟DOM、diff、为什么setState这样设计等问题。

03

iOS小技能：和uni-app、unity的融合方案

技术点：unity导出的目标工程Unity-iPhone.xcodeproj 与原生进行融合

03

p5.js 渐变填充的实现方式

p5.js 作为一款艺术类的 canvas 库，对颜色方面的支持是挺下功夫的，比如本文要介绍的渐变方法。

02

Parcel.js + Vue 搭建笔记

去年（已经是三年前了！）年末便听得新一代打包工具 Parcel.js 的风风火火，今日（两年前的某一天）也终于得以静下心来试一试。

03

懒人Parcel

横空出世的Parcel，这几个月来成为了前端圈的又一大热点，github短短几个月就获得了上万的star.

01

扒一扒PROMISE的原理，大家不要怕！

在前端的日常工作中，回调函数（callback）应该是见怪不怪了，但是当回调函数遇上了异步（async），这就令人发指了。那么异步是什么意思呢，简单地说就是不等你执行完，就先执行下方的代码了。

02

[调研报告] 新一代前端构建工具汇总

说起前端构建，大家一定首先想到 Webpack，确实它是前端构建的老大哥了，大而全，什么场景都能满足，社区生态爆炸。但是社区里也有许多其他优秀的构建工具，他们或许不如 Webpack 那样“包治百病”，但他们都有一些独特的优势，如果在一些特定的场景你觉得使用 Webpack 太臃肿了，那你或许可以考虑下面的一些工具。

03

面向纯新手的TensorFlow.js速成课程

本课程由CodingTheSmartWay.com出品，在本系列的第一部分中，你将学到：

05

利用vuejs+element-ui+Parcel搭建自定义后台

公司内部的后台，和后台菜单都是利用java后台建设，无需要再自己写的后台界面，菜单java自动创建，只需要配置好url即可实现。估计很多小伙伴公司内部都是这样的搭配吧？所以我只需要知道url，和有一套验证机制就ok了。

01

Github 项目推荐 | Tensorflow.js 进化建模

这是 Siraj Raval 在 Youtube 上用 Tensorflow.js 实现Evolution建模的代码。

04

【Rust日报】2019-10-02 InfoQ 趋势报告- Rust 从创新阶段转变为早期采用阶段

Rust 已经从创新阶段转变为早期采用阶段，这主要是由于它在基础设施和网络数据平面空间(例如，Habitat和Linkerd 2.0)中的应用。Rust 语言也逐渐成为 WebAssembly 的天然合作伙伴，帮助提高人们的认识。此外 Facebook 选择使用 Rust 实现其 Libra 加密货币。

02

前端食堂技术周刊第 34 期：Node.js v18 、Nuxt 3 RC1、Parcel v2.5.0、计算机程序的构造和解释

Node.js 的每个 LTS 的版本代号都是以化学元素命名，按照首字母 A-Z 的顺序，这次的版本代号为 Hydrogen，翻译成中文是 "氢"。不过此版本目前还不是 LTS 版本，请勿在生产环境使用。

02

这篇手写 Promise 面试前一定要康康！

最近重温了一下 Q/Promise[1] 的设计讲解，结合自己的理解和一些小优化，决定也来写一篇手写 Promise 的文章。本文的内容适合对 Promise 的使用有一定了解的童鞋，因为过程中不会过多解释 Promise 的基础操作。我们从一个基础版本开始，渐进式地完成这个 Promise，在过程中分享我的理解和观点。内容可能有点长，废话不多说，我们开始吧。

03

动图展示 60+ 个前端常用插件库合集

https://segmentfault.com/a/1190000019151460

04

新一代构建工具(1)：对比rollup/parcel/esbuild—esbuild脱颖而出

字节前端是如何基于 ESBuild 的做现代化打包设计？ https://mp.weixin.qq.com/s/bS_qwiOIMqFN1sfuPKTUbA

02

从零实现简易版Webpack 什么是bundlerBundler实现思路实现bundler

市面上现在有很多bundler，最著名的就是webpack，此外常见的还有 browserify，rollup，parcel等。虽然现在的bundler进化出了各种各样的功能，但它们都有一个共同的初衷，就是能给前端引入模块化的开发方式，更好的管理依赖、更好的工程化。

01

「GPT-4.5」来了！地表最强Code Interpreter与Midjourney联动，5分做出大片｜附保姆级攻略

前段时间，GPT-4变笨引爆舆论，有人甚至把3小时25条额度一口气用完，也没有解决代码问题。

04

VS Code 调试完全攻略（6）：调试由 TypeScript 开发的 React

‍‍说到前端，我现在选择的武器是 React、TypeScript 和 Parcel trinity。这是一个简单、可靠而且高效的设置，只需最少的配置。本文将向你展示如何在 VS Code 中创建匹配的调试器。

02

JS逆向案例：破解登录密码

本人不是专业IT人员，但是对python爬虫这块非常感兴趣，在抖音上看了zhen老师的python全栈直播课程，果断选择加入zhen老师的VIP大家庭，给zhen老师投稿发文章还能挣钱，50元。废话不多说，进入主题。最近在学习JS逆向方面的知识，由于之前做过12306的自动抢票软件，因此对12306情有独钟🤭，接下来就给大家介绍一下12306用户登录密码的参数破解办法。首先我们打开12306的登录界面，打开抓包工具，输入用户名和一个错误的密码（例：123456），点击登录按钮并滑动验证码进行验证，在Aj

01

GPT-4写代码，DALL·E 3+MJ搞定画面，AI版「愤怒的南瓜」来袭

自 GPT 系列对话大模型以及 DALL・E、Midjourney 等文生图大模型兴起以来，基于它们的硬核、有趣二创应用花样频出，让普通人切身地体验到了大模型的魅力。

02

前端工程师学 Docker ？看这篇就够了!

Docker可以看成一个高性能的虚拟机，并且不会浪费资源，主要用于Linux环境的虚拟化，类似VBox这种虚拟机，不同的是Docker专门为了服务器虚拟化，并支持镜像分享等功能。前端工程师也可以用于构建代码等等

02

【Parcel 2 + Vue 3】从0到1搭建一款极快，零配置的Vue3项目构建工具

一周时间，没见了，大家有没有想我啊！哈哈！我知道肯定会有的。言归正传，我们切入正题。上一篇文章中我主要介绍了使用Vite2+Vue3+Ts如何更快的入手项目。那么，今天我将会带领大家认识一个新的Vue3项目构建工具——parcel-vue-cli。这是什么？怎么以前没有听说过。有这样的疑问其实并不奇怪，因为这个构建工具是我自己开发的。你可能会这样问：“你自己开发的？这么厉害吗”？是的，豆哥其实就这么厉害。开玩笑啦！其实没有你想得那么厉害。都是搬砖人，主要看思路。好，不扯了！本篇文章我将带大家如何从0到1开发一款极快，零配置的Vue3项目构建工具（parcel-vue-cli）。名字就这么记着吧！

03

美的计算 | 生成艺术创新设计的边界

媒介和技术的发展使设计艺术打破了原本界限：从静到动到可交互，从二维到三维到沉浸体验，技术结合设计形成的审美价值在未来是无止境的。视觉设计师们普遍形成了不断从文化、艺术中汲取风格和元素，采用计算机设计软件结合自定义传达内容在媒介载体上传播的工作模式。然而设计软件赋予了设计绚丽的视觉语言却也限制了内在的可能性：设计在不断反复之前出现的文化浪潮，许多设计因软件功能出现了泛同质化难以应对复杂多变的应用场景。现有的设计语言不够丰富，而生成艺术的发展优化了设计创造力的新路径。正如维拉·莫尔纳所言：“这听起来可能很矛盾

05

快速入门TensorFlow.js指南

TensorFlow.JS，之前就发现这个好玩的东东，但是一直没有时间去看，作为一名深度学习者，没有折腾的心是不行的。我们都知道深度学习在工业和实际项目中有着很好的应用，但是如果用深度学习去做些有趣的应用也是很好玩的。

06

关于Parcel你需要知道的所有内容：超快的Web应用打包器

本文最初发布于 Medium 上 freeCodeCamp 的博客站点，经原作者授权由 InfoQ 中文站翻译并分享。 📷 什么？又有一个打包器（bundler）/ 构建工具？是的——果真如此，演化和创新相结合为我们带来了 Parcel： https://parceljs.org/ 📷 Parcel 有什么特殊之处，为什么值得关注呢？ webpack 要有大量的配置，这样带来的成本就是复杂性——与此相对的，Parcel 带来了简洁性。Parcel 将自己标榜为“零配置”。 Parcel 内置了一个开发服务器

07

简单Web Demo项目搭建

最近用svg.js 做一些图形展示的demo，在vscode下搭个web的编码环境，支持语法补全和实时预览。

02

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭