snow world

snow world

Posted in Digital Multiple Media Tagged with:

Krita Drawing: Villa at river bank


Posted in Digital Multiple Media Tagged with:

Drawing by Krita



Posted in Digital Multiple Media Tagged with:

Molecule to atoms


Here is a interested algorithm question on codewars site.

For a given chemical formula represented by a string, count the number of atoms of each element contained in the molecule and return an object.

For example:

water = ‘H2O’

parse_molecule(water) #return {H:2,O:1}


parse_molecule(magnesium_hydroxide) #return {Mg:1,O:2,H:2}


parse_molecule(fremy_salt) #return {K:4,O:14,N:2,S:4}

As you can see, some formulas have brackets in them, The index outside the brackets tells you that you have to multiply count of each atom inside the bracket on this index. For example, in Fe(NO3)2 you have one iron atom, two nitrogen atoms and six oxygen atoms.

Note that brackets may be round,square or curly and can also be nested. index after the braces is optional.

In this question, the molecule can be very complex, such like this: K4[ON(SO3)2]2{Na7H9[Fe7Mg2(P3S)2]}4, just an example, maybe there is no such chemical in real world.

To solve this problem, one way is how to make the molecule presentation simple and simple step by step, for example:


We can use a recursion algorithm to remove bracket until no more brackets in the molecule and finally count the number of atoms.

First, to split the string into groups and make sure certain groups include bracket(without nested ) and index, this can be done by regular express:


use this regular expression, the molecule in above picture can be split into four groups:

group1: K4[ON(SO3)2]2{Na7H9[Fe7Mg2

group2:  (P3S)

group3: 2

group4: ]}4

Then we merge group 2 and group 3 into one: (P6S2), and remove the bracket, it will be P6S2 as a new group, merge group1, new group and group4 into new string:


repeat above processing until there is no more bracket, the final string will be:


for merging group2 and group3, we can use a individual function:

Define a main function to do the group splitting and final atom counting:


Posted in Algorithm Tagged with: ,

Performance on sum of many ints by Python


There is a such question  at codewars( site.

Write a function to do calculation according below formula:


for i from 1 to n, do i % m and return this sum

for example: f(n=10,m=5) //return 20 (1+2+3+5+0+1+2+3+4+0)

actually it is a quite simple algorithm, use python to do it like:

and it works very well when m and n are not very large.

But the performance will be very bad once n and m are very large, for example f(123939234234,249453949) and can not pass the test case of codewars.

We have to find out more clever algorithm.

There is a popular story that Gauss, mathematician extraordinaire, had a lazy teacher. The so-called educator wanted to keep the kids busy so he could take a nap; he asked the class to add the numbers 1 to 100.

Gauss approached with his answer: 5050. So soon? The teacher suspected a cheat, but no. Manual addition was for suckers, and Gauss found a formula to sidestep the problem:

\displaystyle{\text{Sum from 1 to n} = \frac{n(n+1)}{2}}

\displaystyle{\text{Sum from 1 to 100} = \frac{100(100+1)}{2} = (50)(101) = 5050}

It is said that Gauss was just 10 years old at that time.

We can use a illustrator to show the steps of the algorithm which we need to create.


n can be divided by m into x parts, if n<m then x=0

Every sum of x can be calculated by m*(m-1)/2, there is a different with Gauss’ formula, m-1 instead of m+1, that because m % m=0.

Grown bar mean the value of n%m, just use normal Gauss formula to calculate it.

So our algorithm will be very simple.

First, get x=n/m, if n<m the x=0

Second, get c=n%m

At last sum them together: sum=x*(m*(m-1)/2) + (c+1)*c/2


Posted in Algorithm Tagged with: ,

Customize form validation by using jQuery validation plugin


Sometime form validation is trouble thing for building the front page, in this article briefing a method which allow us to customize the validation by adding ourselves’ rule through jQuery validation plugin, it’s friendly to mobile version.

First, include necessary dependencies in html code:

In order to make sure the page is responsive on mobile device, we need to add basic mata data in head of html.

Second, create simple form:

Now, the page looks like:


We have to add some javascript code to trigger the validation engine once the form is submitted.

we use the basic setting to do basic validation, in this example, first name, last name, email, NRIC/FIN and mobile phone number is required, and email element is build-in detection in the validation plugin. Click submit button without anything entered will get result as below:


The question is we want to validate NRIC/FIN and Mobile phone with Singapore format rule which is:

  • NRIC/FIN: must be 9 length, prefix with G,F,T or S and following by 7 digital numbers and end with a check digit and its checking algorithm as below:form3
    we can define a function to do the checking, this is another problem.
  • Mobile phone number must be in 8 digit numbers.

jQuery validation plugin allow to add customized rule like below:

finSG:true is the customized check function, that mean we can define a method somewhere to help to do checking work.

jQuery.validator.addMethod function accept 3 parameters: name,function and message:

function CheckDigit(fin_number) is another function that we can define some where, also can be included inside, it just return true or false.

final code:

Posted in HTML5, Javascript Tagged with: ,

Tooltip by pure CSS


::after and ::before are very useful notation in CSS for showing content or supporting layout.

We can set some content for “content” property in css for ::after or ::before notation,  for example:

Is there any way to set dynamic content for “content”, the answer is YES.

CSS allow us to set content for “content” by using customized attribute of html element like below:

The result is as below:

that means if we can make the content of “data-tooltip” visible when mouse over and invisible when mouse out,  the basic tooltip effect comes out.

Here we use another pseudo class “:hover” to do the switching.

Next, we can focus on how to change the style of the ::after pseudo element to make it more like a tooltip box.

Below is the html and css code and it’s effect


Posted in CSS3 Tagged with:

Retrieve public page content from Facebook without user login



Facebook upgraded it’s API, cause some issue on our social micro page in our company. The public page content can not be retrieved anymore without creating an application, and I have to spend one day to look through the new method for retrieving content from public page of our company. At first I was every confusing with facebook’s access token,  variant access token corresponding to different approaches. Now, let me note down the main steps for this upgrading.

Step 1:
Create a new application on, then you have the App ID and App Secret like below.


Step 2:
Insert Facebook Javascript SDK  in your page:

Pay attention to the parameter appId , it’s value should be your App ID that assigned by Facebook. Now the facebook SDK initialed by above code.

Get access token from facebook graphic API.

The variable token is what we want, use it to call facebook graph api to retrieve information without user login.

Step 4:
Access facebook graph api with access token


Put them all together



Posted in Javascript Tagged with: , ,

How to find the ghost ball position in billiard game


It’s very important to find the position of ghost ball in billiard game, in this example showing how to use ray to find correct position for ghost ball in Unity3D development.

Create the game objects in Unity3D as below:


White ball with name:”Whiteball”, ghost ball with name:”GhostWhiteball” and some red balls with tag:”redball”. In order preventing disturbing to the ray by ghost ball, need to put ghost ball into “Ignore Raycast” layer.


Add rigidbody for all balls except “ghost ball” and enable gravity.

Create a C# file named “controler.cs” and add it as component for main camera.



Posted in Game Tagged with:

Game Trailer of AVIATOR

game trailer

Unity 3D + After Effect + Windows Live Movie Maker

Posted in CG, Game Tagged with: ,