Core: Colors

Loading...

来自 University of California San Diego 的课程

面向对象 Java 程序设计

3213 个评分

Explore Related Videos

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

University of California San Diego

面向对象 Java 程序设计

3213 个评分

课程 3（共 4 门，Specialization Object Oriented Programming in Java）

你是否曾想过大型软件项目诸如Google搜索引擎是如何开发的？本课程将帮助你超越平凡编程，去学习设计和开发更加复杂的Java软件项目（尽管还没到Google搜索引擎那种级别！）我们会探索如何将一个大的项目分解为层次结构的类，以及如何通过现有的库来增强项目的功能。我们也会探究一些搜索和排序的核心算法。在学习过程中，你将要开发一个令人兴奋的有着图形用户界面（GUI）的交互式应用程序。我们期待本课能启发你去创造。你即将进入课程项目，每节课所涉及的原理概念都设计成可直接应用于项目功能拓展。视频课程同时包括核心课程内容和现实中的软件工程师的来信和故事，与正在学习本课的真实学生之间的对话，以及一些你遇到困惑时可去观看的补充视频。（本课程若发现字幕错误请发送邮件到caesarguangli@hotmail.com，谢谢！）

从本节课中

Graphical output: Creating GUIs and Displaying Data

Now that you have the tools to write and trace object oriented code, let’s get back to developing the project! In this first (real) part of the project, you will create an interactive graphical map that will display geospatial data. This is a highly interactive week, so make sure you’ve got Eclipse loaded up! We encourage you to play around as you watch the videos. Some of the code that we use in the videos is in the demos package in the starter code you set up for this course. Open it up and experiment with it while you're watching the videos. We also encourage you to dive right into the programming project, even before watching the videos, if you want. The programming assignment instructions are in the last lesson of this week - you can watch a video walkthrough of the instructions and also read the step-by-step directions in the accompanying reading. There’s lots of room for creativity, too, so have fun!

Core: Graphical User Interfaces4:36

Core: Using PApplet11:19

When I struggled: GUIs0:27

Core: Resizing Images5:36

Core: Colors8:23

When I Struggled: Documentation1:07

Support: Setting up a Canvas7:17

Support: Drawing Happy Face7:53

Support: Loading and Displaying Images6:02

与讲师见面

Mia Minnes
Assistant Teaching Professor
Computer Science and Engineering
Leo Porter
Assistant Teaching Professor
Computer Science and Engineering
Christine Alvarado
Associate Teaching Professor
Computer Science and Engineering

[MUSIC]

We are almost done so remember what we've done up until now.

We are working towards building an application that has a background image of

the beach, and then has a visual clock that is represented by a second sun.

And at this point we've defined the setup method of our class

MyPApplet that customizes the PApplet class provided by processing.

And then we've started working on the draw method.

And our draw method so far has brought in and

displayed the background image but we're still missing the sun.

So let's think back to where we want the sun to be.

And think about where that location is in that grid of coordinates that we have for

specifying positions on our canvass.

And so we want the sun to be somewhere in the top left of our picture.

And before talked about how that's roughly about 50, x equals 50, y equals 50.

Which is about a quarter of the way across and maybe a quarter of the way down.

And maybe we wanna tweak it so it's a little bit higher up.

And so we want maybe a fifth of the way down.

And so what we wanna think about is how to specify the location

of the center of the sun in this x and y space.

And we're going to do it dynamically so that the sun stays in that top left corner

and visible, even as the user of our application might resize the window.

And so we're not going to use fixed numbers like 50 pixels across or

50 pixels down, we're going to use relative coordinates

relative to those variables, width or height of the canvas.

All right, so let's think about where we might want to put it, and

about a quarter of the way across and

a fifth of the way down seems like about right position for the sun.

So now we need to go ahead and place sun there.

And we use a library method ellipse to draw an ellipse

in the locations x and y so the coordinates of

the center of the ellipse are the first two parameters of the method.

But then we have two other parameters as well.

And, so the second two parameters are the actual width of the ellipse and

the height of the ellipse.

So if those two parameters happen to be equal, then we're going to get a circle.

And if those type of parameters are unequal,

then we'll get an ellipse that's maybe flatter or longer.

Okay, and so a thought question, something to keep in mind.

