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 24] 阿嬷都看得懂的响应式网页设计在干嘛

>>:  Day24. 发动魔法卡,融合 - Composite (中)

【资料结构】图的表示方式与基本运作

图的基本定义 图的表示方式与基本运作 表示方式 相邻矩阵 若G(V,E)是含n个顶点的图,表示图G的...

安全框架和成熟度模型(Security Frameworks and Maturity Models)

构架(Frameworks) -NIST网路安全框架(NIST Cybersecurity Fram...

#19-我的台北直直落! 文字影片+滚动视差

有一阵子滑网页案例时,超常看到用SVG配上滚动视差(Parallax) 今天终於要来试试看了! 滚动...

HERE API Example - 限制地图移动

本文范例主要功能为限制 HERE 地图移动,当渲染地图与视图模型资料进行同步时就会触发 sync 事...

Mikrotik RouterOS从入门到实战系列-Mikrotik入门第三课

Mikrotik RouterOS从入门到实战系列-Mikrotik入门第三课 CAPsMAN无线控...