2020年5月19日 星期二

人工智慧也來當應援團!(下)


人工智慧什麼都難不倒它?要應援,要組隊都可以!
人工智慧什麼都難不倒它?要應援,要組隊都可以!


若實現了「精準預測球體飛行的模型」後,機器人才能上場:先用攝影機取得投手「球剛離開手」的幾張照片把它輸入到模型裡面,模型就會進行估算、預測完整球體的飛行軌跡,機器人才能看球落到事先設定好的地方,以最適當的角度、力道,精準地擊出一記安打! 也許有一天,我們能夠觀賞真人球員與人工智慧對決的棒球賽事呢!

體壇上的 AI 機器人 總有一天超越人類選手?

2015 年的東京車展上,Yamaha 展出了會騎摩托車的 AI 機器人「MOTOBOT Ver1」。此時的 MOTOBOT 只可以騎到時速一百以及做一些角度較大、較簡單的過彎動作。但 MOTOBOT 在當時的官方影片中,指名挑戰「The Doctor」——Yamaha 自家最強 MotoGP 選手 Valentino Rossi。
推薦閱讀:為超越MotoGP冠軍VR46而生:人工智慧重機賽車手MOTOBOT
▲2015 年的 AI 重機車手「MOTOBOT」第一代剛「誕生」不久,就指名要挑戰 MotoGP 選手 Valentino Rossi。 兩年後的 2017,第二代「MOTOBOT Ver2」再現於東京車展上。此時的 MOTOBOT 手腳細節都已經改良過,且已騎到時速 200 km,更重要的是——根據 Yamaha 官方釋出的影片上,它只落後 Rossi 30 多秒!
▲2017 年的「MOTOBOT」時速已可達兩百,且還只落後 Rossi 30 多秒!連 Rossi 本人都對其進步速度感到驚訝。 只要兩年的時間,這款 AI 機器人就能從時速一百進步到時速兩百,而且還只落後 Rossi 30 多秒!這樣子的進步,連 Rossi 都感到驚訝。
推薦閱讀:AI 甩尾技術勝 Ken Block!方程式冠軍車手嘆:要失業了
▲史丹佛開發 AI 甩尾技術已超越人類,影片 1:35 處顯示方程式車手 Fredric Aasbø 看了 AI 甩尾的影片後,嘆「要失業了...」 其實在體壇上,不僅僅是機車賽事的 MotoGP 受到衝擊,汽車甩尾界首屈一指的「D 級方程式」甩尾大賽的多年冠軍——Fredric Aasbø 再看了史丹佛大學研發的甩尾 AI 機器人,精準連甩了多個極其狹窄的彎道之後,都大嘆「要失業了」!難道有一天,人類運動選手真的會被取代嗎? 即使職業車手會因 AI 而自開玩笑「擔心失業」,換個角度想,反之成為人工智慧的創造者,想必就不會失業了吧。
推薦閱讀:AI 又贏了?人工智慧「Suphx」打敗人類麻將高手!
  本篇為下篇,上篇請點此連結

 相關文章:

從哆啦A夢到 iPhone...為何 UI 設計用「圓角」就是比較討喜?

APCS 程式檢定,該從 C、Java 還是 Python 下手?

前端工程師CSS教學】定位元素Positioning Elements

狗狗是人工智慧的最佳教練!Google AI機器人學狗左轉右彎還能小跑

人工智慧讓視障朋友看見世界(上)

人工智慧學校執行長陳昇瑋驟世!

人工智慧用Python輕鬆寫出專屬自己的番茄鐘(下)

2020年5月18日 星期一

人工智慧也來當應援團!(上)

人工智慧什麼都難不倒它?要應援,要組隊都可以!
人工智慧什麼都難不倒它?要應援,要組隊都可以!

新冠肺炎疫情嚴重影響了全球的政治與經濟——包含了因疫停賽的美、日、韓等國家職棒;卻也激發各產業的創意,設法推出應變奇招。中華職棒突破萬難,於 4 月 12 日領先全球,在桃園閉門複賽,為世界棒壇注入一針強心劑!

▲日前(4月12日)中華職棒在桃園閉門複賽,派出 AI 機器人樂團應援與人形立牌充當觀眾,廣獲中外媒體注意、報導 。
 
雖然複賽仍以閉門的模式——不開放觀眾到場,少了擊鼓應援、加油的吶喊聲,恐會讓比賽冷場走味。但俗話說「養兵千日,用在一時」,這不就是那些機器人們「神救援」的好時機嗎?職棒界的「點子王」——主場位於桃園的樂天桃猿隊,除了在觀眾席設下靜態人形立牌、人偶充當觀眾之外,還增設桃園在地祥儀機器人夢工廠的機器人應援團「AI 精靈樂團」,擊鼓替球員加油,增添看球趣味性。

機器人都能應援球賽了,那AI是否能上場打球?

▲交大電機教授蕭得聖於 2014 年研發的「會打棒球的機器人2.5代」,已能精準判斷球路、好球、壞球,並能判斷打擊後球的落點,自主決定是否揮棒。 

