Welcome to a small series of short posts where I thought of sharing how my brain works when it tries to explain to me some of the GLSL built-in functions I use when I make pixel shaders.

Shaders can be a rather complex and intimidating computer program to explore when one's new to it, but maybe it's all about perspective and how one can interpret the program pieces to make them work.

Maybe so far everything you've read or watched hasn't triggered your aha moment. Maybe your thoughts haven't been able to put the puzzle pieces together yet —— don't give up! Maybe these short posts might share a little light in the tunnel.

Understanding what exactly some of the GLSL standard functions do, has helped me in my quest to understand and write pixel shaders. Perhaps my way of understanding can help others too.

By the way, I'm starting a newsletter. If you prefer to skip this post, go to the newsletter section directly.

Step function

To get started, let's travel through the step() function, which takes two parameters to compare:

  step(edge, x)  

The links in the references below give us a description for this GLSL function:
0.0 is returned if x < edge, and 1.0 is returned otherwise.

But what does that mean? In my head, seeing a mathematical graph wasn't enough. My aha moment arrived, once I visualized the function as a tall wall separating two sides with solid colors.

The two colors are black and white. Black when getting 0.0, and white when getting 1.0. In a pixel shader or better known as a fragment shader, the color outputted in your screen comes from a vector with four values — vec4().

That vec4() is the returned value of gl_FragColor which takes the first three values as an RGB color model and the last value as an alpha value for transparency. By focusing on a vec3() inside that vec4() containing three values, we can guess the color appearing in the screen — vec3(R, G, B):

• 1 value for R (red channel)
• 1 value for G (green channel)
• 1 value for B (blue channel)

For this exemplification, if step() results in 0.0, we can assign that value to all of those three values from the RGB color model as a vec3(0.0, 0.0, 0.0), which in GLSL it can also be declared as a vec3(0.0).

If we dig deep into the RGB color model, colors can be expressed in different ways. One is as a percentage, where the black color is represented with three values (0%, 0%, 0%), and another one is the regular 8-bit (0, 0, 0).

The white color in the 8-bit expression is (255, 255, 255), while as a percentage (going from 0%-100%) is (100%, 100%, 100%), which in GLSL translates as a vec3() with three floating-point numbers as values — vec3(1.0, 1.0, 1.0) = vec3(1.0).

No matter if x is a linear coordinate or a distance between two or more points in a plane, build an imaginary wall splitting two colors. As long as I visualize such a wall growing from the edge whenever I use this function, I can make a clear picture of what that code will draw.

References:

• Book of Shaders
• Khronos Wiki

Newsletter

I'm starting a tiny newsletter where I intend to share the rest of this series of posts with sketches.

I'll probably still post them eventually here on my blog, but if you prefer to receive them in your mailbox, subscribe!

It might be possible I'll also share other news about personal projects, art + tech topics, and whatnot.

You can expect no schedule and no spam. I imagine the most frequently I could write would be weekly or biweekly. Maybe once a month or every couple of months. It all depends on the flow and feel + life. ✌🏽

A journey of imperfections, beautiful bugs, and happy accidents... in generative art.

Back in November 2022, I gave a short 10-min Spanish talk at a Meetup organized by Bright Moments in Ciudad de México.

I felt the content I shared in such a talk was valuable and could inspire more people getting started with generative art, hence this post.

Since I didn't want to only speak about my opinion on the matter, I asked a few friends in the field to share with me some of their work and experiences — big thanks to each one of you for sharing, letting me share, and for delivering in such a tight deadline. 😬

Happy reading!

Art with imperfections

Generative art is art that involves the automation of a system to create art. A place where chance and spontaneity meet.

In digital art, it's a collaboration between a human and a machine, where the human sets the parameters and restrictions of a system, in which the machine has some freedom to make decisions that will influence the output.

Because of that lack of control on the human part, I like to think of generative art as art with imperfections.

I believe that generative art written with algorithms sometimes could be referred to as beautiful bugs, when an error in the system could produce an unintended pleasant output.

Computer errors that, in the software field would not be desired and rejected, are welcomed in generative art, as long as they don't block the system's output.

Fearing less writing an algorithm that could be prone to errors, one has more freedom for writing the unknown. Typing equations that one has no idea what mathematical meaning they might have, it's not out of the question.

In generative art, as long as the eyes meet something satisfying in a system's output, one could dare to face the unknown, occasionally or always, and call it a happy accident.

Let's see some examples: ✨

• Nicole Vella
• Alex Torres
• Dominique Schmitz
• Daniel Velasquez
• Tim Pietrusky
• Sam Wray

I was not surprised @shiffman was mentioned more than once. Big shout-out to the Coding Train for making creative coding accessible to us regarding one's background and experience.

Nicole Vella

@nicolevellaart is a Canadian artist, developer, and teacher living in Toronto.

This piece was generated in Processing (JAVA). I drew/coded simple shapes with single-stroke lines and then blended the shapes together, with the intention of plotting it onto A1 paper. It was supposed to consist of sharp and precise lines, and during the test print, it was printing as expected. I then went back to Processing to change the shapes and while doing so, I updated the firmware on my plotter.

When I went to plot the updated SVGs, the plotter began to move erratically and was stuttering. I realized that the SVG code I was generating with Processing was not fully compatible with the updated firmware on my plotter, and there must have been some bug I needed to work out.

I was, however, extremely pleased with the texture of the glitched-out lines being plotted. Instead of trying to fix my SVG, I leaned into it and began generating more shapes from Processing using the same underlying code. I plotted these shapes on top of one another; giving a layered feel to the print as well as adding depth.

After 9 layers of different line patterns plotted in neon ink, I felt the piece was finished.

Alex Torres

@spacepolyg0n is a Mexican front-end developer and generative artist based in Hamburg.

I was following a tutorial by Daniel Shiffman on angles and polar coordinates. In toolkits like Processing or Openframeworks there are functions called 'push' and 'pop' that allow you to change your coordinate systems temporarily. For example:

  xyz // global coordinates
  push() 
      xyz // temporal coordinates
      /* Some code */ 
  pop()
  xyz // global coordinates

My mistake was not adding a 'pop()' in my code, which caused my coordinates to be unpredictable.

For a few seconds, the patterns that were drawn reminded me of outlines of stars or planets, thus I exported my favorite frames as images [Exhibit A].

In the video [Exhibit B], you can see how for a few seconds there are some interesting lines, and after that, it's a lot of chaos.

Dominique Schmitz

@domizai_ is a Swiss graphic designer and generative artist living in Zurich.

This is a WebGL shader running on observablehq. The accident are the occasional flickers and flares. The effect is subtle. But I found it quite interesting, that I kept it. My guess is that it has something to do with texture wrapping. But I'm really not sure why this is happening. I haven't even tried to fix it to this day.

I haven't coded anything for quite a while. I ended up watching a video of Daniel Shiffman doing this water ripple effect. It amazed me considerably that it motivated me to reproduce it. Instead of using Processing, I wanted to recreate it as a shader using OpenFrameworks.

