Creative Algorithms - Generative Design & Creative Coding Art
Вставка
- Опубліковано 28 кві 2019
- Creative algorithms that tell fresh and meaningful stories.
A showcase of generative, data-driven, interactive and real-time projects by designer and artist Patrik Hübner. Patrik, who is based in Germany, uses creative algorithms, data-driven design and artificial intelligence-based coding techniques to produce meaningful interactions of design, art and data.
All projects have been exclusively developed using programming languages like JavaScript and Java. So they are equally user-facing experiences as well as custom design-softwares that designers and agencies can use to generate high resolution stills and key visuals within the production pipeline.
Lear more over at Patrik's website at www.patrik-huebner.com - Наука та технологія
As someone who is just starting out doing generative art, this video is inspiring
Thanks for taking the time to let me know. It's wonderful to hear that my work could contribute in whatever small way to your journey in this wonderful field ! Keep on creating :)
Just one question, how do I start generative art as a beginner and where ?
@@ankita-mishikar116 Hey Ankita!
I can really, with all my heart, recommend Daniel Shiffman / The Coding Train. He is an excellent educator and teaches in a style that puts context and concepts first and code second. He has hundreds of videos for both Processing an P5.js from total beginner to advanced algorithms
His UA-cam-channel: ua-cam.com/channels/vjgXvBlbQiydffZU7m1_aw.html
If you’re totally new to using P5.js, check his series on “Foundations of Programming”: ua-cam.com/video/yPWkPOfnGsw/v-deo.html
Or his entire list of P5.js playlists: ua-cam.com/users/shiffmanplaylists?view=50&shelf_id=14&sort=dd
I could go on with a huge list of other links but I can give you something better: My buddy Tim Rodenbröker collected a list of tutorials, books, agencies, strategists and other resources surrounding Generative Design, which I highly recommend you check out: timrodenbroeker.de/resources/
Tim is also a great educator who has an approach which is centered more around graphic-design. So check him out at www.timrodenbroeker.de as well.
I hope that helps
@@patrikhuebner Thank you so much for all the info. Yes, I have been learning Daniel Shiffman's video courses. They are super helpful. I started with processing. And, I am loving the projects so far. However, I was wondering whether the same codes that I used in processing can be used to save the sketch in P5.Js?
Do I have to learn P5.js separately , apart from processing ?
@@ankita-mishikar116 Hey and sorry for the late reply - I broke a rib the other week. Anyway... In essence, most programming languages follow the same kind of structure and ideas.
P5.js tries to be as close to Processing as possible so you don't have to re-learn that much.
Do note: Processing (which is based on JAVA) and p5.js (which is based on JavaScript) have are a couple of distinct differences. The most important one is how variables are defined. JAVA/Processing is what is called "statically-typed" so you have specific types for each variable like "int", "float", "String", etc.
In JavaScript/p5.js works differently (some might say it's easier) as you only have to initialize each variable by e.g. the term "let".
If you know this and a few other things you should be able to port Processing to p5.js easily. The other way around it's a bit more difficult as you have to figure out the type of each variable.
I hope that info helps a bit !
Woah! That's a sick ass demo reel! Love the music and editing :)
Cheers!
thank you.! So shall
This is dope!
oh wow, your work is really inspiring !
I'm currently studying art direction and i would love to learn how to do that kind of work, do you have any advice on how to get started ?
Man this is awesome, you got a new subscriber!
Thanks a million for the kind words and welcome to the family :)
hey, how was the thumbnail created?
*Love it!*
Kalau boleh tahu, apakah membuatnya pakai software atau coding. Terima kasih.
do you have another channel by the name of yeti learn? because he's selling a course and the intro video is exactly the same as this one.
amazing work! are you using processing?
Hey! Wow, that took me a long time to reply to :) Sorry for that. Anyway - a very few of the projects showcased use Processing but most of them are based on Vanilla JavaScript (that is JavaScript without any specific libraries) and use the HTML canvas-element to draw to. Almost all projects that have 3D-visuals are WebGL-based. I use Three.js as an abstraction library as it's incredibly powerful and well documented. High-performance parts like particle- or material-simulations are many times based on GLSL which is a C-like shading language that runs directly on the graphics card in parallel.
Nice
👌🏻
omg ! Is there any course available? I would love to learn this ...
Fabiano Magalhaes Hey! I am indeed thinking about creating courses around these types of projects but as a lot of the topics are rather advanced, I’m not quite certain what format would be best to reach as many people as possible. If you have specific wishes / ideas, let me know !
@@patrikhuebner I know you use programming and JS, but my comment is really biased and ignorant, sorry for that ! So... Maybe if you use Blender, since it is a free software, more people would be able to access the course (speaking for myself). I think you should try to go for advanced topics, to understand the potential of your followers, but also give the paths for the lack of concepts without getting into much details. I mean, if possible, make the video technical and not so long. *A wish: being able to take this into Blender to tell stories by using the dynamics, especially the ones seen between 00:15/20 and 00:30/35 seconds. Example: Rich people pay less taxes here in Brazil than the middle class, so I'm creating a video dramatically emphasizing those differences shown in graphics and analyses in ways that are more impactful.
What’s the best thing to learn when starting out designing interactive websites. I’ve been using processing for a while and was wondering how to move onto the web side of code design.
p5 is a quick and easy jump to web based generative art if you're already familiar with processing
@@anushgopalakrishnan cheers mate
@@tobyhutchinson7062 Hi, I have the same question... after this few months did you find any interesting resources to start with? thanks :)
@@fakimatalearn basic html and css. Free code camp is great. P5.js is a good starting point for JavaScript if you are familiar with processing. read eloquent JavaScript to learn about vanilla JavaScript.
@@tobyhutchinson7062 thanks !
I am stunned !!!! wowww!!!!
Can you please tell me what all things i need to know to be able to make projects as cool as yours? It would be of great help.. I wish to be able to become a coding artist like you!
Cheers mate. and please please if possible make tutorials. We would be really lucky to get to learn from you.
Hey! Cheers for the kind words, it’s always a pleasure to hear how people react to my work.
Everything in the above video is creating using computer code so there is quite a bit of technology involved. To name a few things: JavaScript, WebGL, GLSL, HTML5, CSS and Processing.
But don't let all of those things scare you away from starting to experiment with this awesome field of creativity! If you don't have a programming background, I highly recommend you check out Processing (processing.org/) as it was designed to allow everyone to learn the beauty of Generative Design in a super simple and streamlined "sketchbook"-format.
The best way to start out with this is most likely the channel by Daniel Shiffman, The Coding Train: ua-cam.com/channels/vjgXvBlbQiydffZU7m1_aw.html - he is great at teaching you everything from the very basics to advanced topics in a fun and approachable way.
If reading is more your thing, my biggest recommendation is "Generative Design: Visualize, Program, and Create with Processing" (www.amazon.com/-/de/dp/1616890770/ref=sr_1_2?__mk_de_DE=%C3%85M%C3%85%C5%BD%C3%95%C3%91&keywords=generative+design&qid=1578929337&sr=8-2). Note that there is a new and updated version for p5.js available as well: www.amazon.com/-/de/Generative-Design-Visualize-Program-JavaScript/dp/1616897589/ref=dp_ob_image_bk
I hope that helps a bit to start your journey. Have fun :)
@@patrikhuebner Let's go!!! HUGE THANKS MAN!
@@patrikhuebner it's amazing how much you're open with sharing useful knowledge.
00:40 how can you make it?
I admire you.
Cheers :)
Did you use Three.js?
Hey! Most of the 3D projects are indeed Three.js/WebGL. Some projects featured in this showcase (mainly the ones using sensors like the Kinect) are developed using Processing.
Hola Patrik. Mi nombre es Patricio soy profesor de informática en Buenos Aires, y quisiera pedirte permiso para usar parte de este video para promocionar mi escuela. Saludos !
Hello Patricio. I used Google Translate so I hope it translated correctly :) You may publicly show this video at your school in any form as long as there is a permanent credit visible mentioning my name and website. I don't know what you mean by "to promote your school". If you want to use stills or graphics on print materials or in other forms of publication, please reach out to me via my website and we can discuss things in more detail.
@@patrikhuebner I understand the translation perfectly. The idea is to take a clipping of the video to attract future students to the public high school oriented in visual arts in my city. Since here it is customary to visit elementary schools to continue in ours. But now we can only do it through virtuality. Thank you so much !
@@j.c.patriciochacon2497 Sounds great. If you have anything to share (where I can see the video, learn more about your school, etc.) feel free to share.
There are really few tutorials about designing interactive and creative websites. I really want to learn it but have no idea abouthow to dive into it...😞 Would you like to make a course or a series courses if thins are complicated? Definitely there are many people would like to buy it and learn from you.
Quite a late response here, sorry. I am currently exploring which angle would be best to start sharing my knowledge and experience. But I feel that it would have to be more about creative strategies than any specific technique or technology. Which obviously makes it a bit hard to find an angle that works for a large amount of people. Do you have any specific wishes for content? Let me know and I'll definitely consider it.
@@patrikhuebner Hi Patrick. From my learning experience, I think u might can divide your skill into two parts. The principles and the tools(techniques). I believe you must build some design principles during your journey. They're quite significant and serve as the foundations in the creative process. Even I think it might be the most important things you want to share with audience since you are free from the tools and can dance with your creativity. I would like to learn them as well because they are really invaluable compared to any specific techniques. Yet for beginner/intermediate learners, how to master the tools and composite them fluently are absolutly the main problem as well. How could we get harmony patterns from the blank paper if we don't even know how to use the scissors :)? So I think you can think about the principles/tools ratio based on your expected audiences. Maybe 60/40 for advanced learners and 20/80 for beginners.
@@patrikhuebner For the good example of teaching, I would like to recommend Jama Jurabaev and PolygonRunaway. PR is a 3D illustrator working with blender and has his own UA-cam channel. He often share some commentary free tutorials about blender modeling. Most of them are easy to follow and organized in the shape of mini projects. I always prefer tools parts come with mini but complete project from start to end. That helps me to not only understand how to use them in pratice, but understand the thinking process behind mentors. But this just my preference after all. You can have a look on his channel. And So far, his paid course is the greatest practicle introducion to blender modeling one I think. You might can learn something related to tools teaching from his style.
@@patrikhuebner As for Jama, he is the reputable concept artist in our concept art field. Always making great tutorials(even though most of them are paid but are really popular and welcome). You can check his products on Learnsquared and Artstation. Don't need to buy them. Just the syllabus can make sense I think. I recommend narrative concept design for theory teaching reference and realtime environment design for tools teaching reference. Jama is a really experienced mentor knowing how to convey knowledge.
@@patrikhuebner Hope my suggestion could give you some help. You could also strat to make some whatever artworks or tutorials (maybe just some interesing math functions or algorithms in your daily work are great enough) to raise teaching experience and audiences. As for me, I hope I can learn how to make interactive and creative applications through web from u. I've learning some basic web techs and generative algorithms for fun. But I have no idea about how to make a serious work or a mature product like the showcases on awwwards. I'm a beginner hobbyist and want to become more professional and creative. Yet there seems nowhere online teaching me how to become a professional creative technologist. It's weird hahh. So I hope experts like you could open courses. Best wishes!
what is the name of the song?
Eduardo Spinardi it’s a great song, isn’t it? :) as noted in the end credits of the video, it’s called „Sleepwalk“ by artist Injuvik. Which is the musical alter ego of my good friend and creative technologist Tim Rodenbröker. Check out his channel here on UA-cam.
Wow thats inspring dude. Whats the music?
Hey! Sorry for taking forever to reply. The song can be found in the credits. It's the track "Sleepwalk" by Injuvik.
Du kommst aus Paderborn?? 🙃
Ja :)
Brilliant work but the color selection and pairing could be much much better
I‘m happy to receive suggestions if you have specific ideas
*Ladies and gentlemen - this is just Gabriel's opinion. Don't take it as facts!*
This is a gorgeous advertising designer’s portfolio. However, I want to bring up the distinction between great art (Titian, Rembrandt, Cezanne, Jackson Pollack, Matisse I.e COMPOSITIONAL ART vs. Design. So the question is, “How to make computational imagery that is also great art”? No one makes logarithmic code based on what great art does. I think gestural based coding (a la Kinect) is going in the right direction. It produces amazing surprises. Painting WAS human hand moving a brush both on the canvas and ON THE PALETTE. I think the gestures themselves need to be encoded, then applied to palettes also programmed from actual great painters. I’m speculating out loud here because I’ve yet to see anything remotely close to great art using the computer.
Hey Laurence!
Thanks for your great comment. When I present my personal interpretation of Creative Coding and my many endeavors into both design and art, I really love it when discussions start to happen regarding the nature of art. To me, it always shows that involving a computer in the creative process, especially if it is in forms that "drive" or somewhat enrich the creative process, quickly makes people wonder what creativity and art really are made of. I think that is a wonderful discussion to be had as it both raises awareness and removes some of the myths surrounding this field and makes us question some of the things we have not questioned in a long while.
It also shows to me that sometimes people really have a completely false sense of what "artificial intelligence" means (not referring to you here, Laurence) as some people are actually afraid in some way of computers taking over creative jobs. I personally don't think that will ever really happen (but that is the topic of another discussion).
I don't know if there is a definitive answer to what the essence of art exactly is but at least to me, art and creativity in general are not defined by physical interactions with a medium or the presence of a human being during the act of "creation". I think the act of creativity is sparked when artists and designers come up with an idea, define the space of creativity and start exploring its infinite potential.
In other words, I create spaces for creativity, art and design to happen and emerge - and I allow computers to be equal part in that exploration as humans.
Also, I always curate the results and never leave it to a computer to select the results. But I strongly believe that wielding a pencil is just as much a tool for creativity as is typing on a keyboard.
So, I am bold enough to say at least some of the great masters you mentioned would approve of this approach as "just another approach to creative expression".
my kind of p0nr
Looks weird.