Make and Hack

I've always struggled to organize my ideas. I often run out of space when writing them out on paper or make too many mistakes. Most software is not intuitive enough, good looking or feature rich. My favorite software for organizing my thoughts is... XMind .

I'm terrible as a graphic designer but I've learned the basics anyways and here is a list of free software that I find useful.   Krita (supports both raster and vector layers) Inkscape (vector editing software) Gimp (I don't love this one but some people do) Lunacy (Great for creating app UI concepts)

I've always been curious about how animations work and how one day I could be able to make one. One day I decided to look for 3d animation courses online and ended up paying for one that was rated as one of the best online courses. Here I leave a list that hopefully might get you get started.     First things first: Download an animation software like the ones listed below(they're entirely free) Blender 3d Pencil2d   Synfig Studio(2d animation)   Take a course that can help you get started: My favorite course from GameDev.tv Blender Enviroment Artist: Create 3d Worlds https://cgboost.com/ Software for texturing: Armor Paint Blender 3d Free PBR textures and HDRIs: ambientCG Poly Haven Textures Websites: 3Dassets.one Share Textures http://texturelib.com/ https://pixabay.com/ https://unsplash.com/ https://www.pexels.com/ Poliigon Textures Textures.com Let your imagination fly     Check out the simple animations that I was able to make after dedicating a couple...

How I got Started My interest in video games(being a gamer) lead me to ask myself a couple of years ago "How do I make video games?". I ended up downloading a game engine called Unity 3d in which I found a Text editor with something called JavaScript . I Googled "What is JavaScript?" and "How to learn JavaScript?"  and ended up in a website called CodeCademy which had a very well structured interactive course. From there I started my coding journey  by reading online docs and different websites learning the basics of web development(HTML, CSS and JS) which lead me to learn how much knowledge I lacked in order to be able to develop video games. Developing video games was a lot harder and complex than I thought, I needed  to acquire 3d modeling skills, learn about texturing and animation, learn at least the basics of game engines and their specific functions for interacting with the scene and the elements using the programming language(scripting), audio r...

Node.JS is a great tool for back-end development but is dynamically typed and gets really hard to use when making more complex computer programs. I wanted to learn golang but I read that it was statically typed and I like saving stuff on .json format . Then I learned about dartlang and flutter . Dart can be both statically typed and dynamically typed, it's cross platform, has a similar syntax to JavaScript and you get to specify  the data types just as in c++. Dart is also free and open-source and also has a package manager called pub.dev . It has a huge amount of libraries and one of the built in libraries is dart:io which contains a lot of functions that go from interacting with the file system to things like creating servers . Dart also makes it relatively simple to pass parameters with something they call named parameters.   Where to learn Dart and Flutter: https://www.appbrewery.co/  See my full simple dart server example here

