Interactive Drawing

Loading...

From the course by Rice University

An Introduction to Interactive Programming in Python (Part 1)

2059 ratings

Explore Related Videos

At Coursera, you will find the best lectures in the world. Here are some of our personalized recommendations for you

Rice University

An Introduction to Interactive Programming in Python (Part 1)

2059 ratings

Course 1 of 7 in the Specialization Fundamentals of Computing

This two-part course is designed to help students with very little or no computing background learn the basics of building simple interactive applications. Our language of choice, Python, is an easy-to learn, high-level computer language that is used in many of the computational courses offered on Coursera. To make learning Python easy, we have developed a new browser-based programming environment that makes developing interactive applications in Python simple. These applications will involve windows whose contents are graphical and respond to buttons, the keyboard and the mouse. In part 1 of this course, we will introduce the basic elements of programming (such as expressions, conditionals, and functions) and then use these elements to create simple interactive applications such as a digital stopwatch. Part 1 of this class will culminate in building a version of the classic arcade game "Pong".

From the lesson

Week 3 - Canvas, drawing, timers

Create a canvas in Python, learn how to draw on the canvas, create a digital stopwatch

Canvas and Drawing12:53

String Processing11:46

Interactive Drawing12:32

Meet the Instructors

John Greiner
Lecturer
Department of Computer Science
Stephen Wong
Lecturer
Computer Science
Scott Rixner
Professor
Computer Science
Joe Warren
Professor
Computer Science

Welcome back to class. In the first two lectures this week is me

kinda talk a little bit about how to draw on the canvas, canvas coordinates, things

like that. Scott then did a very nice example

oriented, went into a fair bit of detail about doing string processing.

Particularly he built some functions that converted decimal numbers into dollars and

cents. That's actually a very useful skill for

doing your stopwatch. What I'm going to do is I'm going to

actually just take that, Scott's method, and actually just turn it into an

interactive application. I'm going to add an input field where you

can enter a number. And then we're gonna actually print that

number out on the canvas in terms of dollars and cents.

I'm going to try to do this in one take. If I mess up I'll just keep going.

You kind of see my thought processes as I go through actually building this

application. So let's take a crack at it.

So let's build an interactive application out of Scott's code.

So the first thing you should do when you are working with anybody else's code is

just take a couple of minutes to look at over and make sure you understand what

it's doing. So here we see is Scott's brought two

functions. There is a function convert and a function

convert units. I mean the key one here is convert.

It says it converts some floating point number into xx dollars and yy cents. So

you can see down below here where he's got some test calls, he's taking this floating

point number and trying to treating the kind of the two digits to the right of the

decimal point as being cents and then the whole part corresponds to dollars.

So let's just run it to make sure it works and it looks like it's working here.

So notice it takes its floating point number and converts it into a string.

So let's go through and just start filling out interactive application.

Now what would that application look like? What I want to do is I want to open a

frame up, and in that frame I want to draw on the canvas this xx dollars and yy

cents. Where do I get the number from?

I'm going to add an input field that lets me enter that decimal number, and then

I'll automatically draw that number over on the canvas as a dollar and cent form.

So, let's just see if we can do that. So the first thing is, I'm going to get a

little working space here. So let's go through and kill the test code

off. We'll do our own testing a little bit

later on. And the second thing is, Scott has his

functions here. Let's use the feature called code folding.

I'm gonna click right outside statement two, and it's going to fold up the body of

convert units. I'm going to click here outside nine.

It's going to fold up the body on convert. So now we can start writing our own code.

So what I'd like to do, is I'd like to kind of enter in some comments first to

kind of guide me in terms of what I want to do and then I fill in the rest of the

code kind of a little bit at a time. So the first thing is what is this going

to be. This is going to be an interactive

application to convert a float into dollars and cents.

Alright how can we do that? Well, we have our two helper functions

here. Now, for our application, we're going to

need, After helper functions, we're going to

need to do define, I guess, a draw handler.

We'll certainly need that. We're also going to need to define an

input field handler. We're going to need to create a frame.

We're going to need to register, the event handlers.

The filing we're going to do is we're going to need to start the frame.

So lets do the things we kinda know how to do very easily first.

Let's go ahead and create the frame and start it.

So we'll say frame is equal to simplegui.create<u>frame().</u>

We'll call it, let's call it converter. And lets say the width, let's make the

width 300 by 200. Then what do we need to do?

Let's start the frame up to make sure everything's okay.

So lets say frame.start(). And lets just run that real quick to make

sure I didn't make any silly mistakes. So looks like I did,

Saying simplegui is not defined. That's a classic mistake.

What do I need to do? Need to go up here and say import

simplegui.. So why don't I test it very quickly.

It's always a good idea to make sure the code you have is working and not far from

a working version. So if it stops working you know exactly

where you introduce the error. Alright, let's test it again.

Another silly mistake. Let's test it again.

Alright, a little bit better. Got our frame open.

Lets see, it's 300 pixels by 200 pixels, that's good.

Alright, let's consider what do we need to do next.

Lets see if we can get something drawing in the, on the canvas.

We're not going to do the input field just less.

So let's, let's just try to just draw something onto canvas, make sure that's

working. And then we'll kind of build the rest of

the program. So lets see.

So let's go back, and lets define the draw handle.

We'll call it, draw. And lets see, it takes a canvas.

And what do we want to draw? Well, I love to say hello.

