DEV Community: May Do

Creating a 2D animation with Unity

May Do — Fri, 08 Nov 2019 04:17:12 +0000

Unity makes creating animations very easy with a simple drag and drop method. To create a 2D animation in Unity, you first need some art assets that has each frames of a movement. There are many assets online for free. You can even find some on Unity Asset Store or itch.io. For this project, I will be using the 1bit pack from Kenney's assets. If your sprite sheet came with more things attached to it than you need, you can go ahead and crop out the image file as an easy fix so that there are only the sprite items we are going to use. The sprites that I am using looks like this:

Once you have the sprite sheets ready, import it into Unity and click on the image file. The inspector tab should be open to that selected image file. In the inspector tab, go to Sprite Mode. The default settings should be Single. Click the drop down menu and change that to Multiple so that the image is splitting each section into multiple items. This means that the image is no longer holding one item but many so that it can loop over each item to play the animation. Click Apply at the bottom and then Sprite Editor below Sprite Mode.

When the Sprite Editor is open, slice the image. Each item should then be clickable and customizable. The slice should be a prompt at the top of the window that looks something like this:

After you close the sprite editor, grab the sprite and simply place it in the Scene tab. You could also create a new animation through the Animation This should prompt a new window that asks you to create a new animation.

And that's all! Hit the play button and see your sprite animation. If you take a look at the inspector tab, you should be able to see Sprite in Sprite Renderer changing. You can further edit the animations in the inspector tab, too. Since the sprites that I used were very small I had to expand the size so the final product looks a bit blurry. The final animation for this project looks like this:

Note that this is only a simple cover of animation in Unity and does not go over player movement animation. If you want to create movement animation, you could create an animation and attach it to the object as a component along with some changes in code depending on how you want to animate your objects in your c# script files of your object. To learn more about animating in Unity, there is more information in Unity's documentations and Unity also offers a lot of tutorials in Unity Learn

Rotate MxN Matrix

May Do — Mon, 21 Oct 2019 02:08:35 +0000

Rotate Matrix is a simple program that rotates a MxN grid by 90 degrees clockwise or counter-clockwise. For example, the grid of [[1, 2], [3, 4], [5, 6]] should return [[2, 4, 6], [1, 3, 5]] when rotating counter-clockwise or [[5, 3, 1], [6, 4, 2]]when rotating clockwise.

  [1, 2]     [2, 4, 6]    [5, 3, 1]
  [3, 4]     [1, 3, 5]    [6, 4, 2]
  [5, 6]
  origin     counter      clockwise

To do this we'll first make a function that takes in a matrix, or an array of array, and a direction to tell us which way to rotate. Before we begin, lets make an empty array that will hold the values of rotated values.

var rotateMatrix = function(matrix, direction ) {
  let rotated = [];
  return rotated;
  };

The idea is that we're going to loop over the matrix by the length of a row and pick out the values we need in that column to simulate a rotation. So using the example above, if we wanted to rotate clockwise we'll loop over the matrix twice since we know that the length of a row is 2 and the expected outcome should have 2 rows. Then we will loop over the matrix again by 3 since there are 3 items in a column. In other words the current number of rows and columns should be switched in the result. The algorithm used to rotate the matrix both clockwise and counter-clockwise are very similar, but let's start with clockwise rotation.

We know that if we turn the matrix clockwise, we should expect 2 rows and 3 columns. If we take a closer look at the example above, we will also know that the expected values starts on the bottom left at 5 and goes upward and continues to the next bottom value 6 and goes upward each time. That means that our clockwise should look something like this:

// set col to be the length of a row in the matrix
// this will be the number of rows in the rotated result
for (let col = 0; col < matrix[1].length; col++) {
  // this will hold the values for the current column in the rotated result
  let colArr = [];
  // set row to be the length of the original matrix (the number of columns there are)
  // this will be the number of columns in the rotated result
  for (let row = matrix.length - 1; row >= 0; row--) {
  // add the current value into the current column
    colArr.push(matrix[row][col]);
  }
  // added the whole column into the rotated result
  rotated.push(colArr);
}

