طراحی سایت و برنامه نویسی

آموزش طراحی سایت و برنامه نویسی

طراحی سایت و برنامه نویسی

آموزش طراحی سایت و برنامه نویسی

مرتب سازی حبابی و پیاده سازی آن — از صفر تا صد

«مرتب‌سازی حبابی» (Bubble Sort)، یکی از انواع الگوریتم‌های مرتب‌سازی محسوب می‌شود. این الگوریتم مرتب‌سازی از جمله الگوریتم‌های مبتنی بر مقایسه است که در آن، جفت عنصرهای هم‌جوار با یکدیگر مقایسه شده و در صورتی که دارای ترتیب صحیحی نباشند، با یکدیگر جا به جا می‌شوند. الگوریتم مرتب سازی حبابی برای مجموعه داده‌های بزرگ مناسب نیست، زیرا پیچیدگی زمانی آن در حالت میانگین و بدترین حالت برابر با (Ο(n2 است، که در آن n تعداد کل عناصر مجموعه داده محسوب می‌شود. در این مطلب، ابتدا یک مثال از الگوریتم مرتب‌سازی حبابی ارائه و سپس، «روندنما» (Flow Chart)، شبه کد و پیاده‌سازی آن در زبان‌های «پایتون» (Python)،«جاوا» (Java)، «سی» (C) و «سی‌پلاس‌پلاس» (++C)، «پی‌اچ‌پی» (PHP) و «سی‌شارپ» (#C) ارائه شده است. شایان توجه است که الگوریتم‌های مرتب‌سازی از جمله مباحث بسیار مهم در «ساختمان داده» (Data Structure) هستند.

الگوریتم مرتب سازی حبابی چطور کار می‌کند؟

برای تشریح چگونگی عملکرد الگوریتم مرتب سازی حبابی، از یک مثال استفاده شده است. در این مثال، یک آرایه غیر مرتب در نظر گرفته شده است. با توجه به اینکه الگوریتم مرتب سازی حبابی از مرتبه (Ο(n2 است، آرایه انتخاب شده کوچک در نظر گرفته می‌شود. آرایه در نظر گرفته شده: ( ۴ ۲ ۸ ۱ ۵ ) است. مرتب‌سازی حبابی برای این آرایه، به صورت زیر انجام می‌شود.

۱. ابتدا، دو عنصر اول آرایه با یکدیگر مقایسه می‌شوند و با توجه به آنکه ۵ از ۱ بزرگتر است (۱<۵)، این دو عنصر با یکدیگر جا به جا می‌شوند.

( 5 1 4 2 8 ) –> ( 1 5 4 2 8 )

۲. در اینجا، عناصر دوم و سوم آرایه مقایسه می‌شوند و با توجه به اینکه ۵ از ۴ بزرگ‌تر است (۴<۵)، این دو عنصر با یکدیگر جا به جا می‌شوند.

( 1 5 4 2 8 ) –> ( 1 4 5 2 8 )

۳. اکنون، عنصر سوم و چهارم آرایه مقایسه می‌شوند و با توجه به اینکه ۲ از ۵ کوچک‌تر است (۲<۵)، این دو عنصر با یکدیگر جا به جا می‌شوند.

( 1 4 5 2 8 ) –> ( 1 4 2 5 8 )

۴. در اینجا، عنصر چهارم و پنجم آرایه مقایسه می‌شود و چون ۵ از ۸ کوچک‌تر است (۵<۸) دو عنصر در جای خود بدون هر گونه جا به جایی باقی می‌مانند؛ چون در واقع، ترتیب (صعودی) در آن‌ها رعایت شده است.

( 1 4 2 5 8 ) –> ( 1 4 2 5 8 )

اکنون یک دور کامل در آرایه زده شد. دومین دور نیز به شیوه بیان شده در بالا انجام می‌شود.

۱. جا به جایی اتفاق نمی‌افتد.

( 1 4 2 5 8 ) –> ( 1 4 2 5 8 )

۲. با توجه به بزرگ‌تر بودن ۴ از ۲ (۲<۴)، این دو عنصر با یکدیگر جا به جا می‌شوند.

( 1 4 2 5 8 ) –> ( 1 2 4 5 8 )

۳. جا به جایی اتفاق نمی‌افتد.

( 1 2 4 5 8 ) –> ( 1 2 4 5 8 )

۴. جا به جایی اتفاق نمی‌افتد.

( 1 2 4 5 8 ) –> ( 1 2 4 5 8 )

در حال حاضر، آرایه مرتب شده است، اما الگوریتم نمی‌داند که آیا کار به پایان رسیده یا خیر؛ بنابراین، به یک دور کامل دیگر بدون انجام هرگونه جا به جایی نیاز دارد تا بفهمد که مرتب‌سازی با موفقیت به پایان رسیده است.

( 1 2 4 5 8 ) –> ( 1 2 4 5 8 )
( 1 2 4 5 8 ) –> ( 1 2 4 5 8 )
( 1 2 4 5 8 ) –> ( 1 2 4 5 8 )
( 1 2 4 5 8 ) –> ( 1 2 4 5 8 )

شبه کد الگوریتم مرتب سازی حبابی

1
2
3
4
5
6
7
8
Bubble Sort(a[],n)
	For i=0 to n-1
	Swap=false
	For j=i+1 to n
		if a[j-1] >a[j]
			Swap(a[j-1],a[j])
			Swap=true
		Break if not swapped

در ادامه، پیاده‌سازی الگوریتم مرتب سازی حبابی در زبان‌های برنامه‌نویسی گوناگون انجام شده و آرایه {۹۰ ,۱۱ ,۲۲ ,12 ,۲۵ ,۳۴ ,۶۴} به عنوان ورودی به قطعه کدها داده شده است. بنابراین، خروجی نهایی همه قطعه کدها، به صورت زیر خواهد بود.

11 12 22 25 34 64 90

پیاده‌سازی الگوریتم مرتب سازی حبابی در پایتون

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
# Python program for implementation of Bubble Sort 
  
def bubbleSort(arr): 
    n = len(arr) 
  
    # Traverse through all array elements 
    for i in range(n): 
  
        # Last i elements are already in place 
        for j in range(0, n-i-1): 
  
            # traverse the array from 0 to n-i-1 
            # Swap if the element found is greater 
            # than the next element 
            if arr[j] > arr[j+1] : 
                arr[j], arr[j+1] = arr[j+1], arr[j] 
  
# Driver code to test above 
arr = [64, 34, 25, 12, 22, 11, 90] 
  
bubbleSort(arr) 
  
print ("Sorted array is:") 
for i in range(len(arr)): 
    print ("%d" %arr[i]),

پیاده‌سازی الگوریتم مرتب سازی حبابی در جاوا

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
// Java program for implementation of Bubble Sort 
class BubbleSort 
{ 
    void bubbleSort(int arr[]) 
    { 
        int n = arr.length; 
        for (int i = 0; i < n-1; i++) 
            for (int j = 0; j < n-i-1; j++) 
                if (arr[j] > arr[j+1]) 
                { 
                    // swap arr[j+1] and arr[i] 
                    int temp = arr[j]; 
                    arr[j] = arr[j+1]; 
                    arr[j+1] = temp; 
                } 
    } 
  
    /* Prints the array */
    void printArray(int arr[]) 
    { 
        int n = arr.length; 
        for (int i=0; i<n; ++i) 
            System.out.print(arr[i] + " "); 
        System.out.println(); 
    } 
  
    // Driver method to test above 
    public static void main(String args[]) 
    { 
        BubbleSort ob = new BubbleSort(); 
        int arr[] = {64, 34, 25, 12, 22, 11, 90}; 
        ob.bubbleSort(arr); 
        System.out.println("Sorted array"); 
        ob.printArray(arr); 
    } 
} 
/* This code is contributed by Rajat Mishra */

پیاده‌سازی الگوریتم مرتب سازی حبابی در C و ++C

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
// C program for implementation of Bubble sort 
#include <stdio.h> 
  
void swap(int *xp, int *yp) 
{ 
    int temp = *xp; 
    *xp = *yp; 
    *yp = temp; 
} 
  
// A function to implement bubble sort 
void bubbleSort(int arr[], int n) 
{ 
   int i, j; 
   for (i = 0; i < n-1; i++)       
  
       // Last i elements are already in place    
       for (j = 0; j < n-i-1; j++)  
           if (arr[j] > arr[j+1]) 
              swap(&arr[j], &arr[j+1]); 
} 
  
/* Function to print an array */
void printArray(int arr[], int size) 
{ 
    int i; 
    for (i=0; i < size; i++) 
        printf("%d ", arr[i]); 
    printf("n"); 
} 
  
// Driver program to test above functions 
int main() 
{ 
    int arr[] = {64, 34, 25, 12, 22, 11, 90}; 
    int n = sizeof(arr)/sizeof(arr[0]); 
    bubbleSort(arr, n); 
    printf("Sorted array: \n"); 
    printArray(arr, n); 
    return 0; 
}

پیاده‌سازی الگوریتم مرتب سازی حبابی در PHP

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<?php  
// PHP program for implementation  
// of Bubble Sort 
  
function bubbleSort(&$arr) 
{ 
    $n = sizeof($arr); 
  
    // Traverse through all array elements 
    for($i = 0; $i < $n; $i++)  
    { 
        // Last i elements are already in place 
        for ($j = 0; $j < $n - $i - 1; $j++)  
        { 
            // traverse the array from 0 to n-i-1 
            // Swap if the element found is greater 
            // than the next element 
            if ($arr[$j] > $arr[$j+1]) 
            { 
                $t = $arr[$j]; 
                $arr[$j] = $arr[$j+1]; 
                $arr[$j+1] = $t; 
            } 
        } 
    } 
} 
  
// Driver code to test above 
$arr = array(64, 34, 25, 12, 22, 11, 90); 
  
$len = sizeof($arr); 
bubbleSort($arr); 
  
echo "Sorted array : \n"; 
  
for ($i = 0; $i < $len; $i++) 
    echo $arr[$i]." ";  
  
// This code is contributed by ChitraNayal. 
?>

پیاده‌سازی الگوریتم مرتب سازی حبابی در سی شارپ

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
// C# program for implementation  
// of Bubble Sort 
using System; 
  
class GFG 
{  
    static void bubbleSort(int []arr) 
    { 
        int n = arr.Length; 
        for (int i = 0; i < n - 1; i++) 
            for (int j = 0; j < n - i - 1; j++) 
                if (arr[j] > arr[j + 1]) 
                { 
                    // swap temp and arr[i] 
                    int temp = arr[j]; 
                    arr[j] = arr[j + 1]; 
                    arr[j + 1] = temp; 
                } 
    } 
  
    /* Prints the array */
    static void printArray(int []arr) 
    { 
        int n = arr.Length; 
        for (int i = 0; i < n; ++i) 
            Console.Write(arr[i] + " "); 
        Console.WriteLine(); 
    } 
  
    // Driver method 
    public static void Main() 
    { 
        int []arr = {64, 34, 25, 12, 22, 11, 90}; 
        bubbleSort(arr); 
        Console.WriteLine("Sorted array"); 
        printArray(arr); 
    } 
  
} 
  
// This code is contributed by Sam007

پیاده سازی بهینه الگوریتم مرتب سازی حبابی

تابع معرفی شده در بالا در حالت متوسط و بدترین حالت، برابر با (O(n*n است. بدترین حالت تنها هنگامی به وقوع می‌پیوندد که آرایه به ترتیب معکوسی مرتب شده باشد. پیچیدگی زمانی تابع مذکور در بهترین حالت برابر با (O(n است و این حالت تنها هنگامی اتفاق می‌افتد که آرایه مرتب شده باشد. تابع بالا را می‌توان به این شکل بهینه کرد که اگر حلقه داخلی منجر به هیچ جا به جایی نشود، فرایند متوقف شود. در ادامه، نمونه کد مربوط به تابع بهینه شده، در زبان‌های برنامه‌نویسی گوناگون از جمله پایتون (نسخه ۳) ارائه شده است.

پیاده‌سازی بهینه الگوریتم مرتب سازی حبابی در پایتون

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
# Python3 Optimized implementation 
# of Bubble sort 
  
# An optimized version of Bubble Sort 
def bubbleSort(arr): 
    n = len(arr) 
   
    # Traverse through all array elements 
    for i in range(n): 
        swapped = False
  
        # Last i elements are already 
        #  in place 
        for j in range(0, n-i-1): 
   
            # traverse the array from 0 to 
            # n-i-1. Swap if the element  
            # found is greater than the 
            # next element 
            if arr[j] > arr[j+1] : 
                arr[j], arr[j+1] = arr[j+1], arr[j] 
                swapped = True
  
        # IF no two elements were swapped 
        # by inner loop, then break 
        if swapped == False: 
            break
           
# Driver code to test above 
arr = [64, 34, 25, 12, 22, 11, 90] 
   
bubbleSort(arr) 
   
print ("Sorted array :") 
for i in range(len(arr)): 
    print ("%d" %arr[i],end=" ") 
  
# This code is contributed by Shreyanshi Arun

پیاده‌سازی بهینه الگوریتم مرتب سازی حبابی در جاوا

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
// Optimized java implementation 
// of Bubble sort 
import java.io.*; 
  
class GFG  
{ 
    // An optimized version of Bubble Sort 
    static void bubbleSort(int arr[], int n) 
    { 
        int i, j, temp; 
        boolean swapped; 
        for (i = 0; i < n - 1; i++)  
        { 
            swapped = false; 
            for (j = 0; j < n - i - 1; j++)  
            { 
                if (arr[j] > arr[j + 1])  
                { 
                    // swap arr[j] and arr[j+1] 
                    temp = arr[j]; 
                    arr[j] = arr[j + 1]; 
                    arr[j + 1] = temp; 
                    swapped = true; 
                } 
            } 
  
            // IF no two elements were  
            // swapped by inner loop, then break 
            if (swapped == false) 
                break; 
        } 
    } 
  
    // Function to print an array  
    static void printArray(int arr[], int size) 
    { 
        int i; 
        for (i = 0; i < size; i++) 
            System.out.print(arr[i] + " "); 
        System.out.println(); 
    } 
  
    // Driver program 
    public static void main(String args[]) 
    { 
        int arr[] = { 64, 34, 25, 12, 22, 11, 90 }; 
        int n = arr.length; 
        bubbleSort(arr, n); 
        System.out.println("Sorted array: "); 
        printArray(arr, n); 
    } 
} 
  
  
// This code is contributed  
// by Nikita Tiwari.

پیاده‌سازی بهینه الگوریتم مرتب سازی حبابی در ++C

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
// Optimized implementation of Bubble sort 
#include <stdio.h> 
  
void swap(int *xp, int *yp) 
{ 
    int temp = *xp; 
    *xp = *yp; 
    *yp = temp; 
} 
  
// An optimized version of Bubble Sort 
void bubbleSort(int arr[], int n) 
{ 
   int i, j; 
   bool swapped; 
   for (i = 0; i < n-1; i++) 
   { 
     swapped = false; 
     for (j = 0; j < n-i-1; j++) 
     { 
        if (arr[j] > arr[j+1]) 
        { 
           swap(&arr[j], &arr[j+1]); 
           swapped = true; 
        } 
     } 
  
     // IF no two elements were swapped by inner loop, then break 
     if (swapped == false) 
        break; 
   } 
} 
  
/* Function to print an array */
void printArray(int arr[], int size) 
{ 
    int i; 
    for (i=0; i < size; i++) 
        printf("%d ", arr[i]); 
    printf("n"); 
} 
  
// Driver program to test above functions 
int main() 
{ 
    int arr[] = {64, 34, 25, 12, 22, 11, 90}; 
    int n = sizeof(arr)/sizeof(arr[0]); 
    bubbleSort(arr, n); 
    printf("Sorted array: \n"); 
    printArray(arr, n); 
    return 0; 
}

پیاده‌سازی بهینه الگوریتم مرتب سازی حبابی در PHP

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<?php  
// PHP Optimized implementation 
// of Bubble sort 
  
// An optimized version of Bubble Sort 
function bubbleSort(&$arr) 
{ 
    $n = sizeof($arr); 
  
    // Traverse through all array elements 
    for($i = 0; $i < $n; $i++) 
    { 
        $swapped = False; 
  
        // Last i elements are already 
        // in place 
        for ($j = 0; $j < $n - $i - 1; $j++) 
        { 
              
            // traverse the array from 0 to 
            // n-i-1. Swap if the element  
            // found is greater than the 
            // next element 
            if ($arr[$j] > $arr[$j+1]) 
            { 
                $t = $arr[$j]; 
                $arr[$j] = $arr[$j+1]; 
                $arr[$j+1] = $t; 
                $swapped = True; 
            } 
        } 
  
        // IF no two elements were swapped 
        // by inner loop, then break 
        if ($swapped == False) 
            break; 
    } 
} 
          
// Driver code to test above 
$arr = array(64, 34, 25, 12, 22, 11, 90);  
$len = sizeof($arr); 
bubbleSort($arr); 
  
echo "Sorted array : \n"; 
  
for($i = 0; $i < $len; $i++) 
    echo $arr[$i]." "; 
      
// This code is contributed by ChitraNayal. 
?>

پیاده‌سازی بهینه الگوریتم مرتب سازی حبابی در #C

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
// Optimized C# implementation 
// of Bubble sort 
using System; 
  
class GFG 
{  
    // An optimized version of Bubble Sort 
    static void bubbleSort(int []arr, int n) 
    { 
        int i, j, temp; 
        bool swapped; 
        for (i = 0; i < n - 1; i++)  
        { 
            swapped = false; 
            for (j = 0; j < n - i - 1; j++)  
            { 
                if (arr[j] > arr[j + 1])  
                { 
                    // swap arr[j] and arr[j+1] 
                    temp = arr[j]; 
                    arr[j] = arr[j + 1]; 
                    arr[j + 1] = temp; 
                    swapped = true; 
                } 
            } 
  
            // IF no two elements were  
            // swapped by inner loop, then break 
            if (swapped == false) 
                break; 
        } 
    } 
  
    // Function to print an array  
    static void printArray(int []arr, int size) 
    { 
        int i; 
        for (i = 0; i < size; i++) 
            Console.Write(arr[i] + " "); 
        Console.WriteLine(); 
    } 
  
    // Driver method  
    public static void Main() 
    { 
        int []arr = {64, 34, 25, 12, 22, 11, 90}; 
        int n = arr.Length; 
        bubbleSort(arr,n); 
        Console.WriteLine("Sorted array"); 
        printArray(arr,n); 
    } 
  
} 
// This code is contributed by Sam007

جمع‌بندی

الگوریتم مرتب‌سازی حبابی با توجه به سادگی که دارد، معمولا برای معرفی مفهوم مرتب‌سازی مورد استفاده قرار می‌گیرد. در گرافیک کامپیوتری، این الگوریتم مرتب‌سازی با توجه به توانایی که برای تشخیص خطاهای خیلی کوچک (مانند جا به جایی تنها دو عنصر) در آرایه‌های تقریبا مرتب شده و رفع آن با پیچیدگی خطی (2n) دارد، از محبوبیت زیادی برخوردار است. برای مثال، در الگوریتم «پر کردن چند ضلعی» (Polygon Filling Algorithm) که خط‌های محدود کننده به وسیله مختصات x در یک خط اسکن مشخص مرتب‌سازی شده‌اند (خطی موازی محور x) و با افزایش y ترتیب آن‌ها در تقاطع دو خط تغییر می‌کند (دو عنصر جا به جا می‌شوند)، مورد استفاده قرار می‌گیرد.

منبع: فرادرس

مشاوره پنج‌شنبه 10 مرداد 1398 ساعت 12:58

0 نظر

Promise.all در جاوا اسکریپت — از صفر تا صد

Promise-ها در جاوا اسکریپت یکی از API-های قدرتمند هستند که به اجرای عملیات ناهمگام کمک می‌کنند. Promise.all عملیات ناهمگام را به سطح بالاتری ارتقا داده است و به گروه‌بندی promise-ها کمک کرده است. به بیان دیگر با استفاده از Promise.all در جاوا اسکریپت می‌توان گروهی از عملیات «همزمان» (concurrent) را اجرا کرد.

پیش‌نیاز مطالعه این مطلب آن است که با مفهوم Promise در جاوا اسکریپت آشنا باشید. اگر چنین نیست پیشنهاد می‌کنیم، مقاله «Promise در جاوا اسکریپت و کاربردهای آن — به زبان ساده» را مطالعه کنید.

Promise.all چیست؟

Promise.all در واقع یک promise است که ارائه از Promise-ها را به عنوان ورودی (عنصر تکرارپذیر = iterable) می‌گیرد. سپس وقتی که همه promise-ها پاسخ داده شوند یا هر یک از آن‌ها رد شوند، Promise.all نیز به پایان می‌رسد.

برای نمونه فرض کنید 10 Promise دارید که عملیات ناهمگامی برای یک فراخوانی شبکه یا اتصال پایگاه داده اجرا می‌کنند. لازم است که بدانید همه Promise-ها چه زمانی پاسخ داده می‌شوند و یا لازم است صبر کنید تا همه آن‌ها به پایان برسند. بدین ترتیب همه آن‌ها را به Promise.all می‌فرستید و سپس Promise.all خودش به عنوان یک Promise زمانی که هر 10 Promise پاسخ داده شوند و یا هر یک از آن‌ها رد شوند، به پایان می‌رسد.

به کد زیر توجه کنید:

1
2
3
4
5
Promise.all([Promise1, Promise2, Promise3])
 .then(result) => {
   console.log(result)
 })
 .catch(error => console.log(`Error in promises ${error}`))

همان طور که می‌بینید، ما یک ارائه را به Promise.all ارسال کرده‌ایم و زمانی که هر سه Promise پاسخ داده شوند، Promise.all نیز پایان می‌یابد و خروجی در کنسول ارائه می‌شود.

به مثال زیر نیز توجه کنید:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// A simple promise that resolves after a given time
const timeOut = (t) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(`Completed in ${t}`)
    }, t)
  })
}
 
// Resolving a normal promise.
timeOut(1000)
 .then(result => console.log(result)) // Completed in 1000
 
// Promise.all
Promise.all([timeOut(1000), timeOut(2000)])
 .then(result => console.log(result)) // ["Completed in 1000", "Completed in 2000"]

در مثال فوق، Promise.all در طی 2000 میلی‌ثانیه پس از این که خروجی به صورت یک ارائه در کنسول ارائه شود پایان می‌یابد.

ترتیب Promise-ها

یک نکته جالب در مورد Promise.all این است که ترتیب Promise-ها در آن حفظ می‌شود. نخستین Promise در ارائه به عنوان نخستین عنصر ارائه خروجی ارائه می‌شود، Promise دوم عنصر دوم ارائه است و همین طور تا آخر.

به مثال زیر نیز توجه کنید:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// A simple promise that resolves after a given time
const timeOut = (t) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(`Completed in ${t}`)
    }, t)
  })
}
 
