p5.js本地环境配置

最新推荐文章于 2023-05-18 15:58:05 发布
最新推荐文章于 2023-05-18 15:58:05 发布
阅读量1k 收藏 3
点赞数
文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/youannnn/article/details/120496864
版权

p5.js本地环境配置

有个美术小朋友想学p5.js，这里写一下配本地环境的相关操作

环境

  • p5js (官网下载) 可能需要vpn下载
  • node v14.17.6 -x64版本
  • window10

配置步骤

  • 安装 node-v14.17.6-x64

    1. 双击node安装程序，进行安装（建议安装到非系统盘)

    2. 解压p5.zip

    3. 在windows搜索栏输入命令提示符，右键以管理员身份运行

在这里插入图片描述

  1. 在命令行里输入，安装基于node的http-server

    npm install http-server -g

    安装基于node的http-server服务，等待安装完成，你会看到

在这里插入图片描述

  1. 再在命令提示符里转到你的p5.zip解压的文件夹里（通过输入类似 d: 切换硬盘，通过cd切换文件夹目录，最终到p5/目录下）

  2. 安装成功之后继续输入，开启基于8800端口的http服务器

    http-server -p 8800

    你可以看到

在这里插入图片描述

  1. 这个时候打开浏览器，在地址栏输入 127.0.0.1:8800，就能够看到你写的p5.js效果了

  2. 这个时候可以修改 p5\empty-examplesketch.js 文件（可以下载sublime编辑器，或者写字板也行），刷新浏览器就能够看到实时写的效果啦

