Learn Coding
Visually

Learn to code from scratch and create beautiful visuals, animations, and games using JavaScript - in an easy and beginner-friendly way!

Create Visualizations

Build Games

Design Motion Graphics

5 Hours of content

Over 20,000 Views

Rated 4.7 on Linkedin

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 teaches you how to code in a highly engaging and visual way using JavaScript and a programming library called p5.js.

Reviews

This was a great introduction to coding language. I don't have a computer science background and found this easy to follow.
- Crystabella H.
This course is very easy to understand. For a beginner, I feel I've gained a lot of valuable knowledge. Thank you.
- Pako
I liked that the last chapter -- building a game -- was obviously done on the fly, so that you could see the common errors that arise and how to correct them.
- Dominic O.
This is a mega amazing learning course me I looking forward to learn more and do well in it
- Sanchit C.
I have tried learning how to code from other sources before but they were either too boring or too hard for a beginner. This course is perfect for someone who is just starting with programming. The examples are visual and fun. Not a 'let's build a calculator' kind of a course.
- Memo A.
This is a great starting point for a beginner. Explains everything from scratch. Examples are fun and easy to understand.
- Sam P.

Featured In

Why Learn JavaScript?

There are many programming languages out there. This course will teach you how to code using JavaScript.

JavaScript is one of the most widely used programming languages, as it is built into every web browser. Almost all web pages and applications use JavaScript to some degree. JavaScript is used for user interaction in web pages, server-side applications, Internet of Things (IoT) devices, or mobile apps for platforms such as Android or iPhone. You can practice programming in a lot of areas once you learn JavaScript.

  • It's Everywhere
    JavaScript is everywhere. Almost all the browsers out there can execute JavaScript. It is one of the most used programming languages in the world.
  • Flexible & 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.
  • What is p5.js?

    p5.js is a creative coding library that is based on the idea of sketching. Just like sketching can be thought of as a minimal approach to drawing to prototype an idea quickly, p5.js is built for writing a minimal amount of code to translate your visual, interaction or animation ideas to the screen.

    The concise nature of p5.js makes it a very approachable technology. But don't let the simplicity of p5.js trick you into believing it has limited capabilities. 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 build an interactive game using p5.js! Click to check out and play the game you will learn to build!

    
    const FG_COLOR = "#ff1c81"; // pink
    
    function setup(p) {
        p.createCanvas(p.windowWidth, p.windowHeight);
        p.background('#004b64');
        p.noLoop();
        p.stroke(255);
        p.strokeWeight(2);
        p.angleMode(p.DEGREES);
    }
    
    function draw(p) {
        p.translate(p.width / 2, p.height / 2);
        p.rotate(45 / 2);
        branchComponent(p, 45, 4, 60);
    }
    
    function branch(p, len, angle, gen) {
        p.line(0, 0, 0, -len);
        p.translate(0, -len);
        len *= 0.7;
        angle = p.random(angle - 30, angle + 20);
    
        if (len > 2) {
            p.push();
            p.rotate(angle);
            branch(p, len, angle, gen);
            p.pop();
    
            p.push();
            p.rotate(-angle);
            branch(p, len, angle, gen);
            p.pop();
        }
    }
    
    function windowResized(p) {
        resizeCanvas(p.windowWidth, p.windowHeight);
    }
    
    function branchComponent(p, len, amount, angle) {
        p.stroke(FG_COLOR);
        const increment = 360 / amount;
        let rotAmount;
    
        for (let i = 0; i < amount; i++) {
            p.push();
            rotAmount = -180 + increment * i;
            p.rotate(p.random(rotAmount - 60, rotAmount));
            branch(p, len, angle, 1);
            p.pop();
        }
    }
    
    export {draw, setup};
    
    
    Read-only
    An example graphic built using p5.js

    About the Author

    Hi there! 👋 My name isEngin Arslan. I am a self-taught software developer based in Zürich 🇨🇭. Before becoming a developer, I worked as a visual effects artist/technical director onfilms and TV shows. I received anEmmy Nominationand won aCanadian Screen Awardfor my Visual Effects work. During my time in VFX, I fell in love with programming. As a result, I have taught myself web development and ended up changing careers.

    Currently, I am working as a front-end engineer. I am also an author for a couple of online courses and books, such asAwesome Coding.I was a professor atSeneca Collegein Toronto for 5 years, teaching programming to complete beginners. I have decided to create Coding for Visual Learners since there aren't too many sources out there that teach programming in a practical and engaging way.

    Frequently Asked Questions

    What do I need to know before taking this course?
    No prior knowledge of programming is necessary to take this course! All concepts will be explained from the ground up, starting with the basics.
    What programming language will I learn?
    The course will teach you JavaScript (one of the most popular programming languages in the world!) alongside a programming library called p5.js.
    What skills will I learn?
    You will learn programming fundamentals, such as variables, conditionals, data types, loops, and more. You will also learn how to work programmatically with computer graphics.
    What kind of projects will I build?
    You will be creating visuals, and animations and even build a game from scratch at the end of the course! You can check out some sample course projectshere.

    Questions or Feedback?

    Feel free to reach out to me atcodingforvisuallearners@gmail.comif you have any questions or feedback.