p5.js

傅里叶级数的可视化

在b站上看到一个大神用p5.js写的，我觉得吧，原生是无敌的存在（其实是因为我不会），所以……效果自然没有人家的好咯js代码：1vartime=0;2varwave=[];3vartemp_n=document.getElementById
Blog_Lee·2019-04-01 17:00

Learn JavaScript with p5.js中文版 第五章 条件语句和比较运算符

总目录第一章导学：对写代码和编程进行概述第二章准备工作：学习JavaScript命令和操作的基础来开启p5.js的学习之旅第三章p5.js中的颜色：这一章是针对p5.js的，将学习如何在p5.js中定义颜色
AlanHou·2019-02-10 15:54

p5.js: 通过上下左右键控制方块的位置

body{padding:0;margin:0;background:rgb(0);position:fixed;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);}varx=200;vary=200functionsetup(){createCanvas(400,400);
CodingIsFun·2019-01-28 11:57

喜欢的作品

《丹青画板》——基于P5.JS的国风“绘画系统”链接如下：https://zhuanlan.zhihu.com/p/53695818这个作品可以说有着浓郁的山水画的味道，从字体的选择上、颜色的显示上、各种笔刷的效果上
Fei_Yan5043·2019-01-08 19:55

手绘 v.s. 码绘（1.2 实践报告）

p5.js，
Sugar_me_·2018-11-27 19:23

手绘 v.s. 码绘（1.0 Processing——MyFirstSketch）

目标下列工具选其一：p5.js,或processing，或openframeworks尝试用绘图函数画一幅静态作品，尽可能用多种绘图函数和各种参数设置，画出较高复杂性的作品用手绘方式来画相近的内容，将绘图的图形基元限定于自己程序中用到的类型手绘作品工具
Sugar_me_·2018-11-25 01:19

手绘 v.s 码绘 (1.1 Processing——MyConfuse)

至少有一幅手绘作品，允许采取纸面绘画或电脑绘画两种方式可以结合速写课作业完成多幅作品，形成组图，以尝试不同的表现”动感“的手法编程工具默认包括p5.js,processing,openframeworks
Sugar_me_·2018-11-24 22:17

码绘VS手绘（二）动态绘图

附上第一篇的链接：码绘VS手绘（一）静态绘图依然是用p5.js，本来是想继续用上次的米奇做成动态的，但想
Christing0907·2018-11-24 03:07

码绘VS手绘（二）动态绘图

附上第一篇的链接：码绘VS手绘（一）静态绘图依然是用p5.js，本来是想继续用上次的米奇做成动态的，但想
Christing0907·2018-11-24 03:07

码绘VS手绘（一）静态绘图

码绘VS手绘（一）静态绘图一、前言二、实验要求（一）主题（二）内容三、实验内容（一）码绘码绘效果整幅图画主要用了一些基础的p5.js图形，下面是用到的p5函数：程序结构：（二）手绘四、总结——编程与手绘的对比五
Christing0907·2018-11-24 03:50

手绘与码绘————静态对比

绘画的主角就是这位：手绘（只是大概描了一下轮廓）码绘这是用P5.js绘制的上色版，已经和原版非常像了。
Ayaprogram·2018-11-23 22:57

手绘码绘（静态）

终于又要码绘了，emmmmm以前都是用opengl来进行码绘的，但是，这次我要来尝试p5.js了，它的网站真的很可爱呢，那就来画个可爱的大白吧！
dont_like_jiemo·2018-11-23 19:54

手绘VS码绘

手绘VS码绘（一）由于大学课程要求，让我们每个人用p5.js画一幅图，并和自己手绘作品进行对比，这里就简单分享下个人经验。工具javascript编辑器和p5.js库，配置和下载的问题这里就不介绍了。
爱吃鱼的萌萌·2018-11-12 20:48

Step 16:【PROCESSING 游戏编程】之黄金矿工

之前，我偶看到FAL利用Processing/p5.js制作的一些迷你小游戏（倘若你对此感兴趣，请点击这里）。Simplebutfun，这亦让我萌生了学习制作游戏的念头。
Hewes·2018-08-09 16:31

p5.js 毕达哥拉斯树的实现代码

本文介绍了p5.js毕达哥拉斯树的实现代码，分享给大家，具体如下：效果如下：主要方法translate()rotate()rect()push()pop()map()主要思想递归草图过程分解一、毕达哥拉斯树的递归函数
SampleTape·2018-03-23 08:36

p5.js实现斐波那契螺旋的示例代码

本篇文章主要介绍了p5.js实现斐波那契螺旋的示例代码，分享给大家，也给自己做个笔记效果如下：主要方法translate()rotate()arc()斐波那契螺旋斐波那契螺旋线也称“黄金螺旋”，是根据斐波那契数列画出来的螺旋曲线
SampleTape·2018-03-22 08:39

用p5.js制作烟花特效的示例代码

不过好在也有对应的web扩展语言，有processing.js和p5.js。processing.js在github上已经好几年没有人维护了，一些processing的特性支持
huuinn·2018-03-21 08:02

p5.js入门教程之图片加载

一、preload()函数与图片上传preload()函数是一个特殊的函数，它同setup()类似，只在程序开始时运行一次，但顺序在setup()之前。一般我们会将媒体文件（图片、声音）加载的语句放在preload()中，因为preload()有一个特性就是不加载完毕，程序就不会开始，保证了程序运行时不会出错。在加载图片之前，我们需要先将图片文件上传。方法是：①点击编辑器左上角的小三角展开文件目录
西河某人·2018-03-20 08:14

p5.js入门教程之键盘交互

一、键盘交互相关关键词与函数keyIsPressed:关键词，按下按键时为true，反之为falsekeyCode:关键词，用于判断按下哪个按键keyPressed():函数，按键按下时触发一次keyReleased():函数，按键松开时触发一次keyIsDown():函数，按下指定按键时返回true，反之为false以下是一个较综合的案例，用wsad与zxcv控制小球移动：varx=200;va
西河某人·2018-03-19 08:37

p5.js入门教程之鼠标交互的示例

本文介绍了p5.js入门教程之鼠标交互的示例，分享给大家，具体如下：一、鼠标交互常用关键词p5.js提供了许多鼠标操作用的关键词与函数，常用的有：mouseIsPressed：关键词，若鼠标按下则为true
西河某人·2018-03-16 15:31

p5.js入门教程之平滑过渡(Easing)

一、跟随鼠标移动的小球使用mouseX,mouseY可以创建一个跟随鼠标移动的小球。functionsetup(){createCanvas(400,400);}functiondraw(){background(220);ellipse(mouseX,mouseY,20,20);}二、让小球更加平滑的移动――使用Easing一般制作精良的UI界面都会用到平滑移动这一效果，也就是利用了名为“Eas
西河某人·2018-03-16 08:24

p5.js入门教程之小球动画示例代码

一、运动的小球本节将用p5.js做一个在屏幕上运动的小球。
西河某人·2018-03-15 16:05

p5.js入门教程和基本形状绘制

一、什么是p5.js最近接触了一门数字媒体艺术类的课程，名为Interactivity，教的是p5.js。主讲老师就是开发者之一……还是挺激动的。
西河某人·2018-03-15 14:58

p5.js作品集（6）：斐波那契螺旋

FibonacciSpiral.gif作品链接https://codepen.io/SampleTape/full/jzPxNW/主要方法translate()rotate()arc()斐波那契螺旋斐波那契螺旋线也称“黄金螺旋”，是根据斐波那契数列画出来的螺旋曲线，以斐波那契数为边的正方形中画一个90度的扇形，连起来的弧线就是斐波那契螺旋。草图FibonacciSpiral草图.png过程分解一、
SampleTape·2018-03-12 22:39

GitHub Pages for Hosting p5.js Sketches

在GitHub页面直接拖拽了好几次都没成功，只好通过terminal这种最原始的方式进行文件修改和上传了。首先用homebrew安装好了git的包brewinstallgit通过cd命令改变到你想要的文件夹路径cdusr/balabala然后对GitHub的repository进行clonegitclonehttps://github.com/username/reponame.git这时，就可以
hohoemi35·2018-01-29 22:26

《getting started with p5.js》（中文版） 第四章 变量： 存储、修改和再利用数据

第一章您好：了解p5.js第二章开始写代码：创建你的第一个p5.js程序第三章画：定义和画简单的形状第四章变量：存储、修改和再利用数据第五章响应：利用鼠标、键盘和触摸板控制和影响程序第六章平移、旋转、缩放
LJT1469·2017-12-22 08:21

p5.js作品集（3）：蜜蜂和蜂巢（上）

效果图.png作品链接https://codepen.io/SampleTape/full/baNzjP/主要方法beginShape()endShape()vertex()translate()push()pop()主要思想封装草图草图.png过程分解（蜂巢）一、编写一个蜂巢对象的构造函数functionbeehive(x,y,r){this.x=x;//蜂巢中心的x轴坐标this.y=y;//
SampleTape·2017-12-15 09:26

p5.js作品集（1）：樱花

效果图.png作品链接https://codepen.io/SampleTape/full/Rxbrde/主要方法rect()rotate()translate()草图草图.png过程分解初始化：新建一块画板functionsetup(){createCanvas(windowWidth,windowHeight);background(255);//设置背景颜色}一、画一个矩形functions
SampleTape·2017-12-11 15:36

p5.js - Processing intuition times JavaScript power

p5.js是一个初心与processing一致，专们为艺术家、设计师、教育工作者和初学者的打造的js库。使用它你可以很方便的使用最新的web技术来完成自己的艺术作品。
Integ·2015-06-08 00:00

P5.js为人们带来了富有创造性的编码方式

LaurenMcCarthy发布了P5.js的第一个公开测试版，它是一个使艺术家、设计师、教育工作者和初学者等都能够进行编码的JavaScript库。
James Chesters·2014-09-03 00:00
上一页 1 2 3 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他