現實世界中,一位職棒選手的養成,可說是經歷千辛萬苦。台灣職棒選手前往美國挑戰大聯盟,多是年輕時就從小聯盟開始訓練(除了從日職轉戰大聯盟的陳偉殷之外)。小聯盟又分成六級別,所以一待就是好幾年,也不一定能打到大聯盟。 除了需要長年經驗,棒球的技巧也是千變萬化。投手不可能只是丟個直球而已,還會隨機出現卡特球、伸卡球、滑球、螺旋球等出其不意的球路,加上僅僅只有零點幾秒的速度……人工智慧機器人是否有能力打到球呢? 交通大學電控所蕭得聖教授所領導的團隊,長期鑽研打棒球的機器人。他們的目標不只是要讓 AI 機器人打得到球,還要擊出安打!針對打造此類「安打機器人」,蕭教授提到了四個關鍵點:

四關鍵點 成就人工智慧棒球員「安打機器人」

首先,機器人要能「看」得準個是來球!為能讓機器人能即時測量球體在三度空間中的飛行軌跡,超高速雙眼攝影機是必須配備。以現今的技術來說是可行的,預算充足的話,連球的縫線都能看得清清楚楚! 只看得到球還不夠,還要能把球打出去!此時就要依照球的質量、慣量、球速等數值,估算出球衝擊到球棒時的動量(描述物體「運動狀態與慣性大小」的空間向量)。這影響到機器人手臂的材質、馬達必須輸出多少力距等等。 若以上兩條件都實現了,就夠了嗎?不!還要經過「磨合」的階段,彼此校正,讓攝影機與機器手臂間的訊息傳遞同步、協調,避免眼手「各行其事」不同調。 現在能看能打的機器人出來了!前面提到,蕭教授的目標是機器人「每打必能擊出安打」,所以除了「眼明手快」的條件達成之外,還要「精準地預測球通過本壘板時的位置與速度」,因此需要能「精準預測球體飛行軌跡的模型」。這個模型決定了棒球機器人的成敗。

▲棒球比賽中,投手常隨機投出難以預測的球路。影片為伸卡球、滑球與指叉球介紹。 

快速球、選轉球……每位投手投球時各有獨門祕技,甚至還會妙用球的縫線做變化。因此要打造球體飛行軌跡的預測模型,必須考慮到重力、空氣阻力等來自四面八方的外力以及其他的複雜狀況,對於各式球路所造成的影響。這套精準模型其中的秘辛,都是蕭教授的 know-how 。

 本篇為上篇,下篇請點此連結

 相關文章:

  從哆啦A夢到 iPhone...為何 UI 設計用「圓角」就是比較討喜?

  APCS 程式檢定,該從 C、Java 還是 Python 下手?

【前端工程師CSS教學】定位元素Positioning Elements

  狗狗是人工智慧的最佳教練!Google AI機器人學狗左轉右彎還能小跑

人工智慧讓視障朋友看見世界(上)

人工智慧學校執行長陳昇瑋驟世!

  人工智慧用Python輕鬆寫出專屬自己的番茄鐘(下)  

2020年5月14日 星期四

APCS程式檢定短期衝刺從哪下手呢?(下)

APCS程式有什麼撇步呢?看這篇就對了!

考APCS程式有什麼撇步呢?看這篇就對了!
程式設計實作題
  • 題型:共計有 4 個題組,以完整撰寫程式或副程式來計分。
  • 測驗和計分的方式:單節次測驗 (測驗的時間是 140 分鐘),滿分為 400 分

實作題例題

問題描述

一次考試中,於所有及格學生中獲取最低分數者最為幸運,反之,於所有不及格同學中,獲取最高分數者,可以說是最為不幸,而此二種分數,可以視為成績指標。請你設計一支程式,讀入全班成績(人數不固定),請對所有分數進行排序,並分別找出不及格中最高分數,以及及格中最低分數。當找不到最低及格分數,表示對於本次考試而言,這是一個不幸之班級,此時請你印出:「worst case」;反之,當找不到最高不及格分數時,請你印出「best case」。註:假設及格分數為 60,每筆測資皆為 0~100 間整數,且筆數未定。

輸入格式

第一行輸入學生人數,第二行為各學生分數(0~100 間),分數與分數之間以一個空白間格。每一筆測資的學生人數為 1~20 的整數。

輸出格式

每筆測資輸出三行。
第一行由小而大印出所有成績,兩數字之間以一個空白間格,最後一個數字後無空白;
第二行印出最高不及格分數,如果全數及格時,於此行印出 best case;
第三行印出最低及格分數,當全數不及格時,於此行印出 worst case。

範例一:輸入

10
0 11 22 33 55 66 77 99 88 44

範例一:正確輸出

0 11 22 33 44 55 66 77 88 99
55
66
(說明)不及格分數最高為 55,及格分數最低為 66。

範例二:輸入

1
13

範例二:正確輸出

13
13 worst case
(說明)由於找不到最低及格分,因此第三行須印出「worst case」。

範例三:輸入

2
73 65

範例三:正確輸出

65 73
best case
65
(說明)由於找不到不及格分,因此第二行須印出「best case」。

評分說明

輸入包含若干筆測試資料,每一筆測試資料的執行時間限制(time limit)均為 2 秒, 依正確通過測資筆數給分。
針對實作題,我們分別使用 C、PythonJava 來解題,語法如下:

實作題解法#1 - 使用 C 語言(最費時):

#include < stdio.h >
#include < stdbool.h >

int len;
int *scores;

