iT邦幫忙

2021 iThome 鐵人賽

DAY 24
0
Modern Web

前端藝術 - 用P5.js做藝術系列 第 24

Day 24 - 了解文字藝術

Rita.js

  • Rita 使用範例
  • 拆解字串:RiString()
  • 取得詞性 pos()(Part of Speech)
    • nn: 名詞
    • jj: 形容詞
    • vbz: 動詞
    • dt: 定冠詞
    • in: 介系詞
    • 其他可參考常見的**詞性標注代號**
  • 取得隨機詞性的文字:lexicon.randomWord(詞性)
  • 操作範例
let sentence = `The quick brown fox jumps over the lazy dog.`
result = new RiString(sentence);
print(result.words()) 拆解單字
// ["The", "quick", "brown", "fox", "jumps", "over", "the", "lazy", "dog", "."]
print(result.pos()) 取得詞性
//["dt", "jj", "jj", "nn", "vbz", "in", "dt", "jj", "nn", ".", "dt", "jj", "jj", "nn", "vbz", "in", "dt", "jj", "nn", "."]

p5.speech

  • 建立 p5.speech 物件: new p5.Speech();
  • 唸出特定詞彙: foo.speak("狐狸")

範例練習

Raining

https://i.imgur.com/jNOKhoI.gif

Test Rita js

https://i.imgur.com/lkCaQRe.gif

p5 的語法們

  • createSpan / createP

課後練習

  • 找一首詩發想對應的動態互動
  • 練習切割英文文章 根據詞性做不同動態或視覺效果
  • 將文字分析結合物理模擬

作品範例

補充資料


上一篇
Day 23 - p5的WebGL應用 3D 設定
下一篇
Day 25 - 影像、聲音與影片的整合與拆解
系列文
前端藝術 - 用P5.js做藝術30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言