The accident is the trail effect. At the time, I hadn't done much with shaders, everything was fairly new to me. By mistake, I added some varying values to the alpha channels that behaved in an unexpected way. Quite unspectacular actually, but an accident nonetheless.

Daniel Velasquez

@Anemolito is a Venezuelan creative developer based in Miami.

This render reminded me a lot of what you told me about happy accidents because it had many highs and lows, and it reminded me to be patient with the process. To begin with, it didn't have much direction. I started moving some spheres around, and this first render [Exhibit A] came out, which I'm not a big fan of.

Then, frustrated with the result, I tried to continue exploring, and I came to a cube of spheres that didn't encourage me much and discouraged me because I didn't know what to do and nothing I liked was coming out.

Lastly, in my frustration, I started to rotate the camera pointlessly while I was thinking of abandoning this render and doing something else, but suddenly I found this moving image [Exhibit B] that I totally adore.

I was very surprised, the one thing that totally frustrated me was a few accidental camera moves away from being one of my favorites.

Tim Pietrusky

@NERDDISCO is a German digital artist, open-source developer, and mentor living in Hesse.

My goal for Impossible Box was to combine audio data (FFT) with my GLSL shader that was using three boxes (sdBox). While trying to get the audio data into the boxes, I used FFT as a value in each parameter of the box (e.g. width, height, and length). And it turned out that if you use a negative value for the length of the box, the box will disappear.

I combined this technique with a certain threshold where only high frequencies will make the box disappear for the specific pixel that is generated (as we are in the shader world, the code runs for each pixel).

My happy accident here was combining audio data with the parameters of a function that draws a 3D box in GLSL. This created a nice effect — I was surprised that parts of the box vanish when the value is negative.

Sam Wray

@_2xAA is an English creative developer, digital artist, musician, and visual artist living in London.

In this visual, my happy accident was that I could never make this effect again. I had no idea what combinations of things I did to ever get this result. I've gotten slightly close, but it hasn't been exact — the text having that precise amount of displacement with the rest of the color.

When I work with visuals, almost everything I do is improvised. I rarely prepare anything before going to a gig, unless I'm specifically asked by the artist. Otherwise, I'm always improvising, and very rarely I have anything prepared.

The more I do, the more I know what works and what doesn't, and less happy accidents might arise, but this was 2018, and anyways, improvisation means not only doing what I know, but also trying new unknown parameters.

About a week ago I started a journey into a personal project that has been on my mind for about three years now, but procrastinated it often, until I didn't anymore.

I want to mix my love for street art and GLSL shaders in a way, and see where such explorations would go.

I think I'll call it and use the hashtag #streetshaders, as the idea is to make random projections of my shader artworks around the city streets.

Maybe there'll be only a few appearances and street take overs... maybe there'll be more than a few? Maybe it'll be material for something new. 🌱

Follow the hashtag:

• Instagram — #streetshaders
• Twitter — #streetshaders

I deployed my first twitter bot two days ago, and I thought of sharing my learnings in case someone else is also curious about it and the reasons behind why I did it.

If you prefer to skip my motives for making a twitter bot, go to the resources directly.

Why make a twitter bot?

Last year, in April 2020, I created a challenge for myself to learn GLSL shaders. I came up with a hashtag to use while I shared my learnings and invited my twitter peeps to join.

At the end of the summer, a few peers and new people joined the challenge, and I thought it'll be cool to gather all of those creations people were sharing somewhere. In addition to keeping track of how many people were joining the challenge.

If new people continue joining the challenge in the future, it'll be nice to have a place to talk to them. To kind of build a small community around it [yep, I'm a community-oriented person].

Making a twitter bot to retweet the tweets using the #anydayshaders hashtag on twitter came to my mind, as at the same time, I was always intrigued about how one could program one of those bots.

Time to kill two birds with one stone [no birds were harmed while writing this blog post].

Maybe others like me want to see what individuals are doing with shaders to be inspired and might want to follow such a twitter account instead of clicking on the hashtag.

How to make a twitter bot?

Luckily, we're living in an era where the Internet has tons of resources whenever we want to learn something new.

To make a twitter bot, I didn't ask any of my developer friends for advice, but instead, I googled it. To be precise I deved it.

No need to browse deved in the dictionary, because I made up this word as I was writing this post. When I said deved I meant I searched in dev.to.

I found several amazing resources to write a twitter bot that retweets tweets from a hashtag with JavaScript and deploy it for free with a Heroku server.

I'll break the process into three steps.

Make a twitter bot — step #1

First thing to do before you even start writing your bot is to apply for a developer twitter account and create a project app.

It might take a day or more before your project is approved, and you can move on with getting the access keys you'll need to use the twitter API. A post by Seema Saharan was helpful during this step.

Make a twitter bot — step #2

Choose the programming language in which you want to write your twitter bot. I went for JavaScript, but Phyton seems popular as well.

Please be kind and remember that if you also decide to create a twitter bot, as Stan Lee wrote for one of his characters, “With great power comes great responsibility.”

I'm no spiderman fan whatsoever and stole that quote from one of the resources I found on making a Twitter bot by Ben Greenberg.

What I liked the most from this resource was learning to create environment variables. Such variables will store safely the access keys we got from our developer twitter account. And avoid having them publicly in a JavaScript file.

export consumer_key=YOUR KEY HERE
export consumer_secret=YOUR SECRET KEY HERE
export access_token=YOUR TOKEN HERE
export access_token_secret=YOUR ACCESS TOKEN SECRET HERE

The second useful resource I found during this step was by Sumedh Patkar. The main interesting piece of advice from this post was learning to avoid duplication of retweets with a little helper function and some extra JavaScript code.

// Utility function - Gives unique elements from an array
function uniqueTweets(value, index, self) {
  return self.indexOf(value) === index;
}

/* More JS */

// Get unique entries
tweetIDList = tweetIDList.filter(uniqueTweets);

Make a twitter bot — step #3

Last step is deploying our twitter bot and let it run by itself, working like a charm.

Both of the previous resources show how to deploy the bot in Heroku with a free account. I followed their advice and can recommend the same.

Make an account in Heroku and create an app where you'll have your bot. The post by Sumedh Patkar goes more into detail about the whole setup.

You might need to write some Heroku commands in your terminal, so make sure you install the Heroku CLI in your system.

I have macOS and brew, so I made the install with this terminal command:

brew tap heroku/brew && brew install heroku

If you have a different environment, read about your setup in the Heroku CLI docs.

Once your bot is successfully deployed and working, you can view it in your Heroku dashboard. Remember that your web dyno should be OFF, and your worker dyno should be ON.

One thing I found useful after I deployed my bot was cloning the Heroku repo. I had previously made a personal GitHub repo for it when I created the bot.

With the Heroku repo on my computer, I made a small update in my JavaScript file and kept better track of the last deployed changes.

Wrapping up

That's it! My twitter bot is alive. You can view it at @anydayshaders_

If you thought I might have skipped some steps to create a Twitter bot, I didn't. I purposely wrote the steps that way and linked all the resources I used, highlighting what I thought most important to know.