main()
{
    int i, j, tmp, highestUnpass, lowestPass;
    bool best=false, worst=false;
    scanf("%d", &len);
    scores = (int *)malloc(sizeof(int) * len);
    for (i=0;i < len;i++)
        scanf("%d", &scores[i]);
    for (i=0;i < len-1;i++)
        for(j=i+1;j < len;j++)
            if (scores[i] > scores[j])
            {
                tmp = scores[i];
                scores[i] = scores[j];
                scores[j] = tmp;
            }
    for (i=0;i < len;i++)
    {
        printf("%d", scores[i]);
        if (i < len-1)
            printf(" ");        
    }
    printf("\n");
    if (scores[len-1] < 60)
    {
        worst = true;
        highestUnpass = scores[len-1];
    }
    if (scores[0] >= 60)
    {
        best = true;
        lowestPass = scores[0];
    }
    if (worst == false && best == false)
    for (i=0;i < len;i++)
        if (scores[i] >= 60)
        {
            highestUnpass = scores[i-1];
            lowestPass = scores[i];
            break;
        }
    if (best)
        printf("best case\n");
    else
        printf("%d\n",highestUnpass);
    if (worst)
        printf("worst case\n");
    else
        printf("%d\n",lowestPass);
}

實作題解法#2 - 使用 Python 語言(最省時):

nums = int(input())
strScores = input()
scores = strScores.split(" ")
for i in range(len(scores)):
    scores[i] = int(scores[i])
scores.sort()
for i in range(len(scores)):
    print(scores[i], end="")
    if i < len(scores)-1:
        print(" ", end="")
print()
best = False
worst = False
if scores[len(scores)-1] < 60:
    worst = True
    highestUnpass = scores[len(scores)-1]
if scores[0] >= 60:
    best = True
    lowestPass = scores[0]
if best==False and worst == False:
    for i in range(len(scores)):
        if scores[i] > 60:
            lowestPass = scores[i]
            highestUnpass = scores[i-1]
            break
if best:
    print("best case")
else:
    print(highestUnpass)
if worst:
    print("worst case")
else:
    print(lowestPass)

實作題解法#3 - 使用 Java 語言(所花時間適中):

import java.lang.reflect.Array;
import java.util.Arrays;
import java.util.Scanner;

public class T01 {

    public static void main(String[] args) {
        // TODO Auto-generated method stub
        Scanner scanner = new Scanner(System.in);
        
        String nouse = scanner.nextLine();
        String data = scanner.nextLine();
        String[] strScores = data.split(" ");
        int len = strScores.length;
        int [] intScores = new int[len];
        int i;
        for (i=0;i < len;i++)
        {
            intScores[i] = Integer.parseInt(strScores[i]);
        }
        Arrays.sort(intScores);
        boolean best=false, worst=false;
        int highestUnpass = 0, lowestPass = 0;
        if (intScores[0] >= 60)
        {
            best = true;
            lowestPass = intScores[0];
        }
        if (intScores[intScores.length-1] < 60)
        {
            worst = true;
            highestUnpass = intScores[intScores.length-1];
        }
        
        for (i=0;i < len;i++)
        {
            System.out.print(intScores[i]);
            if (i < len-1)
                System.out.print(" ");              
        }
        System.out.println();
        if (best == false && worst == false)
        {
            for (i=0;i < len;i++)
            {       
                if (intScores[i] > 60)
                {
                    highestUnpass = intScores[i];
                    lowestPass = intScores[i-1];
                    break;
                }           
            }
        }
        if (best)
        {
            System.out.println("best case");
        }
        else
        {
            System.out.println(highestUnpass);
        }
        if (worst)
        {
            System.out.println("worst case");           
        }
        else
        {
            System.out.println(lowestPass);
        }                
    }
}
總結一下綜合比較的部分:
  • 學習上手速度:Python > Java > C
    (但 Python 與其他兩者程式語言差異較大,若一開始就選擇從 Python 語言上手 ,還是必須多花不少時間理解 C 語言,才能解答觀念題。)
  • 實際作答速度:Python > Java > C
    (Python 與 Java 都具備函式庫,在實作題作答時會比 C 語言快速。)

APCS 短期衝刺,從 Java 著手 CP 值最高!

以學習效果與所花時間的比值來說,學習 Java 的 CP 值較高。以下說明為什麼:
雖然 Python 堪稱「程式語言的瑞士刀」,其語法直觀、編寫簡潔快速,比起 C , Java 更容易上手,但由於觀念題是由 C 語言出題,若學 Python 再接觸 C ,對於有時間與其他課業壓力的考生來說,是相當辛苦、費時的。
Java 本身是由 C / C++為概念改良而成的語言,在設計之初,考量重點之一便是簡潔,因此學習與 C 語言語法架構相似的 Java ,讓考生有操作基礎後再學習 C 語言,更能在檢測學習之路,更加如魚得水。
綜合以上觀點,投資在能兼顧「理論題」與「實務題」的 Java,才是事半功倍、投報率最高的首選!
最後貼心提醒:109 年第 2 次 APCS 檢測暫訂 2020 年 7 月 4 日!
各位考生可以開始逐步準備 APCS 檢測囉!

本篇為下篇,上篇請點此連結
相關文章:


2020年5月13日 星期三

APCS程式檢定短期衝刺從哪下手呢?(上)

