p5.js 创意编程

最新推荐文章于 2024-05-10 09:47:03 发布
最新推荐文章于 2024-05-10 09:47:03 发布
阅读量1.5k 收藏 13
点赞数 3
分类专栏： 原创 文章标签： p5.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/YCSDNG/article/details/102902795
版权

p5.js 创意编程

本篇博客主要介绍如何用代码来画图。

本次画图主要采用的是贝塞尔曲线，所以首先介绍贝塞尔曲线。

贝塞尔曲线(Bézier curve)

简介

贝塞尔曲线(Bézier curve)，又称贝兹曲线或贝济埃曲线，是应用于二维图形应用程序的数学曲线。一般的矢量图形软件通过它来精确画出曲线，贝兹曲线由线段与节点组成，节点是可拖动的支点，线段像可伸缩的皮筋，我们在绘图工具上看到的钢笔工具就是来做这种矢量曲线的。贝塞尔曲线是计算机图形学中相当重要的参数曲线，在一些比较成熟的位图软件中也有贝塞尔曲线工具，如PhotoShop等。
在这里插入图片描述

公式

线性公式

给定点P0、P1，线性贝兹曲线只是一条两点之间的直线。这条线由下式给出：
在这里插入图片描述
且其等同于线性插值。

二次方公式

二次方贝兹曲线的路径由给定点P0、P1、P2的函数B（t）追踪：
在这里插入图片描述
TrueType字型就运用了以贝兹样条组成的二次贝兹曲线。

三次方公式

P0、P1、P2、P3四个点在平面或在三维空间中定义了三次方贝兹曲线。曲线起始于P0走向P1，并从P2的方向来到P3。一般不会经过P1或P2；这两个点只是在那里提供方向资讯。P0和P1之间的间距，决定了曲线在转而趋进P3之前，走向P2方向的“长度有多长”。
曲线的参数形式为：
在这里插入图片描述
现代的成象系统，如PostScript、Asymptote和Metafont，运用了以贝兹样条组成的三次贝兹曲线，用来描绘曲线轮廓。

一般参数公式

阶贝兹曲线可如下推断。给定点P0、P1、…、Pn，其贝兹曲线即：
在这里插入图片描述
如上公式可如下递归表达： 用表示由点P0、P1、…、Pn所决定的贝兹曲线。
用平常话来说，阶的贝兹曲线，即双阶贝兹曲线之间的插值。

图形介绍

代码

function setup() {
  createCanvas(900, 900);
}
let choose=1;
function draw() {
  background(153, 136, 85);

  if(choose==1)
  {
    luo1();
  }
  if(choose==2)
  {
    luo2();
  }

  strokeWeight(1);
  stroke(255,0,0);
  print("("+mouseX+","+mouseY+")"); 
}

鼠标交互

function mouseClicked() {
  if(choose==1)
        choose=2;
      else 
        choose=1;
}

第一幅图

