Hello. My name is Kitasenjudesign. I do creative coding, mainly with HTML/CSS.
👉 HTML SKETCHES - https://000690273.codepen.website/
I think these are unique bcause they are creative coding with almost no programming language. (HTML is called Markup Language). Here is an explanation of how to do it.
What is creative coding?
There may be no definitive definition, but I think it generally refers to artistic coding. The most well-known tool in browsers are concerned is p5js.
Personally, I think that creative coding means that new discoveries and new ideas are generated through coding, and that trial and error is used to achieve this. By this definition, creative coding is possible whether it is HTML or CSS.
Development Environment
To be creative, it is important to be able to do trial and error easily. Using an online code editor for development is a good idea. I use a service called CodePen.
Whenever I write or edit HTML/CSS, the results are immediately updated. Whenever I have time, I enjoy improving my past works little by little. You can also look at other people's code. You can jump to the source code from the top of each page on my site.
Good parts of HTML
Here are some good points compared to creative coding such as p5js.
No need to think about logic
Since HTML is not a programming language, it is not possible to create logic. Therefore, you don't have to think about difficult things. In some cases, the code can be completed instantly.
Easy to handle characters
p5js can also use text, but to a limited extent. HTML/CSS provides placement, layout, decoration, etc.
Layout engine is available.
Responsive design features such as aligning elements on a grid, wrapping text, etc. are standard (but can be cumbersome if you try to escape them).
Limited in what can be done
Not being able to do a lot of things is a bad thing, but it also means that you are limited in the ideas you can come up with. I have not so many things I want to do, so it may be easier for me to come up with ideas if I have restrictions.
CSS is fun!
Learning CSS allows me to customize the look and feel of my blog (like this blog), and it is fun to learn.
Bad points of HTML
Here are some bad points.
There are many things you can't do.
You can use 2D and 3D-like transformations (Affine transformations) and filters (blur, drop shadows, etc.) with CSS, but they are limited. svg allows you to draw lines and shapes using only code, but it is cumbersome compared to p5js. Free layout is also somewhat cumbersome. Interactivity is limited to hover. However, we recommend that you give up those troublesome things because you will lose the ease!
You have to learn HTML/CSS.
Well, there is ChatGPT, CodePen, etc., so it's not that difficult.
Tips for having fun
Since it was going to be long, I compiled Tips for enjoying these on a separate page. Please refer to them when you make them.
👉 HTML Creative CodingのTips - KITASENJU DESIGN BLOG
Motivation
What kind of motivations do I have? I am mainly influenced by the culture of web design and graphic design. I have been in the past more of applied design (Adobe Flash and related culture) than of generative art, so maybe I am more interested in that area.
Web Brutalism
There is a genre of web design called Web Brutalism, which refers to websites that are rather simple but attractive in form, with HTML and CSS ornamentation laid bare. I like the look of them and their experimental and counter spirit. I think they use libraries like p5js and threejs, but they also use HTML(dom). Like these esteemed web brutalists, I want to do some trial and error.
A collection of Web brutalism-like sites ->. https://hallointer.net/, https://klikkentheke.com/
Similarities with graphic designers
The field of graphic design has a much longer history and a more mature culture than web design. Among these designers, some designers compete for visual novelty without regard to functionality, which is sometimes criticized, but I feel that such actions have something in common with creative coding. One motivation is to apply such a tried-and-true graphic design style to HTML.
For reference, here is a collection of designers I have collected -> https://scrapbox.io/graphicresearch/.
Creating UI
Also, it is motivating to create a UI like my page, where you can see a list of all the pages. This kind of UI was often created by Flash creators more than a decade ago. It would be also fun to develop a container like this to unite multiple works.
Reference -> https://onscreen.jp/, http://fladdict.net/
Is it generative art?
definition of generative art as "art that uses mechanisms that operate autonomously.
The aspect where the code is executed by the browser and its drawing system lays out the code for the window width could be considered generative, but I think generativity is generally weaker than something that would be created in p5js or other programming languages.
HTML Creative Coders
I would like to take the liberty of introducing HTML Creative Coders other than myself. They are not using the term HTML Creative Coding, and it is not purely HTML/CSS, but you can see a part of it.
- ikeryo https://ikeryou.jp/
- Yehwan Song https://yhsong.com/
- Mr. Leander Herzog https://leanderherzog.ch/
- Jan Robert Leegte https://www.leegte.org/
Conclusion
This is my introduction to creative coding with HTML/CSS. If you are interested, please give it a try.
Translated with www.DeepL.com/Translator (free version)