youannnn
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
p5.js学习笔记
weixin_45679408的博客
11-16 96
用于 p5.js 项目的在线代码编辑器。创建p5.js项目 在本地项目，然后在web端访问典型的 p5.js 项目由网页内容（包括 HTML 元素）的索引 .html、用于设置网页样式的以及用于 p5.js 草图的 JavaScript 代码的组成。
p5.js-web-editor:p5.j​​s Web编辑器，正式启动！
05-11
还提供以下语言的文档： 欢迎！ :waving_hand: :waving_hand_dark_skin_tone::waving_hand_medium_skin_tone::waving_hand_light_skin_tone::waving_hand_medium-dark_skin_tone::waving_hand_medium-light_skin_tone: p5.j​​s Web编辑器是一个用于进行创意编码的平台，其重点是使编码尽可能多地供所有人使用，包括艺术家，设计师，教育者，初学者以及任何想学习的人。 只需打开网站，您就可以开始编写p5.js草图而无需下载或配置任何内容。 通过限制功能和外观，设计编辑器时考虑到了简单性。 我们努力听取社区的意见，以推动编辑器的发展，并在每次更改时保持有意为之。 该编辑器是免费的和开源的。 我们还努力为社区提供尽可能多的所有权和控制权。 您可以下载草图，以便可以在本地编辑它们或在其他地方托管它们。 您还可以托管自己的编辑器版本，以控制其数据。 社区 p5.j​​s社区的新手？ 阅读我们的。 行为守则 p5.j​​s Web编辑
Atom-p5js-toolbar,p5js toolbar for atom.io，带有启动本地服务器的运行按钮和指向公共资源的快速链接.zip
09-18
Atom-p5js-toolbar.zip,p5js toolbar for atom.io，带有启动本地服务器的运行按钮和指向公共资源的快速链接P5JS工具栏,atom是一个用web技术构建的开源文本编辑器。
p5.js实现细胞免疫动画
qq_37987033的博客
11-22 763
使用p5绘制一个细胞免疫的流程，总共只花了半天多时间，动画效果比较简单，但麻雀虽小五脏俱全
P5.js开发之——环境
我的博客
02-09 572
一 概述 P5.js开发环境主要包含下面的内容： 描述信息 属性及常量 操作及功能 二 描述信息 2.1 元素列表 No 属性 说明 1 describe 描述执行的方法或内容 2 describeElement 描述执行的方法或内容 3 textOutput 描述屏幕画布内容 4 gridOutput 描述画布布局 2.2 示例 describe('pink square with red heart in the bottom right corner'); bac
p5.js初入门及理解
doudoudewang的专栏
10-14 4449
p5.js初入门及理解学习p5.js的初衷p5.js是什么p5.js和processing的区别p5.js的学习环境搭建p5.js如何在react，vue等环境中使用后续p5研究方向，感兴趣的可以一起交流 学习p5.js的初衷 作为前端可视化开发人员，需要掌握一些优秀的可视化库，感觉自己有必要学习一下 p5.js是什么 p5.js是开源的JavaScript可视化库，processing的js实现版本，这是p5的官方简体中文地址： https://p5js.org/zh-Hans/ 笔者了解到p5.js有很
processing-p5js-mode:在PDE中运行的p5.js代码的简单编辑器
05-09
p5.j​​s处理模式 在PDE中运行的代码的简单编辑器。 目标/标准 一种简单的p5.js入门方法，同时利用PDE及其Sketchbook的编辑功能来组织项目。 一个简单的编辑器，允许离线使用。 利用许多学校和实验室中已安装的PDE，并具有可从PDE内部轻松安装的模式（无需下载，解压缩，安装过程）。 一种方式支持，我们。 草图应始终可直接在文件夹中运行：无需导出或准备草图。 无论您对它的什么了解，这都不是的正式项目。 细节 此模式并非为灵活性而设计。 这也是教人们如何进行“适当的” JavaScript开发的一种方法，而不是PDE是教人们Java的一种方法。 像PDE中的所有内容一样，我们正在删除功能，以简化快速入门的过程，在更简单的范围内创建项目，并最大限度地提高快速尝试想法的能力。 下面的权衡是基于上述目标和标准的最佳解决方案。 当然，如果我们发现错误，这些内容可能会发生
p5.js-web-editor, 正在进行 p5.js 网络编辑器，即将进行.zip
09-17
p5.js-web-editor, 正在进行 p5.js 网络编辑器，即将进行 p5.js-网络编辑器这个项目目前正在开发中。 它将在( public ) 测试版发布时宣布。插件开发安装fork 这里存储库。将分支存储库和cd克隆到其中$ npm install安装MongoDB并确保它正在运行适
P5——p5.js的概念和环境搭建
mantou_riji的博客
01-18 1339
它继承了Processing语言的初衷，通过简单的编程即可表达数字创意。p5.js是一个以 Processing语言（java的图形化语言）为基础的。// 设置程序初始状态的代码（画布大小、刷新频率、色彩模式）// 图形绘制的功能代码（色彩填充、绘制图像）可以将cdn对应的文件下载到本地进行引入。
p5js代码库
10-18
交互式可视化工具，学习前端可视化入门代码库，非常简单有趣
p5.js-sound:p5.sound将处理方法引入了Web Audio和p5.js。 演示版
04-27
访问http://p5js.org/download/获得最新的p5官方发行版，其中包括最新的p5.sound。 声音图书馆这里更频繁地更新，我们偶尔会提供新版本之前，P5的发布周期。 贡献 这是一个开始成为贡献者的指南。 依存关系 p5....
基于 P5.js 的交互式人物换装小项目
01-06
基于 P5.js 的交互式人物换装小项目,含换装部分及一个背景画板，并合成动画
p5.js入门教程之图片加载
11-28
一、preload()函数与图片上传 preload()函数是一个特殊的函数，它同setup()类似，只在程序开始时运行一次，但顺序在setup()之前。 一般我们会将媒体文件（图片、声音）加载的语句放在preload()中，因为preload()有一...
p5.js入门教程之鼠标交互的示例
10-18
主要介绍了p5.js入门教程之鼠标交互的示例,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
p5.js绘制创意自画像
10-16
主要为大家详细介绍了p5.js绘制创意自画像，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
移动端显示p5.js
weixin_40581859的博客
06-08 718
移动端显示p5.js 编辑器：vs code＋vs code的 live server 插件 操作系统：osx 准备工作： （1）在vs code中下载live server 插件 （2）将电脑连接上手机热点 （3）新建html文件并复制下面代码，保存文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" conten
flask+p5.js 网页开发 pycharm mac环境
bui ~
05-18 615
这样你访问http://127.0.0.1:5000/index就会返回自己写好的html文件。选好自己的Base interpreter选自己下载好的python版本。所以我不能安装8.0.32，这个必须Mac 13，所以要选一下。file ----new file ----新建flask项目。根据mac版本选择自己合适的mysql，否则容易报错。把自己的debug模式打开。2、打开自己的circle.js文件复制进去。⚠️需要注意的是你先看看自己mac的版本。注意一下这个p5.js是自己下载的。
p5.js 使用npm安装p5.js后如何使用？
weixin_39415598的博客
12-29 650
本文简介 点赞 + 关注 + 收藏 = 学会了 在 《p5.js 光速入门》 中都是使用 CDN 的方式去使用 p5.js 的，不太符合当下的开发习惯。 不管是使用 Vue 还是 React，我们日常项目大部分应该都是使用脚手架的方式进行开发了，按照 《p5.js 光速入门》 的方式在 module 模式下使用 p5.js ，如果不出意外的话肯定是会出意外的！ 所以，本文会把 《p5.js 光速入门》 缺省的 module 开发模式补全。 环境搭建 为了方便，我将使用 vite 搭建一个原生项
p5.js实现绘画系统
最新发布
11-01
p5.js是一个基于JavaScript的创意编程库，可以实现绘画系统。使用p5.js，你可以通过编写代码来创建绘画、图形和动画。 要开始使用p5.js绘画系统，首先需要设置画布。你可以指定画布的大小、颜色和位置等属性。然后，你可以使用各种绘图函数来创建图形，如点、线、矩形、圆形和多边形等。你可以选择绘图的颜色、填充和边框的样式。 除了基本的形状，p5.js还提供了许多其他函数和属性来进行更复杂的绘图操作。例如，你可以使用图像函数来加载和显示图像，还可以使用贝塞尔曲线来创建平滑的曲线。此外，你还可以使用文本函数来添加文字，并使用动画函数来创建动态的图像效果。 p5.js还具有交互能力，你可以使用鼠标、键盘和触摸来控制绘图。通过检测用户的输入和交互，你可以实现与用户的互动绘图体验。 在p5.js绘画系统中，你可以使用变量、条件语句和循环等编程概念来实现更复杂的绘图逻辑。你可以根据特定的条件来绘制不同的图形，也可以使用循环来重复绘制相同的图案。 总而言之，p5.js提供了一个简单而强大的工具，使你能够创建自己的绘画系统。通过编写代码，你可以创建出独特的艺术作品和动画，并与用户进行互动。无论你是初学者还是有经验的开发者，p5.js都是一个值得尝试的绘画工具。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值