Sunday, November 12, 2017

Monday, October 30, 2017

Mentally Finding Roots and Squares (or at least get pretty close)

 🔲 🌿 𝓷

How do you find the square of a number? What if that number has a decimal place?
What is b^2? 

Answer: make use of what you already know.  

Here's the equation:

b^2 = a^2 + Δ * Σ

That's a little cryptic. Here's that equation again:

destination^2 = origin^2 + difference * sum
Note: difference = (destination - origin). Going up should have a positive difference.  

Or this:

 dest^2 = orig^2 + (dest - orig)(dest + orig)

Or, for visual simplicity:

b^2 = a^2 + (b - a)(b + a)
Think: "to get from a to b". 

In other words: 

To get the square of a number (b^2, like 3.5^2 = ?), you can make use of a square that you already know (a^2, like 3^2 = 9), and just add the difference times the sum of the destination and the origin. Bonus: numbers with .5's and .1's are especially easy and can be used to get numbers with .6's. 

Example: 3.5^2 = ?

Well, with our equation we can make use of 3^2:
3.5^2 = 3^2 + (3.5-3)(3.5+3)
3.5^2 = 9 + (0.5)(3 x 2 + 0.5) 
3.5^2 = 9 + half of (6 + 0.5) 
3.5^2 = 9 + 3 + 0.25 

So: 3.5^2 = 12.25

We got 3.5^2 by using what we already know (3^2 = 9) and then did some calculations using relatively smaller numbers and mental shortcuts. 

Ok, but why do this?

The point was to practice problem-solving. The explicit goal was to answer a practice programming question: How do you implement or "manually" compute the square root of any number? There are multiple solutions, but one solution involves:
  1. ) An initial educated guess (pick smaller than the number, e.g. sqrt(17) should be smaller than 17, so maybe pick 4), 
  2. ) checking if that guess^2 is above/below the number (e.g. 4^2 is below 17), 
  3. ) adjusting using an efficient search of numbers below/above that number (binary search for O(logN) time), and 
  4. ) repeating steps 2 and 3 until you get an exact answer or you settle with a close-enough answer.
Our shortcut equations give us a way to mentally do step 2, especially when steps 3 and 4 give us a number with a decimal place as we get closer and closer answers.

Proof for the curious: 

Use algebra.

b^2 = a^2 + (b - a)(b + a)
b^2 = a^2 + (b^2 + ab - ab - a^2), using distributive property
b^2 = a^2 + b^2 - a^2, cancelling out 
b^2 = b^2
Proven.

But that doesn't really show how the equation was found. Thing is, the equation is basically the answer. So how do you find the equation?

How the equation (i.e. answer) was found:

Discovery. This is where the real problem solving is. Find patterns in the squares of numbers, and patterns in the differences between destination and origin. Hence the equations at the beginning of this post involving destination, origin, difference, and sum. 

In general, make use of what you already know (like simpler squares, or ones you already calculated) and build on those things to get closer to a solution. Go with what you know. Discover patterns. Problem solve. If you just need a quick answer, you can use a calculator or computer assistant. But if you want to practice solving problems, make the most of the mental toolbox you already have, and grow from there.

_________________________

LINKS TO OTHER STUFF: 

Favourites
Programming
Original Art
Games

Thursday, August 17, 2017

The Mental Temperature Calculator Returns - with the Google Voice Assistant!

Visual mnemonic of increasing accuracy (in 3 or 4 steps).

Celsius? Fahrenheit? Do you want to learn and practice a shortcut* to convert temperature in your head? Using ideas from earlier work (here and here), I made a voice user interface app for the Google Assistant! You can also find an in-browser version on API.AI:



Built using Actions on Google, API.AI, and Glitch

Related demo: https://codepen.io/hchiam/full/NjmOdW

Earlier post: https://hchiam.blogspot.ca/2016/09/how-to-convert-temperature-quickly-in.html

*Accuracy is at worst only 1 degree off, plus 1% of the original number. This means you're covered for small numbers, and when you go into the hundreds, you'll be off by a couple degrees. For example: 300 F is actually 93.3 C, but 92 C is pretty close for a shortcut. You can progressively increase accuracy, but with a diminishing ROI or "return on effort": https://hchiam.blogspot.ca/2015/12/how-to-convert-temperature-f-c-quickly.html
_________________________

LINKS TO OTHER STUFF: 

Favourites
Programming
Original Art
Games

Thursday, August 3, 2017

LUI: a JARVIS-like Interface



Meet LUI. Ask questions.

LUI = Language User Interface

Ask LUI questions. LUI will talk and try to give a helpful reply. Think: a very simple version of JARVIS from Marvel's Iron Man movies.

Instructions: You can type questions into a textbox and it'll reply with a synthesized voice (sometimes it opens google search results or google maps, depending on your question). 

Even better, if you have speech recognition software, you can just turn that software on and have it type out what you say into the textbox for you. That way, it can feel less like you're sending text messages, and more like you're talking to LUI.