I felt there's no need for me to copy and paste again what those resources I'm pointing to are already giving us. I preferred to guide you through it, revisit what I learned, and hope that if you're also curious to experiment in making a twitter bot, you'll use that power with responsibility. ✌🏽

References:

• Developer Twitter Account
• Twitter API — Projects Docs
• Making a Twitter bot with Python
• How I Created Two Twitter Bots
• How to create a Twitter Bot using Node.js and Heroku
• Heroku CLI Docs
• Git Cloning Existing Heroku Applications

Last week Matthias Ott tagged some others and me on a series of “My Typical Day” posts started by Colin Devroe.

I enjoyed the ones I read and learning about people's routines and non-routines working in this tech bubble I'm part of as well.

You can find that first tweet here.

I thought it was lovely to read people's posts in their personal blogs [yeih, for indie blogs].

Inspired, I'll share bits of my typical day.

The freelance life

First of all, these days, my typical day in a working week is rarely the same.

Unless I'm booked for a period somewhere with a team, I work on my own.

When I work with a team, I tend to have a routine given that I must work with my colleagues, have dailies, participate in meetings, etc. If so, my working schedule is roughly in between 9:00 — 10:00 to 17:00 — 18:00. And my morning and evening activities outside work are prone to be similar too.

Nevertheless, since I started freelancing, I seldom work more than six months in a year with a team.

Recently, I've worked mostly by myself, so I thought of sharing more details about this period.

Schedule on a working week

My typical day varies from day to day. I don't have a steady routine, but I have some habits.

• 9:00 — 11:00. Rise and shine. I wake up at some point in this time slot. I ain't nothing of an early bird. Kudos to everyone who is. I wished I could start my day earlier sometimes, but it's a struggle as I'm a night owl. First habit of the day — breakfast. Porridge with greek yogurt, a dash of milk, blueberries [give me antioxidants], apple, and another fruit. Oh, don't forget a latte macchiato with foamy oat milk. Second habit of the day — a ten-minute stretch.

The following daily time slots begin to blur because here is where the routine breaks. Instead, I have activity slots, similar to Sara Soueidan's activity blocks.

• A short walk with my neighbor and her dog after lunch.
• A twenty-minute light yoga stretching. It's a habit since last summer.
• Browse for design trends and digital art for inspiration.
• Do parts of an online course for some hours.
• Drink a homemade matcha latte with foamy oat milk. Maybe a cookie or two.
• Meditation walk for one or two hours in the park or the city. Walk between five to eight k.m. while listening to a podcast, music, or my thoughts. Another habit.
• Read news or posts about creative/front-end development, design, and digital art.
• Remote meeting with a client to discuss project development.
• Take half an hour or an hour for a lunch break alone or with my partner.
• Work and experiment on my digital art [shaders, lately] for some hours.
• Work and experiment on my creative/front-end learnings and design with a personal creative project for some hours.
• Work on a client project for some hours.

I mix and match those activities during my day before dinner time. Don't do all of them every day. But try to do yoga stretching and meditation walks almost daily. I might do one activity twice during my day, like working on a client project or digital art, but with a break after every two hours.

My mood and mental health influence my daily schedule as well. If I'm having a bad day or not feeling productive, I most likely won't do much of the 'working part' on the previous list of activities. Instead, I'd probably do other leisure activities.

If I'm having a good day but feel like having a Sunday on a Tuesday, I also don't work at all, as long as I don't have any client projects or deadlines and alternatively focus on other hobbies or personal affairs.