const durations = [1000, 2000, 3000]
 
const promises = []
 
durations.map((duration) => {
  // In the below line, two things happen.
  // 1. We are calling the async function (timeout()). So at this point the async function has started and enters the 'pending' state.
  // 2. We are pushing the pending promise to an array.
  promises.push(timeOut(duration)) 
})
 
console.log(promises) // [ Promise { "pending" }, Promise { "pending" }, Promise { "pending" } ]
 
// We are passing an array of pending promises to Promise.all
// Promise.all will wait till all the promises get resolves and then the same gets resolved.
Promise.all(promises)
.then(response => console.log(response)) // ["Completed in 1000", "Completed in 2000", "Completed in 3000"]

همان طور که می‌بینید اگر یکی از Promise-ها رد شود، همه موارد باقیمانده Promise-ها نیز شکست می‌خورند. در این صورت Promise.all نیز رد خواهد شد.

در برخی موارد ما به چنین موقعیتی نیاز نداریم. در واقع در این موارد لازم است که همه Promise-ها صرف نظر از این که یکی از آن‌ها رد شود یا نه اجرا شوند و احتمالاً مورد رد شده را نیز در ادامه می‌توان مدیریت کرد. مدیریت این وضعیت به صورت زیر ممکن است:

1
2
3
4
5
6
7
8
9
const durations = [1000, 2000, 3000]
 
