首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

我可以让我的p5.js draw()函数只运行一次,然后只单击一个按钮吗?

可以通过添加一个布尔变量来实现让p5.js draw()函数只运行一次的效果,然后通过单击按钮来控制这个变量的状态。

首先,在p5.js的全局范围内定义一个布尔变量,例如runDraw,并将其初始化为true

然后,在draw()函数中使用条件语句来判断是否运行draw()函数的内容。只有当runDrawtrue时,才执行draw()函数的内容。同时,在draw()函数的最后,将runDraw设置为false,以确保draw()函数只运行一次。

接下来,在HTML中添加一个按钮元素,并使用JavaScript监听按钮的点击事件。当按钮被点击时,将runDraw设置为true,以便再次运行draw()函数。

下面是一个示例代码:

代码语言:txt
复制
let runDraw = true;

function setup() {
  createCanvas(400, 400);
  // 创建按钮
  let button = createButton('运行draw()');
  button.mousePressed(runDrawOnce);
}

function draw() {
  if (runDraw) {
    // draw()函数的内容
    background(220);
    ellipse(width/2, height/2, 100, 100);
    // ...
    
    runDraw = false; // 设置为false,确保draw()函数只运行一次
  }
}

function runDrawOnce() {
  runDraw = true; // 当按钮被点击时,设置为true,以便再次运行draw()函数
}

这样,当页面加载时,draw()函数会运行一次。然后,通过点击按钮,可以再次运行draw()函数。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

p5.js 3D图形-立方体

纹理可以是图片,也可以是视频。先用图片资源举例。 加载资源需要在 preload() 这个生命周期里处理,在 《p5.js 光速入门》 里有讲到,忘记这知识点工友可以去看看。...光照效果 你没看错,p5.js 也有提供了光照效果在前面的文章没讲过光照效果,本文也不会讲这部分(要留到下一篇水文里讲),但工友们也可以先了解一下这部分内容。...除此之外,我们还要了解 frameCount,这是 p5.js 提供一个全局系统变量,它记录了 p5.js 运行了多少帧。...非常适合在掘金整活~ 案例1:Rotate Push Pop 第一个案例叫《Rotate Push Pop》,是 processing 一个例子,把他代码转成使用 p5.js 编写。....js 状态管理》 和 《p5.js map映射》 知识,工友们可以先自行理解,如果不明白的话再在评论区留下该例子注解。

2.2K40

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

然后又继续想啊想,想到我们用 canvas 好像也能做出一款点彩画绘图工具,但用原生方式写是不可能,因为懒。思前想后,还是觉得用 p5.js 写会好点,毕竟这个库也是个比较知名艺术库。...于是查了一下 p5.js api ,做了一个简陋版工具。...需要一个重置画布按钮。 监听鼠标点击和点击时移动位置。 根据鼠标点击和点击时移动位置创建圆形。 点击重置画布按钮将画布背景设置回白色。...主要工作就是以上几步,而且这几步都用了 p5.js 提供方法去实现。 主要用到生命周期有 setup 和 draw,这部分p5.js 光速入门 里有讲到。...p5.js,用法上和 npm 下载 p5.js 是有一丢丢区别的,想了解这方面知识可以看看 《p5.js 使用npm安装p5.js后如何使用?》

29431

p5.js 光速入门

因为官方文档主要讲解api用法,第一次接触p5.js工友可能不是那么容易将各个知识点串联起来。 本文在基于官方案例基础上,把觉得入门必学知识点过一遍,然后串起来搞一个小特效。...浏览器暂时接受 HTML、CSS 和 JavaScript,如果能将 Processing 直接搬上浏览器运行的话,对于艺术家来说是大大好事。于是,p5.js 应运而生!...这个插件可以帮我们快速启动一个服务端运行当前页面,并具备热更新能力。启动完服务,在浏览器运行指定页面后,你代码一次保存,浏览器都会自动刷新。...setup() 在每个页面都只能出现一次,并且它不能在一开始执行后再次被调用。 更多说明可查看 setup()说明文档 绘图 draw draw() 是 p5.js 里另一个很重要函数。...一个是写在 setup() 里,在初始化画布时可以设置画布背景色。 还可以写在 draw() 里,每次刷新画布都可以设置画布背景色。写在 draw() 里,画布每次刷新都会重新设置一次背景色。

