Coding for
Visual LearnersArtistsDesigners

Learning JavaScript with p5.js

Learning how to code can be challenging.
It is hard to find useful resources that are relevant, practical, and engaging at the same time.

Coding for Visual Learners is a course that teaches coding from scratch in a visual and beginner-friendly way using the vastly popular programming language JavaScript.

Get the Course!
function setup(p) {
    const myCanvas = p.createCanvas(p.windowWidth, p.windowHeight);
    p.rectMode(p.CENTER);
}

function draw(p) {
    p.background(1, 75, 100);
    p.fill(237, 34, 93);
    p.noStroke();
    var diameter = 50;
  
    for (var i=0; i < p.windowWidth/diameter; i=i+1) { 
      for (var j=0; j < p.windowHeight/diameter; j=j+1) {
        p.ellipse(
          diameter/2 + i * diameter, 
          diameter/2 + j * diameter, 
          diameter * p.noise(p.frameCount/100 + j*10000 + i*10000), 
          diameter * p.noise(p.frameCount/100 + j*10000 + i*10000)
        );
      }
    }
}

export { draw, setup };

Read-only

Knowing how to code is invaluable. It has the power to uplift your career, your 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 to code than now.

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 course's emphasis 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 for you to 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 minimum viable knowledge to get you running with coding. This is the course that I wished I had available when I was learning to code 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 Processing which 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.

p5.js examplep5.js example
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:

  • IT'S EVERYWHERE
    JavaScript is everywhere. Almost all the browsers out there can execute JavaScript. It means that anyone that has a browser can run your JavaScript code.
  • VERSATILE & POWERFUL
    Apart from websites, you can use JavaScript to build desktop applications, data scrapers, data visualizations, games and animations in 3D and VR, databases, native mobile applications, etc.
  • 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.
  • 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.

    Are you ready to learn programming using JavaScript with relevant, practical and visual examples? If so, check it out onLinkedin Learning.

    Video Course
    • Audio-Visual format
    • Course Discussions and Q&A
    •  
    Built by Engin