promises = durations.map((duration) => {
  return timeOut(duration).catch(e => e) // Handling the error for each promise.
})
 
Promise.all(promises)
  .then(response => console.log(response)) // ["Completed in 1000", "Rejected in 2000", "Completed in 3000"]
  .catch(error => console.log(`Error in executing ${error}`))

کاربردهای Promise.all

فرض کنید لازم است تعداد زیادی عملیات ناهمگام مانند ارسال انبوه ایمیل‌های بازاریابی به هزاران کاربر را انجام دهید. شبه کد ساده آن چنین می‌تواند باشد:

1
2
3
for (let i=0;i<50000; i += 1) {
 sendMailForUser(user[i]) // Async operation to send a email
}

مثال فوق سرراست است. اما چندان کارآمد نیست. در نقطه‌ای از زمان، پشته بسیار سنگین می‌شود و جاوا اسکریپت با انبوهی از درخواست‌های باز اتصال HTTP مواجه خواهد بود که می‌توانند سرور را کار بیندازند.

یک رویکرد ساده و کارآمد می‌تواند این باشد که این کار در دسته‌بندی‌های مختلف انجام یابد. 500 کاربرِ نخست انتخاب و ایمیل‌ها ارسال می‌شوند و صبر می‌کنیم تا همه اتصال‌های HTTP بسته شوند. سپس دسته بعدی را پردازش می‌کنیم و همین طور تا آخر. مثال زیر را در نظر بگیرید:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// Async function to send mail to a list of users.
const sendMailForUsers = async (users) => {
  const usersLength = users.length
  
  for (let i = 0; i < usersLength; i += 100) { 
    const requests = users.slice(i, i + 100).map((user) => { // The batch size is 100. We are processing in a set of 100 users.
      return triggerMailForUser(user) // Async function to send the mail.
       .catch(e => console.log(`Error in sending email for ${user} - ${e}`)) // Catch the error if something goes wrong. So that it won't block the loop.
    })
    
    // requests will have 100 or less pending promises. 
    // Promise.all will wait till all the promises got resolves and then take the next 100.
    await Promise.all(requests)
     .catch(e => console.log(`Error in sending email for the batch ${i} - ${e}`)) // Catch the error.
  }
}
 
 
sendMailForUsers(userLists)

سناریوی دیگری را در نظر بگیرید. فرض کنید لازم است یک API بسازیم که اطلاعاتی را از API-های شخص ثالث می‌گیرد و همه پاسخ‌ها را از آن API-ها تجمیع می‌کند.

در این حالت Promise.all بهترین روش برای انجام این کار است. چگونگی آن را در کد زیر ملاحظه می‌کنید:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
// Function to fetch Github info of a user.
const fetchGithubInfo = async (url) => {
  console.log(`Fetching ${url}`)
  const githubInfo = await axios(url) // API call to get user info from Github.
  return {
    name: githubInfo.data.name,
    bio: githubInfo.data.bio,
    repos: githubInfo.data.public_repos
  }
}
 
// Iterates all users and returns their Github info.
const fetchUserInfo = async (names) => {
  const requests = names.map((name) => {
    const url = `https://api.github.com/users/${name}`
    return fetchGithubInfo(url) // Async function that fetches the user info.
     .then((a) => {
      return a // Returns the user info.
      })
  })
  return Promise.all(requests) // Waiting for all the requests to get resolved.
}
 
 
fetchUserInfo(['sindresorhus', 'yyx990803', 'gaearon'])
 .then(a => console.log(JSON.stringify(a)))
 
/*
Output:
[{
  "name": "Sindre Sorhus",
  "bio": "Full-Time Open-Sourcerer ·· Maker ·· Into Swift and Node.js ",
  "repos": 996
}, {
  "name": "Evan You",
  "bio": "Creator of @vuejs, previously @meteor & @google",
  "repos": 151
}, {
  "name": "Dan Abramov",
  "bio": "Working on @reactjs. Co-author of Redux and Create React App. Building tools for humans.",
  "repos": 232
}]
*/

سخن پایانی

در پایان باید اشاره کنیم که Promise.all بهترین روش برای تجمیع یک گروه از Promise-ها در یک Promise منفرد است. این یکی از بهترین روش‌ها برای رسیدن به «همزمانی» (Concurrency) در جاوا اسکریپت است. امیدواریم از مطالعه این نوشته بهره برده باشید.

منبع: فرادرس

مشاوره پنج‌شنبه 10 مرداد 1398 ساعت 12:57

0 نظر

بارگذاری مجموعه داده بزرگ در یادگیری عمیق — راهنمای کاربردی

یکی از مهم‌ترین گام‌ها طی فرایند «داده‌کاوی» (Data Mining) و «یادگیری ماشین» (Machine Learning)، گردآوری داده‌ها و ساختاردهی به مجموعه داده است. این مبحث در حوزه «یادگیری عمیق» (Deep Learning) نیز مانند دیگر روش‌های یادگیری ماشین مطرح است. قراردادهای گوناگونی برای ذخیره‌سازی و ساختاردهی به مجموعه داده‌های تصاویر روی دیسک به منظور تسریع و کارا کردن «بارگذاری» (Load) و استفاده از آن‌ها هنگام آموزش و ارزیابی مدلی‌های یادگیری عمیق وجود دارد.

هنگامی که مجموعه داده دارای ساختار باشد، کاربر می‌تواند از ابزارهایی مانند کلاس ImageDataGenerator در کتابخانه یادگیری عمیق«کرس» (Keras)، برای بارگذاری خودکار مجموعه داده‌های «آموزش» (Train)، «تست» (Test Data Set) و «ارزیابی» (Evaluation) استفاده کند. علاوه بر آن، مولد به تدریج تصاویر موجود در مجموعه داده را بارگذاری می‌کند و به کاربر این امکان را می‌دهد تا با مجموعه داده‌های کوچک و بسیار بزرگ شامل هزاران یا میلیون‌ها تصویری که در حافظه سیستم ممکن است جا نشوند کار کند. در این مطلب، روش ساختاردهی به یک مجموعه داده تصاویر و بارگذاری تدریجی آن هنگام برازش و ارزیابی یک مدل یادگیری عمیق آموزش داده می‌شود. محورهای کلی مورد بررسی در این مطلب عبارتند از:

چگونگی سازمان‌دهی مجموعه داده‌های آموزش، تست و اعتبارسنجی حاوی تصاویر در یک ساختار پوشه سازگار
چگونگی استفاده از کلاس ImageDataGenerator برای بارگذاری تدریجی تصاویر برای یک مجموعه داده موجود
چگونگی استفاده از مولد داده آماده شده برای آموزش، ارزیابی و انجام پیش‌بینی با مدل یادگیری عمیق

این آموزش به سه بخش کلی ساختار پوشه مجموعه داده، ساختار مجموعه داده نمونه و چگونگی بارگذاری تدریجی تصاویر تقسیم شده است و مباحث بیان شده در بالا طی این سر فصل‌ها آموزش داده می‌شوند .

ساختار پوشه مجموعه داده

یک راهکار استاندارد برای طرح‌ریزی داده‌های تصویری به منظور مدل‌سازی وجود دارد. پس از آنکه تصاویر گردآوری شدند، کاربر باید ابتدا آن‌ها را بر اساس مجموعه داده، یعنی مجموعه داده‌های آموزش، تست و ارزیابی و سپس، بر اساس «دسته» (Class) تصاویر مرتب‌سازی کند. برای مثال، یک مساله «دسته‌بندی» تصاویر مفروض است که طی آن باید تصاویر خودروها را بر مبنای رنگ آن‌ها (مثلا: خودروی قرمز، خودرو آبی و دیگر موارد) دسته‌بندی کرد. ابتدا، یک پوشه data/ وجود دارد که کاربر داده‌های تصاویر را در آن ذخیره‌سازی می‌کند. سپس، یک پوشه /data/train برای مجموعه داده آموزش و یک پوشه /data/test برای مجموعه داده تست وجود دارد. همچنین، این امکان وجود دارد که یک پوشه /data/validation نیز برای مجموعه داده ارزیابی در طول آموزش وجود داشته باشد. بنابراین، موارد زیر وجود دارند.

1
2
3
4
data/
data/train/
data/test/
data/validation/

در هر پوشه مجموعه داده، زیرپوشه‌هایی وجود دارند. در هر پوشه، یک زیر پوشه برای هر کلاس وجود دارد که فایل‌های تصاویر در آن قرار دارند. برای مثال، زیرپوشه‌ها به صورت زیر هستند.

1
2
3
4
5
6
7
8
9
10
data/
data/train/
data/train/red/
data/train/blue/
data/test/
data/test/red/
data/test/blue/
data/validation/
data/validation/red/
data/validation/blue/

بدین شکل، برای مثال تصاویر خودروهای قرمز در پوشه دسته مناسب قرار می‌گیرد. برای مثال:

1
2
3
4
5
6
7
data/train/red/car01.jpg
data/train/red/car02.jpg
data/train/red/car03.jpg
...
data/train/blue/car01.jpg
data/train/blue/car02.jpg
data/train/blue/car03.jpg

باید به خاطر داشت که فایل‌های مشابهی در پوشه‌های /red و /blue قرار نمی‌گیرد؛ در عوض در هر یک از این پوشه‌ها، تصاویر متفاوتی به ترتیب از خودروهای قرمز و آبی وجود دارد. همچنین، باید به خاطر داشت که تصاویر متفاوتی در مجموعه داده‌های آموزش، تست و اعتبارسنجی وجود دارد. اسامی فایل‌های استفاده شده برای تصاویر معمولا اهمیتی ندارد، زیرا همه تصاویر با پسوندهای فایل داده شده فراخوانی می‌شوند. یک قرارداد خوب برای نام‌گذاری، در صورتی که امکان تغییر نام فایل‌ها وجود داشته باشد، استفاده از اسامی است که در امتداد آن‌ها اعداد قرار دارند (مثلا دنباله‌های ترتیبی از اعداد که با چندین صفر به عنوان پیش شماره شروع می‌شوند)، برای مثال image0001.jpg. این راهکار در صورتی که هزاران تصویر برای هر دسته وجود داشته باشد، بسیار مناسب است.

ساختار مجموعه داده نمونه

می‌توان ساختار مجموعه داده را با یک مثال که در زیر بیان شده، پی ریزی کرد. فرض می‌شود که کاربر در حال دسته‌بندی تصاویر خودروها به شیوه‌ای که پیش‌تر بیان شد است. به طور مشخص، یک مساله دسته‌بندی دودویی، یعنی دسته‌بندی خودروها در دو دسته قرمز و آبی، وجود دارد. باید ساختار پوشه‌ای که در بخش پیشین بیان شد، ساخته شود.

1
2
3
4
5
6
7
8
9
10
data/
data/train/
data/train/red/
data/train/blue/
data/test/
data/test/red/
data/test/blue/
data/validation/
data/validation/red/
data/validation/blue/

اکنون، پوشه‌های مذکور ساخته می‌شوند. سپس، تعدادی تصویر در هر یک از آن‌ها قرار می‌گیرد. می‌توان از «جستجوی تصاویر کریتیو کامنز» ( Creative Commons Image Search) [+] برای پیدا و دانلود کردن تصاویری با گواهینامه‌هایی که استفاده از آن‌ها را برای مصارف گوناگون مجاز می‌سازد استفاده کرد. در ادامه، از دو تصویر بیان شده در زیر استفاده شده است.

تصویر خودرو قرمز از «دنیس ژارویس» (Dennis Jarvis)
تصویر خودرو آبی از «»ویل اسمیث» (Bill Smith)

بارگذاری مجموعه داده بزرگ در یادگیری عمیق — خودرو قرمز از دنیس ژارویس

تصاویر را باید دانلود و در پوشه کاری جاری ذخیره کرد. خودرو قرمز را باید با نام «red_car_01.jpg» و خودرو آبی را با نام «blue_car_01.jpg» ذخیره کرد. اکنون، باید تصاویر متفاوتی برای هر یک مجموعه داده‌های آموزش، تست و اعتبارسنجی داشت. با توجه به آنکه هدف از این مطلب شیوه ساختاردهی و بارگذاری داده‌ها است و برای دور نشدن از تمرکز اصلی مطلب، از فایل‌های تصاویر مشابهی در هر یک از این مجموعه داده‌ها استفاده می‌شود. اما، جوری وانمود می‌شود که گویی آن‌ها با یکدیگر متفاوت هستند.

بنابراین، باید کپی‌هایی از فایل «red_car_01.jpg» را در پوشه‌های /data/train/red ،/data/test/red و /data/validation/red قرار دارد. همچنین، باید کپی‌هایی از فایل «blue_car_01.jpg» را در پوشه‌های /data/train/blue/ ،data/test/blue و /data/validation/blue قرار داد. اکنون، قالب یک مجموعه داده خیلی پایه‌ای که مشابه با ساختار درختی زیر است، ایجاد شده (ساختار درختی قابل مشاهده در زیر، خروجی دستور tree است).

data
├── test
│ ├── blue
│ │ └── blue_car_01.jpg
│ └── red
│ └── red_car_01.jpg
├── train
│ ├── blue
│ │ └── blue_car_01.jpg
│ └── red
│ └── red_car_01.jpg
└── validation
├── blue
│ └── blue_car_01.jpg
└── red
└── red_car_01.jpg

در ادامه، اسکرین‌شاتی از ساختار پوشه‌ها ارائه شده است که با استفاده از پنجره Finder در «مک‌اواس» (macOS) گرفته شده است.

بارگذاری مجموعه داده بزرگ در یادگیری عمیق

اکنون که ساختار پوشه پایه‌ای وجود دارد، کار بارگذاری داده‌ها از فایل برای استفاده با مدل‌سازی مورد استفاده قرار می‌گیرد.

بارگذاری تدریجی داده‌ها برای مدل یادگیری عمیق

این امکان وجود دارد که کدی نوشته شود تا داده‌ها به صورت دستی بارگذاری شوند و داده‌های آماده برای مدل‌سازی را بازگرداند. این کار شامل ایجاد ساختار برای مجموعه داده، بارگذاری داده‌های تصاویر و بازگرداندن ورودی (آرایه‌های پیکسل) و خروجی (عدد صحیح دسته) می‌شود. خوشبختانه، نیاز به نوشتن این کد از پایه نیست. بلکه، می‌توان از کلاس ImageDataGenerator فراهم شده توسط Keras استفاده کرد. مزیت اصلی استفاده از این کلاس برای بارگذاری داده‌ها آن است که تصاویر برای یک مجموعه داده در دسته‌ها بارگذاری می‌شوند، بدین معنا که می‌توان از آن هم برای بارگذاری مجموعه داده‌های کوچک و هم مجموعه داده‌های تصویری بسیار بزرگ با هزاران یا میلیون‌ها تصویر استفاده کرد.

به جای بارگذاری همه تصاویر در حافظه، تنها تصاویر کافی را می‌توان در حافظه برای دسته‌های کنونی و ریزدسته‌های احتمالی آینده، هنگام ارزیابی مدل یادگیری عمیق مورد استفاده قرار داد. در این مطلب، به فرایند مذکور بارگذاری تدریجی گفته می‌شود، زیرا مجموعه داده به تدریج از فایل بارگذاری می‌شود و فقط میزان داده‌ای که فورا مورد نیاز است را بازیابی می‌کند. دو مزیت دیگر استفاده از کلاس ImageDataGenerator، عبارتند از اینکه می‌توان از آن برای تغییر مقایسه خودکار مقادیر تصاویر استفاده کرد و همچنین، می‌تواند به صورت خودکار نسخه کامل شده تصاویر را تولید کرد. این مبحث به بررسی جداگانه‌ای نیاز دارد و از حوصله این بحث خارج است. در ادامه، بر چگونگی استفاده از کلاس ImageDataGenerator برای بارگذاری داده‌ها از فایل تمرکز می‌شود. الگوی استفاده از کلاس ImageDataGenerator به صورت زیر است.

ساخت و پیکربندی یک نمونه از کلاس ImageDataGenerator
بازیابی یک «تکرارگر» (Iterator) با فراخوانی تابع ()flow_from_directory
استفاده از تکرارگر در فاز آموزش یا ارزیابی مدل

اکنون، نگاه دقیق‌تری به هر یک از گام‌ها انداخته می‌شود. سازنده برای ImageDataGenerator، حاوی آرگومان‌های زیادی برای تعیین چگونگی دستکاری داده‌های تصاویر پس از بارگذاری آن‌ها، شامل تغییر مقیاس پیکسل‌ها و تکمیل داده‌ها است. نیاز به هیچ یک از این ویژگی‌ها در این وهله نیست؛ بنابراین، پیکربندی ImageDataGenerator آسان است.