• 19:00 — 21:00. Dinner time at some point. Some days either my partner or I cook. Some days we order take out [we're currently addicted to salad bowls].

Next time slots are also a blur and a case of mix and match.

• Leisure time with my partner. Watch some TV — News, Netflix, YouTube. Whatever strikes the mood. Maybe play some Nintendo Switch.
• Online call with a friend or family [life of an expat].
• Play with digital art [yep, probably shaders].
• Read a book for at least thirty minutes.
• Take a bubble and salts bath [my mind and back are happy] while listening to a podcast or watching Netflix.
• Take a midnight walk with my partner. Maximum for an hour. We started doing this activity after the pandemic hit. We're both night owls, and I love to wander in the city when everybody is sleeping or cozy at home. I feel like a vampire going out in the darkness and finding almost no one in the streets at that time, especially during the winter.

Last activity of the day. ✨

• 24:00 — 02:00. Sleep tight. Try to read a bit offline or online before zoning out.

Closing notes

I probably didn't mention some activity slots that might come up some days. But I wanted to highlight how unpredictable my working days can be, as I don't think of myself as a routine person.

Routines for a long time bring me down. Uncertainty, spontaneity, and wonder light me up.

Thanks for giving me a reason to write my first blog post of this month, @m_ott.

If you made it until here, haven't written about your typical day, and feel like sharing, I'll be happy to read it! Tag me on twitter if you do.

Before I start speaking about new dreams, I want to touch on how far my journey has gotten in one year since I officially deviated career paths [only a bit] again.

2020 was a weird year. Many times I felt I was living inside one of those sci-fi films set in the future. The one thing I never imagined I'll get to witness.

When 2020 started, I've had the worst two years of my life and was looking forward to that year to return feeling normal after a successful fight. I guess life had different plans, and I have to wait a bit longer.

I am hopeful for this new year of 2021 that the world around all of us, even if slowly, heals.

On the bright side, despite such events, there were tons of positive happenings around my life. Let's talk about the career-wise ones.

Looking back at what I had hope beginning of 2020 when I rebranded myself and relaunched this site, I had these dreams:

I look forward to working in more artistic endeavors in the future. Whether it is making cool websites or creating digital visuals and installations for art + tech events, galleries, museums, musicians, fashion events, festivals, film industry, who knows? The sky is the limit.

I'm happy to share that many of those dreams came to be true! :)

Artistically speaking, the year 2020 brought me a lot of light:

• CODAME invited me to join their artist collective in the summer. I started selling a couple of my digital artworks in their new shop and exhibited a few pieces in some of their virtual galleries.
  
  

• My video and visual art were exhibited in the Global Gallery by Ars Electronica + .ART over the summer. I also exhibited artworks virtually in a few other places or events, from which if some are still online, I listed them on my about page.
  
  

• Two new musicians contacted me and asked me to do visual artworks for their music. None of the deals settled, but I'd say it's a step forward if one of them found me on their own after browsing my instagram work.
  
  

• I made an on and off collaboration throughout the summer with a local neo-grunge band, LIOTTA SEOUL, and created a series of audio-reactive shader visuals to some of their songs.
  
  

• My shader artwork was showcased in NYC as part of an installation exhibit organized by Lightbox and Creative Code Art in the autumn. Sadly, I have no decent footage from it, so I cannot share this one.
  
  

• I made a performance at GitHub Universe in the winter and collaborated with @_2xAA by creating a few audio-reactive shaders for his live chiptune music.
  
  

• I started an on-going collaboration with @iamelizasj in late August to create digital art while exploring shader code. Our chemistry and flow have worked out amazingly that our collab evolved organically, and we launched the premier of our twitch channel during CODAME's JOYNT festival in the winter. A replay of our first live stream it's on our brand new youtube channel.
  
  

• I met incredible people from the creative coding community, either by reaching out to them or collaborating with them. Everyone I have stumbled upon until now it's been very supportive. Thank you to each one of you.
  
  

• I achieved making 100 shader artworks while learning GLSL shaders with my #anydayshaders challenge.

When it comes to my other two careers, creative development and design, I'm also glad for the achievements:

• I won an award for mobile excellence and mobile site of the week at awwwards for this website, among other honor mentions and kudos listed on my about page.
  
  

• I organized and gave the first Vue-Vixens workshop to learn Vue.js in my local tech community with my friend and co-orga @burgmary, right before the pandemic started.
  
  

• I got my first 3D WebGL/installation freelance gig with Sinnerschrader during the summer. Thank you so much to @kotzendekrabbe and @hblank for thinking of me. <3
  
  

• GitHub contacted me in the autumn, and I made a short tutorial on learning p5.js and generative art at their GitHub Universe 2020. Gosh, I was nervous as hell, so I speak at the speed of light, and I'm looking very serious in the video. 😂

Now speaking about dreams for 2021, I mostly want to keep growing as a digital artist exploring the new media, which I feel combines some of my creative developer and designer skills, among my passion for many other spectrums of the art scene.

I still want to do much of what I desired last year, but going bigger. Go big or go home, right?

I hope to create more visuals for musicians. Maybe even collaborate in the making of a music video.

I desire to make more installation work. Maybe some of it with interactivity, or my new machine learning knowledge [it's not here yet, but I plan to learn more of it this year].

I want to dive a bit into VR and explore that part of 3D in the art + tech bridge.

I'm curious to make music with code. Not because I want to pursue being a musician, but I realized it's another way I can enhance my video or visual art without asking or searching for sounds elsewhere.

Definitively, I want to continue collaborating with other talented artists by learning, exploring, and creating together.

I wish to make more visual, video, and sound art. Whether it's still for art + tech events, festivals and galleries. But also would like to work with museums, fashion events, the film industry, and the list goes on.

For most of my life, my motto has been to live for my dreams and die trying. Like Alexander Supertramp from Into the Wild said:
“If you want something in life, just reach out and grab it.” ✌🏽

Back in April I started a journey to explore creating my GLSL shaders and I wrote about it here.

I created a little challenge for myself to keep me motivated, and with it, a hashtag called #anydayshaders.

In the past, I've tried other design and coding challenges and was never able to finish. At some point, I'd lose motivation because it sort of caused me stress.

By calling my challenge anydayshaders I figure I could create as many shaders as I wanted without a specific number as a goal. Also, without a specific schedule, that personally gives me stress before I even start, if I were told I need to do something daily or once a week in my free time.

Maybe it's only me, but it's interesting how sometimes each of us is wired. I say this because, in the end, I ended up having a schedule for my shader creations, but it was never the same. Some months I created once a week or every two weeks. Others twice a week. At the end of the year, I managed to even create two shaders a day for some weeks.

As you see, the way I work for my personal projects is that as long as I don't feel any pressure, I produce way more as I am relaxed and sincerely enjoying the ride.

I am happy to announce that I even managed to create 100 shaders before the end of 2020! 🥳 Which for me, it's huge news, as I'd never felt accomplished with a public design or coding challenge before.

You can view all of my shader creations on my instagram account.

I'm sharing the code of a few shaders I produce on CodePen.

You can also see my shader creations by following the hashtag on these two social networks:

• Instagram — #anydayshaders
• Twitter — #anydayshaders

By browsing the hashtag on such social networks you'll also find the work from other online peeps who shared my excitement into practicing shaders.

Whether you're a shader newbie or pro, feel free to join us by using #anydayshaders with your creations and contribute to motivating each other.

My shader journey is not over yet, only for this year. Stay tuned next year, as I continue growing my shader skills with #anydayshaders.

References:

• The Book of Shaders

Last year we organized a meetup in the city where I reside about generative art.

I started such a meetup, CodePen Hamburg, back in 2016. Over the years, designer and developers friends I met in the local tech community have helped co-organize it.

I've been exploring generative art for approximately a year, and I'm currently in love with this craft.

I thought of sharing the small research I made back then, in addition to how I got started with generative art, in case someone wants to learn more regarding the topic or is new to it.

Before I explain what generative art is, narrate some of the origins, and point you to resources, I'd thought of sharing how I first got interested in generative art.

If you prefer to skip my story, go to the section that interests you directly:

• What is generative art?
• When did generative art begin?
• How I got started with generative art?
• What tools are available for generative art?

What sparked my interest in generative art?

I cannot recall hearing of generative art, before my very good friend — @_ok_bai told me about it.

At the end of 2018, she shared with me she discovered the world of creative coding, and that she wanted to learn coding to create visuals and generative art. I was excited she wanted to code! I could now teach and talk code with a dear friend.

Once she explained more of it and showed me the creations of a few artists, I was hooked.

I realized I've seen and experienced generative art all my life since I was a teenager, and I had no clue it had a name. Before knowing what it was, I'd call it abstract art.

I've seen generative art while attending concerts in the form of visuals for musicians. I've seen video art, posters, and paintings based on generative art in coffee shops, galleries, and museums. I've seen GIFs and video art of generative art on the web and TV... and yet, I had no idea it was a thing!

It's most likely I heard of generative art in the past, but I didn't pay attention. My interest was somewhere else that only recently I felt I discovered it.

What is generative art?

I like how Joshua Davis summarizes it in the trailer of his class:

“Generative art is making art mainly driven by a computer program. Being able to look at the screen and have the composition make decisions out of gesture. A system for generating an infinite number of random compositions.

The artwork generated in the end, it's unique to the individual creating it, because they've made all the decision-making within the parameters.”

So generative art is an algorithmic art, computer art, a kind of art that always introduces randomness as part of its creation process. A place where geometry, abstraction, spontaneousness and chance meet. An artistry where chaos and happy accidents are embraced.

It has been said that generative art is highly influenced by modern art from the early-20th-century:

• Abstract Expressionism
• Bauhaus
• Constructivism
• Cubism
• Dada
• Futurism
• Surrealism

Reference:

• Why Love Generative Art?

When did generative art begin?

[preface] I wouldn't be able to share a bit of generative art history without existing resources. If you want to read in detail the beginnings of generative art, make sure to go to the links in the references. A lot of the words written in this part are not mine but adapted from the resources.

The first wave of generative artists emerged in the '60s and '70s when computers had no monitors, and the artwork created was shared by printing the art on plotters.

Some of the artists emerging from this era are:

• Frieder Nake
• Georg Nees
• Ken Knowlton
• Lillian Schwartz
• Michael Noll
• Vera Molnár

In the late '90s, John Maeda started Design By Numbers. A project in which he created and shared a computational process, allowing artists, designers, and other non-programmers to start with computer programming.

In 2001 Ben Fry and Casey Reas built a free platform called Processing. A software inspired after working together as students with Maeda in Design By Numbers.

Processing is aimed at anyone with an interest in learning to sketch with programming. It makes generative art accessible to anyone in the world with access to a computer. One doesn't need to be a computer scientist or developer to create sketches and art with code.

The born of Processing has extremely influenced the growth of generative art over the last two decades.

Over the years, many software and tools have risen inspired by this open-source movement and generative art.

References:

• Why Love Generative Art?
• John Maeda

How I got started with generative art?

[preface] There are a lot of resources out there pointing to places for learning generative art. I am sharing here the links to the ones I've found helpful. This doesn't mean they're the best or only resources. Every person learns differently. Take this list of recommendations with a grain of salt.

One YouTube channel helped me getting started with generative art and creative coding using the p5js library:

• The Coding Train

I find useful a little website by Ruth John and Tim Holman, with both, tutorials and a podcast to tune in about all generative art-related — generative artistry.

I've mentioned this course in my last blog post, but the canvas and WebGL course by Matt DesLauriers at Frontend Masters teaches concepts of generative art. It has inspiring exercises to create and understand how generative art can be done via different tools.

There's an interesting read by Ali Spittel and James Reichard — Intro to Generative Art, which in my opinion explains well what generative art is, and tells you how to get started with it via tools like p5js. It even has a small cheat sheet for p5js beginners.

There's a German book of generative art — Generative Design. I haven't ordered it yet [it's on my list...], but I've consulted on/off recently since they have open-sourced the sketches created for the book in p5js. I think it's wonderful so far the book is available in three languages: English, German and Japanese.

I read an interesting interview with Manolo Gamboa Naon - Generative Art Finds Its Prodigy, where he talks about how he got started with generative art. He mentions what inspires him, which tools he uses to create, among other fascinating aspects of generative art.

Not long ago, I discovered a blog post by AIArtists — Generative Art Guide, with several inspiring examples of artwork done by talented artists, recommendations of software, and tools to make algorithm art.

What tools are available for generative art?

To name a few, I'll list tools to make generative art that to my knowledge are available in this year of 2020.

I've tried some of them, and others are used or mentioned by creative coders and digital artists I follow. If you want to dig deep and know every existing tool, you'll have to research more outside the scope of this post.

[beware] I won't tell you which is the easiest, fastest, or best tool to create generative art. Every person is different and might have a dissimilar background. What I find best, easy or hard, you might not think it's best, easy or hard.

What I can recommend is trying more than one tool, until you find the one(s) you feel more comfortable with to create generative art.

Here are a few tools aiding in the creation of generative art:

• Canvas Sketch
• Cinder
• C4
• D3js
• Magenta
• Notch
• openFrameworks
• Processing
• p5js
• ThreeJS
• TouchDesigner
• Unity
• vvvv

In the past weeks, I've been asked by a few people on social media about how I got started with shaders.

I was replying to each one of them, but at some point, I thought maybe writing in regards to the topic would be more useful the next time somebody asks me.

Besides, if someone looking into learning shaders finds this blog post randomly on the web, I'll be happy to shed some light on them.

Before I point you to the resources that have helped me, I thought I'd give you a small background on how I even got interested in learning GLSL shaders.

If you prefer to skip my story, go to the resources directly.

What sparked my interest in shaders?

I first heard of WebGL several years ago when I started going to JS events, and by listening to some talks in local meetups. I had no idea what they were talking about, nor I was that savvy with JS. I'd forget about it after I'd heard of it, even when it looked amazing what they would say one could do with such technology.

I discovered the world of WebGL and Canvas API in the summer of 2019. I've been learning ES6 for a year and a half, on/off, at this point. I participated as one of the artists for JSConf EU in Berlin, by creating an art piece with pure HTML & CSS for an installation in the shape of a multi-screen mural.

When I saw what the artists working with such JS-based technologies were doing, it blew my mind! I started asking my new developer friends how they managed to do that [and spying on them too]. I started following more digital artists, creative coders and creative developers on social media, researching articles about the topic, watching video tutorials... I was hooked.

I finally understood the bridge between art + tech. I've known it for years, but it felt like something so far away from my reach, I could have not ever even considered searching on how one does that in the past. For the first time, I wasn't lost on the way, since I now could write and understand some JS.

Now, not all art + tech work is done entirely with JS. There're other programming languages in the field, like Phyton, C#, and other C related languages. But, so far, my current interests focus on JS and shaders.

How I got started with shaders?

[preface] There are probably 100x more resources on the web about how to get started with shaders. I am sharing here the links to resources that have helped me to learn shaders. This doesn't mean it's the best or only way to do it. Every person learns differently. What worked for me, might not work for you. Take this list of recommendations with a grain of salt.

A developer friend — @fgnass sent me the link to The Book of Shaders by Patricio Gonzalez Vivo and Jen Lowe back in November 2019, as I asked about learning more of Perlin noise.

That first time that I browsed the online book, I understood nothing. You see, shaders employ GLSL and not the JS language. It's a C-style language, and so I had to grasp my head around this new language slowly.

Only a couple of months before that I started exploring WebGL with p5JS and ThreeJS. Learned that shaders could be used as a material in meshes with ThreeJS.

I came back to the book of shaders and found some good book tips.

One book recommended there — WebGl: Up And Running helped me understand how WebGL was born and what GLSL shaders are. It also gave me a solid ground to understand more of the 3D world, specifically done with the ThreeJS library. The code examples presented in the book are outdated, but still, I found it helpful, especially if one is also interested in working with shaders in 3D on the web.

The Mozilla documentation about GLSL Shaders has also helped me understand what shaders are and how to work with both, vertex and fragment, shaders.

I've taken all the courses by Matt DesLauriers at Frontend Masters. The canvas and WebGL course talks a bit about shaders, but the advanced WebGL and shaders course goes more in-depth on the shaders topic and how to use them with ThreeJS.

Two YouTube channels have helped me with shader tips and understanding some of the math needed to create them:

• The Art of Code
• Yuri Artyukh

I've been taking several online workshops organized by CODAME and taught by @CharStiles to learn to do visuals with shaders.

I browse on/off Shadertoy, which is an online platform/community to share shader code. I read and try to learn from the code others post. There are some pretty sick shader designs there, that when I see the math, I honestly don't think I'll ever be into that level, but that's ok.

I consult the Khronos wiki on/off. It explains the language shaders are based on, the shader stages, type of variables and general knowledge on GLSL.

I started the hashtag #anydayshaders on Twitter and Instagram to create a challenge for myself, as I learn shaders, without the pressure of most challenges. You can read about it here.

Alex Trost made a wonderful write-up with explanatory graphics in his Newsletter, Frontend Horse. He explained shaders for beginners from his point-of-view after interviewing me in late July 2020.

Once I was curious about more advanced shader techniques, I found an extraordinary read by Jamie Wong — Ray Marching and Signed Distance Functions, which gave me the aha moment to begin understanding ray marching.

At the end of 2020, @MAKIO135 created a creative coding resource, including a section dedicated to GLSL shaders. He pointed out many tips I've already shared here, but there are other recommendations as well as code samples of his shader work.

I made my way through Bruno Simon's recent Three.js course released in early 2021. There's a whole chapter going thoroughly on coding shaders with inspiring examples. He explains practical ways to code fragment and vertex shaders while using ThreeJS.

As I continue learning shaders, if I find any other resources which I find useful I'll add them and update this post.

This is the last part of a series of posts about my recent refactoring in this site.

To read the previous posts go here:

• Part I
• Part II
• Part III

Scroll down to continue reading about the final refactoring topics:

• Improve the preloader UX in content pages
• Refactor theme picker HTML architecture

Happy reading!

Improve the preloader UX in content pages

The trippy dancing vampire smileys showing up for some milliseconds while loading content pages was not perfect.

I created a fake preloader UX, because I used a setTimeout method via JS.

Did I mention that when I created this site I did it fast in about a week? And that by the time I wrote the JS I was a bit lazy?

It was time I made a real preloader UX, and I went for it by using ES6 promises.

const loadingTime = 140;
const webFontPromise = getWebFont(fontName, fontUrl);
const imgLoaderPromise = getImgLoader(imgSrc);

Promise
  .all([webFontPromise, imgLoaderPromise])
  .then(() => wait(loadingTime))
  .then(() => hideLoader(loader));

One promise waits until the only custom web font I'm using loads if the browser supports the FontFace API, otherwise, it's resolved directly without waiting. The other promise waits for the repeated vampire smileys image to load.

Once those two promises are resolved, there's a setTimeout method inside another promise allowing the vampire smileys dance for some milliseconds [yep, it's a GIF], and right after that, I hide the preloader and display the content page.

References:

• Promise

• Promise.all()

• FontFace API

• Waait

Refactor theme picker HTML architecture

I took part in CSS naked day 2020 and stripped down the CSS of my site for 48 hrs.

By going back to the bare-bones foundation of my site, I realized the accessibility could be better in some places. One of them was the theme picker.

I used the Hylia Starter Kit by Andy Bell to build this site since I've never worked with Eleventy before. The default template came with a dark/light theme functionality toggled with a button element.

As I decided to have more than two themes on my site, I added more HTML buttons, which was the lazy road at the time.

When it comes to accessibility, this wasn't a good way to build the theme picker. A button element represents one choice of adding certain functionality. Rather, I had a set of three options for the site's theme.

Having HTML input radio buttons was more accurate to organize the choices for the user. Also, if desired, it'd leave me the option to add more theme selections.

I added an input type="radio" button with its label in each list item, instead of a button element.

<div id="js-picker" class="c-picker">
  <div role="status" class="is-hidden">Current theme color is <span id="js-picker-status"></span>.</div>
  <ul>
    <li class="c-picker__item">
      <div data-theme="purple" class="c-picker__btn c-picker__btn--03">
        <input type="radio" id="purple" name="theme" value="purple" class="is-hidden" checked>
        <label for="purple" class="is-hidden">Blue/Purple theme</label>
      </div>
    </li>
    <!-- More HTML -->
  </ul>
</div>

Visually you probably didn't even notice the change as the CSS and JS stayed the same but refactored.

Curious to experience my site with voice-over to hear coherent options for switching themes? Go to your device's settings, enable it, and come back to this page.

If you cannot find this accessibility feature in your system, follow the instructions from any of the first two references' links below.

There's still much more I could do to improve the accessibility in this site, but for now, it ends here.

References:

• VoiceOver Mac
• Narrator Windows
• input type="radio"
• ARIA — Status Role

This is the third part of a series of posts about my recent refactoring in this site.

To read the previous posts go here:

• Part I
• Part II

Scroll down to continue reading about the next refactoring topics:

• Improve no-js and older browsers UX
• Improve reduce motion UX on start page
• Improve start page performance

To skip to the last part, go here.

Happy reading!

Improve no-js and older browsers UX

You might be asking again yourself, why does she care about no-js anymore? When [I repeat] this is a site focused on people most-likely using modern browsers.

Well, true that. But also who knows? Maybe again, suddenly one person visiting my site it's sitting behind a computer using a browser with JS disabled.

Maybe such a scenario will never happen. But even if so, one topic I care about anyway is progressive enhancement.

Progressive enhancement (PE) concentrates on starting a site with a bare-bones foundation — content with basic HTML and CSS. And then enhancing it with more complex or modern technologies.

I've already done that since the launch of this site, but I wasn't too satisfied with the basic UX on the start page. Instead of the 3D intro, I had an image if there were no-js.

After fixing older browsers and IE 10-11 bugs, I had a solution I could re-use to improve this — the 2D fallback with a headline matching the design of all the headlines on my site.

<div id="js-fallback" class="is-fallback-hidden">
  <h2 class="c-page__heading">Creative developer...</h2>
</div>

And only add a no-js parent class to that solution via CSS.

/* SCSS syntax */

.is-fallback-hidden {
  .no-js & {
    display: flex;
  }
}

Curious to experience my site without JS? Go to your browser's settings, disable it, and come back visit.

References:

• Understanding Progressive Enhancement
• A Day with JS Turned Off
• The Beauty of Progressive Enhancement

Improve reduce motion UX on start page

I had someone visiting my site asking me why couldn't they see the 3D intro floating animation on their computer as they did on their mobile phone.

They could see the 3D alright, but it wasn't moving. And they were on a Chrome browser.

I thought, [mhmh] new bug. And then I thought again, [weird]. I thought I've made sure the 3D intro worked well on modern browsers. What could it be?

I asked them to send me a screenshot, and then I remembered! I had setup a prefers-reduced-motion CSS feature for people turning off motion on their devices.

When this happens, the 3D intro ain't animated anymore in browsers supporting this feature, as well as the vampire smileys displayed on the preloader for the content pages. Instead, both animations are static images.

If I've forgotten I programmed this, rest assured some users turning on reduce motion in their devices most likely forget they did it, or are not aware my site has some animations in the first place.

To improve this UX, I decided to add a small banner at the bottom of the start page. A little reminder that the reduce motion accessibility feature is turned on in their system.

I created a new utility class and added it to the div tag rendering the 3D canvas.

<div id="js-canvas-title" class="u-info-motion"></div>

And added the message via CSS.

/* SCSS syntax */

.u-info-motion {
  &::before {
    @media (prefers-reduced-motion: reduce) {
      content: "*Reduce motion is turned on in your system.";
    }
  }
}

To try it, reduce the motion on your system and go back to the start page.

If you cannot find this feature in your system, follow the instructions from the references link below.

References:

• prefers-reduced-motion

Improve start page performance

Loading the start page with the 3D intro for a first-time visitor was not performant.

I was loading the full ThreeJS library I'm using to work with WebGL, before loading my custom JS.

When I created this site, I did it quickly in about a week. That time didn't include exclusively coding, but also landing a final concept, designing in the browser, choosing a color palette, making assets, etc.

By the time I wrote the JS to add dynamism to the site, I was a bit lazy.

I didn't want to spend too much time writing JS and organizing components for such a small personal project, but be done with it and revisit it later.

The later came, and as I refactored all my JS with proper ES6 modules, I improved the performance of the start page for first-time visitors by tree-shaking the ThreeJS library.

I say, first-time visitors because I am using a service worker to address caching and offline experiences that came with the Eleventy starter kit I'm using by Andy Bell — Hylia.

There's a wonderful little book about service workers by Jeremy Keith — Going Offline.

When speaking of tree-shaking in JS, one refers to the elimination of unused code.

Instead of making the first-time visitors download ca. 500kB of a library, plus a custom JS file, now they only download a 137kB bundle.

The bundle includes only the ThreeJS modules I need to create the 3D animation, and the JS I wrote for small components used on the start page.

To tree-shake ThreeJS, I added the library to my project via a package on npm.

npm install three --save-dev

And I included ThreeJS via ES6 modules to my custom component.

import * as THREE from 'three';

export default function run3dAnim() {
  /* JS code */
}

I didn't need to explicitly import the modules I used. My JS module bundler RollupJS did the job [oh, what a ride that was! I've never used RollupJS before].

RollupJS analyzed all ThreeJS library modules and deleted anything not used during compilation.

I don't know about you, but I like to call this kind of processes 'magic'.

References:

• Using Service Workers
• Rollup — FAQ Tree-Shaking
• Rollup — Tree-Shaking ES Modules
• ThreeJS in your Projects
• Import ThreeJS via Modules

This is the second part of a series of posts about my recent refactoring in this site.

To read the first part, go here.

Scroll down to continue reading the next refactoring topics on my list:

• Fix IE 10-11 and older browsers bugs
• Fix MS Edge bug

To skip to the third part, go here.

Happy reading!

Fix IE 10-11 and older browsers bugs

You might be asking yourself, why does she care about IE anymore? When this is a site focused on people most-likely using modern browsers.

Well, true that. But also who knows? Maybe suddenly one person visiting my site it's sitting behind a computer with an older browser or likes IE. The latter not officially dead yet [maybe soon, I heard].

Such a scenario does haunt me. I'd like that such a person access the content on my site, even if the experience is not as shiny as in modern browsers.

By the time I got to debug IE 10-11, everything was a blank page. But not to worry, the fixes weren't as terrible as I first thought.

I had forgotten to fallback my CSS variables, also known as custom properties.

One of the fixes looks like this:

.m-wrapper {
  background-color: purple; /* IE and older browsers fallback */
  background-color: var(--c_theme_bg);
}

After those CSS variables alterations, the content was viewable. The rest of my CSS was almost bulletproof, as there was nothing else broken on content pages, except for the footer floating in the middle of the page.

The floating footer bug fix consisted of removing the height I had on the html and body elements, making sure the fix wouldn't affect other browsers.

/* CSS deleted */ 
- html,
- body {
-   height: 100%;
- }

There were two remaining JS bugs — the theme picker and 3D intro didn't work.

The theme picker bug fix involved a CSS feature detection test made to display it only in browsers supporting custom properties.

if (window.CSS && CSS.supports('color', 'var(--css-var)')) {
  /* JS theme picker code */
}

Otherwise, it's hidden by default via CSS.

.c-picker {
  display: none; /* Display via JS if supported */
}

I decided on making the theme picker an enhancement for modern browsers, thus older browsers solely rejoice on the default colors of this site.

The last IE bug fix included creating a fallback for the 3D intro.

IE 11 supports WebGL to a certain extent, and I'm using the ThreeJS library to work with WebGL. I'm working with a ThreeJS version via modules for tree-shaking that uses ES6 classes, which are not supported on IE at all.

In a nutshell, I created a regular 2D fallback with a headline matching the design of all the headlines on my site.

<div id="js-fallback" class="is-fallback-hidden">
  <h2 class="c-page__heading">Creative developer...</h2>
</div>

This fallback hides by default via CSS, and I display it on browsers without certain ES6 support.

I think it's a win-win fix not only for IE, but also for older browsers that weren't running my 3D intro because of the same issue.

To show the 2D fallback I made a small JS built-in object detection test.

if (!window.Promise) {
  /* More JS */
  document.querySelector('#js-canvas-fallback').style.display = 'flex';
}

And I placed it inside a script tag outside the only JS bundle I have on the start page including ThreeJS.

<script src="/js/bundle.min.js" defer="defer"></script>
<script>
  "use strict";
  if (!window.Promise) { /* JS code */ }
</script>

The fallback built-in object detection test is not inside the JS bundle, because as soon as IE finds any kind of error inside a script, it stops and won't run anything else working on that same script.

After that worked out, I had now to make sure my 3D intro was being displayed only on browsers supporting that JS built-in object.

if (window.Promise) {
  init3dIntro();
}

I chose to make the built-in object detection test around ES6 promises and not ES6 classes, because it was a simpler and cleaner solution to my taste.

Also, because my site's visitors using IE 10-11 or older browsers are about 1%. Thus, I didn't want to invest more time in further ThreeJS debugging.

There are probably many other ways I could have solve my WebGL/ThreeJS IE 10-11 bug dilemma. But this was my take.

Sometimes the solution to a problem doesn't have to be that complex.

References:

• CSS Custom Properties and Theming
• CSS Variable Support
• Setting the Theme
• Import ThreeJS via Modules
• ThreeJS Browser Support

Fix MS Edge bug

There was only one annoying bug on MS Edge since I built my site — the dotted sky background didn't show up.

I could never figure out what happened there. But also never debugged it properly.

Once I started with this refactoring, all of a sudden [boom!], the bug was gone.

Now the dotted sky background shows up on MS Edge. And this is one of those coding bugs that I like to call 'the mystery bug'.

I'll bet at least once in your dev life you've encountered one.

I'm not going to lie, 'mystery bugs' are dangerous. One wouldn't like to encounter them ever, but it might happen. It's best to avoid them.

This is the first part of a series of posts about my recent refactoring in this site.

To skip to the second part, go here.

I built this site for myself at the end of 2019 in about 1.5 weeks. I'm talking about landing the final concept, designing in the browser, making assets, coding it and testing.

When I was done with it I thought of this site as a work-in-progress, since there were features I wanted to double-check in older browsers and revisit my code.

Furthermore after some feedback, I thought the UX in certain places could be improved.

The big response and all the good comments I received was surprising. Not that I didn't think my site was very cool, but sometimes what we think is cool is not perceived the same by everybody else.

I was distracted by the attention and making code art is always more fun, thus a decent refactoring happened until recently.

I figured I'd share my refactoring ride to give an update about the site's changes, and in case it helps somebody else looking for similar solutions to their site.

I am sure there are many other ways I could have tackled the improvements shown in this refactoring. But to date, these were the choices I made matching my current experience and preferences.

I can imagine another refactoring happening again in the future to enhance any of these improvements or add new features.

As of this writing, I already have a new list on my mind [oh, oh]. But I need to stop myself at some point for my own sake.

My refactoring list looked like this:

• Add a preloader to lazy-load images
• Add a scroll-to-top button
• Add hotpink theme selection on start page
• Fix IE 10-11 and older browsers bugs
• Fix MS Edge bug
• Improve no-js and older browsers UX
• Improve reduce motion UX on start page
• Improve start page performance
• Improve the preloader UX in content pages
• Refactor theme picker HTML architecture

If you're interested in reading each topic in detail, keep on scrolling down and follow the series.

By the time I finished writing this post [only took me a month] it was a 25 min read.

When it comes to reading posts I have the attention span of a fish, hence I decided to present the full writing as a series of posts.

Happy reading!

Add a preloader to lazy-load images

This was part of improving the overall UX in content pages. Since the launch of this site, I am lazy-loading all images.

I'm using the native lazy-loading HTML attribute loading="lazy" inside the img elements, and have a JS library as a fallback for browsers without support.

If the visitor's network was slow, they were experiencing a blank section on the page before the images were loaded.

To optimize such experience, I added a small SVG preloader of four dots animated, which I didn't create, but instead got from a preloaders' site.

I created a new component class to add the preloader graphic via CSS.

.c-preloader {
  background-image: url('/.../preloader.svg');
  /* More CSS */
}

And I added such preloader class to all img tags that were lazy-loading.

 <img src="..." alt="..." loading="lazy" class="c-preloader">

Today, if the visitor has a slow network while loading images in any of my content pages, they know some content is coming wherever the four dots are dancing.

References:

• Native lazy-loading
• Native Image lazy-loading
• lazysizes Library

Add a scroll-to-top button

This was another topic to improve the UX in content pages. I wanted to do something simple without JS.

I created an anchor link targeting an id on the body tag.

<body id="page-top">
  <a href="#page-top">top</a>
</body>

And added a smooth scroll effect via CSS for modern browsers supporting the feature.

html {
  scroll-behavior: smooth;
}

Browsers without support will jump to the top of the page instead of scrolling back smoothly, and that's ok.

References:

• scroll-behavior

Add hotpink theme selection on start page

One particular experience many people had told me they loved from this site is playing with the 3D intro.

When I created my site and decided to have a color theme picker, I thought of not giving the user too many choices to start with, but only after they decided to explore further other content.

Now, I changed my mind. :)

