Pinyin Typer (Mandarin)

Instructions: enter a number after a vowel to change the vowel into a pinyin tone 1-4, based on the number pressed. Type "~" to toggle use of Pinyin replacement. 'v' key is 'ü'. '\' adds a tab in the textarea.

Type here: Use Pinyin: Yes

Check definition in browser plugin (Zhongwen Chinese Popup Dictionary,etc) by doubling text into DIV

Bitwise Constructor

Switch individual bits to get an integer value for later bitwise operations

Can click on the checkboxes or their surrounding tabs to enable/disable bits. Or change the textbox.

Your Int-32's value:

Scale rect to fit, including upscaling

From yesterday's post, I forgot the code snippet couldn't upscale, only downscale. This remedies that.
Same downscaling part, but afterwards, if it wasn't downscaled, upscale to the nearest dimension. Basically checking the scale factor for current width -> desired width vs. current height -> desired height. Then we're choosing the smaller ratio, as that would prevent any part of the rect from going outside the bounds.

JsFiddle:

Easily scale rect to fit dimensions

 My programs used to very awkwardly try to scale an image... I would try to fit it on the x-axis, then the y-axis, or else the y-axis then the x-axis, depending on the original dimensions, and also it would probably need rescaling after that scaling phase...

No more! Now I get how to scale it easily in one phase. (It seems so obvious now!)

Basically, we make sure it fits on x-axis. Then, with the updated scaling dimension, we check whether it needs further scaling on the y-axis.
The check on the x-axis is with the original width, while the check on the y-axis is with the scaled height (from scaling the x-axis to match the desired width).
When the scale is set, it is always calculated with the original width/height.

JsFiddle:

Bitwise operations without bitwise operators

JsFiddle: See the code in action, in neat & orderly JavaScript

It was a fun little programming exercise to achieve bitwise operations with non-bitwise operators.

Rules: I only want to use functions (and therefore loops (recursive)), logic, addition, subtraction, multiplication, and division (and therefore modulus and exponents)

flip all bits in a byte:
var flipMe = 255 - flipMe; // flipMe = ~flipMe;

shift byte left by 2 bits:
var shiftMe = 3; // 0000 0011
var nob = 2; // Number Of Bits (to shift)
shiftMe *= Math.pow(2 * nob); // 0000 1100. or shiftMe = shiftMe << 2;
// to shift right: shiftMe /= 2*nob;
// IMO Math.pow() is not cheating, as we could recreate it with a for() loop

bitwise AND
var randValue = 178; // 1011 0010
var bwAnd = 35; // value we want to check if it matches. 0010 0011
function getBitArray(num){ // get array of bits without bitwise (use mod, IMO not cheating)
    var ary = [];
    var lastNum = 0;
    for(var xint = 1;xint < 9;xint++){ // mod 2^1 through 2^256
        var newNum = num % (Math.pow(2,xint));
        // if the number is different, there was a bit representing the relevant power of 2
        if(newNum != lastNum){
            ary.push(1);
            lastNum = newNum;
        }else{
            ary.push(0);
        }
    }
    return ary; // index 0 is the low order bit
}
// now that we have the bit array, just compare bytes and create a number with proper bits
var result = 0; // 0000 0000
for() each bit
    if(bit in randValue matches bit in bwAnd and the bit is 1)
        result += bwShiftLeft() by [which bit this is] // we shift with our function
// this was a tough one. The most eloquent solution I could think of is using logic and modulo (%) to get the individual bits, which to me is just a glorified while() loop of subtraction for our purposes and therefore isn't cheating IMO.
// If you want to rule out the modulo, we might have to use above bit shifting to achieve this: bit 1 would be ((randValue << 7) >> 7).

bitwise OR & bitwise XOR
the same as bitwiseAnd but with changes for OR/XOR when deciding whether to add a shifted bit

change bit values (obvious one): turn bit 2 from 1 to 0
var randValue = 10; // 0000 1010
randValue = randValue - 2; // now 0000 1000
// or change bit 1 from 0 to 1
randValue = randValue + 1; // now 0000 1001
// Note: of course won't work if the bit is not as anticipated.
// If we randValue-1 when bit 1 is already 0, it will still subtract like normal, changing the other bits in the process.
// Should check if the bit is as anticipated first.
if((randValue % 2) == 1) randValue -= 1;

Your 'Learn Programming' Game Plan

If you had to relearn programming from scratch, what would you perfect plan be?

Basically, what would:

•     Get you programming fastest
•     Increase your knowledge base most profoundly
•     Least complex installation/setup

Or, if  you felt like you learned it the best way possible for you, feel free to share!

Personally, I first learned ActionScript 2.0 (used in Adobe Flash CS4), and got fed random bits of information from various YouTube videos of college students sharing what they were learning in class, etc. YouTube was a different place back then... A simpler, less organized place.