1
2
3
...
# create a data generator
datagen = ImageDataGenerator()

سپس، نیاز به یک تکرارگر برای بارگذاری تدریجی داده‌ها برای یک مجموعه داده مجرد است. این کار، نیازمند فراخوانی تابع ()flow_from_directory و تعیین پوشه مجموعه داده، مانند test ،train و validation است. تابع همچنین امکان پیکربندی جزئیات بیشتر مرتبط با بارگذاری داده‌ها را فراهم می‌کند. توجه به این نکته نیز لازم است که آرگومان «target_size» به کاربر امکان بارگذاری همه تصاویر در اندازه مشخص را می‌دهد؛ این قابلیت معمولا هنگام مدل‌سازی مورد نیاز است. پیش‌فرض تابع روی تصاویر مربعی با اندازه ۲۵۶ در ۲۵۶ است.

تابع همچنین امکان تعیین نوع وظیفه دسته‌بندی را با استفاده از آرگومان «class_mode» فراهم می‌کند؛ با این آرگومان می‌توان به طور خاص تعیین کرد که نوع دسته‌بندی «دودویی» (Binary) یا دسته‌بندی چند دسته‌ای «طبقه‌ای» (Categorical) باشد. «batch_size» به طور پیش‌فرض برابر با ۳۲ است؛ بدین معنا که ۳۲ تصویر انتخاب شده به صورت تصادفی از سرتاسر کلاس‌ها در مجموعه داده در هر دسته هنگام آموزش بازگردانده می‌شوند. گاهی ممکن است دسته‌های بزرگ‌تر و گاه دسته‌های کوچک‌تر مورد نیاز باشد. همچنین، ممکن است کاربر بخواهد هنگام ارزیابی مدل دسته‌ها را به ترتیب قطعی باز گرداند که در این صورت، باید «shuffle» روی False تنظیم شود. گزینه‌های زیاد دیگری نیز وجود دارد که با مطالعه مستندات API کرس می‌توان با آن‌ها آشنا شد. می‌توان از ImageDataGenerator مشابهی برای آماده‌سازی تکرارگرها برای پوشه‌های جداگانه مجموعه داده استفاده کرد. این کار هنگامی مفید واقع می‌شود که تغییر مقیاس پیکسل مشابهی روی چندین مجموعه داده (آموزش، تست و اعتبارسنجی) اعمال شود.

1
2
3
4
5
6
7
...
# load and iterate training dataset
train_it = datagen.flow_from_directory('data/train/', class_mode='binary', batch_size=64)
# load and iterate validation dataset
val_it = datagen.flow_from_directory('data/validation/', class_mode='binary', batch_size=64)
# load and iterate test dataset
test_it = datagen.flow_from_directory('data/test/', class_mode='binary', batch_size=64)

هنگامی که تکرارگر آماده شد، می‌توان از آن هنگام برازش و ارزیابی یک مدل یادگیری عمیق استفاده کرد. برای مثال، برازش یک مدل با مولد داده را می‌توان با فراخوانی تابع ()fit_generator روی مدل و پاس دادن تکرارگر آموزش (train_it) کسب کرد. تکرارگر اعتبارسنجی (val_it) هنگام فراخوانی این تابع با آرگومان «validation_data» قابل تعیین است. آرگومان «steps_per_epoch» باید برای آموزش تکرارگر به منظور تعریف اینکه چه تعداد دسته از تصاویر یک «دوره» (epoch) یکتا راتعریف می‌کند، مورد استفاده قرار می‌گیرد. برای مثال، اگر ۱۰۰۰ تصویر در مجموعه داده آموزش وجود داشته باشد (در سرتاسر همه دسته‌ها) و اندازه دسته برابر با ۶۴ باشد، steps_per_epoch برابر با ۱۶ یا 1000/64 خواهد بود. به طور مشابه، اگر تکرارگر اعتبارسنجی اعمال شود، آرگومان «validation_steps» باید به منظور تعیین تعداد دسته‌ها در مجموعه داده اعتبارسنجی یک دوره را تعریف کند.

1
2
3
4
# define model
model = ...
# fit model
model.fit_generator(train_it, steps_per_epoch=16, validation_data=val_it, validation_steps=8)

هنگامی که مدل برازش داده شد، می‌توان روی مجموعه داده تست با استفاده از تابع ()evaluate_generator و پاس دادن آن به تکرارگر تست (test_it) ارزیابی شود. آرگومان «steps» تعداد دسته‌های نمونه را برای تکرار گام (to step through) هنگام ارزیابی مدل پیش از توقف تعریف می‌کند.

1
2
3
...
# evaluate model
loss = model.evaluate_generator(test_it, steps=24)

در نهایت، اگر کاربر بخواهد از مدل برازش برای انجام پیش‌بینی روی مجموعه داده بسیار بزرگ استفاده کند، به همین شکل می‌تواند تکرارگری برای آن مجموعه داده بسازد (برای مثال predict_it) و تابع ()predict_generator را روی مدل فراخوانی کند.

1
2
3
...
# make a prediction
yhat = model.predict_generator(predict_it, steps=24)

اکنون می‌توان از مجموعه داده کوچک تعریف شده در بخش قبلی برای نشان دادن چگونگی تعریف یک نمونه ImageDataGenerator و آماده‌سازی تکرارگر مجموعه داده استفاده کرد. مثال کاملی از این مورد، در ادامه آمده است.

1
2
3
4
5
6
7
8
9
10
11
# example of progressively loading images from file
from keras.preprocessing.image import ImageDataGenerator
# create generator
datagen = ImageDataGenerator()
# prepare an iterators for each dataset
train_it = datagen.flow_from_directory('data/train/', class_mode='binary')
val_it = datagen.flow_from_directory('data/validation/', class_mode='binary')
test_it = datagen.flow_from_directory('data/test/', class_mode='binary')
# confirm the iterator works
batchX, batchy = train_it.next()
print('Batch shape=%s, min=%.3f, max=%.3f' % (batchX.shape, batchX.min(), batchX.max()))

با اجرای مثال بالا، ابتدا یک نمونه از ImageDataGenerator با همه پیکربندی‌های پیش‌فرض ساخته می‌شود. سپس، سه تکرارگر، برابر مجموعه داده‌های دسته‌بندی دودویی آموزش، تست و ارزیابی ساخته می‌شود. هنگامی که هر تکرارگر ساخته شد، می‌توان پیغام دیباگ را که تعداد تصاویر و دسته‌های کشف و آماده شده را گزارش می‌کند، مشاهده کرد. در نهایت، تکرارگر آموزش که برای برازش مدل مورد استفاده قرار خواهد گرفت تست می‌شود. اولین دسته از تصاویر بازیابی می‌شود و می‌توان تصدیق کرد که اندازه دسته حاوی دو تصویر است، زیرا کلا دو تصویر وجود دارد. همچنین، می‌توان تایید کرد که تصاویر بارگذاری شدند و ابعاد آن‌ها به ۲۵۶ سطر در ۲۵۶ ستون پیکسل تغییر پیدا کرده و داده‌های پیکسل تغییر مقیاس داده نشده‌اند و در طیف [۲۵۵, ۰] باقی مانده است.

1
2
3
4
Found 2 images belonging to 2 classes.
Found 2 images belonging to 2 classes.
Found 2 images belonging to 2 classes.
Batch shape=(2, 256, 256, 3), min=0.000, max=255.000

جمع‌بندی

در این مطلب، چگونگی ساختاردهی به یک مجموعه داده تصاویر و بارگذاری تدریجی آن هنگام برازش و ارزیابی یک مدل یادگیری عمیق آموزش داده شد. به طور خاص، چگونگی سازمان‌دهی مجموعه داده‌های تصویر آموزش، تست و اعتبارسنجی در یک ساختار پوشه سازگار مورد بررسی قرار گرفت. همچنین، چگونگی استفاده از کلاس ImageDataGenerator برای بارگذاری تدریجی تصاویر برای یک مجموعه داده بیان شد. در نهایت، چگونگی استفاده از یک مولد داده آماده شده برای آموزش، ارزیابی و انجام پیش‌بینی با یک مدل یادگیری عمیق تشریح شد.

منبع: فرادرس

مشاوره چهارشنبه 9 مرداد 1398 ساعت 14:56

0 نظر

ویژگی های مدرن ++C که باید بدانید — راهنمای کاربردی

زبان برنامه‌نویسی ++C در طی زمان تکامل زیادی یافته است. البته این تکامل در طی یک شب رخ نداده است. زمانی بود که ++C فاقد دینامیسم بود، اما اینک آن وضعیت دیگر وجود ندارد. همه چیز از زمانی که کمیته استانداردسازی ++C تصمیم گرفت اوضاع را تغییر دهد آغاز شد. این زبان برنامه‌نویسی از سال 2011 به صورت یک زبان دینامیک و مداوماً در حال تکامل ظاهر شده است و با معرفی ویژگی های مدرن ++C به زبانی تبدیل شده که افراد زیادی به آن دل بسته‌اند.

البته نباید تصور کنید که این زبان برنامه‌نویسی آسان‌تر شده است. ++C همچنان اگر نگوییم دشوارترین زبان برنامه‌نویسی است، دست‌کم یکی از دشوارترین‌ها محسوب می‌شود که استفاده گسترده‌ای دارد، اما ++C در نسخه‌های اخیر نسبت به نسخه‌های قدیمی، کاربرپسندتر شده است. در این مقاله قصد داریم برخی از ویژگی‌های جدید (از نسخه 11++C به بعد که البته شاید همچنان قدیمی محسوب شود) را بررسی کنیم که هر توسعه‌دهنده‌ای باید بداند.

کلیدواژه auto

هنگامی که 11++C در ابتدا کلیدواژه auto را معرفی کرد، موجب گشایش زیادی در این زبان شد. ایده auto این بود که کامپایلر ++C به جای این که شما را مجبور کند هر بار نوع داده خود را اعلان کنید، بتواند نوع داده‌های شما را در زمان کامپایل کردن تشخیص دهد. بدین ترتیب داشتن انواع داده‌ای مانند زیر کار را بسیار راحت‌تر می‌کند:

1
map<string،vector<pair<int،int>>>