function luo1()
{
  //整体轮廓
  stroke(60,60,48);
  strokeWeight(8);
  fill(0);
  beginShape();
  vertex(466,135);
  bezierVertex(331,-54,-10,77,54,337);
  bezierVertex(68,395,110,439,158,454);
  bezierVertex(91,461,35,473,41,521);
  bezierVertex(62,560,176,542,289,526);
  bezierVertex(392,589,394,665,482,724);
  bezierVertex(491,832,645,812,657,697);
  bezierVertex(703,663,717,620,796,641);
  bezierVertex(841,646,863,615,900,589);
  bezierVertex(900,516,899,467,900,405);
  bezierVertex(872,407,851,419,826,445);
  bezierVertex(797,419,780,401,745,408);
  bezierVertex(701,351,608,309,503,314);
  bezierVertex(515,261,505,185,468,139);
  endShape();

  //嘴巴
  line(312,375,323,367);
  
  //左眼
  fill(255,255,255);
  beginShape();
  vertex(88,154);
  bezierVertex(22,234,32,386,129,396);
  bezierVertex(230,395,249,311,223,236);
  bezierVertex(180,141,123,130,84,158);
  endShape();

  fill(0);
  beginShape();
  vertex(103,196);
  bezierVertex(36,224,76,385,153,346);
  bezierVertex(223,323,161,169,103,196);
  endShape();

  //左耳
  beginShape();
  vertex(54,344);
  bezierVertex(39,363,32,433,53,459);
  bezierVertex(56,417,70,412,80,398);
  bezierVertex(67,384,64,372,55,347);
  endShape();
  fill(113,170,119);
  beginShape();
  vertex(80,399);
  bezierVertex(37,446,48,474,81,467);
  bezierVertex(105,459,122,457,152,454);
  bezierVertex(117,438,102,422,85,402);
  endShape();
  
  //右眼
  fill(255,255,255);
  beginShape();
  vertex(239,65);
  bezierVertex(160,130,245,316,393,266);
  bezierVertex(515,217,405,78,351,61);
  bezierVertex(329,47,270,41,239,65);
  endShape();
  
  fill(0);
  beginShape();
  vertex(256,110);
  bezierVertex(222,162,302,286,376,229);
  bezierVertex(419,197,374,119,335,101);
  bezierVertex(302,85,282,86,258,108);
  endShape();
  
  //右耳
  beginShape();
  vertex(386,67);
  bezierVertex(468,78,562,143,569,184);
  bezierVertex(541,172,523,169,489,174);
  bezierVertex(465,129,443,103,394,71);
  endShape();
  fill(113,170,119);
  beginShape();
  vertex(508,274);
  bezierVertex(539,258,576,208,569,184);
  bezierVertex(541,172,523,169,489,174);
  bezierVertex(501,201,507,234,509,273);
  endShape();

  fill(0);
  
  //胳膊
  beginShape();
  vertex(161,454);
  bezierVertex(197,452,246,440,273,433);
  endShape();
  beginShape();
  vertex(427,336);
  bezierVertex(451,320,480,316,504,313);
  endShape();

  //右手
  beginShape();
  vertex(509,273);
  bezierVertex(527,261,537,253,548,241);
  bezierVertex(571,230,583,271,578,316);
  bezierVertex(553,313,533,311,505,313);
  bezierVertex(508,298,509,285,511,272);
  endShape();
 
  //脚
  beginShape();
  vertex(481,723);
  bezierVertex(476,543,685,555,658,684);
  endShape();

  beginShape();
  vertex(809,471);
  bezierVertex(820,453,815,462,827,443);
  endShape();

  //尾巴
  beginShape();
  vertex(676,681);
  bezierVertex(741,750,787,843,813,898);
  bezierVertex(841,899,868,899,898,900);
  bezierVertex(900,884,898,865,900,839);
  bezierVertex(859,745,802,682,760,635);
  bezierVertex(736,635,705,647,678,680);
  endShape();
}

第二幅图

function luo2()
{
  //整体轮廓
  stroke(60,60,48);
  strokeWeight(8);
  fill(0);
  beginShape();
  vertex(177,128);
  bezierVertex(54,195,12,384,134,472);
  bezierVertex(122,479,61,475,67,529);
  bezierVertex(97,592,283,507,316,544);
  bezierVertex(371,574,411,655,435,672);
  bezierVertex(445,694,468,741,498,745);
  bezierVertex(499,827,622,839,658,713);
  bezierVertex(682,665,706,640,780,643);
  bezierVertex(822,660,856,632,899,611);
  bezierVertex(899,550,899,498,900,445);
  bezierVertex(877,450,855,464,830,485);
  bezierVertex(809,448,778,427,750,432);
  bezierVertex(695,364,594,324,509,334);
  bezierVertex(517,120,344,50,180,126);
  endShape();

  beginShape();
  vertex(442,353);
  bezierVertex(463,341,486,337,507,334);
  endShape();
  
  beginShape();
  vertex(813,499);
  bezierVertex(819,493,825,487,834,482);
  endShape();

  //右手
  beginShape();
  vertex(509,285);
  bezierVertex(523,231,595,228,582,337);
  bezierVertex(565,334,539,330,508,333);
  bezierVertex(513,310,508,294,509,283);
  endShape();
  
  //耳朵 左
  beginShape();
  vertex(59,347);
  bezierVertex(29,377,-5,419,0,489);
  bezierVertex(18,448,53,437,94,434);
  bezierVertex(79,422,65,379,61,345);
  endShape();

  fill(113,170,119);

  beginShape();
  vertex(0,487);
  bezierVertex(12,444,55,437,92,434);
  bezierVertex(106,446,113,458,131,471);
  bezierVertex(114,477,75,486,68,508);
  bezierVertex(45,506,18,508,0,493);
  endShape();
  
  //眼睛
  fill(255);
  beginShape();
  vertex(66,300);
  bezierVertex(141,209,204,190,214,206);
  bezierVertex(231,221,86,362,63,338);
  bezierVertex(60,326,62,316,65,304);
  endShape();
  
  beginShape();
  vertex(377,108);
  bezierVertex(345,112,250,145,255,181);
  bezierVertex(264,212,340,140,416,126);
  bezierVertex(393,112,403,119,378,108);
  endShape();


  //嘴巴
  strokeWeight(4);
  fill(65,148,164);
  beginShape();
  vertex(282,293);
  bezierVertex(280,278,321,256,333,265);
  bezierVertex(335,275,295,300,282,296);
  endShape();

  strokeWeight(8);
  
  //脚
  fill(0);
  beginShape();
  vertex(497,750);
  bezierVertex(492,637,616,598,643,657);
  endShape();

  beginShape();
  vertex(125,474);
  bezierVertex(167,465,227,456,300,450);
  endShape();
  beginShape();
  vertex(675,691);
  bezierVertex(741,762,762,823,796,900);
  bezierVertex(832,900,863,900,897,899);
  bezierVertex(891,808,833,713,748,644);
  bezierVertex(709,651,691,658,675,689);
  endShape();
}

