1.3: Basics of drawing - p5.js Tutorial

Summary

This introductory video covers the basics of using p5.js for beginners, focusing on the coordinate system and shapes. The speaker explains how to draw on a canvas through programming by using functions like 'rect()' to create shapes. They break down the importance of syntax, arguments, and how to place shapes on the canvas using x and y coordinates. Additionally, the video touches on key functions such as 'setup()' and 'draw()', which manage how and when code is executed. The speaker encourages experimentation with various shapes and highlights how programming is more than just drawing.

Takeaways

• 😀 This video is an introductory tutorial aimed at beginners with no prior programming knowledge.
• 🎨 The video focuses on the basics of p5.js, specifically the coordinate system and how to draw shapes.
• 🖌 Drawing is introduced as an accessible entry point into programming, especially for those with a visual inclination.
• 🌐 Programming is described as the process of giving instructions to a computer, often through functions.
• 📐 The concept of 'arguments' in functions is introduced, which are necessary to define the specifics of a command.
• 🔢 The importance of syntax in programming is emphasized, as even small errors like missing commas can cause issues.
• 📊 The Cartesian coordinate system is explained, with a focus on how it applies to computer graphics, particularly in p5.js.
• 📝 The video demonstrates how to use the 'rect()' function to draw rectangles on a canvas, including specifying positions and dimensions.
• 🔄 The process of trial and error in programming is encouraged as a way to learn and understand how different functions work.
• 🔍 The p5.js website is highlighted as a valuable resource for learning more about different functions and their syntax.
• 🔁 The video concludes with a brief mention of the 'setup()' and 'draw()' functions, which will be explored in more depth in future tutorials.

Q & A

What is the main topic of this introductory programming video?

The main topic of this introductory programming video is the coordinate system and shapes in the context of p5.js, which is a JavaScript library for creating graphics and interactive experiences.

Why does the video emphasize the importance of drawing in learning programming?

Drawing is emphasized as a starting point in learning programming because it provides a visual and interactive way to understand basic programming concepts, especially for those who are visual designers or have an interest in visual arts.

What is the significance of the 'rect()' function in the context of this video?

The 'rect()' function is significant because it is used to demonstrate how to draw a rectangle on the canvas, which is a fundamental operation in graphics programming with p5.js.

How does the video explain the concept of arguments in functions?

The video explains the concept of arguments by showing how they are used in the 'rect()' function to specify the position and size of a rectangle on the canvas, highlighting that arguments are essential for giving precise instructions to the computer.

What is the role of syntax in programming as discussed in the video?

Syntax plays a crucial role in programming as it defines the structure of statements in a way that the computer can understand. The video emphasizes that even small mistakes in syntax, like missing commas or parentheses, can lead to errors.

How does the video introduce the Cartesian coordinate system in relation to programming?

The video introduces the Cartesian coordinate system by comparing it to a graph in a geometry class, explaining that points on the canvas are defined by x and y coordinates, with the origin (0,0) typically at the top left corner of the canvas.

What is the purpose of the 'createCanvas' function mentioned in the video?

The 'createCanvas' function is used to set up the drawing area, or canvas, where the programming will take place. It is called within the 'setup()' function to define the size of the canvas.

Why does the video suggest looking at the p5.js website for more information?

The video suggests looking at the p5.js website for more information because it provides a comprehensive reference for all the functions and their expected arguments, which is essential for learning how to use the library effectively.

What are the two primary functions where code is placed in a p5.js sketch according to the video?

The two primary functions where code is placed in a p5.js sketch are 'setup()' and 'draw()'. The 'setup()' function is used for one-time setup like creating the canvas, and the 'draw()' function is used for the code that runs repeatedly, such as drawing shapes.

How does the video encourage learners to explore different shapes in p5.js?

The video encourages learners to explore different shapes in p5.js by suggesting they try out various functions like 'ellipse', 'line', 'arc', and others, and by directing them to the p5.js website's reference section to understand the syntax and arguments for each shape.

Outlines

00:00

💻 Introduction to Programming with p5.js