به خط پنجم نگاه کنید. شما نمی‌توانید چیزی را بدون استفاده از initializer اعلان کنید. این وضعیت در عمل مفید است. خط 5 اجازه نمی‌دهد کامپایلر بداند داده از چه نوعی است.

سیر تکامل auto

در ابتدا auto چیزی محدود بود. سپس در نسخه‌های بعدی این زبان، توان زیادی به آن داده شد.

در خط 7 و 8 از مقداردهی براکت دار استفاده کرده‌ایم. این نیز یکی از ویژگی‌هایی است که در نسخه 11++C اضافه شده است. به خاطر داشته باشید که در صورت استفاده از auto باید روشی باشد که کامپایلر با استفاده از آن بتواند نوع داده را استنتاج کند. اینک سؤال مفید این است که اگر کد زیر را بنویسیم چه اتفاقی می‌افتد؟

1
auto a = {1، 2، 3}

آیا نتیجه اجرای کد فوق یک خطای کامپایل یا یک بردار است؟ در واقع 11++C مفهومی به شکل زیر معرفی کرده است:

1
std::initializer_list<type>

این لیست با مقداردهی داخل براکت، در صورت اعلان شدن با auto به عنوان یک کانتینر سبک تلقی می‌شود. در نهایت همان طور که قبلاً اشاره کردیم، استنتاج نوع از سوی کامپایلر می‌تواند در مواردی که ساختمان داده پیچیده‌ای وجود دارد کاملاً مفید باشد:

در کد فوق خط 25 را بررسی کنید. عبارت auto [v1،v2] = itr.second به صورت لفظی یک ویژگی جدید در ++C محسوب می‌شود. نام این ویژگی «اتصال ساخت‌یافته» (structured binding) است. در نسخه‌های قبلی این زبان باید هر متغیر به صورت مستقل استخراج می‌شد، اما اتصال ساخت‌یافته این کار را آسان‌تر ساخته است.

به علاوه اگر خواسته باشید داده‌ها را با استفاده از ارجاع به دست آورید، کافی است نمادی به صورت زیر اضافه کنید:

1
auto &[v1،v2] = itr.second

عبارت لامبدا

در نسخه 11++C عبارت‌های لامبدا معرفی شدند که چیزی مانند «تابع‌های بی‌نام» (anonymous functions) در جاوا اسکریپت هستند. عبارت‌های لامبدا اشیای تابع هستند که فاقد نام هستند و متغیرها را روی دامنه‌های مختلف بر اساس نوعی ساختار منسجم به دست می‌آورند. همچنین می‌توان آن‌ها را به متغیر انتساب داد.

لامبداها در صورتی که قرار باشد کار سریع و کوچکی درون کد انجام شود؛ اما نوشتن یک تابع کامل مجزا برای آن وقت‌گیر باشد، بسیار مفید خواهند بود. استفاده رایج دیگر از این عبارت‌ها به صورت تابع‌های مقایسه است.

مثال فوق حرف‌های زیادی برای گفتن دارد.

ابتدا توجه کنید که چگونه مقداردهی براکتی بار زیادی را از عهده شما بر می‌دارد. سپس ژنریک‌های ()begin و ()end وجود دارند که آن‌ها نیز جزء قابلیت‌های اضافه شده در 11++C هستند. پس از آن تابع لامبدا به عنوان یک مقایسه کننده برای داده‌ها آمده است. پارامترهای تابع لامبدا به صورت auto تعریف می‌شوند که در نسخه 14++C اضافه شده است. تا پیش از این نسخه نمی‌توانستیم از auto برای پارامترهای تابع استفاده کنیم.

توضیح براکت‌ها

دقت کنید که چگونه عبارت‌های لامبدا با یک براکت مربعی [] آغاز می‌شوند. بدین ترتیب دامنه لامبدا یعنی میزان نفوذی که روی متغیرها و اشیای محلی دارد تعریف می‌شود.

به طور خلاصه این وضعیت در ++C مدرن به شرح زیر است:

[] – هیچ چیز دریافت نمی‌شود. بنابراین نمی‌توانید از هیچ متغیر محلی با دامنه خارج از عبارت لامبدا استفاده کنید. در این حالت تنها می‌توان از پارامترها استفاده کرد.
[=] – شیءهای محلی (متغیرها و پارامترهای محلی) در دامنه به وسیله مقدار دریافت می‌شوند. می‌توان از آن‌ها استفاده کرد، اما امکان تغییر دادن آن‌ها وجود ندارد.
[&] – اشاره‌گر this به صورت «با مقدار» دریافت می‌شود.
[this] – اشاره‌گر this با مقدار دریافت می‌شود.
[a، &b] – شیء a با مقدار و شیء b با ارجاع دریافت می‌شود.

بدین ترتیب اگر بخواهیم داده‌ها را در داخل تابع لامبدا به نوعی قالب دیگر تبدیل کنیم، می‌توانیم با بهره‌گیری از دامنه‌بندی از لامبدا استفاده کنیم. برای نمونه:

در مثال فوق اگر متغیرهای محلی را با مقدار یعنی به صورت [factor] در عبارت لامبدا دریافت کنیم، نمی‌توانیم factor را در 5 تغییر دهیم. زیرا چنین اجازه‌ای نداریم.

در نهایت توجه کنید که ما val را به صورت با ارجاع دریافت می‌کنیم. این امر تضمین می‌کند که هر تغییری درون تابع لامبدا اتفاق بیفتد، در عمل موجب تغییر vector خواهد شد.

گزاره‌های init درون if و switch

یکی دیگر از ویژگی‌های جذاب ++C هفده گزاره‌های init است. به مثال زیر توجه کنید:

به ظاهر اینک می‌توانیم متغیرها را درون بلوک if/switch مقداردهی کرده و شرط‌ها را بررسی کنیم. این وضعیت برای حفظ انسجام و تمیزی کد بسیار حائز اهمیت است. شکل کلی به صورت زیر است:

1
2
3
4
5
6
if( init-statement(x); condition(x)) {
    // do some stuff here
} else {
    // else has the scope of x
    // do some other stuff
}

اجرای وظیفه فوق در زمان کامپایل با constexpr

تصور کنید نوعی عبارت برای ارزیابی دارید و مقدار آن از زمان مقداردهی اولیه به بعد تغییر نخواهد یافت. بدین ترتیب می‌توان مقدار را از پیش محاسبه کرد و سپس به عنوان یک ماکرو از آن استفاده کرد. روش دیگر این است که از ویژگی constexpr که در ++C یازده ارائه شده است بهره گرفت.

برنامه‌نویسان علاقه‌مند هستند که محیط زمان اجرای برنامه را تا حد امکان سبک کنند. بنابراین اگر عملیاتی وجود داشته باشد که کامپایلر می‌تواند انجام دهد و بار را از عهده زمان اجرا بردارد موجب بهبود زمان اجرای برنامه خواهد شد.

کد فوق نمونه بسیار رایجی از constexpr است.

