p5.js
文章平均质量分 54
P5.JS 相关教程,入门+实战!
西河某人
图形学大菜鸟,努力学习中……
展开
-
p5.js可以做什么 (3):解谜小游戏 The Garden
这篇是关于 p5.js 的最后一篇文章了,来搞点大新闻吧~p5.js 还可以用来做什么呢?你甚至可以用 p5.js 来做游戏,对你没有听错!简介接下来分享一下我的p5.js 课程最终作业,一个解谜小游戏,有多种结局。用鼠标点击地面移动,点击物品进行调查。代码较凌乱,勿喷,希望能给更多人带来启发~先上图:成品:https://editor.p5js.or...原创 2019-12-30 20:35:33 · 2492 阅读 · 0 评论 -
p5.js可以做什么 (2):疯狂的音符 Crazy Notes
好久不见!两年过去了,看到 p5.js 系列文章还是很多人喜欢的,阅读量也挺高,突然感觉十分高兴呢!于是最近打算把自己的该系列文章更新一遍,并且再加上一些新东西!(不好意思嘻嘻,也是两年前的作品,只不过当时没放出来)让我们继续吧~!p5.js 还可以用来做什么呢?在此给出我当年的课程作业之一,完全原创!简介这算是对视觉交互的一次尝试,伴随音乐响起,玩家可以在画布上移动鼠...原创 2019-12-30 11:31:22 · 1428 阅读 · 0 评论 -
p5.js可以做什么 (1):创意动态画板 Floating Light
p5.js可以用来做什么呢?在此给出我的课程作业,完全原创!(包括界面UI)可算是绞尽脑汁地挖掘p5.js的功能了。整体开发难度不大,相信看完之前 p5.js 入门的你也一定会的!简介这是一个创意动态绘图板。有三种创意画笔,分别是点,三角,线。你可以随意的进行创作,画出来的东西可是会动的哦!自带截图保存功能——请点击左下角的S图标。还有神奇的时间控制画笔——请点...原创 2018-03-03 01:26:01 · 7237 阅读 · 13 评论 -
p5.js入门教程(6) 图片加载
一、preload()函数与图片上传preload()函数是一个特殊的函数,它同setup()类似,只在程序开始时运行一次,但顺序在setup()之前。一般我们会将媒体文件(图片、声音)加载的语句放在preload()中,因为preload()有一个特性就是不加载完毕,程序就不会开始,保证了程序运行时不会出错。在加载图片之前,我们需要先将图片文件上传。方法是:①点击编辑器左上角...原创 2017-07-29 09:17:49 · 8180 阅读 · 0 评论 -
p5.js入门教程(5) 键盘交互
一、键盘交互相关关键词与函数keyIsPressed: 关键词,按下按键时为true,反之为falsekeyCode: 关键词,用于判断按下哪个按键keyPressed():函数,按键按下时触发一次keyReleased():函数,按键松开时触发一次keyIsDown():函数,按下指定按键时返回true,反之为false以下是一个较综合的案例,用wsad与zxcv控制小球...原创 2017-07-29 05:48:08 · 4452 阅读 · 0 评论 -
p5.js入门教程(4) 鼠标交互
一、鼠标交互常用关键词p5.js提供了许多鼠标操作用的关键词与函数,常用的有:mouseIsPressed:关键词,若鼠标按下则为true,反之为falsemouseButton:关键词,用来判断鼠标按下的是哪个键案例如下:function setup() { createCanvas(400, 400);} function draw() { back...原创 2017-07-28 14:55:40 · 9186 阅读 · 4 评论 -
p5.js入门教程(3) 平滑过渡(Easing)
一、跟随鼠标移动的小球使用mouseX,mouseY可以创建一个跟随鼠标移动的小球。function setup() { createCanvas(400, 400); } function draw() { background(220); ellipse(mouseX,mouseY,20,20);}二、让小球更加平滑的移动——使用Eas...原创 2017-07-23 06:32:11 · 5317 阅读 · 0 评论 -
p5.js入门教程(2) 小球动画
意见:1、CSDN太难用了,审核太难受,发表了看不了,不方便文章预览修改格式。QQ空间待审核的话自己还是可以看的,求改进!2、文本编辑也很难用!一、运动的小球本节将用p5.js做一个在屏幕上运动的小球。思路是用变量记录小球的位置,然后在draw()函数里对其做出改变,由于draw()函数会不断地运行(频率为FPS,默认60帧/秒),所以小球便产生了运动。代码如下:...原创 2017-07-15 12:26:01 · 6511 阅读 · 1 评论 -
p5.js入门教程(1) p5.js简介 与 基本形状绘制
意见:CSDN太难用了,审核太难受,发表了看不了,不方便文章预览修改格式。QQ空间待审核的话自己还是可以看的,求改进!一、什么是p5.js最近接触了一门数字媒体艺术类的课程,名为Interactivity,教的是p5.js。主讲老师就是开发者之一……还是挺激动的。p5.js是一个为艺术家、设计师而开发的Javascript库,可以看作是Processing的We...原创 2017-07-15 12:14:51 · 37016 阅读 · 7 评论