For counter-clockwise, the same algorithm applies but decrements by columns and increments by rows instead. So rather than starting from the bottom left and moving upwards, it starts from the top right and moves downward.

for (let col = matrix[1].length - 1; col >= 0; col--) {
  let colArr = [];
  for (let row = 0; row < matrix.length; row++) {
    colArr.push(matrix[row][col]);
  }
  rotated.push(colArr);
}

And that's all! The whole program should look something like this:

var rotateMatrix = function(matrix, direction ) {
  // [1, 2]     [2, 4, 6]  [5, 3, 1]
  // [3, 4]     [1, 3, 5]  [6, 4, 2]
  // [5, 6]
  // origin     counter    clockwise

  let rotated = [];
  // counter clockwise
  if (direction === -1) {
    for (let col = matrix[1].length - 1; col >= 0; col--) {
      let colArr = [];
      for (let row = 0; row < matrix.length; row++) {
        colArr.push(matrix[row][col]);
      }
            rotated.push(colArr);
    }
  } 
  // default clockwise rotation
  else {
    for (let col = 0; col < matrix[1].length; col++) {
      let colArr = [];
      for (let row = matrix.length - 1; row >= 0; row--) {
        colArr.push(matrix[row][col]);
      }
            rotated.push(colArr);
    }
  }

  return rotated;
};

Console Word Counter in C++

May Do — Mon, 14 Oct 2019 02:12:30 +0000

This is a simple programming exercise that will keep track of how many words there are in a given string and displays both the word count and average letters per word. To do this, we will create a counter that will count each letter. When we find a white space character we will then count that as the end of a word. Once we are finished iterating through the string, we will add all the letters of each word together and divide it by the number of words counted to get the average number of letters per word. The expected outcome should look something like this in the console:

Enter a string of 80 characters or less: 
hello world      
The number of words in your string is: 2
The average number of letters per word is: 5

First, let's prompt the user for a string, or character array. For this program we're going to limit the input size to 80 characters. To get the user input, use cin.getline instead of cin because cin will only read a single word, skipping over any white space characters which is what we don't want. The program looks like this so far:

const int SIZE = 81;

int main () {
  char input[SIZE];
  cout << "Enter a string of 80 characters or less: " << endl;
}

Once we have a string, we will count the number of words by looping over it and incrementing a variable counter when the current character is equal to ' '. Let's make a function called wordCount and pass in the input. The wordCount function should then expect a pointer or character array. In other words, wordCount(char str[]) or wordCount(char *str) will work since arrays are automatically passed by reference. The wordCount function will return the num of words plus 1 to account for the last word since there is no white space character at the end of the string. wordCount function should look something like this:

int wordCount(char *str) {
  int numWords = 0;
  while(*str) {
    if(*str == ' ') {
      numWords++;
    }
    str++;
  }
  return numWords + 1;
}

Although counting the words and characters could be done together, for this purpose we'll create another function to count the number of characters in the string called letterCount. The letterCount function will count all characters excluding white space character. It should look similar to the wordCount function.

int letterCount(char *str) {
  int numLetters = 0;
  while(*str) {
    if(*str != ' ') {
      numLetters++;
    }
    str++;
  }
  return numLetters;
}

Now that we have both word count and total number of characters, we can calculate the average for the user. In the main function, set a variable to be equal the return value of letterCount(input) divided by the value of wordCount(input). Don't forget that the variables holding the function results and average should be a double type variable to include decimals.

double avg;
double numLetters = 0;
double numWords = 0;

numWords = wordCount(input);
numLetters = letterCount(input);
avg = numLetters / wordCount;

To finish the program, console log the number of words and average letters per word. And that's all for the word counter exercise. However, note that this is a simple solution and does not account for some catches like if the user only enters a white space character. The whole code looks like this:

#include <iostream>
using namespace std;

int wordCount(char *str);
int letterCount(char *str);

int main()
{
  char input[SIZE];
  int numWords;
  double numLetters = 0;
  double avg;

  cout << "Enter a string of 80 characters or less: " << endl;
  cin.getline(input, SIZE);


  numWords = wordCount(input);
  cout << "The number of words in your string is: " << numWords << endl;
  numLetters = letterCount(input);
  avg = numLetters / numWords;
  cout << "The average number of letters per word is: " << avg << endl;

  return 0;
}

