Your browser either does not support JavaScript or it is disabled, consider using a more modern browser or enable JavaScript to enjoy my website! :D frankpettersson.se

FLOWING SQUARES

square ant

square ant

symmetrical ant

symmetrical ant

experimental ant

experimental ant

pixel grid

pixel grid

spinning boxes

spinning boxes

rocking triangles

rocking triangles

triangle paths

triangle paths

linear expansion

linear expansion

better ant

better ant

flowing squares

flowing squares

hollow boxes

hollow boxes

point illusion

point illusion

black donut

black donut

bubble bg dark

bubble bg dark

bubble bg

bubble bg

black hole

black hole

colours

colours

3d shapes bg

3d shapes bg

3d shapes

3d shapes

shaky triangles

shaky triangles

polygon

polygon

rectangle

rectangle

idle

idle

units

units

hide/show
GAMES
idleopen idle in new tab

idle - 2019-02-25
My first "real" game. You click on a button to get gold and then with that gold purchase units to collect even more gold for you.

unitsopen units in new tab

units - 2019-04-02
Another attempt at a game. I wanted to try making a game where the units create eachother, so I made this where that is so and you can name/create your own units too.

hide/show
GRAPHICS
square antopen square ant in new tab

square ant - 2019-05-21
Square ant, the ant draws a square around itself.

symmetrical antopen symmetrical ant in new tab

symmetrical ant - 2019-05-21
This ant draws its "home" symmectrically.

experimental antopen experimental ant in new tab

experimental ant - 2019-05-21
This one takes quite a while( ~ 5 minutes )... But when it gets going it looks purty nice.

pixel gridopen pixel grid in new tab

pixel grid - 2019-05-21
YES

spinning boxesopen spinning boxes in new tab

spinning boxes - 2019-04-29

rocking trianglesopen rocking triangles in new tab

rocking triangles - 2019-04-28

triangle pathsopen triangle paths in new tab

triangle paths - 2019-04-28

linear expansionopen linear expansion in new tab

linear expansion - 2019-04-19
Now this is epic.

better antopen better ant in new tab

better ant - 2019-04-11
Browsing the web i found this demonstration of Langtons Ant and noticed the much better performance, so being inspired to improve my attempt I did so. And also changed the color.

flowing squaresopen flowing squares in new tab

flowing squares - 2019-04-12
This one uses various techniques that i've learned such as border detection, Class creation, moving a defined shape etc. creating this rug of squares, bouncing from wall to wall. Like those DVD screensavers.

hollow boxesopen hollow boxes in new tab

hollow boxes - 2019-04-09
For this one I went back to the 3D shape/webGL library three.js and played around with stacking boxes further away but with decreasing size, using a depth material for the mesh, and blabla. Looks nice.

point illusionopen point illusion in new tab

point illusion - 2019-03-21
Same as last, difference being is the circle motioned drawing speed. Making for a very slowly adding of blackness with expanding patterns that you barely notice at first.

black donutopen black donut in new tab

black donut - 2019-03-23
Really like this one, not much to say but, it's cool 😎.

bubble bg darkopen bubble bg dark in new tab

bubble bg dark - 2019-03-22

bubble bgopen bubble bg in new tab

bubble bg - 2019-03-21

black holeopen black hole in new tab

black hole - 2019-03-20
This one is one of my favourites, just because it feels very clean and reminds me of being little and seeing similar shapes and animations which would get me stuck staring at them for just a bit too long.

coloursopen colours in new tab

colours - 2019-03-20
Having a bit more experience I decided to move away from using libraries to learn more about the basics of JavaScript. Which turned out to be a good idea making me discover a technique for creating cool patterns. Such as this one.

3d shapes bgopen 3d shapes bg in new tab

3d shapes bg - 2019-03-07
Edited the last one a bit so that it could be used as a background, the moving is actually the camera rotating along its axes.

3d shapesopen 3d shapes in new tab

3d shapes - 2019-03-06
Found a library: three.js making it easy to create 3D shapes and animations. So, i defined a cube, plopped a couple of rotating shapes with random colors and added camera controls.

shaky trianglesopen shaky triangles in new tab

shaky triangles - 2019-02-28
Went a bit further with the polygon creation. In this one the points defining the shape are moving around randomly(a bit jittery, but funny).

polygonopen polygon in new tab

polygon - 2019-02-28
Created a polygon, bit harded since you have to defined the points of the shape, also made it spin 😌.

rectangleopen rectangle in new tab

rectangle - 2019-02-26
First canvas drawing in JavaScript i managed to create, using a library: PixiJS, that I used for the next 3 aswell.

SETTINGS

SETTING CONFIGURATION CURRENT
UI COLOR
DARK MODE
LANDING PAGE
DEFAULT PROJECT

SAVE

RESET