games.ivank.net

blog.ivank.net

Taylor polynomial clarified

http://blog.ivank.net/taylor-polynomial-clarified.html

I decided to write this article, because all other articles I found on the internet seemed too complicated and did not explain the basic principles. I will avoid formalism, but I am sure formalisms will be clear to you after reading this article. Before you start to read, you must know, what is polynomial. And be able to differentiate and integrate polynomials. Polynomial is a function. In which we put some real value x. And receive an output value at point x. Derivative of a function is a number. For ea...

blog.ivank.net

My new WebGL games

http://blog.ivank.net/my-new-webgl-games.html

My new WebGL games. I was playing with JavaScript and decided to create my own small framework for 2D games, based on WebGL. I have alredy made 2 small games on top of it. This game is based on Graph Theory (subfield of math), specifically on planar graphs. Flies are the vertices and threds between them are edges. You have to arrange the flies with your mouse, so no threads cross each other (crossing threads are red, correct threads are white). Hope you will like it. Old comments (closed because of spam).

blog.ivank.net

Fastest Gaussian Blur (in linear time)

http://blog.ivank.net/fastest-gaussian-blur.html

Fastest Gaussian Blur (in linear time). I needed really fast Gaussian blur for one of my projects. After hours of struggling and browsing the internet, I finally found the best solution. My solution is based on Fast image convolutions. By Wojciech Jarosz. Presented ideas are very simple and I don't know who is the original author. I am going to describe it a little better and add some mathematics. To get motivated, take a glance at the results. I have implemented this code into Photopea. For a general di...

blog.ivank.net

3D Tool – web based 3D model viewer

http://blog.ivank.net/3d-tool-web-based-3d-model-viewer.html

3D Tool – web based 3D model viewer. Let me present you 3D Tool, web-based model viewer with a simple renderer I made during this summer. It has basic functionality and can deal with several basic 3D formats. 3DTool.ivank.net. After loading 3D models, the random color is attached to each part of the model. It can be rendered using Path Tracing as a diffuse material. The light is provided by environment map. My library for accelerated graphics in the browser. My library for parsing and editing 3D meshes.

blog.ivank.net

Floyd-Steinberg dithering in JavaScript

http://blog.ivank.net/floyd-steinberg-dithering-in-javascript.html

Floyd-Steinberg dithering in JavaScript. There are many "smart" algorithms in 2D graphics and Floyd-Steinberg error diffusion is one of them. Attached demo demonstrates a dithering on webcam output (or Bucks Bunny video, when webcam is not available). Open demo in the new window. What is the problem. Compression: instead of 24 bits for pixel we can use only 16, 8, 2 or even 1 bit per pixel. E.g. GIF format uses 8 bits per pixel. Printing an image on some special printers or plotters. What is the solution.

blog.ivank.net

Force-based graph drawing in AS3

http://blog.ivank.net/force-based-graph-drawing-in-as3.html

Force-based graph drawing in AS3. This post will be dedicated to drawing graphs in an aesthetically pleasing way. We will use physics "spring" algorithm, and create real-time simulation. You can check out my My tool for drawing graphs in JavaScript. There is a 3D version of the flsah graph drawer. Graphs and their drawing. What is "nicely" drawn graph. I just implemented the algorithm described in this article on Wikipedia. Set of vertices vertices = new Vector. N, true); for(i=0; i. N, true); while(e 0)...

blog.ivank.net

Voronoi diagram in AS3

http://blog.ivank.net/voronoi-diagram-in-as3.html

Voronoi diagram in AS3. In today's article I will introduce you my own small library for generating Voroni diagram in ActionScript 3. I used Fortune's algorithm, which is probably the fastest algorithm for solving Voronoi diagram. Import net.ivank.voronoi.*; / importing libraries import flash.geom.Point; var i:int; var edges:Vector. Vector for edges var v:Voronoi = new Voronoi(); / this instance will compute the diagram / vector for sites, for which we compute a diagram var vertices:Vector. I found a bug...

blog.ivank.net

Fourier Transform Clarified

http://blog.ivank.net/fourier-transform-clarified.html

This article should allow you to understand Fourier transform much better. It should clarify basic principles and several important details, which are not said in other articles. It is a little informal, but all formalities should be obvious after reading it. Before you start to read, you must know, what is complex number. Trigonometric functions (sine, cosine) and integral. In this article, we will look at things differently. We can draw any curve using a system of wheels. We can draw not only a circle,...

blog.ivank.net

SmallPT in Javascript

http://blog.ivank.net/smallpt-in-javascript.html

I recently found a very interesting project, called SmallPT. It is photorealistic 3D renderer, written in 99 lines. So I decided to rewrite it into JavaScript. SmallPT is a photorealistic renderer. It uses Monte Carlo path tracing to render the scene. It contains 3 materials: diffuse material, mirror and glass, and one primitive: sphere. For more info, read the official Kevin Beason's webpage. Smallpt.html#800,600,4. Official 99-line Javascript version of SmallPT. Interactive version of SmallPT. You get ...

blog.ivank.net

Quadtree visualization in JavaScript

http://blog.ivank.net/quadtree-visualization.html

Quadtree visualization in JavaScript. Today's post will be about Quadtrees. I have coded a little visualization, which may help you understand this data structure. Hot to use it. Click on the first or second bitmap (A or B) to edit it. Quadtrees of bitmaps are drawn on the right side. Then you can rebuild the last bitmap (C) depending on A and B by clicking the right button. A tree for a constatn-colored bitmap is a leaf of this color. Sometimes we have an objects inside a 2D plane and we have to check, ...