What is generative art?

Gen­er­a­tive art is art that has been cre­at­ed with the use of a non-human autonomous sys­tem, such as algo­rithms, rules, or process­es; it often involves some degree of ran­dom­ness. These sys­tems can include com­put­er pro­grams, math­e­mat­i­cal equa­tions, and mech­a­nisms that can make deci­sions about the art­work’s cre­ation process.

The artist cre­ates the sys­tem or sets of rules, and then the sys­tem gen­er­ates the art, pos­si­bly pro­duc­ing unique and unfore­seen out­comes. The key char­ac­ter­is­tic of gen­er­a­tive art is that the artist relin­quish­es direct con­trol over the final out­come, embrac­ing unpre­dictabil­i­ty and the role of the sys­tem in the cre­ative process.

Gen­er­a­tive art can man­i­fest in var­i­ous medi­ums, includ­ing dig­i­tal art, music, lit­er­a­ture, and even phys­i­cal objects.

This arti­cle will explore gen­er­a­tive art in the con­text of web design, explain­ing how it can be used and the excit­ing pos­si­bil­i­ties it pos­es for user engage­ment. Keep read­ing to learn more about this inno­v­a­tive art form:

Types of generative art in web design

There are sev­er­al ways gen­er­a­tive art can be made, but we’re inter­est­ed in those that can be used in web design. These types of art can enrich user expe­ri­ence, offer­ing var­i­ous unique, inter­ac­tive, and dynam­ic elements.

So, here are six ways gen­er­a­tive art can be created:

1. Algorithmic patterns

These are cre­at­ed using math­e­mat­i­cal algo­rithms that gen­er­ate com­plex pat­terns or tex­tures. The pat­terns can be based on sim­ple rules involv­ing geom­e­try, rep­e­ti­tion, and vari­a­tion (such

as frac­tals), or they can sim­u­late nat­ur­al process­es (like the growth pat­terns of plants or the move­ment of particles).

2. Interactive artworks

This form of gen­er­a­tive art responds to user inputs or envi­ron­men­tal vari­ables. JavaScript libraries like p5.js or Three.js are often used to cre­ate inter­ac­tive art­works. The inter­ac­tion can range from mov­ing the mouse to affect the work’s ele­ments, to using data from sen­sors or real-time data feeds to influ­ence the outcome.

We had a lot of fun explor­ing the exam­ples of gen­er­a­tive art on https://processing.org/, and here’s an exam­ple of an inter­ac­tive piece:

3. Data visualisations

Gen­er­a­tive art can be used to visu­alise data in com­pelling and aes­thet­i­cal­ly pleas­ing ways. Using data as input, artists or design­ers can cre­ate visu­al rep­re­sen­ta­tions that auto­mat­i­cal­ly adjust based on the under­ly­ing data set. Libraries like D3.js are specif­i­cal­ly designed for data-dri­ven visu­al­i­sa­tions and can be used to gen­er­ate com­plex and inter­ac­tive data art.

Dis­play­ing infor­ma­tion in this way may also be used to inform stake­hold­ers, make data-dri­ven deci­sions, and enhance prod­uct pages.

4. Particle systems

These involve the sim­u­la­tion of large num­bers of small par­ti­cles to cre­ate com­plex motion and visu­al effects. In web design, par­ti­cle sys­tems can be used for back­ground ani­ma­tions, inter­ac­tive ele­ments, or to cre­ate visu­al effects like smoke, fire, or flow­ing water. They are usu­al­ly imple­ment­ed with JavaScript or WebGL for more com­plex 3D effects.

5. AI and machine learning

With advance­ments in AI, gen­er­a­tive art can also be cre­at­ed using machine learn­ing mod­els. Tech­niques like neur­al net­works can be trained on a set of images, texts, or sounds, and then used to gen­er­ate new, orig­i­nal works that mim­ic the learned style.

TensorFlow.js is an exam­ple of a library that can be used for machine learn­ing in the brows­er, allow­ing for the cre­ation of AI-dri­ven gen­er­a­tive art direct­ly in web applications.

Is generative art the future?

As count­less tech­no­log­i­cal advance­ments seem to emerge every week, we stand at a cre­ative and philo­soph­i­cal cross­roads. Devel­op­ments in gen­er­a­tive art sit along­side those in the world of AI – which is inno­vat­ing at a rate we can hard­ly keep up with. We can’t ignore that this move­ment is push­ing the bound­aries of art, cre­ativ­i­ty, and the role of the artist.

Many peo­ple feel pos­i­tive about these changes, recog­nis­ing that AI has expand­ed the can­vas on which artists can express them­selves. Some say it is democ­ra­tis­ing cre­ativ­i­ty because high­ly sophis­ti­cat­ed tools are being made avail­able to broad­er audi­ences. Open-source plat­forms and libraries are low­er­ing the bar­ri­ers to entry, allow­ing indi­vid­u­als with­out tech­ni­cal back­grounds to par­take in the cre­ation of com­plex and com­pelling artworks.

