vecp-week1

[mdecourse]

上課時段:

ven1a - 2018/03/02 起每週 (五) 晚上 10-11 節 (18:30-20:00)

課程介紹: 本課程名稱為計算機程式, 將分別利用 Lua, Python 與 C 說明計算機程式的基本功能.

第一週準備工作: 請各學員利用學校配發的 Gmail 帳號, 申請 Github 帳號, 登入 Github 後, 連結至 https://github.com/mdecourse/vecp2018/issues 後, 了解如何在各週上課內容 issues 中提出問題、心得與相關討論議題.

第一週課程內容

初步了解 Lua 程式語言

http://lua-users.org/wiki/ScopeTutorial

參考資料:

Python 機器人控制: . https://github.com/clamesc/Training-Neural-Networks-for-Event-Based-End-to-End-Robot-Control Lua 程式設計教學: . Lua 簡介 . https://cwchen.tw/lua-prog/ . http://www.runoob.com/lua/lua-tutorial.html . 從 Javascript 學 Lua . http://lua-users.org/wiki/ObjectOrientationTutorial Lua 應用: . 基因演算與類神經網路應用 . 靜態網頁轉檔 V-rep 建模: . https://www.jianshu.com/p/eb3f38c0c5fa . https://github.com/Johan944/Need4Stek . https://github.com/eligoldweber/DriverlessCarSimulation . https://github.com/jokla/vrep_car_simulation . https://github.com/Eric-Gonzalez/car-simulator . https://github.com/AgrawalAmey/rl-car

碰撞檢測: . https://github.com/vrld/HC

[mdecourse]

Github 系統操作:

申請帳號:

1. 請使用學校所配發的 Gmail 郵箱申請 Github 帳號, 申請時請利用瀏覽器, 連結 https://github.com/join 後, 在表單中填入 username (使用者名稱), 建議採用學號, Email address (電子郵箱), 建議使用學校電子郵箱, Password (密碼), 規定至少 7 個字元, 且必須至少包含一個數字, 以及至少一個小寫的英文字母.

2. 申請單填寫送出後, 請登入所填寫的電子郵箱中, verify email address (確認可以從對應的電子郵箱收到信件), 完成電子郵箱確認後, 才能開始使用 Github 系統中的各種功能.

Issues 使用:

1. Issues 為 Github 系統中用來回報並討論與倉儲 (repository) 有關的各項議題, 在本課程中, 利用 Issues 發布課程規劃, 並且透過 Issues 派送每週課程內容, 各學員可以登入 Github 帳號後, 在每週課程對應的 Issues 項下, 提出問題、心得或相關討論議題.

2. 在 Issues 表單中 , 共有 Write 與 Preview 等兩個 Tabs (頁面), 使用者可以在 Write 頁面中編輯 Issues 內容, 也可以利用 Preview 頁面檢視送出後所得到的 Issue 結果.

3. 在 Issues 表單中直接輸入 URL (Uniform Resources Locator) 網址, Github 會直接轉為 html 中的 anchor 連結, 假如希望 Add a link, 可以選擇任何 Write 編輯中的字元或字串, 然後點按右上方的 Add a link, 就可以將 URL 與所選的字元或字串對應, 轉換成 html anchor 連結, 使用者點擊 Add a link 的字元或字串後, 就會連結到對應的網址.

4. 假如需要在 Issues 中展示有特定格式的內容, 建議在相關 Github 倉儲中建立檔案資料後, 再根據所要連結的資料版次, 以 Add a link 方式提供對應連結.

利用 lesson1_traffic_light.lua 檔案截至目前有兩個版本, 在此可以透過 lesson1_traffic_light.lua 版本 1 (以 raw 資料顯示), 以及版本二 (帶有行號的資料顯示),提供詳細的程式內容資料.

使用者希望利用 Issues 中的連結, 導引到其他圖片, 影片或 pdf 檔案時, 也可以採用相同的方法, 先將資料送到某倉儲之後, 再以 Add a link 提供對應連結.

[40628455]

第15組 40628406 40628409 40628455

[mdecourse]

Small is beautiful

根據 https://github.com/mdecourse/vecp2018/blob/gh-pages/lua/small_is_beautiful_lua.pdf

local canvas = document:getElementById("canvas") 也可以寫成

local canvas = document.getElementById(document, "canvas")

ctx:closePath() 也可以寫成 ctx.closePath(ctx)

[mdecourse]

Fengari web 與 Cango 程式庫

範例:

-- 導入 "js" 模組
local js = require "js"
-- global 就是 javascript 的 window
local window = js.global
local Array = js.global.Array

-- 將 lua table 轉為 new JavaScript Object 的方法
-- e.g. Object{mykey="myvalue"}
local function Object(t)
    local o = js.new(js.global.Object)
    for k, v in pairs(t) do
        assert(type(k) == "string" or js.typeof(k) == "symbol", "JavaScript only has string and symbol keys")
        o[k] = v
    end
    return o
end

-- javascript constructor
local canvas = js.new(window.Cango, "canvas")
local path = js.new(window.Path)
local shape = js.new(window.Shape)
-- Javascript 變數
shapedefs = window.shapeDefs
-- 角度轉為徑度
deg = math.pi/180
canvas:clearCanvas()

canvas:gridboxPadding(10, 10, 5, 7)
canvas:fillGridbox("lightgreen")
canvas:setWorldCoordsRHC(0, 0, 80)
-- 利用自定義的 Object 函式, 將 Lua Table 轉為 Javascript 物件
canvas:drawText("gc.setWorldCoordsRHC() 設為 Y 向上為正", Object{x=2, y=52, fontSize=23, fillColor="black"})
-- Lua 的 Table 轉為 Javascript Array (在 Python 為數列) 的方法
t = {"M",0,0, "L", 35*math.cos(30*deg), 35*math.sin(30*deg), 0, 0}
-- one way to convert t table to javascript array
--t_js_array = js.global:Array(table.unpack(t))
-- better way
t_js_array = js.global:Array()
t_js_array:splice(0, 0, table.unpack(t))
canvas:drawPath(t_js_array)

Brython 與 Cango 繪圖範例

#Cango 繪圖
from browser import window
import math
cos30 = math.cos(30*math.pi/180)
sin30 = math.sin(30*math.pi/180)

# Javascript 物件
cango = window.Cango.new
path = window.Path.new
shape = window.Shape.new
# Javascript 變數
shapedefs = window.shapeDefs
g1 = cango("can1_container")
g1.clearCanvas()
g1.gridboxPadding(10, 10, 5, 7)
g1.fillGridbox("lightgreen")
g1.setWorldCoordsRHC(0, 0, 80)

g1.drawText("gc.setWorldCoordsRHC() 設為 Y 向上為正", {'x':3, 'y':52, 'fontSize': 30, 'fillColor':"black"})
g1.drawText("X", {'x':60, 'y':2, 'fontSize': 30, 'fontWeight': 800, 'lorg': 9, 'fillColor': "black"});
g1.drawText("Y", {'x':2, 'y':30, 'fontSize': 30, 'fontWeight': 800, 'lorg': 1, 'fillColor': "black"});

g1.drawArrow(60, 0, {'shaftWidth':2.5, 'fillColor':'black'});
g1.drawArrow(0, 30, {'shaftWidth':2.5, 'fillColor':'black'});
g1.drawPath(["M", 0,0, "L", 35*cos30, 35*sin30, 0, 0]);
g1.drawArrowArc(25, 0, 30, {'clockwise':False, 'shaftWidth':2.5, 'fillColor':'black'});