int wordCount(char *str) {
  int numWords = 0;

  while(*str) {
    if (*str == ' ') {
        numWords++;
    }
    str++;
  }
return numWords + 1;
}

int letterCount(char *str) {
    int numLetters = 0;

    while (*str) {
        if (*str != ' ') {
            numLetters++;
        }
        str++;
    }
    return numLetters;
}

Basic Git Commands

May Do — Mon, 07 Oct 2019 03:24:47 +0000

Git is the most popular version control system that is designed to manage changes in source codes during development. It is a very powerful tool to use to preserve progress especially when working with teams. However, Git has a steep learning curve. Learning to use Git will take some time so to help get started, here are some Git commands you may want to remember.

git status

git status: shows the state of the working directory and staging area. Use git status to see an overview of all the files that you've made changes in. It should show the files that are currently staged and unstaged, and files not tracked by git.

git add <filename>

git add: add changes in working directory to staging area. Use git add when you want to save the changes in the file that you specify. This will not save the file, but it will prepare the file to be saved. You can can multiple files by attaching the names of each file like git add <filename> <filename> <filename> or use git add . to add all files. If you change your mind about adding a file, you can use git reset <filename>.

git commit

git commit: records the changes added in staging area to repository. To avoid the prompted text editor, attach '-m' to create the commit message like this: git commit -m 'this is my message'. Git commit will save those changes that you added with git add. If you want to undo last commit, use git revert <commit hash> you can access the hash using git log. Git revert will create a new commit with the changes on the specified commit.

git push <remote> <branch>

git push: update the repository with latest changes committed. Git push will transfer the commits that you've made on the branch that you specify to a remote repository. After pushing, there should be either a pull request or an updated repository with the committed changes.

git pull <remote> <branch>

git pull: grabs and merges the contents from a remote repository to the local branch. Git pull is a combination of git fetch and git merge. Git fetch will download and the contents from the remote repository and git merge will try to stitch the remote and local contents together. Merging will prompt a merge conflict if there is any competing lines in a file. An alternative to git merge is rebase. git rebase will add you commits on top of the fetched contents instead of stitching it together.

Other commands
If you ever want to reword the last commit message, use git commit --amend or git commit --amend --no-edit if you just want to add a small change without changing the commit message.

If you change your mind and want to get rid of all your local changes at once, use git checkout .

If you want to change the name of the branch that your working on, use git branch -m <old name> <new name>

If you want to see all the commits that you've made, use git log.

For other commands not covered here, using git --help from your terminal or visit git-scm to checkout more commands and see what they could do. There are so many commands in Git to learn that it could be quite intimidating, but hopefully these will help you get started on mastering this tool.

Simple Explanation of Pointers in C++

May Do — Sat, 28 Sep 2019 23:24:15 +0000

Every variable has a location in memory and every memory has an address. A pointer is a variable that has the address of another variable. It's denoted by the asterisks symbol (*). So let's take a look at a number variable with the value of 3.

int num = 3;

The address of num would be where the value 3 is located in memory. It's marked with the ampersand symbol (&). If we console log the address, it would look something like this: 0x7ffeeb3989888. The address is going to look like some long line of numbers and letters.

cout << &num; // prints 0x7ffeeb3989888

Now here is the tricky part with pointers. They point to the address of num and also have access to the value of num, but the pointer and num are not the same value. Remember that pointers are only holding the value of the address of num. When we print out the line myPtr, it will print the address of 3.

*myPtr = &num; cout << myPtr; // prints 0x7ffeeb3989888

But, if we print out *myPtr, it will print out the value of the address. The asterisk symbol will indicate that you are trying to access the variable it points to.

cout << *myPtr; // prints 3

And that's the basic of pointers! It's a simple idea, but easy to get lost in if you don't keep track of what's pointing to what. The most important thing to know is that pointers are not the same as the variable it is pointing to. Pointers are only pointing to the address. For a quick look at what we were doing, this is what the code example looks like:

cout << "Address of num (&num):" << &num << endl; //displays address of num
cout << "myptr value at address (*myptr):" << *myptr << endl; //access the variable it points to
cout << "myptr contents (myptr): " << myptr << endl; //the variable stored in myptr
cout << "myptraddress (&myptr): " << &myptr << endl; //display address of pointer

Iterative Fibonacci in C++

May Do — Sun, 22 Sep 2019 22:19:07 +0000

The Fibonacci sequence is a series of numbers that are made with the last two numbers. It looks something like this:
0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89... and so on to infinity You can see that starting from the first 1, 1 + 1 will make 2 then 2 + 1 will make 3. This is the pattern we'll use to create our program that will display the sequence. But before we do that, let's ask the user for a number so that we don't end up with an infinite loop! That number will determine how many times we'll iterate through our sequence. The expected outcome for both should look like this:

We're going to set the first 2 numbers, 0 and 1 so that we have some starting numbers to add together. Also, create a variable that will hold the fib sequence number.
int num1 = 0, num2 = 1, nextNum = 0;
After we ask the user how many numbers they want in the sequence, we will use a for loop that starts at 1 and check if the number they inputed is either 1 or 2 since the first two numbers in the sequence are 0 and 1 which does not have two previous numbers.
for (int i = 1; i <= num; i++) { if (i == 1) { cout << num1 << " "; continue; } if (i == 2) { cout << num2 << " "; continue; } }
If the number is anything else, we will then use the pattern mentioned earlier.
nextNum = num1 + num2; num1 = num2; num2 = nextNum; cout << nextNum << " ";
nextNum will hold the sum of the previous two numbers. num1 will now equal the next number in the sequence and num2 will equal the current sum. So let's say the user wanted to see 4 fib sequence numbers. The program will loop 4 times and display num1 which is currently 0 and num2 which is currently 1. When i is greater than 2, nextNum will be the sum of 0 + 1. Now num1 will be 1 and num2 will be 1. For the 4th loop, the previous numbers that will be added for next num will be the sum of 1 + 1. Though we don't use it in this case, num1 will be set to 1 and num2 to 2 so that it will be ready for the next iteration.
And that's all for iterative fibonacci! The codes that were used for the program is down below.

Simple Console Rock, Paper, Scissors in C++

May Do — Sun, 15 Sep 2019 04:45:42 +0000

This program is a simple rock, paper, scissors game where the player has to choose one of the three options to beat the computer. The computer will generate a random option by creating a number to indicate that option. 1 will be 'rock', 2 will be 'paper', and 3 will be 'scissors'. The expect outcome should look like this:

Before we begin, let's set the values of rock, paper, and scissors to a number like so:

Now, let's make an options board. This will allow the user to pick between rock, paper, or scissors. Print out the options for the player to pick like this:

Next, we have to let the user pick and display their choice. We're displaying their number by comparing user value to our set constant values.

Once we have the user's choice, we need the get the computer's choice to see who is going to win. To do this we're going to randomly generate a number between 1-3 and display the computer's choice.

With both choices, we're ready to compare them and see who is the winner! Make a function that will determine all outcomes. Rock will beat scissors, scissors will beat paper, and paper will beat rocks. We should display the outcome if the computer or user wins. Don't forget to display a tie if both choices match.

And that's it! Those were the basic steps into making a rock, paper, scissors game in C++. All the code that was used for the program looks like this:

content delivery network

May Do — Mon, 26 Aug 2019 02:49:25 +0000

Content Delivery Networks (CDN) are exactly what they sound like—servers that deliver web contents like HTML pages, javascript files, stylesheets, and images and videos. CDN servers, however, are not hosting servers. They are just servers that cache the contents from an actual hosting server. Think of CDN servers as a mailman. A mailman won't write the letters, they'll just hold it and then give it to you.

CDNs are mostly used for maintaining web traffic. Without CDN a typical web traffic would have the users connect to the hosting server directly to grab the web contents they need. This is not a bad idea, but if there were millions of users that wanted to reach the server, the server might not be able to handle that many requests. Even if it could handle a large number the users would have to wait for a long time because the server has to deal with a million other users before it reaches you. CDN solves this problem by breaking down the way a user accesses web contents into much more manageable sizes. When a user requests web contents they now have to access it from one of the nearest CDN servers. So, if a user was from Australia and wanted the contents from a host in America they wouldn't have to wait for a connection to travel the long distance, the CDN server that's located closest to them will have and give them the content. Not only does this lighten the load of receiving too many requests on one server, but it also lets the users grab the contents much faster as it works similarly to wifi—the closer you are the faster it is. Additionally, because CDNS handle the requests it eliminates a direct attack to the host making the host server more secure.