To convert a hexadecimal to decimal all we have to do is do is perform the opposite procedure we used to convert to hex. In this example we will turn back the number that we used here(#35) into decimal. First we must use the table to get back again the Remainder Decimal value Hex Equivalent 1 1 2 2 3 3 4 4 5 5 6 6 7 7 8 8 9 9 10 A 11 B 12 C 13 D 14 E 15 F Note: each hexadecimal digit represents the Remainders found when converting the number from decimal to hexadecimal  Now revert the Process by performing these simple steps:  Use the  table above to find the decimal equivalent of each Remainder in the case of #35 is 3 5 Multiply each of the remainders(decimal equivalent of each hex character) by 16 to the power of "n" where "n" is the position of each character. The position of the character is found by counting from right to left and starting the count on 0 rather than 1. Note: the ...

A display can project 16,777,216 different colors . One way to generate all color combinations is by using the same method employed on this article but with Hexadecimal numbers . If we count from 0 to 16,777,215(#000000 to #FFFFFF) and convert each number to hexadecimal we will generate all of the 16,777,216 colors . See this method in action by moving the slider below. See the Pen All Colors by LiveUser ( @liveuser ) on CodePen . By using this method to generate each color and assigning them to individual pixels I was able to produce a 8192x2048(16777216) pixel image. Click/tap here to see full resolution image

When searching for how to convert decimal numbers to hexadecimal it may seem like a daunting task. Until you learn about modulo . The easiest way for me to count in Hex is by counting in decimal and converting to Hexadecimal using the modulo operator(like a programmer). First you divide the decimal number by 16 Math.floor() the Division Result Find the Division Remainder using modulo Divide the number of your Division Result by 16 Repeat the previous steps until your Division Result is 0 For this example we will use the decimal number 53 Divide Division Result Division Remainder 53 / 16 Math.floor(3.3125) = 3 53 % 16 = 5 3 / 16 Math.floor(0.1875) = 0 3 % 16 = 3 We take the remainders going from the latest remainder to the one we got first. In this case 3 5 (the order is important). Then we use this table to translate the remainders into hex Decimal value Hex Equivalent 1 1 2 2 3 3 4 4 5 5 6 6 7 7 8 8 9 9 10...

Learning the different kinds of rounding operations can have many applications. In this article I will explain what each rounding application in JavaScript does. Even though the code may change on different programming languages, they all do the same. Math.floor(); Rounds the number down  Examples: Math.floor(1.5) = 1 Math.floor(2.7) = 2 Math.floor(1.3) = 1 Math.ceil(); Rounds the number up  Examples: Math.ceil(1.5) = 2 Math.ceil(2.7) = 3 Math.ceil(1.3) = 2 Math.round(); Rounds the number to the closest integer Examples: Math.round(1.5) = 2 Math.round(2.7) = 3 Math.round(1.3) = 1

The remainder is the integer "left over" after dividing one integer by another to produce an integer quotient -Wikipedia- In JavaScript(my favorite programming language) when you want to get the remainder of a certain operation you use the modulo (%) symbol. Some examples of this operation would be: 21 % 5 = 1 24 % 5 = 4 25 % 5 = 0 In the first(1) example 5 fits 4 times inside 21 and has a remainder of 1. In the second example 5 fits 4 times in 24 and has a remainder of 4. Finally, in the last example five fits 5 times inside 25 and has no remainder, thus the result is 0.

Binary numbers have either 1 or 0 value. The positions in binary are counted from right to left and down to top. When counting positions in computers we always start on 0. In order to get the decimal value of a binary number we have to use the formula 2 n (where n is the position number) to get the decimal value of each individual bit wherever the value of the bit is equal to one. If the value of a certain bit is zero then the decimal value is also zero. Also you could consider learning from the same practice exercise that I learned binary from which you'll be able to see if you click or tap on this link . They gave me the previously mentioned excercise many years ago at the Arecibo Observatory Space Academy program which I believe is now called STAR Academy .

Motion pictures are simply a sequence of images being switched very fast to create the illusion of movement. As you increase the frame rate the animation will appear smoother. Frame rate indicates the frequency at which pictures will be switched. Typical displays today have a frame rate of 60 Hertz(Hz) which is equal to 60 frames per second(fps) Individual pictures: Pictures turned into a gif:

Primary Colors The visible light spectrum is composed of Red Green and Blue light. All the colors we see are the brain's interpretation of the combination of these three colors at different intensities. Color Combinations On computers the intensity of each color ranges from 0 to 255. Where 0 means no color and 255 is the maximum intensity. On HTML it is common to see colors specified as r g b ( 255 , 56 , 32 ) when specifying them as red , green and blue , or as hexadecimal # FF 38 20 .    Displays Displays are nothing but arrays of RGB diodes used to display images. Pixel Density Different screens have different resolutions and sizes and both play a role on this matter because there is an inverse correlation between screen size and pixel density. To get the pixel density you have to divide the amount of pixels by the area of the screen.