So lets say, draw text, and we'll draw hello.

And let's put it in, what the heck, 100, 100 and make the font size 24, make the

color white. And then what do you need to do, well, we

need to register the draw handler, so we can down here, say

frame.set<u>draw<u>handler(). Give a draw.</u></u>

So I'll just run that. See if I did a good job getting it up.

So looks good. We have hello being drawn in the middle of

our canvas. So what next?

Well, we could do one of two things I guess.

We could I guess we could add an input field here and start trying to read in a

number and then print that number. But let's, let's just break that into two

steps. Let's go a little simpler.

Let's define a kind of constant value. We want to draw in the middle of the

canvas. And get that working with Scott's code.

And the last thing we'll do is add an end into the input field that actually

modifies that value. So I'm going to break that task into

simpler tasks. So I'm going to go through and define a

global value. Let's just say value and we'll say it's, I

don't know, $3.12 and let's go through and get that drawing inside the draw handler,

so how could I do that? I could take value,

Turn that into a string. And I think I would get 3.12 drawn on the

canvas. Let's try that, and see what happens.

Good, good, good, okay. So, values a number.

I stored it in the global variable and now I've actually converted a string and drawn

it on a canvas. Now there is a reason I made it a global

variable. Just wasn't because I wanted to make

everything become variable because I'm going to use that global variable now

inside the input handler. And I'm going to actually essentially

convert whatever I read into the value for that global variable.

So let's go through now and actually go through and do kind of the next step.

Let's go ahead and put the input. Go ahead and put in the thing that

actually recognizes the, the number we want draw.

So let's say. Define input<u>handler What's it take, it's,</u>

it's given some text. What do we need to do? We want to take

that text and we want to convert it onto a floating point number that we can then

draw out on the canvas. So we can say, maybe value = float(text).

So, if we give something that looks like a floating point numbers, flow will convert

floating point number and this is one thing we need to do here, because float is

a global variable. We need to say global value because we're

going to actually assign to and try to change it.

Hm, oh yeah, one more thing, we need to actually go through register that handle.

So since that frame.add<u>input oh, you know what, let's just go in the docs and see</u>

what parameters it takes. I always mess this up.

So let's be a little proactive here and go.

So here we are. Control objects, edit input field.

What does it want? It wants a label, it wants the input

handler and it wants a width, I think I can do that.

So let's go down here, what's the label? Let's say enter value, the handler's going

to be input, handler the width, let's make it 100.

Check our code over real quick. I think that's good.

Let's try that and see what happens. What did I mess up here?

Says, Define input handler oh, what did I do?

I said, Define. Now usually I make my classical mistake of

forgetting this colon here. But I'll tell you my trick about how I

always remember the colon. I had a colonoscopy a year ago.

And I can guarantee you that after you have a colonoscopy you will never forget

the colon. So if you think that was corny just

remember that joke and you'll remember the colon too.

Alright, lets go back and finish this off here.

So I'm going to run this. Okay looking good, hold your breath.

Let's type in a value. Let's type in 1.11 and enter excellent.

Let's try it a couple more maybe 0.01 enter.

Okay. We're actually getting very close here.

Because now we just need to rely on Scott. Let's go up here and look.

I have a value. I think it's in, ways, it's in the form

that Scott expects. I just convert it into a string.

But Scott has this very nice function that kind of converts it into dollars and

cents. So let's just crank it out and see what it

does. So let's say, convert.

We're going to run it. And actually surprisingly successful.

We see three dollars and twelve something kind of, kind of ran off the canvas.

So, what we're going to do is kind of pretty this up and do more testing to make

sure it works. So lets go ahead and get it prettied up

and then we'll do a few more test cases to make sure things are working correctly.

So lets go through and probably what we're going to do is we're going to need to

increase the size of the canvas. Let's make it 400.

And lets also maybe move things over to the right a little bit.

Maybe 60. I like, I thought it was a little too

high, let's move it down, so let's just adjust a few of those numbers and see what

we get. Oh, look at that, $3.12 right on the dot.

So I like the way that's laid out. So let's just do a few more tests to make

sure everything is fine. So let's go through and just put in say I

don't know, put in 0.10. Oh. What am I doing?

I don't need to change that do I? No, no, no, no, no, no. What's the whole

point? How do I test it?

Well, let's go and just run the program. Okay.

Let's go down here. How can we change it?

Don't change a constant there. We can change it in here.

We can say 0.10. Ten cents, looks good.

Let's do 10.32. Looks good.

Let's do 7.00. We're just testing Scott's out more.

So here's what you can see. You've kind of seen kind of an overview of

how I built this application here. And its it's not too hard.

The critical thing is to be patient, be systematic, test as you go.

If you screw up, just stop, think for a second.

Back up to where it was working. Go over the steps that you just did.

There's probably an error where you just in, you introduced something that made the

program not work. It's not really not that hard to get this

going. And this is really almost what you're

going to be doing in your stopwatch projects.

So I'll see you back in a little bit. And I'll give you a little more, a little

more of a walk through about doing stopwatch.

But I think this is kind of enough to get you going fairly well on doing the mini

project. See you in a bit.

Explore our Catalog

Join for free and get personalized recommendations, updates and offers.

Coursera provides universal access to the world’s best education, partnering with top universities and organizations to offer courses online.

© 2019 Coursera Inc. All rights reserved.

Download on the App Store

Get it on Google Play