5.1K41

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

画布绑定指定元素。 重置画布大小。 删除画布。 学习本文前你需要具备一点 p5.js 知识,想了解请查看 《p5.js 光速入门》。...如果你使用了p5.js setup() 或者 draw() 之类生命周期函数,它们也会默认在页面上创建一个画布。...画布绑定指定元素 使用前面提到方法创建画布,p5.js 默认会帮我们把画布添加到 标签最后面。如下图所示。...画布充满整个页面 通过前面的例子我们知道使用 createCanvas(width, height) 可以设置画布宽高。...预览图gif体积比较大,稍等一下~ 此时我们可以使用 p5.js 提供 windowResized 方法监听浏览器缩放,然后通过 resizeCanvas(width, height) 方法修改画布尺寸

36841

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

/images/bg.png') } function draw() { // 将图片添加到背景里 background(bg) } 出来结果是这样 在这个例子中,准备图片尺寸是 3073...为什么在 setup() 里一次性把图片加载并添加到背景是错误写法呢? 因为图片作为一种资源文件加载肯定是需要时间,在没加载完就使用的话会比较容易出问题。...所以在 p5.js 官网例子中,会在 setup() 里加载图片资源,然后draw() 里再把图片绘制出来。 但其实还有更安全写法。...p5.js 提供了一个 preload() 生命周期,这个生命周期执行时间比 setup() 要早。preload() 通常用作资源加载,比如需要加载图片或者视频时候会写在这里。...background(bg) } 以上就是本期所有内容,关于 p5.js 生命周期方面的知识还不太了解工友可以看看 《p5.js 光速入门》 。

33330

p5.js 状态管理

p5.js 作为一个 canvas 库,也理所当然提供了状态管理方法。在 p5.js 里这两个方法叫 push() 和 pop()。...想了解原生 canvas 状态管理,推荐阅读 《canvas 状态管理》 p5.js push 和 pop 简单来说,状态管理可以理解为游戏中存档。...比方说,你一开始设置了正方形填充色是绿色,边框粗细是10,然后创建了一个正方形。之后你还想创建其他正方形,而且希望使用 p5.js 默认样式,而不是使用绿色正方形。...那么你可以在设置样式之前使用 push() 打一个标记,之后就可以在你希望地方使用 pop() 读取之前标记所记录样式和变形状态。...除了样式能被“存档”之外,变形(变换操作)同样也可以“存档”。 用旋转举例。

1.3K20

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