This will like­ly ampli­fy voic­es that might have remained unheard in a more con­strained and tra­di­tion­al artis­tic environment.

How­ev­er, devel­op­ments in gen­er­a­tive art and AI pose sev­er­al eth­i­cal and philo­soph­i­cal dilem­mas. The ques­tions of author­ship and orig­i­nal­i­ty are more rel­e­vant than ever, chal­leng­ing our pre­con­ceived ideas about the cre­ator and the cre­ation. When an AI tool gen­er­ates art, who is the true artist? Is it the algo­rithm, the cre­ator of the algo­rithm, or both?

These ques­tions have big impli­ca­tions for copy­right, own­er­ship, and the eco­nom­ic val­ue of art. More­over, the poten­tial for AI to repli­cate human cre­ativ­i­ty stirs a deep philo­soph­i­cal inquiry into our def­i­n­i­tion of art itself. Can an AI’s cre­ation – devoid of con­scious­ness and emo­tion­al expe­ri­ence – res­onate with human audi­ences in the same way human-made art does?

While we don’t think gen­er­a­tive art will com­plete­ly take over the world of art and design, it will def­i­nite­ly expand it. We are wit­ness­ing a sig­nif­i­cant change in tools and tech­niques, and that’s always excit­ing for creatives.

What possibilities are offered by generative art?

Using gen­er­a­tive art in your web design opens up lots of pos­si­bil­i­ties for cre­at­ing dynam­ic, engag­ing, and per­son­alised user expe­ri­ences. If you’re won­der­ing what this art form can offer you, con­sid­er the fol­low­ing benefits:

Unique experiences for users

Gen­er­a­tive art can ensure that each user encounter feels unique. By dynam­i­cal­ly gen­er­at­ing visu­als, lay­outs, or inter­ac­tive ele­ments, web­sites can offer a dif­fer­ent expe­ri­ence on each vis­it, mak­ing the web pres­ence more mem­o­rable and engaging.

Even if each user vis­it isn’t made unique, hav­ing gen­er­a­tive art on your web­site def­i­nite­ly sets it apart from the crowd – it can be delight­ing, gam­i­fied, and entire­ly original.

Interactive and engaging content

By using inter­ac­tive gen­er­a­tive art, web design­ers can cre­ate immer­sive expe­ri­ences that respond to the user’s actions. This inter­ac­tiv­i­ty can increase user engage­ment and time spent on the site, as users explore the effects of their interactions.

“Bet­ter Shar­ing with AI” by Cre­ative Com­mons was gen­er­at­ed by DALL‑E 2 (the AI plat­form) with the prompt “A sur­re­al­ist paint­ing in the style of Sal­vador Dali of a robot giv­ing a gift to a per­son play­ing a cel­lo.” Cre­ative Com­mons ded­i­cates any rights it holds to the image to the pub­lic domain via CC0.

Data personalisation and visualisation

Gen­er­a­tive art can be used to per­son­alise con­tent based on user data or pref­er­ences. Data visu­al­i­sa­tions can be made more appeal­ing and acces­si­ble, turn­ing dry num­bers and sta­tis­tics into com­pelling visu­al sto­ries. These approach­es can sig­nif­i­cant­ly enhance the user’s under­stand­ing and reten­tion of information.

Efficiency and scalability

Gen­er­a­tive sys­tems can auto­mate the cre­ation of con­tent, mak­ing it eas­i­er to gen­er­ate large vol­umes of visu­als or lay­outs with­out man­u­al effort for each one. This scal­a­bil­i­ty can be par­tic­u­lar­ly ben­e­fi­cial for sites that require a vast amount of visu­al con­tent, such as online gal­leries, port­fo­lios, or e‑commerce sites with exten­sive prod­uct lines.

Emotional impact and aesthetic appeal

Gen­er­a­tive art can con­tribute to the over­all aes­thet­ic and emo­tion­al appeal of a web­site. The use of sophis­ti­cat­ed pat­terns, colours, and inter­ac­tions can evoke spe­cif­ic moods or themes, con­tribut­ing to a stronger brand iden­ti­ty. Busi­ness­es want­i­ng to give off an impres­sion of moder­ni­ty and fresh­ness will par­tic­u­lar­ly ben­e­fit from using gen­er­a­tive art.

Accessibility and inclusivity

By adjust­ing colours, con­trasts, and pat­terns, gen­er­a­tive art can improve acces­si­bil­i­ty for users with visu­al impair­ments. Adap­tive designs can respond to user pref­er­ences or sys­tem set­tings to ensure that con­tent is acces­si­ble to a wider audience.

Innovation and brand differentiation

Employ­ing gen­er­a­tive art can posi­tion a brand as inno­v­a­tive and for­ward-think­ing. It can dif­fer­en­ti­ate a web­site from com­peti­tors by offer­ing a cut­ting-edge, inter­ac­tive expe­ri­ence that stands out in a crowd­ed dig­i­tal landscape.

