P5绘画系统

最新推荐文章于 2022-07-28 16:35:52 发布

猴——

最新推荐文章于 2022-07-28 16:35:52 发布

阅读量402

点赞数

分类专栏：互动媒体技术

本文链接：https://blog.csdn.net/qq_40667574/article/details/85404600

版权

博主利用P5.js构建了一个独特的绘画系统，包括铅笔、钢笔、bezier曲线、flower、special等工具，以及形状绘制功能。与传统绘画系统相比，该系统更适合创新和动态效果的创作，尤其适合低龄儿童发挥想象力。

摘要由CSDN通过智能技术生成

前言

这次博主通过P5尝试实现一个简易又不同寻常的绘画系统。

系统界面

在这里插入图片描述
绘画系统左边的gui界面：
pencolor实现对话比颜色的修改。
tools实现画笔工具种类的改变，其包括铅笔，钢笔，bezier曲线，橡皮擦和flower、special两种不同的特殊工具。
penscale实现对画笔大小的调整。
绘画系统右边的gui界面：
shape实现对另一种绘画方法的实现，其种类包括圆形、正方形、三角形、线条、五角星、橡皮擦、半圆。
bkcolor实现对画布背景颜色的改变功能。
fillcolor实现对绘制图形基本颜色的确认。

功能介绍

铅笔功能
通过p5自带的鼠标按压检测程序，让事实的鼠标位置与前一帧的鼠标位置相连达到绘制线条的功能。
实现代码：

function my_draw_pencil() 
{
   var c = color(penColor);
   stroke(c);
  strokeWidth=penscale;
      strokeWeight(strokeWidth);
   if (mouseIsPressed === true) 
   {
    line(mouseX, mouseY, pmouseX, pmouseY);
      }
  
}