Ivan Bogachev

Creative frontend developer



100000 lines

100000 lines

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:

See the Pen 100000 lines gallery by Ivan Bogachev (@sfi0zy) on CodePen.

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:

See the Pen 100002 lines by Ivan Bogachev (@sfi0zy) on CodePen.

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.

Animated tag cloud

Animated tag cloud

Fibonacci sphere + rotation matrix + some CSS magic = tags cloud. You don’t need tons of scripts to create things like that.

See the Pen Animated tag cloud by Ivan Bogachev (@sfi0zy) on CodePen.

Maze

Maze

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.

See the Pen Maze (yet another three.js example) by Ivan Bogachev (@sfi0zy) on CodePen.

Isolation

Isolation

My first photo book has been printed. It’s a story about lockdown, about social isolation, loneliness and emptiness.

Introduction to SVG Animation

Introduction to SVG Animation

I’ve returned. Kind of. Maybe. Just published a new article on programming - an introduction to SVG animation. It’s been a while since I wrote my last article. I compressed my experience from a few years into one lecture. It’s a little more abstract than my last articles on math, more about tools, approaches, misconceptions, standards and reality of modern web development, but I believe it’ll be helpful for my students. They have lots of questions about SVG and this article supposed to cover most of them.

Conceptual Minimalism 2022

Conceptual Minimalism 2022

My photo “Cat” is in the top 2% best photos in the Conceptual Minimalism 2022 photo contest by 35AWARDS.

Random SVG Lines

Random SVG Lines

Yet another example. This script generates website backgrounds with various lines. Simple, but looks cool.

See the Pen Random SVG Lines by Ivan Bogachev (@sfi0zy) on CodePen.

The most hearted of 2021

The most hearted of 2021

My horizontal scroll gallery is in the list of the 100 most hearted pens on CodePen in 2021!

Actually, this is my first program with a 1000 likes from other programmers. This gallery is not that complex, but it’s some kind of achievement anyway. It’s worth it to mention this fact in my small blog.

3D math + 2D canvas

3D math + 2D canvas

I’ve published a new example on CodePen today. It’s a combination of 3D math with vectors, matrices, quaternions, with a simple 2D canvas. In this example, I show how to combine all these things to create a projection of the 3D world on the screen. This example is quite simple and quite hard at the same time. I haven’t published anything similar before and I hope it’ll help my students with their projects.

See the Pen 3D math + 2D canvas by Ivan Bogachev (@sfi0zy) on CodePen.

My workspace

My workspace

Winter is my time for major upgrades. This week I installed elementary OS 6, installed tons of programs, re-created my settings for terminal, my vim configuration for frontend development, and saved every action in this repository. These bash scripts will work as a setup wizard next time. Feel free to fork this repository and create your own workspace setups.