Tag: pattern

C Program To Display Right Angled Triangle With Alphabets, using For Loop

Lets write a C program to display/print/output a right angled triangle pattern formed with Capital Letter English Alphabets, using nested for loop.

Related Read:
Nested For Loop In C Programming Language
C Program To Display Right Angled Triangle With Alphabets, using While Loop

Expected Output for the Input

If user enters number of rows as 5. Then our C program prints a Right angled Triangle with 5 rows of Capital Letter English Alphabets in it.

User Input:
num = 5;

Output:

A
B C
D E F
G H I J
K L M N O

Video Tutorial: C Program To Display Right Angled Triangle With Alphabets, using For Loop


[youtube https://www.youtube.com/watch?v=WYDm6zrPhkg]

YouTube Link: https://www.youtube.com/watch?v=WYDm6zrPhkg [Watch the Video In Full Screen.]

Logic To Display Right Angled Triangle With Alphabets, using For Loop

If we take a closer look at the right angled triangle, we can see that the number of rows and the number of elements in that row are same. Example, row number 5 has 5 elements. Row number 6 has 6 elements etc. So we store this number in a variable called row. Since row starts from 1, we initialize the variable row to 1.

Outer For Loop

We ask the user to enter the maximum number of rows for the right angled triangle, and store it in address of variable num. Outer for loop selects the row. Outer for loop executes until row value is less than or equal to the user entered number.

Inner For Loop

Inner For loop prints the Alphabets. Printing starts from 1st position. So we initialize variable col to 1. And inner for loop iterates until col is less than or equal to the value present in variable row.

Inside inner for loop we check if the value of variable count is 91(ASCII Value of Z is 91). If true, we resent the value of count to 65(ASCII Value of A is 65).

Note: Row number is equal to the number of elements present in that row.

Source Code: C Program To Display Right Angled Triangle With Alphabets, using For Loop

#include<stdio.h>

int main()
{
    int num, row, col, count = 65;

    printf("Enter no of rows\n");
    scanf("%d", &num);

    printf("\n");
    for(row = 1; row <= num; row++)
    {
        for(col = 1; col <= row; col++)
        {
            if(count == 91)
                count = 65;

            printf("%c  ", count++);
        }
        printf("\n");
    }

    return 0;
}

Output 1:
Enter no of rows
5

A
B C
D E F
G H I J
K L M N O

Output 2:
Enter no of rows
10

A
B  C
D  E  F
G  H  I  J
K  L  M  N  O
P  Q  R  S  T  U
V  W  X  Y  Z  A  B
C  D  E  F  G  H  I  J
K  L  M  N  O  P  Q  R  S
T  U  V  W  X  Y  Z  A  B  C

Related Read:
C Program To Print All ASCII Characters and Value using For Loop

ASCII value of A is 65

ASCII value of B is 66

ASCII value of C is 67

ASCII value of D is 68

ASCII value of E is 69

ASCII value of F is 70

ASCII value of G is 71

ASCII value of H is 72

ASCII value of I is 73

ASCII value of J is 74

ASCII value of K is 75

ASCII value of L is 76

ASCII value of M is 77

ASCII value of N is 78

ASCII value of O is 79

ASCII value of P is 80

ASCII value of Q is 81

ASCII value of R is 82

ASCII value of S is 83

ASCII value of T is 84

ASCII value of U is 85

ASCII value of V is 86

ASCII value of W is 87

ASCII value of X is 88

ASCII value of Y is 89

ASCII value of Z is 90

For list of all c programming interviews / viva question and answers visit: C Programming Interview / Viva Q&A List

For full C programming language free video tutorial list visit:C Programming: Beginner To Advance To Expert

C Program To Display Right Angled Triangle With Alphabets, using While Loop

Lets write a C program to display/print/output a right angled triangle pattern formed with English Alphabets, using nested while loop.

Related Read:
Nested While Loop: C Program
C Program To Print Floyd’s Triangle

Expected Output for the Input

If user enters number of rows as 5. Then our C program prints a Right angled Triangle with 5 rows of English Alphabets in it.

User Input:
num = 5;

Output:

A
B B
C C C
D D D D
E E E E E

Video Tutorial: C Program To Print Right Angled Triangle With Alphabets, using While Loop


[youtube https://www.youtube.com/watch?v=_6oaPQKb5Ks]

YouTube Link: https://www.youtube.com/watch?v=_6oaPQKb5Ks [Watch the Video In Full Screen.]

Logic To Display Right Angled Triangle With Alphabets, using While Loop

If we take a closer look at the right angled triangle, we can see that the number of rows and the number of elements in that row are same. Example, row number 5 has 5 elements. Row number 6 has 6 elements etc. So we store this number in a variable called row. Since row starts from 1, we initialize the variable row to 1.

We ask the user to enter the maximum number of rows for the right angled triangle, and store it in address of variable num. In outer while loop we check if value of row is less than or equal to num. For each iteration of the outer while loop we increment the value of row by 1.

Inside the outer while loop we initialze the variable start to 1 – to print the alphabets from position 1 for that particular row number present in variable row. We increment the value of start by 1 for each iteration of inner while loop. Inside inner while loop we print the alphabets using ASCII value of upper case English Alphabets.

Related Read:
C Program To Print All ASCII Characters and Code

ASCII Values of uppercase English Alphabets

ASCII value of A is 65

ASCII value of B is 66

ASCII value of C is 67

ASCII value of D is 68

ASCII value of E is 69

ASCII value of F is 70

ASCII value of G is 71

ASCII value of H is 72

ASCII value of I is 73

ASCII value of J is 74

ASCII value of K is 75

ASCII value of L is 76

ASCII value of M is 77

ASCII value of N is 78

ASCII value of O is 79

ASCII value of P is 80

ASCII value of Q is 81

ASCII value of R is 82

ASCII value of S is 83

ASCII value of T is 84

ASCII value of U is 85

ASCII value of V is 86

ASCII value of W is 87

ASCII value of X is 88

ASCII value of Y is 89

ASCII value of Z is 90

Source Code: C Program To Display Right Angled Triangle With Alphabets, using While Loop

#include<stdio.h>

int main()
{
    int num, row = 1, start;

    printf("Enter no of rows\n");
    scanf("%d", &num);

    printf("\n");
    while(row <= num)
    {
        start = 1;
        while(start <= row)
        {
            printf("%c  ", (row+64));
            start++;
        }
        printf("\n");
        row++;
    }

    return 0;
}

Output 1:
Enter no of rows
5

A
B B
C C C
D D D D
E E E E E

Output 2:
Enter no of rows
10

A
B  B
C  C  C
D  D  D  D
E  E  E  E  E
F  F  F  F  F  F
G  G  G  G  G  G  G
H  H  H  H  H  H  H  H
I  I  I  I  I  I  I  I  I
J  J  J  J  J  J  J  J  J  J

For list of all c programming interviews / viva question and answers visit: C Programming Interview / Viva Q&A List

For full C programming language free video tutorial list visit:C Programming: Beginner To Advance To Expert

pattern and title Attribute of Form Field: HTML5

Today lets see how we can make use of pattern attribute to validate the user input data and use title attribute to hint the user for right inputs.

pattern-title-attribute-html5-regular-expression

HTML file
index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

< !DOCTYPE HTML>
<html>
<head>
<title>pattern and title attribute: HTML5</title>
<link href="myStyle.css" rel="Stylesheet"/>
<meta charset="utf-8"/>
</head>
<body>
 
<form>
<label for="name">Name: </label>
 <input id="name" type="text" pattern="^[a-zA-Z]+$" title="Example: Satish"/><br />
 
<label for="age">Age: </label>
 <input id="age" type="text" pattern="^[0-9]{2}$" title="Example: 25" /><br />
 
 <input type="submit" value="Done"/>
</form>
 
</body>
</html>

Here in the first input field, we’re restricting the input to only lower case and upper case alphabets. To the second input field, we’re restricting it to only 2 digits from 0 to 9.

CSS file
myStyle.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

label{
width: 50px;
    float:left;
}
 
input{
width: 200px;
}
 
form {
padding: 5px;
background-color: ivory;
width: 300px;
height: auto;
border: 2px dotted black;
}

CSS styling to align the input fields and the labels, with background color to the form, which has a 2px black dotted border.

pattern and title Attribute of Form Field: HTML5


[youtube https://www.youtube.com/watch?v=TKLF0Aydcv4]

YouTube Link: https://www.youtube.com/watch?v=TKLF0Aydcv4 [Watch the Video In Full Screen.]



Note: ^ symbol specifies the beginning and the $ symbol specifies the end of the input value.

You can share any simple/small to complex/big regular expression knowledge in the comment section below. Your time and effort is highly appreciated. Your knowledge and inputs will surely be helpful to many people around the world. Comment section is all yours :-)

Canvas Element Pattern: HTML5

Today lets learn how to create pattern from another canvas element.

canvas-element-pattern-html5

In this video tutorial, we take 2 canvas elements. Draw a small circle on one canvas and use it as pattern and draw a bigger circle on the main canvas.

HTML file
index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

< !DOCTYPE HTML>
<html>
<head>
<title>Canvas: HTML5</title>
<meta charset="utf-8"/>
<link href="myStyle.css" rel="stylesheet" />
<script src="myScript.js"></script>
</head>
<body>
 <canvas id="myCanvas" width="400" height="400">
  Upgrade Browser
 </canvas>
 
 <canvas id="pattern" width="50" height="50">
 Please upgrade your browser!
 </canvas>
 
</body>
</html>

Here we have 2 canvas elements with unique ids. First/Main canvas is 400px X 400px width and height, second canvas is 50px X 50px width and height.
Related: Canvas Basics: HTML5

CSS file
myStyle.css

1
2
3

canvas {
border: 2px dotted black;
}

We assign 2px black dotted border to both the canvas present on our HTML page.

JavaScript file: Pattern Code
myScript.js

1
2
3
4
5
6
7
8
9

var pCanvas          = document.getElementById("pattern");
var pContext         = pCanvas.getContext("2d");
 
pContext.lineWidth   = 2;
pContext.arc(25, 25, 10, 0, 2 * Math.PI);
pContext.strokeStyle = "red";
pContext.fillStyle   = "blue";
pContext.stroke();
pContext.fill();

Here we get the pattern id and extract the 2d context APIs. Using pContext object, we draw a small circle of radius 10px with red border and filled with blue color.
Related: Draw Arcs/Circle with Canvas: HTML5

JavaScript file: Main Canvas Code
myScript.js

1
2
3
4
5

context.fillStyle    = context.createPattern(pCanvas, "repeat");
context.strokeStyle  = "pink";
context.arc(200, 200, 100, 0, 2 * Math.PI);
context.stroke();
context.fill();

We assign previously created pattern to fillStyle of our main canvas context. With this pattern as fillStyle, and a pink border, we draw a circle which has a radius of 100px.
Related: Canvas Image Patterns: HTML5

JavaScript file: Full Code
myScript.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

window.onload = canvas;
 
function canvas()
{
var myCanvas = document.getElementById("myCanvas");
 
if( myCanvas && myCanvas.getContext("2d") ) 
{
var context            = myCanvas.getContext("2d");
 
var pCanvas            = document.getElementById("pattern");
var pContext           = pCanvas.getContext("2d");
 
pContext.lineWidth     = 2;
pContext.arc(25, 25, 10, 0, 2 * Math.PI);
pContext.strokeStyle   = "red";
pContext.fillStyle     = "blue";
pContext.stroke();
pContext.fill();
 
context.shadowColor    = "black";
//context.shadowOffsetX= - 10;
//context.shadowOffsetY= - 10;
context.shadowBlur     = 10;
 
context.fillStyle      = context.createPattern(pCanvas, "repeat");
context.strokeStyle    = "pink";
context.arc(200, 200, 100, 0, 2 * Math.PI);
context.stroke();
context.fill();
}
}

We’re making the main canvas circle stand out by applying shadow effects.
Related: Shadow Effect on Canvas: HTML5

Canvas Element Pattern: HTML5


[youtube https://www.youtube.com/watch?v=2LuBWIzs_EY]

YouTube Link: https://www.youtube.com/watch?v=2LuBWIzs_EY [Watch the Video In Full Screen.]



Patterns can be used creatively in HTML5 games development and to draw images which look like having a 2d or 3d dimensions.

Canvas Image Patterns: HTML5

Today lets learn how to create patterns on canvas using image.

index.html and myStyle.css files are kept same as illustrated in previous video tutorial: Canvas State: HTML5

Related Topics:
Canvas Basics: HTML5
Draw Rectangle: HTML5 Canvas

Javascript file
myScript.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

window.onload = canvas;
 
function canvas()
{
var myCanvas = document.getElementById("myCanvas");
 
if( myCanvas && myCanvas.getContext("2d") ) 
{
var context         = myCanvas.getContext("2d");
 
var myImg           = new Image();
myImg.src           = "technotip.png";
 
myImg.onload        = function() {
  context.fillStyle = context.createPattern(myImg, "no-repeat");
  context.fillRect(0, 0, context.canvas.width, context.canvas.height);
}
 
}
}

Here we create a new image object myImg and set it’s source to a image technotip.png Once the object loads the source image we call an anonymous function. Here we set fillStyle property with the pattern we create out of the image. createPattern takes 2 parameter, first on being the pattern itself and the second one being the image repeat value, it takes repeat, no-repeat, repeat-x or repeat-y as it’s value.

Canvas Image Patterns: HTML5


[youtube https://www.youtube.com/watch?v=AhxDlK5dOHY]

YouTube Link: https://www.youtube.com/watch?v=AhxDlK5dOHY [Watch the Video In Full Screen.]



Note:
We can create pattern out of another canvas element or an image or even a video file.