If users love spending time on the intro page, well, why not giving them one more thing to play with? And that is interacting with the floating 3D text and objects over a bright hotpink colored sky [yep, it's a kind of vibrant blinding color].

Coding-wise I didn't have to do much to make this happen since I already had the component written.

I added the proper HTML tags with the corresponding CSS classes and voilà!

<li class="c-picker__item">
  <div data-theme="hotpink" class="c-picker__btn c-picker__btn--02">
    <input type="radio" id="hotpink" name="theme" value="hotpink" class="is-hidden">
    <label for="hotpink" class="is-hidden">Hotpink theme</label>
  </div>
</li>

Haven't tried it yet? Go back to my start page.

Three weeks ago I started a journey to explore creating my GLSL shaders, after half a year of only studying them on and off.

I want to learn how shaders work as I want to use them with my ThreeJS 3D creations.

Also, I'm very interested in building future installations, visuals, and interactive experiences, with which GLSL opens another creative window for me to do this.

I tweeted about it and started the hashtag #anydayshaders.

I came up with that hashtag as I decided to share my creations on random days without feeling pressure to create every day, and also to keep the number of creations open, up until I get tired of it.

Some twitter peeps shared my excitement into practicing shaders, and two of them already joined me on the ride.

I'm not going to lie, learning shaders is still a struggle as I didn't study CS, known as Informatics in Europe. Still, the creative outcome keeps me motivated. The more I learn of it, the more cool code art I get to create.

If you're feeling frustrated while learning shaders, know that you're not alone. And it gets better, if you're patient. Everyone has their own pace into learning new things.

Ready to learn or practice GLSL shaders? Feel free to join us! As we inspire each other on this journey.

Follow the hashtag, or share your creations on these two social networks where we're currently sharing our work:

• Instagram — #anydayshaders
• Twitter — #anydayshaders

I started a GitHub repo with wallpaper designs after my shader creations in this journey.

References:

• GLSL Shaders
• The Book of Shaders

It's CSS Naked Day!

I care about web standards and accessibility, so when I read about this CSS yearly festivity on twitter from Laura Kalbag, and some minutes later from Andy Bell, I thought I had to take part in it.

Strip down the CSS of your site for 48 hrs. One international day on April 9th. Prove that with well-organized HTML and semantic markup a user is still able to navigate your site and access content without the perk of aesthetics that CSS provides us.

Are you also joining? 👀

As the end of 2019 was coming, the more grew my urge to relaunch my website.

I've had a website to portray my skills “of the moment” since 2009. Before that, I was only blogging for some years on my site ever since I started living abroad to keep family and friends back home updated.

Last I updated my site, which over the years became a portfolio, was spring of 2015.

In 2017 I decided to remove my online portfolio and stay with a coming soon page. I thought it was time to make a big rebranding for myself and apply all the new knowledge I was acquiring until then.

Having an online presence to show my skills and portfolio became a must for me in the year of 2010, as it was when I decided I wanted to start freelancing and make a career change against all odds in a new country, even when I was super junior in what I was getting into... but that's a whole other story for another day.

It was about to be 2020 — the start of a new decade. Since three years before that, I haven't managed to make such rebranding I so much have thought about on and on. I didn't have time for it. Or the reality was, I didn't want to make time for it.

I started taking time for redoing my site around the end of autumn 2019, and I had so many ideas! I've had already lots of ideas in an imaginary box that were stacking ever since I last updated my site. And I didn't even know where to begin with. After some weeks of coding and sketching some concepts for what I had in mind, it took me about two weeks to put all together and shape the concept I liked the most.

And so this site was born. :)