截图

在这里插入图片描述

在这里插入图片描述

鼠标交互：鼠标左键点击图片，图片变换
在这里插入图片描述
在这里插入图片描述

GYBSO
关注
  • 3
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
《p5.js 与创意编程》前言
关于生成艺术和创意编程
04-22 110
艺术是感性的美，代码则是理性的美。当这两种美相互碰撞、交织在一起时，会产生什么奇妙的化学反应呢？生成艺术和创意编程就是这样的一个融合点。本课程将着重介绍如何基于代码来进行生成艺术的创作，从常见的生成模式和实现原理出发，通过深入浅出的实例讲解，让大家逐步掌握使用 p5.js 进行艺术创作的技巧和方法。让我们一起来探索创意编程的无限乐趣吧！
P5.js：动态画板鉴赏
qq_42264210的博客
01-07 1471
上期博客我利用了西河某人的动态绘板为原型，扩展了特效画笔，这期则是鉴赏其他作者的优秀动态绘板。 ValdisX的Canvas魔法实验 链接：https://blog.csdn.net/sinat_36461778/article/details/85423676 效果图： 评论：绘画系统的前两种画笔，一种是随机圆大小，一种是随机颜色，前者的效果颇有水彩的感觉，后者则比较平常，都不属于动态画笔...
JavaScript 创意编程程式库p5.min.js
08-03
p5.min.js
探索创新编程：p5.js 开源库的无限可能
最新发布
gitblog_00047的博客
05-10 350
探索创新编程：p5.js 开源库的无限可能 项目地址:https://gitcode.com/processing/p5.js 项目介绍 p5.js 是一个专为创意编码设计的 JavaScript 库，致力于让编程变得平易近人且包容性更强。无论你是艺术家、设计师、教育工作者还是初学者，都能在这个平台上找到乐趣和挑战。p5.js 使用了绘制草图的理念，提供了基于 HTML5 canvas 元素的完整...
sketch_Leapmotion:leapmotion和p5.js创意编程
05-15
sketch_Leapmotion leapmotion和p5.js创意编程 结果分析 利用leap motion 手部检测 完成了对星空闪烁，彗星运动，飞船加速度运动，随机柏林噪声抖动以及粒子效果的模拟。 艺工交叉，完成了创意编程。 gif图 太大了加载很慢 b站视频(画质略差,细节体现不到位) 设计思路 宇宙的浩瀚无边，彗星的神秘诡变一直等待着人类去探索 最广为人知的哈雷彗星需要76年回归一次 当他们孤独的围绕着星系旋转，当他们遇上属于人类的好奇 当人类的飞船与星共舞，会是怎样的场景 选用星空背景，设计宇宙场景，流星与恒星共存 互动部分选用手部动作模拟彗星的运动 当人类的飞船伴随着卫星追逐彗星运动，运动加速度会发生改变，营造灵动有趣的互动场景，显现人与星的和谐共处，同时空寂的背景音乐响起。背景音选用莎拉布莱曼的斯卡保罗集市，带来轻快浪漫的氛围感，与后期静寂的画面形成对比 而当双手张开，
探索创新艺术编程：p5.js 代码包
gitblog_00055的博客
04-11 421
探索创新艺术编程：p5.js 代码包 项目地址:https://gitcode.com/generative-design/Code-Package-p5.js 在数字化时代，艺术与技术的融合催生了新的创作方式。p5.js 是一个强大的 JavaScript 库，为艺术家、设计师、教育者和初学者提供了一个友好的平台，让他们能够轻松地进行生成设计和互动艺术的实验。本文将深入剖析 p5.js 的技术特...
p5.js 编程基础学习合集【1】
升卿
05-05 8820
不知道你是否了解过 Processing 语言的家谱（如下图所示）。与人类语言一样，编程语言同样属于相关语言的家族。而今天，我要引出的，即其家族成员之一的 p5.js（官网）。 Introduction 简单来讲，p5.j​​s 是一个库配上许多工具，它让编程爱好者、艺术家、设计师们可以轻松使用 JavaScript 语言进行创意编程。 库是 JavaScript 库。 为什么选择...
p5.js绘制创意自画像
10-16
【p5.js绘制创意自画像】是一篇关于使用p5.js库进行创意图像绘制的文章，主要讲解如何利用这个JavaScript库创建一个动态的自画像。p5.js是一个强大的工具，它使得编程与艺术创作相结合变得更加简单。 文章通过一个...
基于 P5.js 的交互式人物换装小项目
01-06
**基于 P5.js 的交互式人物换装小项目** P5.js 是一个强大的 JavaScript 库，专为网页上的艺术、教育、研究等领域的交互式图形设计而开发。...这个项目不仅可以锻炼编程技能，也是对创意和艺术表达的有趣实践。
P5.js自然算法模拟-分形树
06-15
它提供了丰富的功能，如画布绘制、事件处理、动画控制等，非常适合进行创意编程和教育。 **一、P5.js 分形树的基本原理** 1. **递归**：分形树的生成基于递归思想。每一棵树可以被视为一个简单的分支，这个分支又...
P5.js创意编程之自我介绍
WJX_forever的博客
06-17 635
P5.js创意编程之自我介绍 构思 作为一个树莓人，熬夜修仙就是条必走之路 那就画个修仙老头？？？ 先画草图吧 敲代码环节 就像图上那样，无非就算各种坐标 过程超级繁琐 就直接粘代码了 function person(){ strokeWeight(5); //脸 arc(200,200,200,140,-PI/6,-5*PI/6); //帽子 line(122.85,155...
p5.js入门教程之图片加载
11-28
一、preload()函数与图片上传 preload()函数是一个特殊的函数，它同setup()类似，只在程序开始时运行一次，但顺序在setup()之前。 一般我们会将媒体文件（图片、声音）加载的语句放在preload()中，因为preload()有一个特性就是不加载完毕，程序就不会开始，保证了程序运行时不会出错。 在加载图片之前，我们需要先将图片文件上传。 方法是： ①点击编辑器左上角的小三角展开文件目录。 ②点击文件目录右上角小三角，展开菜单后Add File。 ③可以直接将图片文件拖到框里，会自动上传，传完后关闭即可，jpg和png格式均支持。 二、加载图片 接着，添加代码如
Learn JavaScript with p5.js Coding for Visual Learners 无水印原版pdf
03-13
Learn JavaScript with p5.js Coding for Visual Learners 英文无水印原版pdf pdf所有页面使用FoxitReader、PDF-XChangeViewer、SumatraPDF和Firefox测试都可以打开 本资源转载自网络，如有侵权，请联系上传者或csdn删除 查看此书详细信息请在美国亚马逊官网搜索此书
Getting Started with p5.js Making Interactive Graphics in JavaScript and 无水印pdf
10-05
Getting Started with p5.js Making Interactive Graphics in JavaScript and Processing 英文无水印pdf pdf所有页面使用FoxitReader和PDF-XChangeViewer测试都可以打开 本资源转载自网络，如有侵权，请联系上传者或csdn删除 本资源转载自网络，如有侵权，请联系上传者或csdn删除
p5js代码库
10-18
交互式可视化工具，学习前端可视化入门代码库，非常简单有趣
Linear_Regression_Simulation:使用P5.JS仿真线性回归算法
05-15
Linear_Regression_Simulation 概述 我已经使用P5.JS图形库创建了线性回归算法的仿真。 用户可以在运行时在画布上插入数据点，因此，最佳拟合线将更改其参数。 实施梯度下降算法以最小化与线性回归相关的成本函数。 sketch.js包含模拟的核心逻辑。
《getting started with p5.js》（中文版） 第一章 您好：了解p5.js
LJT1469的博客
12-20 7636
第一章 您好：了解p5.js
一个基于p5.js的绘画系统
wangyouxu24的博客
12-30 6568
一个基于p5.js的绘画系统 一、实现效果 这个绘画系统具有一般绘画系统的特点，作画者可以通过选择不同的笔刷模仿毛笔笔触，达到水墨画的效果。另外，它还具有一定的动态性，作画者可以看到画上去的东西并不像一般绘画系统静止不动，画面能随着鼠标的位移或时间的变化遵循一定规律变动。 1）动态效果 2）静态效果 二、代码实现 1）静态笔刷 对于第一种效果，作画者可自定义笔刷大小和形状，其笔刷实质...
p5.js 编程基础学习合集【2】
升卿
01-16 4666
之前在《 p5.js 和 Processing 的恩怨情仇》曾提及 p5.js 与 Processing 的不同点之一就是： 在 JavaScript 中，变量没有类型。使用 var 而不是 float、int、double、long、char、String、Array 等。我们不需要为函数指定返回类型或参数类型。 var 可以是任何东西——任何提到的类型，也可以是函数。 #...
p5.js实现绘画系统
11-01
p5.js是一个基于JavaScript的创意编程库，可以实现绘画系统。使用p5.js，你可以通过编写代码来创建绘画、图形和动画。 要开始使用p5.js绘画系统，首先需要设置画布。你可以指定画布的大小、颜色和位置等属性。然后...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值