Archive for July, 2016

Trees!

Posted on: July 25th, 2016 by Peter Balazs No Comments

Let’s talk about trees! …and plants. More precisely: mathematically generated trees! …and plants. Why? This is something a computer would be good at.
We’re going to create things with recursive definition. Now recursive definition of course means something that is defined in terms of itself. In our case it’ll work like this:
We’ll define a branch that has two other branches attached. Since those two attached branches are also defined as branches they also have two branches attached. The two new branches are defined as branches so they also have… You get the idea.

Now in this case this is going to produce an infinite loop, so we’ll need to establish some rules. Namely if a branch reaches a certain number of pixels in length, we’ll stop the loop. Also the branches will get shorter and thinner each iteration.

How are we going to do this? We’re not going to use jQuery for this project. We’ll use P5.js, simply because it works really well with drawing and animation.

Here’s our beautiful tree (by the way, you’ll get a different one every time you refresh the page):

The branches have a random angle between 44.5 – 45.5 degrees, so it looks a little less like a fractal tree. I also added some color and buds for some more treeness 🙂
Why those angles? I tested it with a few variations, these two numbers produced the effect I was looking for.

Hope you liked this little experiment, next time we’ll look at the L-System, and how it can help to grow some digital plants.

Weather

Posted on: July 11th, 2016 by Peter Balazs No Comments

Yes, I know what you’re going to say just after reading the title… But Peter do we really need another weather app?
Just bear with me, this is not what you think.

As large screens are getting cheaper, more and more small shops invest to show their products and / or discounts on screens instead of flyers, I think it’s relevant to design pages for such screens only.
Where does a weather page fit in this scenario? Well think of a hotel lobby with a screen showing information for guests. Welcome screen, news, restaurant specials, and… weather.

weather

How does it work? I used jSon data from OpenWeatherMap. It’s a really good world wide weather data provider, free for experimenting purposes (if you’re really into weather or want to experiment with jSon data, I highly recommend checking it out).
Once the data is extracted, every info is put in place with jQuery. Even the background images. The place to look for on the OpenWeatherMap server is hard coded in the js file, but the text is read from the jSon data. The time shows local time (your computer’s time). Since the idea is that it would be shown on a dedicated screen in a dedicated place, I didn’t bother with geo location.
The page is designed for 1080p screens – non responsive -, so I added a screen size check just for this post. If you can’t view the page zoom out your browser and refresh.

Check out the working weather page.

Avatar Part 2

Posted on: July 4th, 2016 by Peter Balazs No Comments

How could we improve on the randomly generated avatar from last week? Well actually there probably is a bunch of ways, but this week I’ll look at just one (don’t worry, no avatars next week). Which is… making it half random of course 🙂
But seriously… The last avatar had totally random patterns, which didn’t generate cool patterns most of the time. Most of them looked like a very confused snake game. This time we’ll make only half of the avatar random, and mirror the pattern we get.
Here’s the demo:

The main avatar area is divided into two parts. An upper and a lower part. The upper part is filled with randomly filled divs, which are saved in an array as they are generated. The divs are floated left. When this is done the array gets reversed, the divs are placed in the lower part floated right. In the end the main avatar area is rotated 90 degrees. And that’s it. We have a much cooler looking avatar.