本文簡介

點贊 + 關(guān)注 + 收藏 = 學(xué)會了

這幾天在整理書柜時看到這套書，看到梵高，想起他的點彩畫。

想到點彩畫派，不得不提的一個畫家叫喬治·皮埃爾·秀拉。據(jù)說梵高也模仿過他的畫作。

我引用一下維基百科對點彩畫派的解析：

點彩畫派（又稱點描派；英文：Pointillism）是一種用很粗的彩點堆砌，創(chuàng)造整體形象的油畫繪畫方法。

說簡單點，就是用圓點畫畫，比如秀拉的這幅作品《檢閱》。

這種風(fēng)格除了用在藝術(shù)繪畫方面，在眼科醫(yī)院體檢的時候也會用到，比如測紅綠色盲。

然后我又繼續(xù)想啊想，想到我們用 canvas 好像也能做出一款點彩畫的繪圖工具，但用原生的方式寫是不可能的，因為我懶。思前想后，還是覺得用 p5.js 寫會好點，畢竟這個庫也是個比較知名的藝術(shù)庫。

于是查了一下 p5.js 的 api ，做了一個簡陋版的工具。樣式方面就靠各位工友動手啦～

動手編碼

要實現(xiàn)這個畫版工具主要有以下步驟：

1. 創(chuàng)建 canvas 畫布。
2. 創(chuàng)建顏色選擇器。
3. 創(chuàng)建畫筆寬度控制器。
4. 需要一個重置畫布的按鈕。
5. 監(jiān)聽鼠標(biāo)點擊和點擊時移動的位置。
6. 根據(jù)鼠標(biāo)點擊和點擊時移動的位置創(chuàng)建圓形。
7. 點擊重置畫布按鈕將畫布背景設(shè)置回白色。

主要工作就是以上幾步，而且這幾步都用了 p5.js 提供的方法去實現(xiàn)。

主要用到的生命周期有 setup 和 draw，這部分我在 p5.js 光速入門 里有講到。

創(chuàng)建顏色選擇器、滑塊、按鈕分別用了 p5.js 的 createColorPicker() 、createSlider() 和 createButton() 方法。

繪制過程的代碼寫在 draw 周期里，使用了 circle() 方法創(chuàng)建圓形，圓形的坐標(biāo)就是鼠標(biāo)繪畫時的當(dāng)前坐標(biāo)，圓形的尺寸是取滑塊的值，圓形的顏色取了顏色選擇器的值。

以下是完整代碼，可以結(jié)合上面的講解和代碼中的注釋一起理解。

<script src="https://cdn.jsdelivr.net/npm/p5@1.5.0/lib/p5.js"></script>

<script>
  // 顏色選擇器
  let colorPicker
  // 滑塊
  let brushSizeSlider
  // 布爾變量，用于跟蹤是否正在繪制
  let isDrawing = false
  // 筆刷的大小，默認(rèn)為10
  let brushSize = 10

  function setup() {
    // 創(chuàng)建一個400x400像素大小的畫布
    let canvas = createCanvas(400, 400)
    canvas.style('border', '1px solid #ccc')
    
    // 創(chuàng)建顏色選擇器
    colorPicker = createColorPicker('#ff0000')
    // 設(shè)置顏色選擇器的位置
    colorPicker.position(10, height + 10)
    
    // 創(chuàng)建滑塊
    brushSizeSlider = createSlider(1, 50, 10, 1)
    // 設(shè)置滑塊位置
    brushSizeSlider.position(120, height + 10)
    
    // 創(chuàng)建按鈕
    let resetButton = createButton('Reset')
    // 設(shè)置按鈕位置
    resetButton.position(240, height + 10)
    // 設(shè)置按鈕事件
    resetButton.mousePressed(resetCanvas)
    
    background(255)
  }

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

  // 當(dāng)鼠標(biāo)按下時
  function mousePressed() {
    isDrawing = true
  }

  // 當(dāng)鼠標(biāo)松開時
  function mouseReleased() {
    isDrawing = false
  }

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

上面的寫法是用 CDN 的方式引入 p5.js，用法上和 npm 下載的 p5.js 是有一丟丟區(qū)別的，想了解這方面知識可以看看 《p5.js 使用npm安裝p5.js后如何使用？》

同時我還把本文的代碼放到【碼上掘金】了，有興趣的工友自行獲取吧～

推薦閱讀

??《p5.js 光速入門》

??《p5.js 3D圖形-立方體》

??《p5.js 變換操作》

??《p5.js map映射》

??《p5.js 狀態(tài)管理》

??《p5.js 到底怎么設(shè)置背景圖？》)

點贊 + 關(guān)注 + 收藏 = 學(xué)會了
代碼倉庫文章來源地址http://www.zghlxwxcb.cn/news/detail-735774.html

到了這里，關(guān)于p5.js 開發(fā)點彩畫派的繪畫工具的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！