Device adaptivity

Gen­er­a­tive art can adapt to var­i­ous envi­ron­men­tal fac­tors, such as screen size, device ori­en­ta­tion, or even ambi­ent light con­di­tions, ensur­ing that the design remains effec­tive and engag­ing across all devices and con­texts. This is high­ly cut­ting-edge and real­ly sets gen­er­a­tive art apart from tra­di­tion­al designs.

Things to know about generative art in web design

The world of gen­er­a­tive art is vast, so we want to offer some guid­ance before you get start­ed. Here are our top tips for nav­i­gat­ing this field effectively:

1. Understand the basics

Before using some gen­er­a­tive art tools, you’ll need to have a good grasp of the foun­da­tion­al con­cepts of web design and pro­gram­ming. Knowl­edge of HTML, CSS, and JavaScript will be use­ful because many tools aren’t entire­ly friend­ly to newbies.

That said, there are sev­er­al tools that peo­ple with­out pro­gram­ming knowl­edge can use.

2. Don’t bite off more than you can chew

Begin with sim­ple projects to under­stand the process of cre­at­ing gen­er­a­tive art. Small projects allow for quick exper­i­men­ta­tion and learn­ing. Over time, you can grad­u­al­ly increase the com­plex­i­ty of your projects as you become more com­fort­able with the con­cepts and tools.

3. Keep a sketchbook of your work

Dig­i­tal or phys­i­cal, a sketch­book is a fan­tas­tic way to doc­u­ment ideas, algo­rithms, and obser­va­tions. Gen­er­a­tive art often involves a lot of exper­i­men­ta­tion and iter­a­tion, and keep­ing a record of your process­es can be invalu­able for learn­ing and refin­ing your work.

4. Join a community

The gen­er­a­tive art com­mu­ni­ty is vast and diverse, with many artists and design­ers will­ing to share their knowl­edge and work. Plat­forms like GitHub, Code­Pen, and var­i­ous art and design forums are great places to find inspi­ra­tion, resources, and tuto­ri­als. Engag­ing with the com­mu­ni­ty can also pro­vide insights into the cre­ative and tech­ni­cal process­es behind gen­er­a­tive art.

Have a play around on https://processing.org and see what you can cre­ate in their free editor.

5. Make use of libraries

There are sev­er­al JavaScript libraries designed to make the cre­ation of gen­er­a­tive art more acces­si­ble. Libraries like p5.js are specif­i­cal­ly tai­lored for cre­ative cod­ing, offer­ing a wide range of func­tions for draw­ing and ani­mat­ing graph­ics. Three.js is great for 3D graph­ics, and D3.js is good for data visu­al­i­sa­tion. Exper­i­ment­ing with these libraries can help you under­stand the capa­bil­i­ties and lim­i­ta­tions of each.

6. Make your art interactive

One of the unique aspects of gen­er­a­tive art in web design is the abil­i­ty to cre­ate inter­ac­tive expe­ri­ences. Think about how user input (such as mouse move­ment, clicks, or key­board input) can influ­ence the art. This inter­ac­tiv­i­ty can sig­nif­i­cant­ly enhance the user’s engage­ment with your website.

We high­ly rec­om­mend mak­ing your gen­er­a­tive art inter­ac­tive since this is one of its main attrac­tions! Plus, it can be lots of fun for users.

7. Consider computing power

Gen­er­a­tive art, espe­cial­ly when inter­ac­tive or ani­mat­ed, can be com­pu­ta­tion­al­ly inten­sive. It’s impor­tant to con­sid­er the per­for­mance impli­ca­tions on dif­fer­ent devices and browsers. Tech­niques such as opti­mis­ing algo­rithms, using effi­cient libraries, and imple­ment­ing lazy load­ing can help ensure that your web­site remains respon­sive and accessible.

8. Think about accessibility

Ensure that your gen­er­a­tive art enhances rather than detracts from the user expe­ri­ence for all users, includ­ing those with dis­abil­i­ties. Fol­low web acces­si­bil­i­ty guide­lines to make your con­tent as inclu­sive as possible.

Final thoughts

When com­pared to tra­di­tion­al and sta­t­ic web design tech­niques, gen­er­a­tive art pos­es sev­er­al excit­ing pos­si­bil­i­ties because it can cre­ate rich, per­son­alised, and cap­ti­vat­ing expe­ri­ences for users. How­ev­er, with any new tech­nol­o­gy comes new chal­lenges and considerations.

If you’re inter­est­ed in using gen­er­a­tive art for your web design, keep our tips in mind. By con­tin­u­ous­ly explor­ing and exper­i­ment­ing, you’ll find that the designs you can make are infi­nite. Not only can gen­er­a­tive art push the bound­aries of what’s pos­si­ble, but it is also a flex­i­ble and scal­able approach for cre­ative web­site owners.