Creative frontend developer
Yet another demo. This time it’s a radar chart with a custom fill gradient. There is nothing special here, it’s just some old-school pixel manipulations on 2D canvas, but the example itself can be used by my students at some point. It’ll wait for them here.
The Pen by Ivan Bogachev (@sfi0zy).
Some time has passed since the CSS Painting API was born, but it’s still not supported by all major browsers. Meanwhile, we can use the standard canvas to do everything. Actually we were able to do that for many years, but for some reason I didn’t post any good examples of that trick. Now it’s here.
The Pen by Ivan Bogachev (@sfi0zy).
Yet another WebGL example is here! Three planes + some noise = beautiful waves for the background effects.
The Pen by Ivan Bogachev (@sfi0zy).
Ok. It’s time to refresh my CodePen profile a bit. In the last years I published mostly educational examples for my students, but it feels like they can’t really work as an example of my own skills. A lot of people can do the same tricks nowadays. They looked cool five years ago, but not anymore. I needed something that will look impressive enough, so I created a new demo, “Night Drive”. It’ll show what I can do with Three.js in one day.
The Pen by Ivan Bogachev (@sfi0zy).
It’s been a while, isn’t it? I haven’t posted anything for a few months now. I’m working on a new photography-related project. It’s a lot of work. Meanwhile, I decided to share the darktable styles that I use for the street photography. Why not? My main style is the Street Monochrome. This is a high contrast black and white style, it works well in almost every situation that I encounter on the street, and now it’s available as a .dtstyle file and as a LUT.
For a long time, I was thinking about a tool that will provide a set of CSS custom properties with the mouse position, scroll position, random values etc. And since I didn’t find anything that I would like, I decided to write the tool myself. I called it “Medium” because it connects CSS and JS worlds. The library itself is quite simple, but I used it for a few demos on CodePen and it really speeds things up. Now it’s available on GitHub and as NPM package.
Just published a new animated gallery on CodePen. As always, the ingredients are quite simple: two canvases, old trusty line-drawing algorithm and some junior-level image data calculations. But the result looks interesting:
The Pen by Ivan Bogachev (@sfi0zy).
It’s not for mobile devices, obviously. This amount of draw calls is kind of too much for them. It works fine on my smartphone, but I think it’ll be a bad practice to run such thing for mobile devices in production.
And here is another demo:
The Pen by Ivan Bogachev (@sfi0zy).
It was the first step in the development of that gallery. It’s more simple, with only one canvas, but it may work as a base for future experiments.
Fibonacci sphere + rotation matrix + some CSS magic = tags cloud. You don’t need tons of scripts to create things like that.
The Pen by Ivan Bogachev (@sfi0zy).
Yet another Three.js example! This time it’s a simple maze with one light and shadows. It’s easy to do, and it looks not bad at all.
The Pen by Ivan Bogachev (@sfi0zy).
