3.1 Transforms (part 1)

Loading...

En provenance du cours de University of London

Creative Programming for Digital Media & Mobile Apps

37 notes

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 London

Creative Programming for Digital Media & Mobile Apps

37 notes

This course is for anyone who would like to apply their technical skills to creative work ranging from video games to art installations to interactive music, and also for artists who would like to use programming in their artistic practice. This course will teach you how to develop and apply programming skills to creative work. This is an important skill within the development of creative mobile applications, digital music and video games. It will teach the technical skills needed to write software that make use of images, audio and graphics, and will concentrate on the application of these skills to creative projects. Additional resources will be provided for students with no programming background. At the end of this course, you will be able to: * Write creative, audiovisual programs in the Processing environment that run on desktop and mobile * Programatically manipulate sound in creative ways * Display images and image sequences * Generate interactive, algorithmic graphics * Work with a 2D physics engine to create a basic game

À partir de la leçon

Audio Visualiser

This week is all about creating an Audiovisualiser. This is a really popular and interesting topic that has lots of applications, from music players, to game engines, to more complex things such as DSP. We'll be learning about algorithmic graphics, audio analysis, and also about using the accelerometer features of your phone. Remember that many desktops don't have accelerometers, no matter how much you shake them!

3 Introduction 1:54

3.1 Transforms (part 1) 8:29

3.1 Transforms (part 2) 5:36

3.2 Trigonometry 5:26

3.3 Accessing Accelerometer Data 12:31

3.4 Audio Analysis 16:19

3.5 Building Audio Visualisers25:54

Rencontrer les enseignants

Dr Marco Gillies
Senior Lecturer
Computing Department, Goldsmiths, University of London
Dr Matthew Yee-King
Lecturer
Computing Department, Goldsmiths, University of London
Dr Mick Grierson
Reader
Computing Department, Goldsmiths, University of London

[MUSIC].

Today we're going to talk a bit more about moving things around in graphics.

So in the first week we talked about how to draw stuff and there we could position

objects and then like rectangles, by giving the pixel positions.And for

example the white command and the ellipse command.

And, and that's fine, we can do that. And last week we talked about doing

animation, but animation with image sequences where we're playing lots of

different images all in the same position.

Today I'm going to talk about more powerful ways of moving objects around

beyond what you can do simply by putting positions into the x y coordinates to say

say, a rectangle. These techniques accord transforms, and

there are three of them. The first transform is translate, which

is a basic movement. Not too different from what you could do

by putting an X-Y position into, the position of a rectangle, so.

And that is a command for translate and you pass in an x and a y which is the

position you're moving whatever object too and it's a separate command to

whatever command drawing you're doing this.

So you can apply single translate to multiple objects.

And group objects together and move them around and I'll talk a little bit more in

detail about how you do that. And the basic premise to translate an x

and a y which gives you the position for which you'll translate.

So very similar to what we've done before.

The second one is a scale that's getting things bigger and smaller and that just

basically takes a number That is how much of scaling apply.

If that number's one you're not scaling it at all.

If it's less than one it's getting smaller.

If it's more than one it's getting bigger.

One quite useful thing about scale is you can also give it two parameters which

means you can scale separately about the x and the y.

So, you can make something wider While making it sort of the same time, having

high x scale and a small y scale. So the rotate command is used to spin

objects around. And it takes an angle as its parameter.

So that's how much you want to spin it by.

the normal way we talk about angles is in degrees 0, 360 degrees.

But in computer programming we often work with another way of dealing with angles

called radians. Now the units we shall explain in a

minute and you have to pass in that value and radiance through a take command.

If you don't want to get involved in radians, there's a very simple command

radians, that takes an angle in degrees and converts it to radians.

So I can just put radians 90 degrees, and it will do it all for me.

But if you want to know what radians are, this is it.

So radians work in terms of a circle. And we can think of an angle as cutting

out a chunk of a circle. So, like a, a, a slice of the pie.

now, if we make the circle of radius one. So, each of these two straight edges is

linked one. Then we can measure the angle by taking

the length of the arc, along the way just to be certain, so that's how much of the

edge of the circle is being cut out by my angle.

And that is a perfectly good measure of, of, of angles, and that's what's called

radians. A few things you need to know.

it's useful to know particular angles in radians, if you ever use them.

The, 360 degrees is the entire circumference of the circle, and if you

remember from school maths And the circumference of a circle is two pi times

the radius. Because the radius is 1, the arc length

of 360 degrees is two pi. 180 degrees is half that, pi.

And 90 degrees is pi divided by two. So that, that's a useful way.

Thinking about, angles, you can use, put values in terms of pi directly into the

rotate command. But if you're not, if you don't want to

get involved in that, you can also the radians command I just showed you to

convert that to degrees. So what are transforms doing?

I said. That transforms can apply to multiple

objects and they're independent of the objects.

But how does a transform know to actually move an object, if it's a separate

command from do, doing so, drawing a rectangle or an ellipse.

Well what a transform does is in a way not move just the object, but move the

entire coordinate system. Sort of.

The, the screen. What does that mean?

Well I taught, told you a couple weeks ago about how we can represent any point

on screen by an x and a y. How we do that is that we need to know

which direction is x and which direction is y and that's normally horizontal and

vertical. We can change that.

But also, we need a starting point, we need to know where 0, X and 0 Y are and

normally, that is top left of the screen. But what a translation does, is move

that, so that anything after the translate.

The zero-zero point. If I do Translate 20,100, I move my

zero-zero point to 20,100. So, if I draw an ellipse at point say,

20,30, if I've done a transform on that, Then that's 20, 30, relative to the new

zero, zero points. So if I've transformed my 20 100s, it's

20, 30 relative to 20, 100. Which is 20 plus 20, 40, 100 plus 30,

130, relative. To the top left of the screen.

So I'm drawing, changing the way you draw everything.

It changes the meaning of the numbers you're putting into your rect command and

direct command .And what that means is that if you draw both an ellipse and a

rectangle they're both affect the same way.

So you can draw as many shapes as you like.

You can draw really complicated drawings, and then put a translate in front of it,

and they'll all move together. Exactly the same thing with scale, but

this time, rather than changing the 0,0 point, you're changing how much one unit

of x or one unit of y means, so If you scale up by two, each one unit you leave

in x counts for double. So each time you move one in x, you're

moving two in the original screen used. And finally the rotation, what that does

is it actually What takes the x and y axis.

So, it changes the direction of x and the direction of y.

So, they're pointing in different directions.

So, if I've done this translation you're seeing on, rotation you're seeing on the

screen then when I move across an x I'm no longer moving Just horizontal and

moving diagonal down the screen. So these transforms are very powerful

because they give you new ways of deforming and changing shapes.

But also because they can apply universally to multiple shapes. [MUSIC].

[MUSIC]

Explorer notre catalogue

Rejoignez-nous gratuitement et obtenez des recommendations, des mises à jour et des offres personnalisées.

Coursera propose un accès universel à la meilleure formation au monde, en partenariat avec des universités et des organisations du plus haut niveau, pour proposer des cours en ligne.

© 2019 Coursera Inc. Tous droits réservés.

Télécharger dans l'App Store

Disponible sur Google Play