前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >p5.js 开发点彩画派的绘画工具

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

作者头像
德育处主任
发布2023-07-09 15:33:04
3110
发布2023-07-09 15:33:04
举报

本文简介

这几天在整理书柜时看到这套书,看到梵高,想起他的点彩画。

想到点彩画派,不得不提的一个画家叫乔治·皮埃尔·秀拉。据说梵高也模仿过他的画作。

我引用一下维基百科对点彩画派的解析:

点彩画派(又称点描派;英文:Pointillism)是一种用很粗的彩点堆砌,创造整体形象的油画绘画方法。

说简单点,就是用圆点画画,比如秀拉的这幅作品《检阅》。

这种风格除了用在艺术绘画方面,在眼科医院体检的时候也会用到,比如测红绿色盲。

然后我又继续想啊想,想到我们用 canvas 好像也能做出一款点彩画的绘图工具,但用原生的方式写是不可能的,因为我懒。思前想后,还是觉得用 p5.js 写会好点,毕竟这个库也是个比较知名的艺术库。

于是查了一下 p5.jsapi ,做了一个简陋版的工具。样式方面就靠各位工友动手啦~

jcode

在移动端阅读的工友可以看下图效果~

动手编码

要实现这个画版工具主要有以下步骤:

  1. 创建 canvas 画布。
  2. 创建颜色选择器。
  3. 创建画笔宽度控制器。
  4. 需要一个重置画布的按钮。
  5. 监听鼠标点击和点击时移动的位置。
  6. 根据鼠标点击和点击时移动的位置创建圆形。
  7. 点击重置画布按钮将画布背景设置回白色。

主要工作就是以上几步,而且这几步都用了 p5.js 提供的方法去实现。

主要用到的生命周期有 setupdraw,这部分我在 p5.js 光速入门 里有讲到。

创建颜色选择器、滑块、按钮分别用了 p5.jscreateColorPicker()createSlider()createButton() 方法。

绘制过程的代码写在 draw 周期里,使用了 circle() 方法创建圆形,圆形的坐标就是鼠标绘画时的当前坐标,圆形的尺寸是取滑块的值,圆形的颜色取了颜色选择器的值。

以下是完整代码,可以结合上面的讲解和代码中的注释一起理解。

代码语言:javascript
复制
<script src="https://cdn.jsdelivr.net/npm/p5@1.5.0/lib/p5.js"></script>

<script>
  // 颜色选择器
  let colorPicker
  // 滑块
  let brushSizeSlider
  // 布尔变量,用于跟踪是否正在绘制
  let isDrawing = false
  // 笔刷的大小,默认为10
  let brushSize = 10

  function setup() {
    // 创建一个400x400像素大小的画布
    let canvas = createCanvas(400, 400)
    canvas.style('border', '1px solid #ccc')
    
    // 创建颜色选择器
    colorPicker = createColorPicker('#ff0000')
    // 设置颜色选择器的位置
    colorPicker.position(10, height + 10)
    
    // 创建滑块
    brushSizeSlider = createSlider(1, 50, 10, 1)
    // 设置滑块位置
    brushSizeSlider.position(120, height + 10)
    
    // 创建按钮
    let resetButton = createButton('Reset')
    // 设置按钮位置
    resetButton.position(240, height + 10)
    // 设置按钮事件
    resetButton.mousePressed(resetCanvas)
    
    background(255)
  }

  function draw() {
    if (isDrawing) {
      let selectedColor = colorPicker.color()
      let selectedSize = brushSizeSlider.value()
      fill(selectedColor)
      noStroke()
      circle(mouseX, mouseY, selectedSize)
    }
  }

  // 当鼠标按下时
  function mousePressed() {
    isDrawing = true
  }

  // 当鼠标松开时
  function mouseReleased() {
    isDrawing = false
  }

  function resetCanvas() {
    background(255)
  }
</script>

上面的写法是用 CDN 的方式引入 p5.js,用法上和 npm 下载的 p5.js 是有一丢丢区别的,想了解这方面知识可以看看 《p5.js 使用npm安装p5.js后如何使用?》

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2023-06-14,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 动手编码
相关产品与服务
内容分发网络 CDN
内容分发网络(Content Delivery Network,CDN)通过将站点内容发布至遍布全球的海量加速节点,使其用户可就近获取所需内容,避免因网络拥堵、跨运营商、跨地域、跨境等因素带来的网络不稳定、访问延迟高等问题,有效提升下载速度、降低响应时间,提供流畅的用户体验。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档