From the course: Coding for Visual Learners: Learning JavaScript from Scratch
Join today to access over 24,400 courses taught by industry experts.
Coordinate system in p5.js - JavaScript Tutorial
From the course: Coding for Visual Learners: Learning JavaScript from Scratch
Coordinate system in p5.js
- At this point, let's take some time to explain how the coordinate system works in p5.js. To locate any point on a flat surface, we use a two access coordinate system. The vertical axis is called the Y axis and the horizontal one is the X axis. The point where these two axeses meet is called the origin. In canvas, where we draw our shapes, the origin point is at the top left of the canvas. From there below the Y value increases and to the right, the X value increase. Let's draw rectangle to the screen again. For that purpose, I will make my canvas a little bit bigger and then I will draw a rectangle inside the draw function. So I will position the rectangle or will try to position the rectangle in the middle points by providing the X value of 400, Y value of 150 and the size values of 100 and 100. So you can see that these values that I'm providing here are half of the values that I used to define my canvas. Let's…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.