The video begins by addressing beginners in programming, introducing p5.js as a tool for learning. The focus is on the coordinate system and shapes, which are foundational for those interested in graphic design or visual arts. The instructor emphasizes that while drawing is just a small part of programming, it serves as an accessible entry point, especially for visual learners. The video promises to cover a range of topics beyond drawing, including text, data, and interactive elements. The importance of understanding functions in JavaScript is highlighted, with 'rect()' being the first function introduced to draw a rectangle on the canvas. The concept of arguments within functions is explained, and the necessity of syntax adherence in programming is discussed.

05:00

📏 Understanding the Coordinate System in Graphics

This section delves into the Cartesian coordinate system, explaining how points are defined by x and y values. The instructor contrasts the mathematical coordinate system with its application in computer graphics, where the origin (0,0) is at the top-left corner of the canvas. The video demonstrates how to draw a rectangle on the canvas using the 'rect()' function, emphasizing the need for specifying arguments such as x and y coordinates, width, and height. The process of trial and error in finding the correct coordinates is encouraged as a learning method. The instructor also mentions the possibility of exploring other shapes beyond rectangles, hinting at the variety of functions available in p5.js for drawing different forms.

10:04

🎨 Exploring Various Shapes and Functions in p5.js

The final paragraph expands on the variety of shapes that can be drawn using p5.js, such as ellipses, lines, arcs, and points. The instructor suggests that understanding the arguments required for each shape's function is not about memorization but rather about referencing the p5.js documentation. The video then transitions to a live demonstration on the p5.js website, showing how to access the reference materials and experiment with different functions. The importance of 'setup()' and 'draw()' functions is introduced, explaining that 'setup()' is used for initializing the canvas and 'draw()' is for the ongoing drawing actions. The instructor concludes by encouraging viewers to explore and experiment with the functions on their own, promising further explanations in future videos.

Keywords

💡p5.js

p5.js is a JavaScript library that simplifies the process of creating graphics and interactive experiences in web browsers. It is inspired by the Processing language and is particularly suited for artists, designers, educators, and beginners interested in programming. The video script introduces p5.js as a tool for beginners to start learning programming through creating visual content. It's used as the foundation for discussing coordinate systems and drawing shapes, which are fundamental concepts in programming graphics.

💡coordinate system

A coordinate system is a grid used to specify the position of points or objects in a plane or space. In the context of the video, the Cartesian coordinate system is introduced to help understand how positions on the canvas are determined. The video explains that the top left corner of the canvas is the origin (0,0), with the x-axis increasing to the right and the y-axis increasing downwards. This system is crucial for placing and manipulating graphical elements within the p5.js environment.

💡canvas

In web development, a canvas is an area on a web page designed for graphics rendering via scripting (usually JavaScript). The video script uses the term 'canvas' to refer to the virtual space where drawings and graphics are made using p5.js. It's where users can draw shapes, animations, and games. The script mentions creating a canvas with specific dimensions using the 'createCanvas' function in p5.js.

💡function

In programming, a function is a block of code designed to perform a particular task. The video emphasizes the importance of functions in JavaScript, particularly in the context of p5.js. Functions like 'rect()' for drawing rectangles or 'createCanvas()' for setting up the drawing area are introduced. The script explains how to use these functions by providing the correct syntax and arguments to make things happen on the canvas.

💡arguments

Arguments in programming are the inputs provided to a function to perform a specific task. The video script discusses how arguments are used in functions like 'rect()' to determine the position and size of a rectangle on the canvas. It highlights the need for correct syntax when specifying arguments, such as using commas to separate numerical values and enclosing them in parentheses.

💡syntax

Syntax refers to the set of rules that define the structure of a programming language. The video script stresses the importance of syntax in programming, especially when using p5.js functions. It illustrates how even small errors like missing commas or parentheses can lead to syntax errors and prevent the code from running correctly.

💡rect()

The 'rect()' function in p5.js is used to draw rectangles on the canvas. The video script provides an example of how to use this function by specifying arguments for the x and y coordinates, width, and height. It demonstrates how these arguments determine the position and size of the rectangle drawn on the canvas.

💡setup()

The 'setup()' function in p5.js is used to set up the environment for your sketch, including creating the canvas. The video script mentions 'setup()' as a place where initial setup tasks, such as defining the size of the canvas with 'createCanvas()', are performed. It's a crucial part of the p5.js programming model, running once when the program starts.

