Try   HackMD

分享主題：伴伴學：阿達陪你學 p5.js

分享內容

p5.js 是 Processing 的 JavaScript 移植版，藉助 JavaScript 可在各瀏覽器上執行的優勢，讓 p5.js 的成品，可以很方便地在網路上分享。Processing 是個透過視覺化來輔助程式設計學習的語言，最初設計是開發給設計師與藝術家使用， Arduino 也用它來做程式語言。

課程等級 Beginner

伴伴學 link

伴伴學 fb https://www.facebook.com/groups/accomdemy
伴伴學 hackmd https://hackmd.io/@accomdemy

自介

        

    

    

      Image Not Showing
      Possible Reasons
      
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported

      Learn More →

感謝太太照顧兩個小孩才有機會分享

目錄：

基本操作

打字 線上編輯器

        

    

    

      Image Not Showing
      Possible Reasons
      
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported

      Learn More →

console 062201 ex Sketch-RNN
ai models

P5js字典 畫圓 點 線 面

人 input ： 滑鼠 x y lock_mouse 鍵盤
demo

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

from: https://bmoren.github.io/p5js-cheat-sheet/zh.html

看範例

link

for loop art

https://editor.p5js.org/tboydar/sketches/1ryzcQhc4

foreach
mendala

color
https://coolors.co/
https://www.w3schools.com/colors/colors_rgb.asp
color-blindness.com

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

https://editor.p5js.org/tboydar/sketches/Uj0qTbm8O

ex:草間彌生

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

https://editor.p5js.org/tboydar/sketches/uQk3I9vTn

https://editor.p5js.org/tboydar/sketches/6X7iLXI0R

https://editor.p5js.org/tboydar/sketches/XTUmjMZO6
https://editor.p5js.org/tboydar/sketches/WWh1T1sXB

離散藝術 圖形

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

demo

SVG

ml5.js

資料處理

json

https://editor.p5js.org/tboydar/sketches/O06_BAJWS

Intermediate / Advanced

referernce links

FB 活動連結

fb link 內有 加入 zoom 會議連結與資訊
伴伴學 fb https://www.facebook.com/groups/accomdemy
伴伴學 hackmd https://hackmd.io/@accomdemy

共筆區

  • 歡迎自由填寫任何想要做的內容或問題?
  1. Zhuqi: 除了RNN (reinforcement neural network，强化神经网络) CNN (convolutional neural metwork，卷积神经网络)之類的功能有嗎？
    • 可以，Google搜索可以找到范例，但是训练过程时间较长
  2. Andrew: 上面出現的29,30是代表什麼意思？Dar: 代表執行了n次
  3. Andrew: 他怎麼引用外部的函示庫？Dar: 從Index
  4. Andrew: 加的動作需要手動加嗎？Dar: 可以在官網下載，但之前有提供script範例
  5. Zhuqi: p5.js 和线上做机器学习的 Jupyter notebook 或者 google colab比，有什么优势吗？
    • p5.js主要是用来训练数据集，可以可视化整个训练的过程

js 相關延伸

https://developer.mozilla.org/en-US/docs/Web/HTML
https://developer.mozilla.org/en-US/docs/Web/CSS
https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model
https://jquery.com/
https://nodejs.org/
https://angular.io/
https://vuejs.org/
https://reactjs.org/
https://facebook.github.io/reactnative/
https://threejs.org/
https://phaser.io/
https://d3js.org/
https://github.com/GoogleChrome/puppeteer
https://electronjs.org/ https://github.com/tauri-apps/tauri
https://cylonjs.com/
https://github.com/oliver-moran/jimp
https://github.com/wooorm/franc

學習者 引導者

有趣的程式語言

design by numbers

科技藝術家

無人機飛控版 arduino processing dashboard ，

pygame
pyqt

Last changed by 
 
Cheng-Dar Chiang
2
5
1619
Published on HackMD