As you've seen, and if you know me already, this time I no longer have a working standard portfolio to showcase, but instead a focus on displaying my artistic and creative skills. I am a chameleon by nature, and I cannot stay put nor have a routine life. Change keeps me going. Ordinary brings me down.

A year and a half ago I began pushing and exploring deeper the artistic side of coding, which I started diving into in 2015 with pure CSS illustrations. But back then I never gave it the needed time to look into it enough. And I guess I also played with art, design and code a bit back in 2005 as I started learning Adobe Flash. Aww, Flash was fun! And it also helped me get my first internship in 2009 as a web designer and developer, sometimes building sites completely animated in Flash.

Anyway, as I named this post, new year, new site. And I'm happy I managed to clear that goal as of early 2020 to rebrand myself and relaunch this site.

I look forward to working in more artistic endeavors in the future. Whether it is making cool websites or creating digital visuals and installations for art + tech events, galleries, museums, musicians, fashion events, festivals, film industry, who knows? The sky is the limit.

I'm excited about the path that my current skills might take me, and to continue learning and improving my design and coding skills. I've experienced that the more and more I learn from them, the more I can create more interesting things. All in all mixed with my passion for the arts in general (film, illustration, music, photography, painting, street art), or anything else that inspires me at the moment. It truly feels like magic to make something with code. <3