💡draw()

The 'draw()' function in p5.js is used for drawing continuously updated content on the canvas. While the video script does not go into detail about 'draw()', it mentions that it is where the drawing code lives, and it runs repeatedly after 'setup()'. This function is key for creating animations or responding to user interactions in p5.js sketches.

💡play button

The 'play button' mentioned in the video script refers to the button used to execute or run the JavaScript code within the p5.js environment. It's a metaphor for launching the application that the user has written, which in turn creates a canvas and draws the specified shapes according to the code. The script uses this term to demystify the process of running code and to encourage a more approachable mindset towards programming.

💡reference

In the context of the video, a reference is a resource that lists all the possible functions and their required arguments in p5.js. The script encourages viewers to use the p5.js reference to look up functions like 'line', 'ellipse', and 'rect' to understand their syntax and arguments. This reference is a valuable tool for learning and using p5.js effectively.

Highlights

Introduction to p5.js for beginners in programming.

Focus on the coordinate system and shapes in p5.js.

Drawing as an introductory aspect of programming.

Importance of functions in JavaScript, particularly 'rect()'.

Explanation of arguments and their syntax in functions.

The necessity of syntax adherence in programming.

Describing the Cartesian plane and its relevance to programming.

Difference between traditional Cartesian plane and computer graphics coordinate system.

How to specify the position and size of a rectangle in p5.js.

The concept of trial and error in learning to program.

Demonstration of drawing a rectangle with specified coordinates and dimensions.

Introduction to other shapes in p5.js such as ellipse, line, and arc.

The role of the 'setup()' and 'draw()' functions in p5.js.

Guidance on using the p5.js reference for learning different functions.

Encouragement for self-exploration of p5.js shapes and functions.

The importance of understanding where to place code within 'setup()' and 'draw()' functions.

Conclusion and a call to action for viewers to try designing something in p5.js.

Transcripts

Hello, so this video is an introductory video,

this is a beginner video,

for those of you who haven't learned anything about programming before.

We're going to look at p5.js,

I've discussed what p5.js is in the previous video.

In this video, the only topic here, and this is hopefully a pretty easy one,

is coordinate system and shapes.

What does that mean?

So one of the first things that I would like to show you

in learning to program is drawing.

So there is a lot more to programming than drawing,

in fact this is a tiny piece!

If what you're interested in is programming games

or animations are lot of that is graphics and drawings.

But in things of what you can do on the web, having different things

talk to each other, interacting with the user,

analyzing data, all sorts of tools

to do good in the world, there's lots more that you can

do besides drawing.

But drawing is a nice place to start!

It's not for everybody, but if you are a visual designer,

or like to draw or like to do things visually

it can be a useful, easy way to start learning

the basics of programming.

So hopefully later I'm gonna do a lot more videos that just look at the text,

the data, that have a little bit less to do with drawing,

for those of you who might be interested in that.

Ok, so in order to draw,

we need a canvas.

So this is the canvas.

Now if I want to draw something on the canvas,

that canvas on this board, I will take this pen

and I will just do this ... there, I drew something!

Now, programming is the act of giving instructions to

the computer to follow.

So whereas I just kinda did some sort of mojo

in the moment thing with my mind to draw

that rectangle, if we, you want

that rectangle to appear on the screen, you need to write the instructions for that.

So, the instruction that you need to learn to give it as a command

really what it is, is a function.

I can't say the word 'function' enough

because function, this idea of a function is completely

fundamental to the way everything works in Javascript!

So this is kind of our first view of a function,

there is a function called 'rect()'

So if we think of this as a command you say: rect!

the rectangle would appear there in the window/canvas!

However it will not because I need to say where

it should go and how big it should be.

So how do we tell the computer

how to draw that rectangle?

So the way that happens is through the use

of something called 'arguments'.

So when I issue this command: rect()!,

draw a rectangle!,

I also have to specify some arguments,

and the arguments to that rectangle,

they come in the form of numbers,

and are separated by commas,

and enclosed in parentheses,

with the line being ended by a semicolon.

So this is a moment, that we just have to admit something

to ourselves, which is that syntax is a thing that you have

to deal with in programming.

So with the human language that we speak to each other,

in my case it is English,