With this particular method, will what we're drawing always be a true circle,

or can you think of a situation where what we've specified over here

will actually look like a flattened ellipse or a tall ellipse?

All right so that's something to keep in mind.

But let's keep going with our example, with our application.

And if we run the code as it is right now,

we see we get our circle in the top left corner.

But it's what?

Okay and so, here is where we get to the dynamic part that we want to change as

this application runs.

And what we'd like to change is the color of the sun.

So now we're getting to the nitty gritty of how we want the color to change,

now that we've displayed the shapes.

Okay, so let's think about how we're going to specify the sun.

And this is a super common way of coding colors in programming languages.

It's used in web development, it's used in Java, it's used all over the place.

What we're going to do is we're going to specify a color

by specifying three values that describe a color.

The amount of red in it, the amount of green in it, and the amount of blue in it.

So we think of a color as being decomposed into three channels rgb.

Okay and so we want that sunny yellow color and so

we need to talk about how much red will be in there,

how much green will be in there, how much blue will be in there.

And the smallest amount of a color that we can specify is 0,

we can say we don't want any for example, blue or we don't want any green and

the maximum amount is going to be 255.

And that 255 is, there's a reason for it.

It seems like a random number.

There's a reason for it, you can look it up, but it's there for a reason.

And it's the maximum value for a color channel in the RGB coding.

Okay, so for the particular color that we care about,

it turns out that we're going to get that warm sunny shade of yellow if we have

the red set to it's maximum value 255, the blue set to it's minimum value 0, because

blue's kind of a cold color, we don't want it in this particular shade, and the green

is helping that red go off to yellow so the green is pretty high as well.

Now, you don't need to know how to design colors.

It's kind of fun.

You can play around with these three values and

see what colors you can create, but you can use Google and

just put in the search string, HTML color selector or RGB codes.

Color selectors and you'll get lots of these palettes where you can click on

the particular shade that you're interested in and

out will come the rgb code for it.

So it's a handy tool and you should feel free to use that.

Okay, so if we set the fill or

the pen color, you could think of, of the drawing to be 255, 209, 0,

i.e., the color specified by the RGB code,

where R level is 255, G level is 209, and B level is 0,

And then draw the ellipse then the ellipse is filled with that color.

And so then we get our beautiful sun just like we wanted in the top left corner

of Lahoya Shores Beach okay.

Well that's great for the static version but

now we want that sun to change color over time.

So at 7:00 when it's beautiful sunset we want maybe a pinker sun and

then as dusk comes we want it gray.

And the way that we can get our application to change is by

remembering that crucial fact that when we have the methods set up and

draw in a class that extends p applet, the draw method loops and

updates the drawing over and over and over again.

And so what we're going to do is in our draw method we're going to

set the color of the sun based on the hour of the current time stamp of the clock.

So I'm going to leave that as a tease for you.

I want you to try and implement it.

And in one of the support videos that we have coming up Christina is going to work

through how to draw a similar method, and then we'll be right back at you from

tweaking the example that she shows you to getting this application to work.

And you can do it.

But I want you to keep in mind that central paradigm of setup

being run once and then draw anything dynamic, that changes, it's gonna be in

that draw method because it gets executed over and over and over again.

So that's one big central message from this example.

The second really important message that I want you to get from these videos

is documentation is our friend.

So when we are writing code,

think of yourself as joining this wonderful brotherhood and

sisterhood of programmers all around the world developing code together.

Developing libraries together and we want to use each others experience,

expertise, and draw from the work that we've all done together and

the way we can do that is by describing what methods we have and what they do.

And so the API for libraries are what tell us

what methods are available in a library, so that's like our index to the library.

But also, what we can use those methods to do and what functionality that have.

So for the processing library,

for the library that we've been using up until now to create applets and

to draw shapes on them the documentation is on your screen right now.

And in the next lesson of this module, we'll be taking it one step further and

thinking about how processing can be used as the backbone for

some more sophisticated visual applications

that also involve real-time data coming from the Internet.

探索我们的目录

免费加入并获得个性化推荐、更新和优惠。

Coursera 致力于普及全世界最好的教育，它与全球一流大学和机构合作提供在线课程。

© 2019 Coursera Inc. 保留所有权利。

通过 App Store 下载

通过 Google Play 获取