Creative Coding: Making Visuals with JavaScript

Introduction to Coding for Visual Designers

“Hi and welcome to the end of this Domestika course. In this final lesson we’ll do a recap of what we’ve seen so far and I’ll add some tips to help you in your journey into creative coding. Code is a language. To use a metaphor with spoken language, when we want to express something, it’s not about how many words we use, but how we choose to put together the words we know. We came a long way. We started from an empty file, from fundamental concepts like variables and functions. I mentioned we were going to use them everywhere and we did. The best way to learn is always by example and we saw quite a few. We also saw arrays, loops, conditionals and random numbers. And we saw how much we could do with just those few concepts. The environment we chose to run our code was the browser, which is very accessible and familiar. Now we know we can also use it for creating visuals. We saw how to create an HTML page and write JavaScript in it. Then we saw a more elaborate setup using canvas-sketch. It gave us an environment with some advantages over starting from scratch, like making it easy to change the dimensions of our sketch and also automatically reloading it as soon as the code was saved. There’s more to canvas-sketch than what we saw in the course, so I’d recommend you to have a look at the documentation on Github. There’s some information about preparing your sketch for print in large formats, how to export GIFs and also how to prepare the artwork for pen plotters. The first sketch we did together was a simple grid. We had 5 rows and 5 columns. If you tried to change that number, well done for experimenting. You might have realised the grid would no longer be centered, because we were using hard-coded values. Later we saw a more flexible way of doing things. So feel free to go back to sketch 01 and improve it with what you know now, it is a good exercise.

In our second sketch we used a bit of trigonometry. I wish my Math teacher had shown me how to do creative things with trigonometry when I was at school. This is another interesting thing about creative coding, simple math goes a long way. You might find that some math concepts finally click, it certainly happened to me. In our third sketch we saw more math with Pythagoras and we also learned how to animate it. The browser is always repainting the canvas, so all we need to do is to change values over time. Again I’d recommend you to have a look at the canvas-sketch documentation and see how you could create an animated loop, by making sure your values are changing and eventually coming back to their original point. In our fourth sketch I showed you how to normalise a value, which is to change its original range to a number between 0 and 1. This is very useful and seen in all areas of programming. If one day you need to, let’s say convert a colour into an angle or the decibels of an audio sample into the height of a terrain, you know you can do that if you normalise the values. For the final sketch, I wanted to show you how to use typography in a creative way, but perhaps the most interesting thing we learned there was how to read colour values from the pixels in our canvas. We used a big letter, but nothing would stop us from using any other image. An emoji, an icon, a logo, those are all pixels and the effect would work just as fine. I’d really like to see your visuals. Don’t be afraid to experiment with everything. I gave you some pointers, but it’s really all about exploring. If we set a value to 5, try 500. Try rotating things sideways, try scaling things up, or down, try circles instead of squares, or circles on top of squares. And perhaps more importantly try mixing things, use something from sketch 02 on sketch 05 or vice-versa. Share your sketches in the forum bt clicking on the "Create your project" button above. That way we’ll all learn from each other. I will be there to answer questions and give some guidance. It has been great to share my insights and passion with you. Thank you and goodbye. ”

Partial transcription of the video

“In this final lesson, we'll do a recap of what we've seen so far and I'll add some tips to help you in your journey into creative coding. Code is a language. To use a metaphor with spoken language, is not about how many words we use. but how we put together the words that we know. We came a long way. We started from an empty file. from fundamental concepts like variables and functions. I mentioned we were going to use them everywhere and we did. The best way to learn is by example, and we saw quite a few. We also saw arrays, loops, conditionals, and random numbers. and we saw how much we co...”

This transcript is automatically generated, so it may contain mistakes.

Course summary for: Creative Coding: Making Visuals with JavaScript

• Level: Beginner
• 97% positive reviews (1209)
• 58299 students
• 6 units
• 21 lessons (2h 42m)
• 5 downloads

• Category

  3D & Animation, Web & App Design

• Areas

  JavaScript, Motion Graphics, Multimedia, Programming