از آنجا که ما تابع محاسبه فیبوناچی را به صورت constexpr اعلان کرده‌ایم، کامپایلر (fib(20 را از قبل در زمان کامپایل محاسبه می‌کند. بنابراین پس از کامپایل کردن می‌تواند خط زیر را:

1
const long long bigval = fib(20);

با خط زیر جایگزین کند:

1
const long long bigval = 2432902008176640000;

توجه کنید که آرگومان ارسالی یک مقدار const است. این یکی از نکات مهم تابع‌های اعلان‌شده با constexpr است. آرگومان‌های ارسالی باید constexpr یا const باشند؛ در غیر این صورت تابع به صورت یک تابع نرمال رفتار می‌کند که در زمان کامپایل هیچ محاسبه قبلی صورت نمی‌گیرد.

متغیرها نیز می‌توانند constexpr باشند. در چنین حالتی چنان که می‌توان حدس زد، این متغیرها باید در زمان کامپایل ارزیابی شوند. در غیر این صورت ممکن است با خطای کامپایل مواجه شوید.

نکته جالب این است که بعدتر و در نسخه C++17 به صورت constexpr-if و constexpr-lambda نیز معرفی شدند.

چندتایی‌ها

چندتایی با tuple دقیقاً همانند pair مجموعه‌ای از مقادیر با اندازه ثابت از انواع داده‌های مختلف است.

برخی اوقات استفاده از std::array به جای tuple راحت‌تر است. array مشابه آرایه ساده C به همراه چند کارکرد دیگر است که در کتابخانه استاندارد ++C وجود دارند. این ساختمان داده در نسخه 11++C معرفی شده است.

استنتاج آرگومان قالب کلاس

چنان که می‌بینید نام ویژگی فوق کاملاً گویای کارکرد آن است. از نسخه 17++C این ایده مطرح شد که استنتاج آرگومان برای قالب‌های کلاس استاندارد نیز اتفاق بیفتد. تا پیش از آن این امکان صرفاً برای قالب‌های تابع میسر بود. در نتیجه امکان نوشتن کد زیر مهیا شد:

1
2
std::pair<std::string، int> user = {"M"، 25}; // previous
std::pair user = {"M"، 25}; // ++C17

استنتاج به صورت ضمنی انجام می‌یابد. این وضعیت در مورد tuple بسیار کار را راحت‌تر می‌کند.

1
2
3
4
// previous
std::tuple<std::string, std::string, int> user ("M", "Chy", 25);
// deduction in action! 
std::tuple user2("M", "Chy", 25);

توجه داشته باشید که این ویژگی در صورتی که به طور کامل با قالب‌های ++C آشنا نباشید، چندان به کار شما نخواهد آمد.

اشاره‌گرهای هوشمند

اشاره‌گرها می‌توانند واقعاً دردسرساز باشند. به دلیل میزانی از آزادی که زبان‌هایی مانند ++C در اختیار برنامه نویسان قرار می‌دهند، در برخی موارد ممکن است موجب شوند که این برنامه نویسان به خود آسیب بزنند. و در اغلب موارد اشاره‌گرها موجب وارد آمدن این آسیب می‌شوند.

خوشبختانه در نسخه 11++C ایده اشاره‌گرهای هوشمند مطرح شد. این اشاره‌گرها نسبت به اشاره‌گرهای معمولی بسیار راحت‌تر هستند. اشاره‌گرهای هوشمند به برنامه نویسان کمک می‌کنند تا با آزاد کردن حافظه در موارد ممکن از بروز نشت حافظه جلوگیری کنند. همچنین امنیت exception را موجب می‌شوند.

ما می‌توانستیم در این مقاله در مورد اشاره‌گرهای هوشمند توضیح‌های زیادی بنویسیم، اما گویا جزییات مهم زیادی در مورد آن‌ها وجود دارد که توضیح دادن همه آن‌ها به یک مقاله جداگانه و اختصاصی نیاز دارد.

سخن پایانی

بدین ترتیب به پایان این مقاله می‌رسیم. به خاطر داشته باشید که ++C عملاً ویژگی‌های بسیار جدیدی در نسخه‌های اخیر خود افزوده است. شما می‌توانید این موارد را در صورتی که علاقه‌مند باشید مورد بررسی قرار دهید. برای نمونه این ریپازیتوری گیت‌هاب (+) موارد آموزشی نسبتاً جامعی را در این خصوص گردآوری کرده است.

منبع: فرادرس

مشاوره چهارشنبه 9 مرداد 1398 ساعت 14:55

0 نظر

تمرین ساخت شیئ در جاوا اسکریپت (بخش دوم) — راهنمای کاربردی

این مقاله در واقع یک آزمون ارزیابی است که در آن انتظار می‌رود شما بتوانید از دموی توپ‌های جهنده که در بخش قبلی با هم ساختیم به عنوان یک نقطه شروع استفاده کرده و با بهره‌گیری از مفاهیم اشیای جاوا اسکریپت برخی ویژگی‌های جدید و جذاب را به این توپ‌ها اضافه کنید.

شروع

برای شروع ابتدا کدهای زیر را در فایل‌هایی با نام مشخص شده در یک دایرکتوری جدید روی سیستم خود کپی کنید.

فایل index-finished.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Bouncing balls</title>
    <link rel="stylesheet" href="style.css">
  </head>
 
  <body>
    <h1>bouncing balls</h1>
    <canvas></canvas>
 
    <script src="main-finished.js"></script>
  </body>
</html>

فایل style.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
html, body {
  margin: 0;
}
 
html {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  height: 100%;
}
 
body {
  overflow: hidden;
  height: inherit;
}
 
h1 {
  font-size: 2rem;
  letter-spacing: -1px;
  position: absolute;
  margin: 0;
  top: -4px;
  right: 5px;
 
  color: transparent;
  text-shadow: 0 0 4px white;
}

فایل main-finished.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
// setup canvas
 
var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');
 
var width = canvas.width = window.innerWidth;
var height = canvas.height = window.innerHeight;
 
// function to generate random number
 
function random(min,max) {
  var num = Math.floor(Math.random()*(max-min)) + min;
  return num;
}
 
// define Ball constructor
 
function Ball(x, y, velX, velY, color, size) {
  this.x = x;
  this.y = y;
  this.velX = velX;
  this.velY = velY;
  this.color = color;
  this.size = size;
}
 
// define ball draw method
 
Ball.prototype.draw = function() {
  ctx.beginPath();
  ctx.fillStyle = this.color;
  ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI);
  ctx.fill();
};
 
// define ball update method
 
Ball.prototype.update = function() {
  if((this.x + this.size) >= width) {
    this.velX = -(this.velX);
  }
 
  if((this.x - this.size) <= 0) {
    this.velX = -(this.velX);
  }
 
  if((this.y + this.size) >= height) {
    this.velY = -(this.velY);
  }
 
  if((this.y - this.size) <= 0) {
    this.velY = -(this.velY);
  }
 
  this.x += this.velX;
  this.y += this.velY;
};
 
// define ball collision detection
 
Ball.prototype.collisionDetect = function() {
  for(var j = 0; j < balls.length; j++) {
    if(!(this === balls[j])) {
      var dx = this.x - balls[j].x;
      var dy = this.y - balls[j].y;
      var distance = Math.sqrt(dx * dx + dy * dy);
 
      if (distance < this.size + balls[j].size) {
        balls[j].color = this.color = 'rgb(' + random(0,255) + ',' + random(0,255) + ',' + random(0,255) +')';
      }
    }
  }
};
 
// define array to store balls and populate it
 
var balls = [];
 
while(balls.length < 25) {
  var size = random(10,20);
  var ball = new Ball(
    // ball position always drawn at least one ball width
    // away from the adge of the canvas, to avoid drawing errors
    random(0 + size,width - size),
    random(0 + size,height - size),
    random(-7,7),
    random(-7,7),
    'rgb(' + random(0,255) + ',' + random(0,255) + ',' + random(0,255) +')',
    size
  );
  balls.push(ball);
}
 
// define loop that keeps drawing the scene constantly
 
function loop() {
  ctx.fillStyle = 'rgba(0,0,0,0.25)';
  ctx.fillRect(0,0,width,height);
 
  for(var i = 0; i < balls.length; i++) {
    balls[i].draw();
    balls[i].update();
    balls[i].collisionDetect();
  }
 
  requestAnimationFrame(loop);
}
 
 
 
loop();

شرح پروژه

دموی توپ‌های جهنده‌ای که در بخش قبل ساختیم بسیار جالب بود، اما اکنون می‌خواهیم آن را با افزودن یک دایره شیطانی که از سوی کاربر کنترل می‌شود، تعامل‌پذیرتر کنیم. این دایره شیطانی توپ‌هایی که به درونش بیفتد را می‌بلعد. همچنین می‌خواهیم مهارت‌های ساخت شیء شما را از طریق ایجاد یک شیء ()Shape که توپ‌ها و دایره شیطانی از آن به ارث می‌رسند ارزیابی کنیم. در نهایت می‌خواهیم یک شمارنده امتیاز نیز برای ردگیری تعداد توپ‌هایی که روی صفحه باقی‌مانده است بسازیم.

در تصویر زیر ایده‌ای از آن چه قرار است در آخر این مقاله ساخته باشیم، به دست می‌آورید:

اشیای جاوا اسکریپت

همچنین برای این که ایده بهتری از برنامه نهایی داشته باشید می‌توانید به این لینک (+) مراجعه کنید. البته از شما انتظار داریم که سورس کد این مثال را نگاه نکنید و خودتان کار را به پیش ببرید.

مراحل تکمیل پروژه

در این بخش مراحلی که باید انجام دهید را توضیح داده‌ایم.

ایجاد اشیای جدید

قبل از هر چیز باید سازنده ()Ball قبلی را طوری تغییر دهید که به یک سازنده ()Shape تبدیل شود و یک سازنده ()Ball جدید به آن اضافه کنید:

سازنده ()Shape باید به همان روشی که سازنده ()Ball در مقاله قبلی انجام داده بود، به تعریف مشخصه‌های x ،y ،velX و velY بپردازد، اما مشخصه‌های color و size به روش متفاوتی تعریف خواهند شد.
در این سازنده جدید باید مشخصه‌هایی به نام exists وجود داشته باشد که برای ردگیری وجود یا عدم وجود توپ در برنامه استفاده می‌شود. این مشخصه در مواردی که دایره توپ‌ها را می‌بلعد به کار می‌آید و می‌بایست نوع بولی (true/false) داشته باشد.
سازنده ()Ball باید مشخصه‌های x ،y ،velX ،velY و exists را از سازنده ()Shape به ارث ببرد.
همچنین باید مشخصه‌های color و size را به همان روشی که از سوی سازنده ()Ball تعریف شده بود در سازنده ()Shape تعریف کنیم.
به خاطر داشته باشید که prototype و constructor سازنده ()Ball را به طرز متناسبی تنظیم کنید.

تعاریف متدهای ()draw() ،update و ()collisionDetect می‌توانند به همان روشی که در مطلب قبلی تعریف کردیم باقی بمانند.

همچنین باید یک پارامتر جدید به فراخوانی سازنده (…) ()new Ball اضافه کنید. پارامتر exists باید پنجمین پارامتر و دارای مقدار true باشد.

در این مرحله کد را بارگذاری مجدد کنید. عملکرد آن به وسیله شیءهایی که بازطراحی کرده‌ایم، باید مانند دموی قبلی باشد.

تعریف کردن ()EvilCircle

اینک زمان آن رسیده است که شخصیت منفی داستان یعنی ()EvilCircle را طراحی کنیم. در این داستان تنها یک دایره شیطانی به عنوان شخصیت منفی وجود دارد، اما به هر حال باید آن را به وسیله سازنده‌ای که از ()Shape به ارث می‌رسد تعریف کنیم. شما ممکن است بخواهید در ادامه دایره دیگری به برنامه اضافه کنید که کنترل آن دست بازیکن دیگری باشد و یا چند دایره شیطانی داشته باشید که از سوی رایانه کنترل می‌شوند. البته شما احتمالاً نمی‌خواهید همه دنیا را با استفاده از یک دایره شیطانی منفرد ببلعید، اما در این مطلب ارزیابی به همان یک دایره اکتفا می‌کنیم.

سازنده ()EvilCircle باید x ،y ،velX ،velY و exists را از ()Shape به ارث ببرد، اما velX و velY همواره باید برابر با 20 باشند.

این کار با کدی مانند زیر ممکن است:

1
Shape.call(this، x، y، 20، 20، exists);

این کد همچنین باید مشخصه‌های خود را به صورت زیر تعریف کند:

color — ‘white’
size — 10

یک بار دیگر به خاطر داشته باشید که باید مشخصه‌هایی که به ارث می‌رسند را به صورت پارامتر در سازنده تعریف کنید و مشخصه‌های prototype و constructor را نیز به طور متناسبی تعیین کنید.

تعریف کردن متدهای ()EvilCircle

()EvilCircle باید چهار متد داشته باشد که هر کدام را در ادامه توضیح داده‌ایم:

متد ()draw

این متد همان منظوری را دنبال می‌کند که متد ()draw شیء ()Ball داشت. یعنی وهله‌ای از شیء را روی بوم ترسیم می‌کند. روش کار آن نیز به صورت مشابه است و از این رو می‌توانید تعریف Ball.prototype.draw را کپی کرده و در ادامه تغییرهای زیر را در آن ایجاد کنید:

ما می‌خواهیم دایره شیطانی تو پر نباشد بلکه صرفاً یک لبه بیرونی داشته باشد. این وضعیت از طریق به‌روزرسانی fillStyle و ()fill به strokeStyle و ()stroke ممکن خواهد بود.

همچنین می‌خواهیم که ضخامت لبه این دایره کمی بیشتر باشد تا بتوان دایره شطانی را راحت‌تر مشاهده کرد. این وضعیت از طریق تنیم مقدار linewidth در جایی پس از فراخوانی ()beginPath ممکن خواهد بود.

متد ()checkBounds

این متد همان کاری را انجام می‌دهد که بخش اول تابع ()update برای شیء ()Ball اجرا می‌کرد، یعنی بررسی می‌کند که آیا دایره شیطانی با لبه صفحه برخورد می‌کند یا نه و از این کار ممانعت می‌کند. در این مورد نیز می‌توانید بخش زیادی از تعریف Ball.prototype.update را کپی کنید، اما چند تغییر را به صورت زیر باید در آن ایجاد نمایید:

شما باید دو خط آخر را پاک کنید، چون ما نمی‌خواهیم موقعیت دایره شیطانی را در هر فریم به صورت خودکار به‌روزرسانی کنیم، بلکه آن را به طرز دیگری که در ادامه مشاهده می‌کنید، جابجا خواهیم کرد.

درون گزاره‌های ()if، اگر تست‌ها مقدار true بازگشت دهند، لازم نیست velX/velY به‌روزرسانی شوند، چون ما می‌خواهیم به جای آن مقدار x/y را تغییر دهیم تا دایره شیطانی با یک جهش خفیف به صفحه بازگردد. افزودن یا کسر کردن مشخصه size دایره شیطانی نیز می‌تواند مفید باشد.

متد ()setControls

این متد یک شنونده رویداد onkeydown به شیء window اضافه می‌کند به طوری که وقتی کلید خاصی روی کیبورد فشرده شود، می‌توانیم دایره را به اطراف جابجا کنیم. قطعه کد زیر را می‌توانید درون تعریف متد قرار دهید:

1
2
3
4
5
6
7
8
9
10
11
12
var _this = this;
window.onkeydown = function(e) {
    if (e.keyCode === 65) {
      _this.x -= _this.velX;
    } else if (e.keyCode === 68) {
      _this.x += _this.velX;
    } else if (e.keyCode === 87) {
      _this.y -= _this.velY;
    } else if (e.keyCode === 83) {
      _this.y += _this.velY;
    }
  }

بنابراین هر زمان که کلیدی فشرده می‌شود، مشخصه keyCode شیء رویداد مورد بررسی قرار می‌گیرد تا مشخص شود کدام کلید فشرده شده است. اگر این کلید یکی از کلیدهای تعریف شده باشد در این صورت دایره شیطانی در جهت‌های چپ/راست/بالا/پایین حرکت می‌کند.

به عنوان نکته جانبی تلاش کنید بدانید که کدهای کلید تعیین شده به کدام کلیدهای کیبورد نگاشت می‌شوند. نکته جانبی دوم نیز این است که بررسی کنید چرا باید کدی مانند زیر داشته باشیم؟

1
var _this = this;

و اقدام به تعیین موقعیت درون آن بکنیم؟ راهنمایی: این مورد به دامنه‌بندی مرتبط است.

متد ()collisionDetect

این متد‌ به روشی کاملاً مشابه متد ()collisionDetect در شیء ()BAll عمل می‌کند و از این رو می‌توانید آن کد را به عنوان مبنایی برای این متد جدید کپی کنید. اما چند تفاوت کوچک وجود دارند که در ادامه توضیح می‌دهیم:

در گزاره if بیرونی دیگر نیازی به بررسی این که توپ موجود در مرحله تکرار کنونی همان توپی است که بررسی می‌شود نداریم، چون دیگر چنین توپی وجود ندارد و با یک دایره شیطانی طرف هستیم! در عوض باید بررسی کنیم که آیا توپی که بررسی می‌شود وجود دارد یا نه. اگر توپ وجود نداشته باشد، به این معنی است که قبلاً از سوی دایره بلیعده شده است و از این رو نیازی به بررسی مجدد آن نداریم.

در گزاره if داخلی دیگر نیازی به تغییر دادن رنگ‌های اشیا در زمان تشخیص تصادم نداریم. در عوض باید هر توپی را که با دایره شیطانی برخورد می‌کند به صورت ناموجود علامت‌گذاری کنیم. آیا روش انجام این کار را می‌دانید؟

قرار دادن دایره شیطانی در برنامه

اکنون کار تعریف کردن دایره شیطانی به پایان رسیده است و باید عملاً آن را در صفحه ببینیم. به این منظور باید تغییراتی در تابع ()loop خود ایجاد کنیم.

قبل از هر چیز، یک وهله جدید از دایره شیطانی (با تعیین پارامترها) می‌سازیم سپس متد ()setControls آن را فراخوانی می‌کنیم. دقت کنید که انجام این دو کار تنها یک بار صورت می‌گیرد و در هر تکرار حلقه نباید مجدداً اجرا شود.
درزمانی که حلقه شروع به بررسی همه توپ‌ها و فراخوانی تابع‌های ()draw() ،update و ()collisionDetect برای هر کدام از آن‌ها می‌کند، باید مطمئن شویم که این کار صرفاً برای توپ‌های موجود یعنی آن‌هایی که قبلاً از سوی دایره شیطانی بلعیده نشده‌اند انجام می‌یابد.
متدهای ()draw() ،update و ()collisionDetect وهله دایره شیطانی را در هر بار تکرار حلقه فراخوانی کنید.

پیاده‌سازی شمارنده امتیاز

برای پیاده‌سازی بخش شمارنده امتیاز باید مراحل زیر را طی کنید:

در فایل HTML یک عنصر <p> درست زیر عنصر <h1> اضافه کنید که شامل متن « :Ball count» باشد.
در فایل CSS قاعده زیر را به انتهای فایل اضافه کنید:

1
2
3
4
5
6
7
p {
  position: absolute;
  margin: 0;
  top: 35px;
  right: 5px;
  color: #aaa;
}

در فایل جاوا اسکریپت، به‌روزرسانی‌های زیر را اجرا کنید:
- متغیری بسازید که یک ارجاع به پاراگراف نگهداری کند.
- شماره تعداد توپ‌های روی صفحه را به هر نوعی که دوست دارید حفظ کنید.
- هر بار که توپی به صفحه اضافه می‌شود، شماره را افزایش دهید و آن را روی صفحه به‌روزرسانی کنید.
- هر بار که توپی از سوی دایره شیطانی بلعیده می‌شود، شماره را کاهش داده و آن را روی صفحه به‌روزرسانی کنید.

نکات و سرنخ‌ها

این ارزیابی کاملاً چالش‌برانگیز است و از این رو باید هر گام را به آرامی و با دقت طی کنید. شاید بهتر باشد یک کپی جداگانه از هر مرحله که موفق شدید عملیاتی کنید حفظ کنید، بدین ترتیب می‌توانید در صورت بروز مشکل به آخرین نسخه‌ای که کار می‌کند بازگردید.

سخن پایانی

اگر این بخش ارزیابی را به صورت قسمتی از این دوره کامل از سلسله مقالات آموزش جاوا اسکریپت مطالعه می‌کنید، اینک باید بتوانید کار خود را در اختیار یک مربی قرار دهید تا به شما نمره بدهد. اگر این سری مقالات را به صورت خودآموز دنبال می‌کنید، می‌توانید کدهایی که نوشته‌اید را با نسخه کامل شده (+) مقایسه کنید و کار خود را مورد ارزیابی قرار دهید.

منبع: فرادرس

مشاوره چهارشنبه 9 مرداد 1398 ساعت 14:54

0 نظر

153
1
...
22
23
صفحه 24
25
26
...
31

طراحی سایت و برنامه نویسی

ابر برجسب

جدیدترین یادداشت‌ها

بایگانی

جستجو

مرتب سازی حبابی و پیاده سازی آن — از صفر تا صد

الگوریتم مرتب سازی حبابی چطور کار می‌کند؟

شبه کد الگوریتم مرتب سازی حبابی

پیاده‌سازی الگوریتم مرتب سازی حبابی در پایتون

پیاده‌سازی الگوریتم مرتب سازی حبابی در جاوا

پیاده‌سازی الگوریتم مرتب سازی حبابی در C و ++C

پیاده‌سازی الگوریتم مرتب سازی حبابی در PHP

پیاده‌سازی الگوریتم مرتب سازی حبابی در سی شارپ

پیاده سازی بهینه الگوریتم مرتب سازی حبابی

پیاده‌سازی بهینه الگوریتم مرتب سازی حبابی در پایتون

پیاده‌سازی بهینه الگوریتم مرتب سازی حبابی در جاوا

پیاده‌سازی بهینه الگوریتم مرتب سازی حبابی در ++C

پیاده‌سازی بهینه الگوریتم مرتب سازی حبابی در PHP

پیاده‌سازی بهینه الگوریتم مرتب سازی حبابی در #C

جمع‌بندی

Promise.all در جاوا اسکریپت — از صفر تا صد

Promise.all چیست؟

ترتیب Promise-ها

کاربردهای Promise.all

سخن پایانی

بارگذاری مجموعه داده بزرگ در یادگیری عمیق — راهنمای کاربردی

ساختار پوشه مجموعه داده

ساختار مجموعه داده نمونه

بارگذاری تدریجی داده‌ها برای مدل یادگیری عمیق

جمع‌بندی

ویژگی های مدرن ++C که باید بدانید — راهنمای کاربردی

کلیدواژه auto

سیر تکامل auto

عبارت لامبدا

توضیح براکت‌ها

گزاره‌های init درون if و switch

اجرای وظیفه فوق در زمان کامپایل با constexpr

چندتایی‌ها

استنتاج آرگومان قالب کلاس

اشاره‌گرهای هوشمند

سخن پایانی

تمرین ساخت شیئ در جاوا اسکریپت (بخش دوم) — راهنمای کاربردی

شروع

فایل index-finished.html

فایل style.css

فایل main-finished.js

شرح پروژه

مراحل تکمیل پروژه

ایجاد اشیای جدید

تعریف کردن ()EvilCircle

تعریف کردن متدهای ()EvilCircle

متد ()draw

متد ()checkBounds

متد ()setControls

متد ()collisionDetect

قرار دادن دایره شیطانی در برنامه

پیاده‌سازی شمارنده امتیاز

نکات و سرنخ‌ها

سخن پایانی