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

这篇具有很好参考价值的文章主要介绍了p5.js 开发点彩画派的绘画工具。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

本文简介

点赞 + 关注 + 收藏 = 学会了


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

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


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

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

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


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

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


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

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


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

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



动手编码

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

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

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

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

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

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


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

<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后如何使用?》


同时我还把本文的代码放到【码上掘金】了,有兴趣的工友自行获取吧~



推荐阅读

👍《p5.js 光速入门》

👍《p5.js 3D图形-立方体》

👍《p5.js 变换操作》

👍《p5.js map映射》

👍《p5.js 状态管理》

👍《p5.js 到底怎么设置背景图?》)


点赞 + 关注 + 收藏 = 学会了
代码仓库文章来源地址https://www.toymoban.com/news/detail-735774.html

到了这里,关于p5.js 开发点彩画派的绘画工具的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【AI资源福利篇】整理当前主流AI开发工具、聊天机器人、资讯、大语言模型、以及绘画等其他AI平台工具

    福利篇~~~~~~~~ 陆陆续续看了很多AI相关的网站,并且也实践了一些,今天整体整理一下分享给大家,希望大家都是风口上的猪,能够飞上天 开发工具 链接 开源AI辅助编程工具 AutoDev https://mp.weixin.qq.com/s/geT_kdP4cZWSpzrqbSZF3w Bito 是一款建立在OpenAI和ChatGPT模型之上的人工智能编程辅

    2024年02月14日
    浏览(61)
  • 策略模式,一种广泛应用于各种情况的设计模式(设计模式与开发实践 P5)

    定义:定义一系列算法,把它们一个个封装起来,并且可以互相替换 例如,我们要计算年终奖,年终奖根据绩效 A、B、C 来计算最终数值 最初我们很容易想到用 分支 if 来解决这个问题,如果绩效 = A 则工资 x 2,如果绩效 = B 则工资 x 3 如果经常使用这样的分支结构,你会发现

    2024年02月07日
    浏览(43)
  • 吉卜力风格水彩画怎么画?

    著名的水彩艺术家陈坚曾说:“水彩是用水润调和形成的饱和度极高的艺术画面,在纸上晕染的画面面积、强度等具有许多随意性,天空的颜色乌云密布,都是很随意的,难以模仿。” 是的,水彩画的妙处就在于不确定的美感。色彩在叠加之时有了水这个媒介,有了独特的韵

    2024年02月09日
    浏览(32)
  • 教程&硬货|微信小程序开发之基于vue的微信开发工具JS文件解读(一)

    鉴于前段时间出的第一篇记录安装Nodejs和HBuilderX搭建、部署微信小程序开发环境(一),有小伙伴问到关于微信开发工具的使用,特出本文带大家简单了解一下,开始“扫盲”! 微信公众平台:https://mp.weixin.qq.com/ 留意一下微信公众平台是注册小程序账号的,里面有个 AppID

    2024年02月09日
    浏览(57)
  • Node.js 开发常用到的库和插件工具,同事看到后也悄悄收藏了……

    Node.js是一个功能强大,并且非常流行的 JavaScript 运行时环境,使开发人员能够高效率的构建高性能应用程序。下面介绍了8个常见的应用程序开发中用到的库和函数,可以用于缓存数据、操作日期、处理图像、发送电子邮件、发出 HTTP 请求、记录请求和响应、压缩数据和哈希

    2024年02月09日
    浏览(45)
  • 在Chrome(谷歌浏览器)中安装Vue.js devtools开发者工具及解决Vue.js not detected报错

    提示:先安装谷歌助手的原因是:不安装谷歌助手无法打开谷歌应用商店,导致无法下载Vue.js devtools开发者工具。

    2024年02月15日
    浏览(71)
  • PDF.js - 免费开源的 JavaScript 读取、显示 PDF 文档的工具库,由 Mozilla 开发并且持续维护

    最近新项目需要处理 PDF,研究了 PDf.js 之后觉得很不错,于是写篇文章推荐给大家。 PDF.js 的功能和它的名字一样简单,是一个使用 HTML5 技术来让前端网页支持读取、解析和显示 PDF 文档的 JS 工具库。这个项目由大名鼎鼎的 Mozilla 组织开发并且更新维护着,没错,就是那个开

    2024年01月21日
    浏览(53)
  • 【跟乐乐学web3开发】一.使用IDE工具webstorm来编写web3js

    web3可以用java语言来编写,通过java的 web3j 依赖来编写,但是web3j对于abi的应用等支持库不太完整,所以还是多少有点局限性。 因此在当今的web3领域中,使用基于javaScript的 web3.js 库来编写web3应用是主流。 市面上大多的教材中,对于web3.js的编写是基于vscode这一款ide工具,这里

    2024年02月04日
    浏览(54)
  • 前端食堂技术周刊第 93 期:7 月登陆 Web 平台的新功能、Node.js 工具箱、Nuxt3 开发技巧、MF 重构方案

    美味值:🌟🌟🌟🌟🌟 口味:橙橙冰萃美式 食堂技术周刊仓库地址:https://github.com/Geekhyt/weekly 大家好,我是童欧巴。欢迎来到前端食堂技术周刊,我们先来看下上周的技术资讯。 Deno 八月更新 Deno 1.36 更灵活的权限控制、Deno Deploy 可过滤、搜索的持久化日志、Fresh 1.3 路由

    2024年02月13日
    浏览(45)
  • 树莓派的简单应用场景

    树莓派(Raspberry Pi)是一款由英国树莓派基金会(Raspberry Pi Foundation)开发的低成本、高性能的单板计算机。它采用了ARM架构的处理器,有不同型号和配置的版本可供选择。 树莓派主要用于教育和创客领域,它可以运行各种操作系统,如Linux、Windows 10 IoT Core等,并支持多种编

    2024年04月08日
    浏览(40)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包