I feel like ActionScript 2.0 is perfect for newbies to jump into programming because you can start a new project, then draw a shape, convert it into an object, and name the object, all with Flash CS4's GUI. Then you can click on the frame and add a script to it, referencing the object with the name you gave it. Bam! In 30 seconds, you got:
trace("Hello, World!"); // log to console
noob._x = 100; // set x coord of object named 'noob'

ActionScript 2.0 is so close to a clone of JavaScript. And unlike ActionScript 3.0, which is more OOP-based and more stringent on syntax, ActionScript 2.0 has pretty easy syntax and is sooo lax with typing (like JavaScript).
However, if you would like to practice more strong typing, it's also possible to type out scripts with more explicit typing in ActionScript 2.0, example:
var noobName:String = "";
function nGetAge(strName:String):Number{
    return 0;
}
Good luck pretending to strongly declare types in JavaScript.

ActionScript 2.0 is also a rare language that supports explicit script inclusion (#include "moreTools.as"), reminicent of C++. For organization, this is something I really miss in Java/Python.

As for suite tools, Flash CS4 had a script syntax checker (CTRL+T) that would check the syntax of the script you're currently typing. SUPER useful as a beginner. No need to build the whole thing. CS4 also had debugging tools, publishing tools (.html,.swf,.exe,.app), editable shortcuts and interface, and various tools to help with drawing/managing the resource library. It's like Unity before Unity blew up, right?

Not to mention this method's secret weapon: anybody's code on the internet! While beginner-friendly ActionScript 2.0 courses were kind of rare online, there were decompilers such as Sothink SWF Decompiler that would turn an .swf file into an .fla (Flash CS4 project file) that could be opened and edited as if it were one of your projects. Combine that possibility with the then-limitless amount of online Flash games that peppered the internet at that time, and you have all the real, working, code examples you could want, from real, published games! IMO crazy convenient as a learning tool. More so than having to plug in a half-explained StackOverflow code snipped for a new concept as a beginner. Not to mention cool and fun seeing how other people put together their games / animations.

Sadly, it seems ActionScript 2.0 was only supported up to Flash CS6, which is ancient and no longer available for purchase from Adobe. A newbie would have to find a friend with it or download online somewhere... But despite this total void in availability, I stick by my opinion that it was a golden age's fruit for learning programming.





Just for fun, my personal opinion on other possible avenues, compared to ActionScript 2.0:

JavaScript: Easy language, crazy accessible (any non-mobile browser), console is super easy to interact with, but doesn't have the benefit of drawing/pasting a picture and naming it (would require HTML and/or DOM API to feel like you're interacting with something tangible).

Python: Bit more involved to setup (in case the Environment variable isn't modified during setup). Easy language, but the syntax varies significantly from other common languages, meaning you'll have more to get used to when you try another language.

C++/C: Too strict in its syntax and typing, not accessible (just setting up a project without clicking Empty Project can result in it not building for inobvious reasons). Easy console applications. Notably, with the free IDE Visual Studio, a near-beginner could easily make a GUI application: something that feels like a 'real' program! It's got a window and buttons and everything! (was I the only one that was that impressed by it?)

C#: In some ways better than C++ for learning. Same IDE (Visual Studio) as C++ (convenient to try both langs), and makes certain tasks easier than in C++ (accessing MSSQL DBs and built-in type conversion functions come to mind). However, it is completely OOP like Java: just to get a basic Hello World project to build involves extra text and hierarchy concepts...
# python
print('Hello, World!')
/* c++ */
#include <iostream>
int main(){
    std::cout << "How's it hanging, World?" << std::endl;
    return 0;
}
/* c# */
namespace x{ // Newbie: What's this?
    class Program{ // Newbie: and that?
        static void Main(string[] args){
            Console.WriteLine("Finally... Hey, world.");
        }
    }
}
I guess Hello World is always copying and pasting something. Afterward comes modifying, experimenting, and exploring. I like to type out my Hello Worlds, so I personally found it daunting that there was so much extra that I didn't understand.

Java: IMO, same cons as C#. Hello World in Java has the same 'technical bloat' from hierarchy as C#. I like Java, but it's not as get-it-and-go as JavaScript/Python.


Anyway, whichever language/route one would take to learning, it's passion that gets a person the most mileage. ActionScript 2.0 was accessible to me and my attention span since I wanted to make games. In high school class Principles of Engineering, they taught us ROBOTC or something... It was ALL text. It didn't even build into an interactive console like my C++ at home, it was uploaded to a microprocessor connected to a few electronic pieces to move a tiny motor a bit. I honestly don't know if I would have had ANY interest in programming if I had to learn it through all text as a 15 year old with ADHD and Guitar Hero. But that's just me.