所以,当我第一次遇到TensorFlow.js(以前是deeplearn.js)时,心都要炸开了。在浏览器中构建机器学习模型?使用JavaScript?听起来好得令人难以置信!...TensorFlow.js是一个客户端库,这意味着它可以在用户浏览器中训练或运行ML模型。这减轻了与数据隐私有关任何担忧。...ml5.js是一个基于TensorFlow.js和p5.js库。p5.js是另一个可以使你更容易在浏览器中访问网络摄像头。...我们可以使用p5.jsdraw()函数来实现,该函数在setup()之后直接调用,并重复执行: function draw() { image(video, 0, 0, width, height)...我们用PoseNet做项目可以更进一步,通过训练另一个分类器来构建一个姿态识别应用程序。鼓励你去尝试一下!

2.1K00

关于“Python”核心知识点整理大全38

14.1.1 创建 Button 类 由于Pygame没有内置创建按钮方法,我们创建一个Button类,用于创建带标签实心矩形。 你可以在游戏中使用这些代码来创建任何按钮。...最后,我们创建方法draw_button(),通过调用它可将这个按钮显示到屏幕上: button.py def draw_button(self): # 绘制一个用颜色填充按钮,再绘制文本...如果你现在运行这个游戏,将在屏幕中央看到一个Play按钮,如图14-1 所示。...无论玩家单击屏幕什么地方,Pygame都将检测到一个MOUSEBUTTONDOWN事件(见1),但我 们只想这个游戏在玩家用鼠标单击Play按钮时作出响应。...14.1.4 重置游戏 前面编写代码处理了玩家第一次单击Play按钮情况,而没有处理游戏结束情况,因 为没有重置导致游戏结束条件。

12210

AI实践精选:艺术家如何应用RNN(循环神经网络)创作AI化艺术作品

没有直接开展可视化实验和书写生成方面的工作,而是创建了一个预训练书写模型和一个简单易用Javascript接口。...但是我们可以尝试通过模拟书写过程最后一部分,即从哪里落笔、怎样运笔以及什么时候收笔,来建立类似的书写过程模型。因此,我们书写过程模型在这里关注笔位置和笔是否接触到记事本。...第一个假设是,模型接下来要写内容取决于过去所写内容。然而,当我们写东西时候,即使我们还准确记得上一笔画具体细节,也并不能清楚地记得许多笔画之前细节,对于之前所写内容只能有一个模糊印象。...该函数每被调用一次,RNN就相应在屏幕上画出某些东西。...我们从基本书写演示中可能建立交互式扩展之一是用户交互式地在屏幕上书写,而当用户空闲时,模型可以继续预测其余书写样本。另一个可以建立扩展,我们之前曾在distill.pub中提到过,与之类似。

1.4K70

《Android Studio开发实战 从零基础到App上线》本书内容问题答疑

或者说对于一个新手该怎么正确地利用这本书,虽然有java基础但是还是不太懂。像泛型、进程之类都不太懂。然后需不需要把xml学一遍?...github访问地址为:https://github.com/aqi00/android2 打开github页面后,单击网页右边绿色按钮“Clone or download”,即可自动打包下载源码。...接着drawable目录就会出现一个名为“***.9.png”图片文件,双击该文件,就可以在右侧窗口中编辑点九图片了。 ?...9、关于第10章socket服务端代码启动方式 问题:Socket服务器端将TestServer运行到Tomcat上面,这个没运行成功还需要什么配置?...10、关于第10章仿QQ聊天服务端代码处理逻辑 问题:network_server压缩包里面有好几个网络通信服务端源码,可以简单把这几个文件配合情况,说一遍

1.1K30

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

所以,当我第一次遇到TensorFlow.js(以前是deeplearn.js)时,心都要炸开了。在浏览器中构建机器学习模型?使用JavaScript?听起来好得令人难以置信!...TensorFlow.js是一个客户端库,这意味着它可以在用户浏览器中训练或运行ML模型。这减轻了与数据隐私有关任何担忧。...ml5.js是一个基于TensorFlow.js和p5.js库。p5.js是另一个可以使你更容易在浏览器中访问网络摄像头。...我们可以使用p5.jsdraw()函数来实现,该函数在setup()之后直接调用,并重复执行: function draw() { image(video, 0, 0, width, height...我们用PoseNet做项目可以更进一步,通过训练另一个分类器来构建一个姿态识别应用程序。鼓励你去尝试一下!

1.6K20

Python 项目实践一(外星人入侵小游戏)第五篇

可以在游戏中使用这些代码来创建任何按钮。...,Pygame都将检测到一个MOUSEBUTTONDOWN事件,但我们关心这个游戏在玩家用鼠标单击Play按钮时作出响应。...四 重置游戏,将按钮切换到非活动状态以及隐藏光标 前面编写代码处理了玩家第一次单击Play按钮情况,而没有处理游戏结束情况,因为没有重置导致游戏结束条件。...为在玩家每次单击Play按钮时都重置游戏,需要重置统计信息、删除现有的外星人和子弹、创建一群新外星人,并飞船居中。...按钮存在一个问题,那就是即便Play按钮不可见,玩家单击其原来所在区域时,游戏依然会作出响应。

1.9K80

项目优化之DrawCall优化(Unity3D)

目标 学习怎么减少Draw Call,游戏运行更加流畅 尽管我图形界面如此简单,为什么游戏还是那么延迟呢? 为什么游戏加载那么长时间? 为什么界面间切换如此慢?...精灵(Sprite),用如下所示: 步骤二:查看Draw Call 按下Play键开始游戏,并且点击“State”按钮,在游戏视图右上角,如下图所示: 你将会弹出一些游戏运行时关于图形渲染重要数据...时,游戏会暂停,然后Unity会将当前正在执行一帧内容缓存下来,其中所有Draw Call你都可以进行前进与后退操作,从而能够从Draw Call级别分析开销。...你也许和我不一样,这取决于你屏幕(在和我UI一样情况下)。你可以滚动每一个Draw Call去查看每一次调用所产生信息。 OK,可以看到一些Draw Calls,为什么要在乎它呢?...你可以参考下面的链接进一步了解: http://docs.unity3d.com/Manual/SpritePacker.html 步骤四:运行游戏!! 你有看到什么改变

1.3K50

伴随 P5.js 入坑创意编程

一想到所有坑都被填了(如果还有啥是不记得,请千万不要提醒),就觉得真是业界良心,倍感轻松。...下面援引下“官方”介绍,建议去网页体验一下: AwardPuzzel 是一个全国美展油画类获奖画作数据视觉化作品,收录了美展第六届至第十二届2276幅获奖作品,通过动态交互方式呈现了中国油画30...本作品可以被当作研究工具为研究者和评论家使用,亦可作艺术作品欣赏。 我们希望通过这个平台分享我们视角,也希望使用者通过自己浏览和观察得到自己结论。...说起来,之前古柳压根一丁点都没听说过 P5.js,搜了下对应中文资料也不算多,更偏爱看视频学习,看到万能B站上有人搬运了油管上Daniel Shiffman 教学视频(1-12节),于是立马刷了下...其实以前就没少拼照片墙,想来大家也都见过爬取微信好友然后拼图文章,但古柳还是安利下这篇旧文,里面的图片绝对值得一看(如果你看完觉得也不咋地,那......也就随它去吧):用pythonPIL库轻松拼接一百张照片

2.2K50

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

从以下几张动图来看,似乎是分辨不出它是大模型生成。 ‍ ‍ 小伙伴们也可以试玩,还能自己创造关卡。不过,它目前还不支持手机端运行。...底部中央有一个「Play」按钮,周围环绕着阴森恐怖雾气。...他使用了一些小技巧和 prompt,首先从简单事情开始做起,比如「能不能使用 matter.js 和 p5.js 创建一个愤怒小鸟风格游戏?...比如「现在问你,你了解愤怒小鸟游戏中玩家在屏幕上滑动手指来发射小鸟?把这种方式添加到要创建游戏里,不过要改成用鼠标控制。」...再比如「把怪物设计成圆形」、「想用粒子效果制作一个火炬,是否可以通过 p5.js 来实现?」如此种种,不断与 GPT-4 进行交互试验,最终有了现在游戏效果。

27720

18个您想了解微小但有用macOS功能

可以在书签 > 编辑书签中执行以下操作,方法是选择书签,按Enter键,然后输入易于阅读/识别的新名称。 将光标放在“键盘快捷键”字段中,按要用于书签组合键,然后单击“添加”按钮。你去!...但是,这就是所不知道:这些快捷方式不仅可以打开这些页面,还可以切换它们!这意味着您不必在新选项卡中打开这些页面。您可以从任何选项卡跳至它们,然后使用相同快捷方式切换回上一个网页。...4.跳回到搜索结果 在获取上面的屏幕截图时,偶然发现了另一个功能:SnapBack。 当您单击Google之类搜索结果中链接,然后一个网页跳至下一个网页时,回到您搜索结果是很痛苦,对吧?...然后,您可以从活动应用程序列表中选择该应用程序,然后单击“强制退出”按钮来强制其关闭。命令-在列表中选择多个应用程序以一次将其全部关闭。...您知道当您将鼠标悬停在电子邮件中网页链接上时会显示向下箭头?那是预览按钮单击按钮可以在弹出窗口中显示链接页面。

6K30
领券