GENERATIVE DESIGN=> A course in Generative Design
Generative Art #
=> SEE THE GENERATIVE ART TUTORIAL PAGE #
=> Tutorial accepted by the P5JS foundation #
=> Educational-Resources GitHub page #
Introduction #
My life completely changed the day my dad brought me to see a film called TRON back in the 80’s. When the film did end I thought to myself…one day I will create graphics like these.
Later came the first days of the Internet in the early 90’s with a plugin called macromedia flash which allowed for the first time anybody to start experimenting with graphics and code.
After that, came Processing and recently with the standarisation of javascript as the programming language of the web new specialised libraries have appeared to make life easier for artists who want to express themselves in the frontiers between design and code.
P5JS #
P5JS is the web javascript version of the seminal java project for artist called Processing.
Born in 2016 and backed by the great and inspirng teacher DanielShiffman, it has been growing steadily until becoming the perfect tool to make code accessible to artists, designers, educators and beginners.
Goals #
The Goal with this introductory course is to inspire anybody who wants to start creating digital art with the computer screen as their canvas. To learn the basics of designing art with code.
I ask people to know at least a little bit of javascript, enough so can follow the course (variables and loops should be enough). It’s mainly about reading code, see what it does and experiment with it.
If you need a more introductory course here I give a fantastic link of AllisonParish who has been another great inspiration to create this course for me and I do believe it’s a perfect complement for better understanding some of the concepts we will dive into.
Coding concepts to learn #
Programming: variables, for loops, classes, p5js functions.
Mathematics: translations, modulo, sin and cosinus functions, random.
Structure #
This introduction to creating Generative Art with p5JS course is divided into:
- Dot class abstraction
- dot object creation
- dot animation basics
- dot sliders
- dot - row
- dot - matrix
- dot - experiments
P5JS Installation #
Insert this piece of code in the head tag of your html file and you will be good to go.
<head>
<script src="></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>