Creating a basic console coin toss in C++

May Do — Sun, 18 Aug 2019 20:54:28 +0000

This is a small program that will simulate a coin toss for however many times specified by the user. It randomly generates the numbers one and two. When the number generated is one it will display 'heads', and when the number generated is two it will display 'tails. Pretty simple. The expected output should look something like this:

First, let's ask the user how many coin tosses the user wants.

Now that we have a number, we know where to stop our loop! For each iteration, we're going to simulate a coin toss and log the result into the console. Let's make another function called coinToss that would 'toss the coin' to make our code a little neater.

This is where all the real action takes place. In the coinToss function, we're going to need a number that's either 1 or 2, so we're going to use rand() which will randomly generates a number for us. Set the range of the random numbers to only be between the 1 and 2. Don't forget that in order to use rand(), you'll also need to use srand(time(NULL)). Once we have a random number, we need to make sure that 1 will give us 'heads' and 2 will give us 'tails'.

The program should randomly return a string of 'heads' or 'tails' until the number of coin tosses the user specified is reached. And that's all! You've just created a coin toss simulator. The whole program that was used looks like this:

The Basics of Same Origin Policy and CORS

May Do — Sun, 11 Aug 2019 17:37:54 +0000

Let's say you are accessing your bank account from bank.com in one browser tab, but also have a malicious website, evil.com, open in another. The bank account obviously has important information that you wouldn't want to share, so that's where security mechanisms come into play to prevent that malicious website's Javascript from accessing anything from the bank's browser tab. Such security mechanisms are same-origin policy and CORS (cross-origin resource sharing) that mandates the interactions between one source from another. This means that the codes that are being ran cannot just be any code — it has to have permission.

One way of having permission is through same-origin policy. By sharing the same origins, defined by the protocol, domain, and port of the URL, a site knows that the documents loaded should be able to interact with the resources from that origin and not another. So while evil.com could request to send information, bank.com does not permit to receive that information because they do not share origins. Bank.com could only interact with other documents within Bank.com's server.

Since the same-origin policy is a bit restrictive, another way of having permission is through cross-origin policy. This mechanism bypasses the same-origin policy and allows two sources to interact with each other without sharing origins, however only from sources that are specified. This is very helpful as many sites uses each others' sources such as images. For example, if bank.com requested access to some of loan.com's sources and its server is expecting that request, then loan.com is permitting Bank.com access to that information.

Same-origin policy and CORS are only two of the many policies, but by understanding these policies, you will understand the general core concept of how security policies work to reduce risks in malicious acts.

A Brief Look At JQuery

May Do — Sun, 04 Aug 2019 22:36:46 +0000

If you ever thought about web developing the first thing you should know about is JQuery. It's an awesome javascript library that cuts down all the nitty gritty of programming into simple lines of code. It's essentially a shortcut for web developers! Instead of typing hundreds of lines of codes just to traverse through a document, JQuery methods will find exactly what you want and do whatever you tell it to do. But wait there's so many other libraries out there so why this one specifically? Jquery is very important to learn not only for the useful functionalities but also because of its wide reach. Over 70% of the 10 million most popular websites are created with JQuery. The library is practically a must have when building a website.

So now that you know a little more about JQuery and are itching to get started, let's talk about how to download it. There are two ways to get JQuery: downloading from JQuery.com and importing JQuery to your library, or make someone else host JQuery via CDN(Content Delivery Network). if you choose the latter, you can find a host from sources like Google and Microsoft. After you install JQuery, you're ready to build your website! However, keep in mind that although JQuery makes building websites a thousand times easier, some skills are required in HTML, CSS, and ,of course, Javascript.

For more information on using JQuery, JQuery.com contains all the documentation of each functionalities.