Category: Experiment

Search

A Search Bar
This is another DailyUI where I can’t resist coding the thing. The idea was to explore ways to animate a search bar. In this particular scenario, a circular button unrolls to create a search field. The idea was so simple and fun that I had to code it. You’ll see its very simple! Check out the demo.

The main mechanic makes use of the dasharray and dashoffset properties for SVG strokes. In this case, the whole SVG path starts from the end of the text field and comes around the circle. They are not two separate paths! Therefore it makes it easier to animate it using only the two dash properties. The circle is 36px in diameter, which makes a circumference of roughly  π36 = 113.097. This is our dasharray value. The length of the text field is exactly 200px. This is our dashoffset value. Something I had to figure out was that the dashoffset is calculated from the bounding box. not from the length of the path. Therefore, the dashoffset needs to be negative, so that the first dasharray starts at -199 (I had to give it a little room to accommodate the imprecision of my circumference) from the starting point.

Now we need some JavaScript to trigger the animation. The input field is self-containing, which means we can’t place elements inside. Therefore a simple CSS solution wasn’t possible (Prove me wrong! lol). Using .blur() and .focus(), I can remove and add classes that will let me interpolate between the two dasharray and dashoffset states. It’s not more complicated than that.

In the end, I still think my code is a little intense for a search box, but the goal was to create a neat little animation. Use it, implement it, modify it, cite me if you want, and keep coding!

Get triggered…

In this quick experiment, I will test you patience. Everyday, I both enjoy and despise things that are out of place. I despise things that are intentionally counter productive, while I enjoy misplacing and disorganizing groups of things so that they look off by one small detail. Above all, I enjoy doing this repeatedly, to a point where it can get annoying. This website is my gift to you, to help you get annoyed anytime, anywhere, for absolutely no reason. You can even share it with a close friend of yours! You’re welcome.

In order to make this experiment, I used my screen size detector used in my color modulation web page, and applied it both vertically and horizontally in order to optimize an array of buttons that will fit any screens. The number of buttons will vary depending on your screen size or window size.

From now on, I don’t really know how the experiment works, but I wanted it to follow this logic: Button clicked, check every buttons data-color attribute, if all are the same, make a random button switch to another color.

I gave up trying to make it work the way I wanted, and now I wanted this web page to get out. Thats it, deal with it and keep coding.

Color Modulation

Here is a quick experiment for you. In this short web piece, I take advantage of the scrolling capabilities of the browser in order to engage the participation of the visitor. Indeed a colorful experiment, the visitor of this website is confronted with the obnoxious task of scrolling, not once, but in a repetitive manner. Is there anything hidden in one of those stripes? What combination of color will be the most beautiful? the most ugly? What is the purpose of scrolling so endlessly and hopelessly, what is the meaning of life?

Apart from these existential questions, the website is technically simple, I mean, radically simple. At first, the stripe sizes are calculated based on the window width. The stripe is invariable, but the number of stripes varies in relation to the window size. I am using a simple division, combined with a modulo, to ensure that all most of the stripes are all equal. In most cases, the last stripe will be slightly larger. The stripe has a height equal to the window height, but it contains some magic; over 9000 pixels of pure gradient, which lets the visitor modulate his stripe design.

Have some fun, and keep coding.

Branding Exercise.
Part 2

In this part of my branding exercise, I decided to go with an easier interaction. The user cannot always understand the interactions you build for them. You either have to explain it to them (boring) or you can also make the interaction unavoidable (fun). When the interaction becomes an element of surprise, it can become very engaging for the user. He will try and see if other interactions are possible. It becomes a game.
The interaction I made can be found at this demo. It basically works as a simple particle system that shoots dashes at random positions in four random directions, in linear velocity (no acceleration). As a twist, I use the same “iconic” angle as in my
Branding Exercise Part 1.

In this case, its quite a simple interaction. I did add some probability variations; when the mouse is moved, you see an increased number of dashes being generated, this will tell the user that something is happening.
That’s it, and keep coding.

Branding exercise.
Part 1

Too often I find myself giving away to much information. In certain times, it is best to curate the information you want to present. I have, along the years, come up with various ways to present my work through portfolio websites. Each try, I would refine and surpass my abilities to create something truly unique and “out there”. I wanted to show off, which is great … if it works flawlessly. My portfolios were not flawless. They might never be, and this is alright, but I have come to the conclusion that the online portfolio must remain simple. Spectacular, yes, but simple. You must welcome the visitor, rather than attacking him with a lot of different things that he or she does not want to see.

If you head out to my current root portfolio, you will find a simple selection of my works, which works beautifully, as it was curated and designed carefully to guide the visitor into a world, my world and my vision of design.

However, might this be as beautiful as it is, this simple one-pager does not provide a lot of information about me, as a designer, as a person or as a brand (design identity). I do have in my possession a pretty neat branding guidelines, I have some nice colors, some shapes and a typographic hierarchy that helps me identify as a designer. I have them in the real world, they are my business cards (more on this another post).

In order to consolidate my branding online, I conducted this small experiment (demo). It is based on a collab I have done with one of my friends. Simply put, using p5.js, you can draw a simple rectangle, one of my shapes, using your mouse (drag and release). It really gives the visitor the chance to get inside my world (a world of geometry, colors and typography). You may notice that the rectangles are not very straight, they are rotated to my own angle. I used some (quite a lot) of my trigonometry knowledge to redraw the rectangles between two mouse points, while having that “iconic” rotation. Add to that the thick yellow stroke and I have all the ingredients for a nice interactive web branding.

That’s it, and keep coding.

Seamless hover

A while ago, I constructed this type of grid layout, or masonry layout, that would be unified by a special hover effect. I first encountered this idea in the wild on the updated Sagmeister & Walsh website, and it pushed me to try and implement this effect, with my own technique and with my own style. This is the story of the seamless hover effect, a web experiment in which I question the unity of large content collections, and I try to figure out how to stitch content together, using a common hover effect for a collection of things. I do have to point out that this technique is only useful in an environment where a pointer exists, such as on a desktop computer.

The seamless hover effects, in a nutshell, takes the coordinates of your mouse pointer, using a bit of jQuery and maths, and uses those coordinates to pile up every selected titles at the location of the pointer. Which means that all the text content is following your cursor, always, however, you only see the text content when your cursor is located inside its respective grid cell. Demo. You will notice before you move the cursor, that everything is placed in a singular grid cell, and that the text clips onto it. The clipping makes use of the overflow property, which is all very compatible across all browsers. Very good.

The effect only needs two basic elements. A tile and a title element. For the best effect, I deliberately squeezed the grid cells together, and for laziness, I made them all the same size. I am sure the same effect could be used in a padded layout or on a masonry grid. I would make for an even more dynamic layout.

Use it, implement it, modify it, cite me if you want, and keep coding.