and some broken, bad versions of some other languages,

we can say things very informally: 'draw a rectangle!',

'would you please draw a rectangle?',

'kindly, my friend over there, would you make a rectangle

happen on the screen by moving your pen around?',

there are all sorts of different ways we can say that.

But here I have to say it in a very specific way.

If I'm missing a comma, or parentheses, it is not going to work!

We'll get an error message,

I'll show you what happens when you get that error message

and how to fix it,

but this is something that is important, that you're gonna have to start

getting comfortable with, I don't know if I'm ever

getting comfortable with it, but it's something that exists!

So that's the syntax. What goes in these blank spots?

So here are the things that go there:

an x-location, a y-location, a width and a height.

So this brings up a key point!

What do I mean by that? x-location, y-location?

For some of you that might be the most obvious thing,

especially if you have done stuff with computer graphics before,

but for some of you it might be quite new.

So what I would like to do, very briefly, is take a look

at a different context.

This sort of middle school, high school geometry class context.

So this is a graph, of a Cartesian plane,

named for René Descartes, the mathematician.

This is what's known as the x-axis,

this is what's known as the y-axis.

And if I've got a point over here I could describe that point

in terms of an x and a y.

What is that point's x and y?

Well, I can tell you that the center right here is the point 0,0.

That gives us a clue!

The x-axis moves this way positively

and this way negatively.

So, 1, 2, 3 ...

so the x-location of this point here is the number 3.

And now we can say: 1, 2, 3, 4 ... y moves upwards positively

the y-location of that point is 4.

so this point has an x-value of 3, a y-value of 4.

Now let's get this canvas again.

This is our canvas, the thing we're going to drawn on,

[ramble]

This canvas .. How does this map to this canvas?

Well, the thing is computer graphics doesn't work this way.

There is a similar idea, there's an x-axis and a y-axis,

but 0,0 - at least for what we're doing right now, this will change later -

is not in the center!

The top lefthand corner of our graphics window, our canvas,

is defined as 0,0 ...

and x moves positively in this direction,

y moves positively in this direction.

So this is the x-axis

and this is the y-axis.

Now, the other thing that's sort of key here is

I use these small numbers, zoomed in, kinda counting,

that's kind of not relevant for the creative programming things

that I'm gonna show you on this canvas here.

Because typically speaking I'm gonna say: open a canvas that has a width

of 640 and maybe a height of 360.

So we're going to open a large window with a lot of pixels, millions of pixels!

We could just kind of guesstimate here for now, but if I said:

Oh, an x-value of 100,

where's 100 gonna be?

I don't know ... maybe over here somewhere

Maybe I say a y-location of 200,

it's like down here somewhere.

If I say width of 75 and a height of 150,

I end up seeing a rectangle like this.

But not drawn to scale ...

So the reason why I am doing this in a totally messy 'I am getting it

all wrong' kind of way, is I think it's a nice way to figure this out,

just through trial and error.

the key is the syntax, I need to know: what is my function name?

What is the command I am issuing?

Rectangle, rect(),

What are the arguments it expects?

An x-location, a y-location, a width and a height.

Formulate the syntax, and get it in the window!

Now look at this, let's actually just make that happen ...

So I'm gonna say: my canvas is 640 by 360,

you can see I specified there the size of the canvas,

and now the rectangle is ... I said something like

100, 200, and then 75, 150 ...

So you can see now I entered those in, as the arguments,

rect, 100, 200, 75, 150

So now, moment of truth, let's hit this button up here,

this button, by the way, this green button right here

this is what it's known as the 'play button',

it's kind of an absurd thing, to have a play button,

like we're playing our code, really what we're doing is executing

an application, we're launching the software we've written here,

this exciting piece of software that makes a canvas

and draws a rectangle, but it's nice to have

this model of thinking of it as a media player.

So the next thing I'm gonna do is I'm gonna press this button

and we're gonna see ... here we go.

So you can see now that this is what the canvas actually looks like.

It is 640 pixels wide, it's 360 pixels high,

and the rectangle is at 100 on the x-axis,

and 200 pixels down, 75 across, and 150 down.

So you can see how that works.

You can see here that I, this was kind of incorrect, my guesstimation,

but over here now, I can say: ah, that's not really what I wanted.

