Cloth Simulation

Several years ago, I implemented cloth simulation with HTML5, but I didn’t publish it. Tonight, I ‘ve encountered it while looking my old projects and decided to post here, you can play by pulling the vertices, have fun :)

You might be able to see it below:
(If you can’t see, try modern browsers like Chrome, Firefox)


Bezier Curves Playground with HTML5

Bezier curves are parametric curves which are plotted by control points. They are used in computer science in order to plot curves and make timing-function for animations. In mathematics side, they are constructed by using Bernstein polynomials. Bezier Curves are widely published by Pierre Beziẽr and who used them for automobile design. For more information see Wikipedia article.

I have made a tool with HTML5 that gives ability to play with bezier curves by putting and transforming the points on the screen. When you added a point, it increments the degree of Bernstein Polynomial.

Wolfram Mathworld have more information about its mathematical background, you can see here.

Click to play with Bezier Curves

 

 

New year effect with HTML5

I ‘ve made some particle effect for Christmas, now you are seeing it at the background (it ‘s snowing) if you use modern browser that supports HTML5 Canvas element. If you don’t use, you might want to have one because it seems nice :)

I just added but i thought someone might want to use this and then i decided to share here. It isn’t so flexible but the code is not messy, so you can easily edit yourself, if you want help, feel free to ask me by leaving a comment below.

Briefly, in order to add your page, first download the newyear.js , and then include into your HTML page as below:

<script src=”newyear.js”></script>

It will add the effect into background and set CSS property position to fixed.

The test page here;

 

 

Merry Christmas !

 

Color Picker (with HTML5 Canvas and CSS3)

I ‘m a big fan of HTML5 stuff, especially Canvas element. The other color pickers on the web are made with some trick in order to work in all browsers, but I think that this tool deserves more than simple trick and I decided to make it with Canvas and then put in some transition effect with CSS3 transitions. I hope it would be useful, actually i use this tool everyday in my work. As a frontend developer we always need to pick a color.

(Note: It does not work on ancient browser that does not support HTML5 Canvas, like IE 6,7,8)

Click here to use it.

3D Function Graphics with HTML5 Canvas

I have been working on this project for a while, and after hard working in the last week finally i have completed first version of my function plotter in 3D.

This tool draws F(x, y) mathematical functions into the 3D space. I have used the HTML5 canvas element and no 3D engine is used. The only library i ‘ve used is that mathematical expression parser by Silent Matt. The other effects and drawing features are implemented in pure javascript.

Needless to say more about that, use it, it makes you amazed!

To use:

3D Function Graphics Drawer

Please don’t hesitate to make comment about that, I care your thoughts.