APCS程式有什麼撇步呢?看這篇就對了!
考APCS程式有什麼撇步呢?看這篇就對了!
新手上路報考 APCS 程式,第一次應該從哪個程式語言才會事半功倍呢?

若是一開始就選到一個好上手、測驗時又好作答的程式語言,就可以減少準備時間和學習負擔!本篇文章將以三款詢問度較高的應考語言 C , Java , Python 來做解析、比較。

此篇你將了解...1. APCS 檢測的規範與基礎2. C , Java , Python - 哪個語言適合解題?




先來了解一下檢測內容的基礎概念,APCS 的兩大題組 【觀念題】與【實作題】

程式設計觀念題


  • 題型:單選題 (含題組),以運算思維、問題解決與程式設計概念測試為主。
  • 檢測與計分方式:分兩節次檢測 (單節測驗時間60分鐘), 檢測分數為合併計分,滿分100分

觀念題例題#1

1. 右側程式碼,執行時的輸出為何?
  1. (A) 0 2 4 6 8 10
  2. (B) 0 1 2 3 4 5 6 7 8 9 10
  3. (C) 0 1 3 5 7 9
  4. (D) 0 1 3 5 7 9 11
void main() {
    for (int i=0; i<=10; i=i+1) {
        printf ("%d ", i);
        i = i + 1;
    }
    printf ("\n");
}
(出自 105 年 3 月 5 日,理論題第 15 題)

這一題主要要測驗的內容,是考驗考生是否了解 C 語言當中, for 迴圈的結構。
以 for 迴圈來說,三的區段的值分別是初始值、條件值、運算值。
在這一題當中,第一次執行的時候 i 為 0 ,所以會先印出 0。
接下來,由於第四行 i=i+1 的關係, i 會變為 1 。但是執行迴圈時,回到了 for 的第三部分,這時候,還是另外一次的 i=i+1 ,所以 i 變為 2,然後進行驗證, i <= 10
根據這樣的執行邏輯, i 每印出一個就會 +2 一次,直到 i 超過 10 之後跳出迴圈。

Ans:所以會印出「0 2 4 6 8 10」

觀念題例題#2

2. 若以 f(22)呼叫右側 f()函式,
總共會印出多少數字?
  1. (A) 26
  2. (B) 22
  3. (C) 11
  4. (D) 15
void f(int n) {
    printf ("%d\n", n);
    while (n != 1) {
        if ((n%2)==1) {
            n = 3*n + 1;
        }
        else {
            n = n / 2;
        }
        printf ("%d\n", n);
    }
}
(出自 105 年 3 月 5 日,理論題第 21 題)

本題所考內容,是對於 while 與 if 的熟悉度。
傳入 22 進 function 之後,會先印出 22。
接下來進入 while 迴圈,如果 n 不是 1 ,那麼這個迴圈會一直執行。
while 當中, 如果 n 是奇數,則 n 會變成 3xn+1 ,如果 n 是偶數,那 n 會變成原來的一半。
所以整個流程會是「22➔11➔34➔17➔52➔26➔13➔40➔20➔10➔5➔16➔8➔4➔2➔1」。

2020年5月12日 星期二

UI設計中人見人愛的關鍵點就是”那個”! (下)

UI有一個小心機是圓角,有三種論述:認知負荷論.視覺動線論,曲線偏坦論

UI有一個小心機是圓角,有三種論述:認知負荷論.視覺動線論,曲線偏坦論


1. 認知負荷論(cognitive load theory)

認知負荷理論是由澳大利亞新南威爾士大學的認知心理學家 John Sweller 在1988 年所提出的,他假設人類的認知結構是由工作記憶和長時記憶所組成。其中工作記憶可稱為短時記憶,容量非常有限,一次只能記下 5~9 條簡單的訊息。
著有《視知覺》(Visual Perception)的瑞士物理學家、藝術家 Jürg Nänni 也曾提出:視網膜中區處理「正圓形」是最快的,處理多稜角的形狀則比較吃力,速度也會較慢。
結合以上理論我們可以得知:「圓角」更容易被大腦處理,因為它能夠降低大腦的認知負荷,也有利於在同樣時間內接受更多資訊。故比起一般的矩形,人類的大腦更願意接納圓潤的圓角矩型。


2. 視覺動線論

視覺動線是指在讀取眼前資訊時,視覺移動時所構成的方向路徑。這表示視覺動線決定了設計的焦點所在、擺放的位置與順序。
人眼在擷取資訊時,通常不一定會意識到有視覺動線隱藏其中,但眼睛卻會自然而然地依照視覺動線的設計來移動。
而圓角的「曲線」能自然地、圓滑地帶動一般人的視覺動線,而不會感到突兀與刺眼。


3. 曲線偏坦論(Contour Bias)

以演化心理學的觀點來看,人在面臨可能造成危害的事物時,會湧現出恐懼、不安與抗拒的情緒,這是人類經歷長時間的演化後遺傳下來的「適應體」,目的是幫助我們存活,提高生存機會。
除了心理學,腦科學也指出當面對尖銳的物體時,大腦的杏仁核活性會增強。杏仁核是邊緣系統的皮質下中樞,有產生情緒的功能,能產生恐懼記憶並引發應急反應,讓身體能逃離危險。
所以,人類對於形狀銳利的物品往往有先天的排斥,如會連想到尖銳物的方角矩型;對於有曲線的圓融物體則會有較高的接納度,讓圓角矩型不被人腦淺意識抗拒。