I didn't want the rectangle

to go so far to the bottom,

so I'm gonna change it from 150 to 125, and let's stop,

and then play it again,

and you can see, there it is!

There's my rectangle at a different location.

So this is actually kind of it, for this first stage!

But there's a couple of more pieces here ...

One is, there are more shapes in life than a rectangle!

Some that you might look at, just now, if you're beginning to learn, are:

'ellipse' (a way of drawing a circle but you can also draw this or this),

you might look at 'line',

you might look at 'arc' (that's kind of a tricky one),

ah, these are pretty good, you might look at 'point'.

There are a whole bunch of these,

and they all expect some amount of arguments,

and you could guess, well, a rectangle needed an

x, y, and a width and a height, maybe an ellipse also needs

x, y, and a width and a height?

And to draw a line, well, what could a line mean?

ok, well, a line is a thing ... a line, a bunch of pixels

that connect two points.

How could I say: draw a line?

Oh, what if I give the x, y of one point and the x,y of another point?

That would tell you how to draw a line.

So you could guess all this

but the point of doing this is not to guess or memorize,

there is a reference that will list you, what are all

the possible functions and what are the arguments they expect?

So if I come over here, the thing that I would like to show you,

is I'm going to go now to

the p5.js website and this is kind of where you should start,

oh, look at that beautiful animation,

you should start by looking at, well, there are a lot of places

you could start, you might need to download the editor,

which I think I showed in the previous video ... maybe I didn't ... ?

There are some tutorials here, there's more under 'Learn' and 'Start'

but what I want to look at right now is 'Reference'.

So I'm gonna click 'Reference' and ...

I would like to look at is ...

'shape'!

So I think this is a good place for you to start.

If you're looking for an assignment

or an exercise to do at the end of this video:

look at all these functions, arc, ellipse, line, point, quad, rect, triangle

and this is in fact what I love about working in Javascript

let's look at the line function

you can see here: look, that's it, this is an example for how you draw a line,

but I can just play around with this right here ...

and see does that change it?

So you can see here, but this is what it's important, this is what matters to you:

this is the syntax: 'line' expects 4 arguments, you can call them parameters,

x1, y1, x2, y2.

That's connecting, a line is connecting 2 points.

The parameters are here, here they are defined.

So this is what you have to get used to doing:

you see the basics, I can open up a project in the editor,

I can type code in there, I know I need to know about syntax,

now I have a sense of the coordinate system,

but you need to get used to all these different shapes.

What are the shapes that you can draw?

And how do you do that?

So what I would say, on your own, I can get through all of these,

but I think it's much more useful to do it on your own,

to try all these, to play with them even just in the p5.js website itself.

There is a last piece, before I end this video, that I want to talk about,

and we need to come back here.

I kind of just glossed over this 'createCanvas' thing

and I also really haven't mentioned what is this function setup()

and this function draw()?

So these are gonna become much more clear in the future times,

in the next, in a future video

we'll spend a lot of time looking at setup() and draw(),

but the deal is, I said that functions are

absolutely fundamental to the way that Javascript works!

Everything boils down to a function.

And the first functions that you are going to learn to write ...

... looks like this.

So your code has to live somewhere.

It has to live ultimately, there is more to it than this, now let's think

of this statement: 'your code has to live inside a function!'

Right now there are only 2 places, 2 functions to put your code ...

there is the setup() function and the draw() function.

The setup() function, which you say: function setup()

and we're gonna get to what these parentheses are,

the curly brackets define the beginning and the end

of that function.

The setup() function is where you do the things you do right when

the programs starts!

Like: 'createCanvas(__)'

To setup your canvas, to setup your p5 sketch,

you need to create a canvas in the setup() function.

Then you want to draw stuff to that canvas.

Where do you all your drawing stuff?

Inside this drawing function!

So there is more to it, we're gonna need to make things animate,

we're gonna need to do something when someone clicks the mouse,

and how we handle different events,

and how the program flows over time.

I'll get into this more and more in a future video.

And we can look back here and see: there it is!

setup() has a createCanvas()

and draw() has rect().

Try to make a design of something interesting for yourself,

and hopefully this video was somewhat useful.

Ok, I'm gonna stop now!

[ramble]