# 分享主題：伴伴學：阿達陪你學 [p5.js](http://p5js.org/)

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

**課程等級 Beginner**

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

自介

阿達 -> (商用英文)
(商用英文) -> (資管)
(資管) -> (數位媒體)
(數位媒體) -> (資訊設計)
(資訊設計) -> (網站工程師)

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

目錄：
[TOC]

# 基本操作
[打字](https://10fastfingers.com/typing-test/english) [線上編輯器](https://editor.p5js.org/)

user->(console.log)

[console](https://editor.p5js.org/tboydar/sketches/V-V9W2pei) [062201 ex](https://editor.p5js.org/tboydar/sketches/5Mcgwfbrw) [Sketch-RNN](https://editor.p5js.org/tboydar/sketches/g-uQo5GlS)
[ai](https://magenta.tensorflow.org/assets/sketch_rnn_demo/index.html) [models](https://github.com/magenta/magenta-demos/blob/master/sketch-rnn-js/README.md)

[P5js字典](p5js.org/refences) [畫圓](https://p5js.org/reference/#/p5/ellipse) [點](https://p5js.org/reference/#/p5/point) [線](https://p5js.org/reference/#/p5/line) [面](https://p5js.org/reference/#/p5/rect)

人 input ： 滑鼠 [x](https://p5js.org/reference/#/p5/mouseX) [y](https://p5js.org/reference/#/p5/mouseY) [lock_mouse ](https://editor.p5js.org/tboydar/sketches/bFh8NaCVv) [鍵盤](https://p5js.org/reference/#/p5/keyIsPressed)
[demo](https://editor.p5js.org/tboydar/sketches/Xn5zmOHc2)

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

# 看範例
[link](https://p5js.org/examples/)

# for loop art

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

[foreach](https://editor.p5js.org/tboydar/sketches/3GProatRH)
[mendala](https://editor.p5js.org/tboydar/sketches/5h7nbzo0I)

color
https://coolors.co/
https://www.w3schools.com/colors/colors_rgb.asp
[color-blindness.com
](https://www.color-blindness.com/color-name-hue-tool/color-name-hue.html)

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

ex:草間彌生

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

# 離散藝術 圖形


[demo](https://editor.p5js.org/tboydar/sketches/ksf--YgOp)

[SVG](https://editor.p5js.org/tboydar/sketches/1yY5_xFCQ
)

[ml5.js](https://editor.p5js.org/tboydar/sketches/w1WS4t6oI)

# 資料處理

json

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

# Intermediate / Advanced
*
* processing.org
* arduino.cc
* game 貪吃蛇
* game pinong
* websocket realtime chat room
* mqtt
* streaming erver
* [local p5js](https://github.com/processing/p5.js/wiki/Local-server)
* [sample](https://editor.p5js.org/tboydar/sketches/23Rzwj6zD)
* [itp](https://itp.nyu.edu/physcomp/labs/labs-serial-communication/lab-serial-input-to-the-p5-js-ide/)

# referernce links
* https://nycdoe-cs4all.github.io/
* https://www.youtube.com/user/shiffman
* [learn p5js.org](https://p5js.org/learn/)

# FB 活動連結
**[fb link 內有 加入 zoom 會議連結與資訊](https://fb.me/e/CPopyt28)
伴伴學 fb https://www.facebook.com/groups/accomdemy
伴伴學 hackmd https://hackmd.io/@accomdemy**

# 共筆區

* 歡迎自由填寫任何想要做的內容或問題?
1. Zhuqi: 除了RNN (reinforcement neural network，强化神经网络) CNN (convolutional neural metwork，卷积神经网络)之類的功能有嗎？
- *可以，Google搜索可以找到范例，但是训练过程时间较长*
3. Andrew: 上面出現的29,30是代表什麼意思？Dar: 代表執行了n次
4. Andrew: 他怎麼引用外部的函示庫？Dar: 從Index
5. Andrew: 加的動作需要手動加嗎？Dar: 可以在官網下載，但之前有提供script範例
6. 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](https://mitpress.mit.edu/books/design-numbers)

科技藝術家

無人機飛控版 arduino processing dashboard ，

pygame
pyqt