圓角不是萬靈丹 善用不濫用才是好的 UI

我們已經知道了圓角佔有許多先天優勢,但並非一股腦地選擇圓角就是正確答案。
在 UI 設計的領域,需要考量的有品牌識別、選用字體、色彩配置以及邊緣線條的採用等等,今天企業若要一切都端正穩重,那圓角就不一定是最佳解答;並且若是矯枉過正,使用弧度過大的圓角可能會看起來不專業,造成反效果。
UI師能塑造出怎麼樣的品牌視覺,背後有許多的「眉眉角角」,需要不斷吸收新知、訓練思考,長時間累積自我的美學素養。


本篇為下篇,上篇請點此連結


相關文章:

從哆啦A夢到 iPhone...為何 UI 設計用「圓角」就是比較討喜?

APCS 程式檢定,該從 C、Java 還是 Python 下手?

【前端工程師CSS教學】float浮動屬性

AI人工智慧救地球!Google:AI 保護環境還比人類快 3000 倍

新身分證UI設計新功能好期待(上)

新身分證UI設計功能有亮點(下)

APCS認證高中職學生程式設計能力指標-1

2020年5月11日 星期一

UI設計中人見人愛的關鍵點就是”那個”!(上)

UI設計中有個小心機:圓角矩形,讓人見了就喜歡,夠神奇吧?

UI設計中有個小心機:圓角矩形,讓人見了就喜歡,夠神奇吧?



近年來大家都知道 UI 設計優勢是「圓角矩形」,自 iPhone 4 發售至今日,到處都可以看到這個看似簡單、但實際上富有深意的幾何圖形。

然而圓角矩形何以能擄獲 Steve Jobs 以至於世人芳心呢?箇中緣由,其實也藏在哆啦 A 夢身上!

「圓角矩形」在現代 UI 中代表簡約、清爽與和平易近人。這些印象是因幾何圖形能帶給人們的心理暗示,任何圖形設計元素如形狀、線條、顏色、紋理和圖案,都能淺移默化地影響人們的感官認知,從而讓平面圖形附上不同的喻意。

乍聽之下有點形而上學,但其實我們從童年開始就不斷在接收幾何圖形的心理暗示了——許多卡通動畫中的角色,也都被賦予了「幾何暗示」!

三角形的小夫、方形的胖虎……哆啦 A 夢中的幾何暗示



▲ 哆啦 A 夢中的五個角色造型都跟個性息息相關(圖片取自 flickr)

陪伴許多人長大的國民作品《哆啦 A 夢》(ドラえもん),其中的主要角色個個形象鮮明、深入人心,是運用幾何圖形設計角色的好範例:
自戀愛現、在狡猾的同時又常有鬼點子的小夫,從是身形、嘴形到髮型都呈現三角形;而個性粗暴、蠻不講理,但在緊要關頭時又展現了正直的胖虎,無論臉型與身體都呈現寬大的方型。
至於個性善良溫柔、富有同情心的靜香,臉型與整題造型都較圓潤,沒有稜角;至於最備受喜愛的哆啦 A 夢,整個角色從頭到手都是圓型設計。



▲藝術家實際示範如何以基礎的圓型、三角形與方形設計角色形象。

不只日本,歐美的畫家、藝術家、動畫師等角色設計專家們也時常以「幾何造型」為基底,藉此創造出引人入勝、個性鮮明的角色,足見一個好的幾何設計所具有的優勢。

卡通之外 賈伯斯也瘋狂的圓角設計

不只卡通動漫畫之外,許多商業產品也為了讓客戶留下良好的第一印象,採用親民的圓角設計。
話說從頭,要談圓角矩型,就不得不談它成為設計趨勢的轉折點——iPhone 的發布。Steve Jobs 認為:所有物件都有圓角,而且相較於圓形與橢圓形,圓角矩形設計在生活中其實更為常見。




▲ 2020 年發售的 iPhone SE 依然保留標誌性的圓角設計。

1981 年,Steve Jobs 要求當時任職蘋果的電腦工程師 Bill Atkinson 設計出可以快速畫出圓角矩形的方法。當時已能快速繪製出長方形、圓形與橢圓形的 Bill當下便反駁:「圓角的矩形很難用電腦技術畫出來,而且又不必要!」
Steve Jobs 二話不說便把 Bill 從座位上拉起來,指著房間內的白板、桌椅等所有圓角矩型的物品。更帶著他出門上街,指出大街小巷每個小角落的圓角矩形給他看:「你看,到處都有圓角矩形!」
最後,在一個「禁止停車」的圓角矩形路標牌被指出來後,Bill 認輸了。「好啦,我放棄。我回去看看是不是真的跟我想像的一樣困難。」
隔天下午,Bill 就研究出快速繪製圓角矩形的方法。如今在 iOS 系統裡,這個幾何圖形已經成為其
UI介面傳承的一部分。

不只是「好看」 圓角設計的背後深意


近年 3C 產品硬體設計上都大量使用圓角,
UI 介面設計也順其自然地大量採用圓角。除了是為了要「跟上潮流」,圓潤的造型也的確讓產品設計加分。舉凡服務性產品、企業官網、社群媒體、網路商店等,需要 UI 介面的地方全都導入圓角設計。但是圓角「好看」的背後,到底是什麼原因?
人們為何會熱愛圓角的科學根據尚未定論,大致有以下三種說法:

本篇為上篇,下篇請點此連結

相關文章:

從哆啦A夢到 iPhone...為何 UI 設計用「圓角」就是比較討喜?

APCS 程式檢定,該從 C、Java 還是 Python 下手?

【前端工程師CSS教學】float浮動屬性

AI人工智慧救地球!Google:AI 保護環境還比人類快 3000 倍

新身分證UI設計新功能好期待(上)

新身分證UI設計功能有亮點(下)

APCS認證高中職學生程式設計能力指標-1

2020年5月7日 星期四

前端工程師CSS入門必學- float浮動屬性

前端工程師入門必學的float浮動屬性,學起來吧!
前端工程師入門必學的float浮動屬性,學起來吧!

CSS 的 float (浮動) 屬性

前端工程師在做網頁排版的時後,一定要用的基本語法之一是CSS 的 float (浮動) 屬性。使用 CSS float 浮動屬性,可將一個元素往左移動或者是往右移動,而且可讓其他的元素圍繞它(例如文繞圖、圖繞文等)。

float 浮動屬性的使用時機

使用 <div> 等區塊元素排版時,預設的排列方式都是由左至右、由上至下。但若想要讓多個區塊並排、或是二欄、三欄等多欄網頁前端排版時,就需要使用 float 屬性。 如下方例子,若我們使用一般的 div 區塊元素時,則所有的區塊就整齊的由左上出來,一個 <div> 區塊就佔用了一行。(溫馨提示:可以點擊下例視窗左上方的「HTML 」與「CSS」按鈕來查看語法)
See the Pen Float-example-1 by Tedutw (@Tedutw) on CodePen.
承上例,若在 CSS 中加一個「float: left;」,則結果如下(溫馨提示:可以點擊下例視窗左上方的「HTML 」與「CSS」按鈕來查看語法):
See the Pen Float-example-2 by Tedutw (@Tedutw) on CodePen.
這是因為「float」屬性使 div 區塊元素「漂浮」起來,不再形成 div 區塊占滿整行的情況 承上例,若把由左側開始「漂浮」的「float: left;」改成由右側開始「漂浮」的「float: right;」,則所有的區塊就會由右側開始「飄」出來,結果如下(溫馨提示:可以點擊下例視窗左上方的「 HTML 」與「CSS」按鈕來查看語法):
See the Pen Float-example-3 by Tedutw (@Tedutw) on CodePen.
CSS 浮動屬性有三個參數:left、right 與 none。left 與 right 顧名思義,就是控制區塊由左側還是右側浮出用的,如上方兩個例子所示。而 none 就是不使用浮動參數的意思。 下方是另一個文繞圖排版的例子,就是文字的部分「不」設定 float 屬性,但是在 logo 圖片的部分使用浮動屬性「float:right;」,文字的部分則不使用浮動屬性。(溫馨提示:可以點擊下例視窗左上方的「HTML」與「CSS」按鈕來查看語法)
See the Pen Float-example-4 by Tedutw (@Tedutw) on CodePen.
前端工程師想要做出兩欄或多欄的網頁,則可以善用 float 屬性搭配寬度需要進行初步的排版。 以下範例為兩欄的排版示例。兩個欄位視為兩個區塊, float 屬性都設定為「left」,左欄寬度為 20%;右欄為 80%:
See the Pen Float-example-5 by Tedutw (@Tedutw) on CodePen.
網路上有人說:前端工程師的網頁 layout 基石除了本章介紹的浮動(float) 屬性之外,還有下一張會介紹的清除浮動(clear)。想當前端工程師的各位同學們請先把本章再複習一次,並親自使用 codepen 自己練習一次程式,才會達到最佳的學習效果!

 相關文章:
AI人工智慧救地球!Google:AI 保護環境還比人類快 3000 倍
CSS教學-display與visible屬性介紹
用Python寫出唐鳳「番茄鐘工作法」程式,讓AI幫你集中注意力!
AI機器狗Aibo成最新愛寵 真狗會被取代嗎?
零基礎學習網站前端So Easy!
前端,後端,全端工程師傻傻分不清?
前端工程師Javascript入門磚-22數學物件

2020年5月6日 星期三

前端工程師CSS入門必學-定位元素Positioning Elements

前端工程師入門必學的定位元素Positioning Elements,學起來吧!
前端工程師入門必學的定位元素Positioning Elements,學起來吧!

為了要設計更加繁複的網頁前端版面,前端工程師都需要知道 CSS 全部的「position 屬性」。如下所示,它有非常多屬性值,這些屬性值不好理解且也不好記憶,但稍一設定不好,就會讓許多 CSS 區塊若入走鐘、重疊等窘境。這些屬性一個個介紹如下,也建議各位想當前端工程師的學員們把這頁加入網頁書籤中,以便日後方便查詢。
See the Pen CSS:Position 範例 by Tedutw (@Tedutw) on CodePen.

CSS:Positioning Elements 定位元素

CSS 定位屬性(positioning properties)是用來定位元素使用。它可將一個元素置於另一個元素之後,還可以指定當某個元素的內容太大時該如何做。
所有的元素都可用 top(上)、bottom(下)、left(左) 與 right(右) 屬性來定位。但若沒事先將「定位屬性」設置好的話,以上四種屬性(top、bottom、left 與 right)皆不起作用。它們亦會依照定位方法的不同,而以不同的方式呈現。