Example speech recognition software: on Macs, there's Mac Dictation, which comes out-of-the-box on newer macs. You can activate it by pressing the <fn> key twice. If your cursor is blinking in the textbox, then it'll start typing out what you say, and then LUI will respond to you. 

LUI should work on both laptop and mobile devices. Let me know if there's any issues and I can update the source code live!

Try it out! https://codepen.io/hchiam/full/WOLOJG/

Code also available on GitHub. You can see LUI among my live demos on Codepen

If you use ad blockers, NoScript, etc.: you'll need to enable rawgit and responsive voice. Authorize geolocation when requested. Other features require API calls and will be updated in real time as I push updates to GitHub.

< This blog post was auto-scheduled for 9:00 AM Thursday, August 3rd, 2017. >

_________________________

LINKS TO OTHER STUFF: 

Favourites
Programming
Original Art
Games

Thursday, July 27, 2017

Minimal Clock + NN Mouse Gestures

See if you can activate the neural network that detects mouse cursor gestures.
You can open it full-screen on the original Codepen page: here.
 .
If you use ad blockers, NoScript, etc.: you'll need to enable rawgit and responsive voice.

< This blog post was auto-scheduled for 9:00 AM Thursday, July 27th, 2017. > 

_________________________

LINKS TO OTHER STUFF: 

Favourites
Programming
Original Art
Games

Tuesday, July 18, 2017

Mouse Cursor Gesture Detection

Uses a neural network programmed "from scratch". You can do up-down motions, left-right motions, and large clockwise motions with your mouse. The neural net was trained on real mouse cursor gestures. See the GitHub link below for more info. Try it right in your browser! 
See and edit the code live: Codepen
More info: GitHub
..

_________________________

LINKS TO OTHER STUFF: 

Favourites
Programming
Original Art
Games

Thursday, July 6, 2017

Make Your Own Word Inventor

Markov Word Generator

Give it words from a dictionary, and it'll create made-up words that have the same "feel", as if they're from the same language. (Also works on made-up languages like conlangs.)

The original inspiration for this project came from a YouTube video (en français): https://www.youtube.com/watch?v=YsR7r2378j0

Use It:

  • Install Python2 or Python3, numpy, and click. Macs should have Python2 installed already.
  • Download the folder from https://github.com/hchiam/word_gen (look for the clone or download button) and go to that folder using Terminal/CLI/Bash.
  • Then run this command (you'll have to wait a little while it processes your data):
python make_map.py && python create_words.py

Note: That little "&&" runs the second python command only if the first python command works. You can just re-run python create_words.py without having to run the other one (if you didn't reset the input words in input.txt).


Input data file: input.txt. Put at least about 30 words here to have the algorithm working, but maybe over a thousand to get more robust/realistic results. You can get real word lists from the Gutenberg project.

Output data file: output.txt. See your words get generated here! :)


_________________________
 
Credits: 
You can see the original code here: https://sciencetonnante.wordpress.com/2015/10/16/la-machine-a-inventer-des-mots-video/
(I just cleaned things up more after forking https://github.com/scls19fr/word_gen).
_________________________

LINKS TO OTHER STUFF: 

Favourites
Programming
Original Art
Games

Wednesday, February 22, 2017

10 Programming Data Structures and Algorithms - in Pictures

I've been studying

...I know, doesn't sound that interesting, right? Well, I noticed that, while studying, I started drawing "icons" to remind myself how each concept works---and to do so quickly

(Plus, I just find sketches more interesting to look at than text anyways.)

There are a lot of data structures and algorithms out there, some of which I just need to brush up on, others are entirely new to me. It's easy to lose track of the important details when there's a lot to catch up on.

I personally find it much easier to quickly scan a visual than to read the same thing in text. So with my "icons", I don't have to re-read the walls of text in my notes (and potentially forget details when I need to code on the spot). Maybe you might find these pictures helpful for review, or as a starting point.

The idea is similar to the visual memory-aids I made for an earlier post on learning more efficiently. Deeply learning and connecting concepts can help make memories more robust.

As a final thought, you might find it helpful to also use the method of loci, to keep track of all the concepts under one roof in your mind (with some branching to group details together to each concept). 

For example, my living room couch is my "location" for the hash table. From there it's easy to visualize the insert, delete, search, and rehash functions---using the pillows. Different parts of that couch also serve as reminders of member variables, etc.


Not actually my couch(es). Image from Wikipedia.

Now, without further ado, here are "icons" that serve as visual summaries for ten computer science concepts. Enjoy! 

Search Algorithms:

 

#1. Interpolation Search:

 

#2. Binary Search:


-------
-------
-------

Sorting Algorithms:

 

#3. Insertion Sort:

 

#4. Shell Sort:

 

#5. Quick Sort:

 

#6. Merge Sort:


-------
-------
-------

Data Structures:


-------

Stack:

#7. Stack - Array Implementation:

 

#8. Stack - Linked List Implementation:


-------
 

Queue:

 

#9. Queue - Array Implementation: 

 

#10. Queue - Linked List Implementation:

_________________________

LINKS TO OTHER STUFF: 


Chinese Learning Projects:
 - Book
 - HSK 1
 - HSK 5