Coding for Visual Learners

Learning JavaScript with p5.js

Learning how to code can be challenging. It is hard to find good resources that are relevant, practical and engaging at the same time. Coding for Visual Learners is a book and a course that teaches coding from scratch in a visual and beginner-friendly manner using the vastly popular programming language JavaScript.
Why this Course?
At this age and time that we live in, coding is simply invaluable. It has the power to uplift your career, your future prospects and even your intellectual capacity. Computation is driving one of the largest capital expansions in history and there has never been a better time to learn coding than now.
Computation is driving one of the largest capital expansions in history and there has never been a better time to learn coding than now.
In this course you will learn how to code in a highly engaging and visual manner using JavaScript and a programming library called p5.js.
The emphasis of the course will be primarily on learning programming using JavaScript and p5.js and secondarily in creating visuals. The main focus is to teach you how to program so that you can choose to pursue whatever field that you would like with your newly established skill set. The skills that you will acquire from this course are highly transferrable and could be used whatever you choose to build; whether web applications, programmable robots or generative art.
This means that I will provide you with enough context so that you can build a strong foundation for programming. But I also won’t hinder our momentum with irrelevant technical or theoretical points. The aim is to build a strong but a minimum viable knowledge to get you running with coding. This is the course that I wished I had available when I was learning coding myself. 
The aim is to build a strong but a minimum viable knowledge using engaging and visual examples to get you running with coding.
Who is this course for?
If you are an artist or a visual designer this course is perfect for you as you might find the examples we will be building to be directly relevant to your work. If not, this is still a great course for learning programming as the visual nature of the exercises will help you grasp the fundamentals of programming easier and let you build a strong foundation in a shorter amount of time.
What is p5.js?
p5.js is a creative coding library that is based on the idea of sketching. Just like how sketching can be thought of as a minimal approach to drawing to quickly prototype an idea, p5.js is built on the concept of writing the minimal amount of code to translate your visual, interaction or animation ideas to the screen. p5.js is a JavaScript implementation of the popular library called Processingwhich is based on the Java programming language. More info on p5.js can be found on their website.
The concise nature of p5.js makes it a very easy library to learn. But don’t let this simplicity trick you into believing that p5.js has limited capabilities. p5.js has an impressive amount of functionality, history and community behind it to make it a valuable learning investment if you ever wanted to create art, design, motion or interactive pieces using code. A p5.js program can be anywhere from a few lines of code to thousands.
You can use p5.js for practical applications such as creating data visualizations or building generative computational art pieces. At the end of this course we will be building an interactive game using p5.js! See the examples page for some of the projects.
example imageexample image
Some example visualizations built using p5.js
If you are an artist or a visual designer this course is perfect for you as you might find the examples we will be building to be directly relevant to your work. If not, this is still a great course for learning programming as the visual nature of the exercises will help you grasp the fundamentals of programming easier and let you build a strong foundation in a shorter amount of time.
Why Learn JavaScript?
There are many programming languages out there. This course will be teaching you how to code, by using the immensely popular programming language, JavaScript.
JavaScript is one of the most widely used programming languages out there as it is built into every web browser. Due to this, almost all the web pages and applications out there uses JavaScript to some degree. In recent years JavaScript started to be used not only to program user interaction in web pages but also server side - backend - applications, Internet of Things (IOT) devices or mobile apps for platforms such as Android or iPhone. Even though it has its roots in web development, JavaScript knowledge is now applicable to a vast number of other domains. JavaScript is a great language because:
Why Learn JavaScript?
  • IT'S EVERYWHERE
    JavaScript is ubiquitous. Almost every browser out there can execute JavaScript. This provides JavaScript with a great distribution platform. It means that anyone that has a browser can effortlessly run your JavaScript code. That makes sharing your work so much easier and that’s a very important factor when learning a new language.
  • VERSATILE & POWERFUL
    JavaScript has a huge ecosystem that provides it with powerful and engaging tools and libraries. Apart from websites, you can use JavaScript to build desktop applications, data scrapers, intricate data visualizations, games and animations in 3D and VR, databases, native mobile applications, etc. Its versatility is simply unmatched.
  • ACTIVE COMMUNITY
    Given the popularity of JavaScript, it is really easy to find resources and information about it if you are to ever get stuck. It has a big, vibrant community behind it. In the popular Q&A website, StackOverflow, there are over a million questions that are related to JavaScript.
The Content
This course presents various JavaScript and p5.js features and concepts in the following chapters. The knowledge is reinforced by building several examples that includes animations, visualizations and as a final project, it shows how to build an interactive game that can be deployed online and be shared with your friends! You can see a live version of some of the projects we will be building inside the examples page.
Here is a rundown of the topics covered in the course. You can try out the first few lectures online for free at Udemy!
  • 01 - Introduction Introduction to the course, JavaScript and p5.js.
  • 02 - Getting Started We will learn some very basic JavaScript commands and operations to get started with using p5.js
  • 03 - Colors in p5.js This will be a p5.js specific chapter where we learn about how colors defined and used in p5.js. This doesn't pertain to JavaScript but needs to be explored regardless to be able to use p5.js in a comfortable manner.
  • 04 - Operations and Variables We will make use of the JavaScript knowledge we acquired in the second chapter in p5.js context.
  • 05 - If - Else Statements and Comparison Operators This chapter will allow us to write programs that can respond to different conditions by using conditionals and comparison operators.
  • 06 - More p5.js Variables This will be another p5.js specific chapter where we will learn about several library specific variables.
  • 07 - Loops Here we will learn about loops which will allow us to build programs that handles enormous amount of calculation.
  • 08 - Functions Functions are the building blocks of JavaScript and we will learn more about them to build more scalable, modular and robust programs in this chapter.
  • 09 - Objects and 10 - Arrays Objects and Arrays are JavaScript data structures that will allow us to organize our code and handle complexity in more intelligent ways.
  • 11 - Events p5.js event handling will allow us to write programs that handles user interaction.
  • 12 - More on p5.js Another p5.js only chapter where we learn more about library specific features before diving into our final project.
  • 13 - Main Project We will build a game using everything we have learned up to this chapter!
Are you ready to learn programming using JavaScript with relevant, practical and visual examples? If so, here are the options: An ebook that you can read anywhere and a video course by Udemy that contains everything from the book in a video format and allows you to interact with me and other students that are taking the course.

Book

  • 2 File Formats (pdf, epub)
  • Available on Amazon and Apress
  •  
Get the Book

Video Course

  • All the content from the book
  • Audio-Visual content
  • Course Discussions and Q&A
Get the Course

Get updates about Coding for Visual Learners and future courses, books, promotions, relevant information about development and resources right to your inbox.

No spam, ever. Unsubscribe at any time.