靜態定位(position: fixed)

「靜態定位(position: fixed)」是所有 HTML 元素的預設值。當元素為「靜態定位(position: fixed)」時,會遵循「Normal flow (指從左到右、上到下的常態佈局)」來排列。
靜態定位的元素不受 top、bottom、left 與 right 屬性的影響。如下例,儘管我們 CSS 設定為「top: 30px;right: 5px;」(上方距離30px、右側距離50px),被靜態定位的 HTML 元素,排版仍不受這些 CSS 影響。
See the Pen position_static by Tedutw (@Tedutw) on CodePen.

固定定位(position:fixed)

固定定位(position: fixed)的元素會相對於瀏覽器視窗來定位,這意味著即便頁面捲動,它還是會固定在相同的位置。
不同於靜態定位,固定定位(position: fixed)的元素可由 top、bottom、left 與 right 屬性的來指定位置。我們將上一段「靜態定位(position: fixed)」的範例,其中的 CSS 「position:static」改為「position:fixed」,則排版受到「top: 30px;right: 5px;」(上方距離30px、右側距離50px)的屬性影響,如下所示:
See the Pen position_fixed by Tedutw (@Tedutw) on CodePen.

固定定位(position: fixed)的元素會從「Normal flow (從左到右、上到下的排列)」的常態佈局中移除。所以其他未設定為「固定定位(position: fixed)」的元素,仍然依照「左到右、上到下」的排列,彷彿其中不存在固定定位的元素般。而 固定定位的元素可與其他的元素重疊。

相對定位(position:relative)

所謂的「相對」,是以原本正常的位置為中心點,依照元素偏移原本位置多少而定數值。相對定位(position:relative)的元素可以結合 top、bottom、left、right 等屬性,使其元素「相對地」偏移原本該出現的位置。
如以下的例子,我們在原本的位置安插粉紅色背景的文字(文字為「相對定位」)區塊,並且設定該區塊相對於原本該出現的區塊「上方留空間 5px(top: 5px;)、 左方留空間 5px(left: 5px;)」。
See the Pen position_relative by Tedutw (@Tedutw) on CodePen.

相對位置的元素內容可移動到指定位置、也可以與其他的元素重疊。但是該元素原本該出現的正常位置,會被保留而不會消失。
相對值不能用於 table cells、columns、column groups、rows、row groups 或是 captions。

絕對定位(position:absolute)

不得不說,絕對定位(position:absolute)是網頁前端比較弔詭的定位屬性。absolute 與 relative 的行為很像,不一樣的地方在於 absolute 元素的定位是相對於父層元素的位置、relative 元素則是相對於他本該出現的位置。
當元素的 position 設定為 absolute 後,它就會看它父層的元素是否有被設定為 relative、absolute 或是 fixed,若有,則以父元素為定位的基準點;若無,則以該網頁頁面("body")的左上角為定位點置,看起來就是這張網頁的絕對位置一樣。
以下範例為兩個絕對定位(position:absolute)元素的範例,右上方的元素的父元素 position 沒有設定,因此被默認為「static」——也就是不屬於 relative、absolute、fixed 或是 inherit 的任一個,因此該元素會以整個網頁區域為定位點,從最上方往下移動 30 px、從最右方往左移動 30 px;而另一個元素的父元素 position 是 relative,因此會以父元素為定位點,從最上方往下移動 30 px、從最右方往左移動 30 px。
See the Pen position: absolute by Tedutw (@Tedutw) on CodePen.

同學們可以點擊以上範例中左上角的「HTML」與「CSS」按鈕來練習 coding。
所有的 CSS 版面配置:Positioning Elements 定位元素介紹到此結束。光看以上的解釋,會容易搞混。此時,不妨回到此章節的最前面的範例,點擊範例框左上角的「HTML 」與「CSS」按鈕來研究原始碼,並且親自練習一次這些 CSS 碼,試試各種不同的 position 屬性所呈現的效果。未來想要成為前端工程師的話,就請多練習幾遍。本系列「前端工程師課程」下一章即將介紹網頁 layout 基石之一——浮動(float)屬性

相關文章:

AI人工智慧救地球!Google:AI 保護環境還比人類快 3000 倍
CSS教學-display與visible屬性介紹
用Python寫出唐鳳「番茄鐘工作法」程式,讓AI幫你集中注意力!
AI機器狗Aibo成最新愛寵 真狗會被取代嗎?
零基礎學習網站前端So Easy!
前端,後端,全端工程師傻傻分不清?
前端工程師Javascript入門磚-22數學物件

2020年5月5日 星期二

真假!?人工智慧竟要向牠學習?(下)

人工智慧的教練就是牠絕對讓人跌破眼睛!
人工智慧的教練就是牠絕對讓人跌破眼睛!

讓機器人能自立自強的人工智慧技術

如何用最少的人力、讓機器人在現實世界中正常運作而是Google 研究人員的下一個目標。

就算機械手臂的技術已經有很大的突破,像一樣是Google 研發人員設計的分散式 Q 學習演算法(QT-Opt)。但是,將相同的方法應用於四足機器人卻很困難,因四足機器人更可能會因事故損壞自身、離開訓練區域,相較之下更需要人工干預。

▲四足機器人的自動化學習系統面臨安全性與自動化的挑戰。 

首先研究人員通過多任務學習(multitask learning)生成,將機器人驅動到工作空間,防止機器人離開訓練區域;並通過設計安全約束,將機器人跌倒的次數降到最低。

 例如:若當前有兩項任務,「向前」與「向後」行走。如果機器人處在工作區的後面,調度程序將選擇「向前」任務,反之亦然。如果機器人掉落,則將調用自動起身控制器,接著進行下一個任務。

 該框架成功地訓練了從無到有的策略,無需人工干預,機器人就可以朝不同的方向走,還使機器人能挑戰非平坦的地面,例如記憶泡棉床墊和鏤空的地墊。

四足機器人的未來展望

四足機器人能夠像真正的狗一樣走路,但依然有不足之處:由於算法和硬體的限制,它不能完成高度動態的行為,如大幅度的跳躍。也不比全手動設計的控制器穩定;並且絆倒後雖能重新站起來,但仍然不甚靈活。

不過即使如此,研究人員相信,他們的方法可以促進人工智慧機器人的發展,未來更能獨立運作,足以完成現實世界中的工作,像是在多層倉庫或是訂單履行中心裡運輸物料;並表示,未來也有興趣繼續研發,將自動培訓系統應用於更複雜的現實環境中。

 本篇為下篇,上篇請點此連結

相關文章:

AI人工智慧救地球!Google:AI 保護環境還比人類快 3000 倍
CSS教學-display與visible屬性介紹
用Python寫出唐鳳「番茄鐘工作法」程式,讓AI幫你集中注意力!
AI機器狗Aibo成最新愛寵 真狗會被取代嗎?
人工智慧讓視障朋友看見世界(上)
人工智慧學校執行長陳昇瑋驟世!
人工智慧崛起 好怕怕!歐盟頒AI 白皮書(上)

2020年5月4日 星期一

真假!?人工智慧竟要向牠學習?(上)

人工智慧的最佳教練竟是牠!你猜到了嗎?
人工智慧的最佳教練竟是牠!你猜到了嗎?


 
最新發表的Google 人工智慧研究團隊機器人研究日誌中,非常詳細的介紹了他們研發的四足機器人的流暢動作和運用 AI 技術自己學習行走。
目前的機器人仍需要許多人工參與,而 Google 建立的技術,讓機器人只需 8 分鐘的動作資料,就能自己學會向前、向後以及左右轉彎等運動,再也不用常常得扶起翻倒的機器人。

Google人工智慧研究員讓機器人「向狗學習」

為了開發出行動敏捷、不需要人工協助的機器人,Google 的人工智慧機器人研究科學家可說是絞盡腦汁,在觀察到自然界各種動物矯健又不費力的身手後──如翻身飛躍咬住飛盤的狗兒;研究人員決定向大自然取經,讓這些動作靈巧的小生物擔任機器人的老師,學習快速流暢的動作。

運動模仿、強化學習與自適應控制技術

研究人員先建立一套能夠模仿學習的人工智慧技術,旨在讓四足機器人可以通過模仿真實世界的狗來學習敏捷的動作。 首先,研究人員捕捉真狗的各種動作,諸如小跑、跳躍與起身等等, 做為機器人執行各種技能的參考運動,並使用強化學習(Reinforcement Learning;RL)技術訓練控制策略,以仿效真實狗狗的動作。
▲強化學習技術用於訓練模擬機器人來仿效狗的動作。 

在物理模擬的策略訓練上,通過對不同的參考運動使用不同的獎勵函數,在每個連續時步密切跟蹤參照的動作,訓練模擬機器人模仿各種不同的動態。

研究人員先在模擬環境完成訓練機器人的策略,接著再使用自適應控制技術(Adaptive control)將訓練好的策略實現在真實世界中,利用真實機器人的資料,高效地自適應策略,使研究人員能「教」一台四足機器人快走、跳躍或轉彎。

但由於模擬終究無法匹敵真實,模擬中訓練的策略應用在真實機器人上效果不甚佳。
為此,研究人員使用潛在空間(Latent Space)適應技術,通過改變機器人的質量和摩擦等物理量來隨機化模擬訓練中的動力學,將數值用編碼器映射到一個數字表示(即編碼),在訓練過程中將此編碼作為附加輸入傳遞給控制策略,當將該策略部署到一個真實的機器人上時,研究人員刪除編碼器,並直接在潛在空間中搜索一組允許機器人成功執行技能的變量。

這個方式十分成功,讓機器人能夠成功地執行現實世界中所需的動作。並且只要有 8 分鐘的資料供機器人參照,不只能從影片學會狗的走路動態,即使是動畫師製作的動畫,機器人也能從中學會轉頭等的複雜動作。


 本篇為上篇,下篇請點此連結

 相關文章:

AI人工智慧救地球!Google:AI 保護環境還比人類快 3000 倍
CSS教學-display與visible屬性介紹
用Python寫出唐鳳「番茄鐘工作法」程式,讓AI幫你集中注意力!
AI機器狗Aibo成最新愛寵 真狗會被取代嗎?
人工智慧讓視障朋友看見世界(上)
人工智慧學校執行長陳昇瑋驟世!
人工智慧崛起 好怕怕!歐盟頒AI 白皮書(上)