1.1 – Creative Coding with Swift – Beginning to Draw with C4

1.1 – Creative Coding with Swift – Beginning to Draw with C4


Hey coders! I want to talk to you about
six different things today. I have gone ahead and outlined what those six things
are here. We’re gonna talk about the code editor. We’re gonna talk about
beautifying your code. We’re gonna talk about canvas and background, creating
your first shape, color, and the all-powerful dot modifier. So many of you
are new to coding and this may be your first code editor. It’s pretty
simple. It is just a text editor. It’s a text editor and then the compiler puts
that together for the computer to read, but this is meant to be a space
where humans read what goes on in here and so there are a bunch of things
that are making it more helpful for humans to read. We already saw the
comments. So the comments are the two forward slashes or
a multi-line comment is a forward slash and an asterisk ended by an asterisk and
a forward slash. These are gonna be very helpful for you. I want you to use them
whenever it’s useful. Imagine yourself looking at your code in the future.
That’s a good a good a good way to think about commenting or if you want to
communicate to me, this could be for your citations in your code if you’ve
received help from somewhere or used a link online. Remember everything has to
be cited in this class, so the comment is a good way to do that on the left side
of the code editor. You will see a row of numbers. The row of numbers… these are
all the line numbers. They help communicate if something’s going wrong at line 40 or
line 27 and one of your teammates needs to know about it. You can say hey
I’m having trouble at line 27. Can you take a look at it? When you develop
larger projects there will be thousands of lines of code so it’s great to have a
little address for different places. So that is the basics of the code editor
and we’re gonna move on to beautifying your code. Now you I want you to pay
attention to the way that these are indented. There is an indent here. There’s
also a bar here that indicates the indent and these indents are very
crucial. They’re really important and what they do is they help humans read
the structure of your code. I want you to make sure that everything you turn in in
this class is properly indented and sometimes it’s hard to know whether
there is proper indentation so I’m gonna remove the indentation on here. I’m going
to show you a little trick that’s going to help you. So right now this is
incorrectly indented but there is a tool in the Editor pulldown menu…
if you select… structure and go to Re-Indent and
the shortcut is control I. If I click right now it won’t actually
do anything. It does have to be selected. So select all… re-indent and
you’ll see you’re here. If you have hundreds of
pages of code that tool is invaluable and I want you all to get used to
reindenting constantly. So that is beautifying your code now let’s
get to the canvas. So if I hit play,
and launch the simulator… it’s gonna launch the app. Sometimes a
Simulator takes a little while to load when it’s first loading but if you just
keep it open, it won’t take as long the next time around. So there you go. If you
see the console has output some junk that means that it is running and
it’s gonna give you feedback down here if anything goes wrong or if you have
messages built into your software. So right now it’s white. There’s nothing
going on but this is our canvas and the software… the area where we write our
code is called the canvas controller and the name of this canvas controller
is called WorkSpace. So this is where all of the action happens.
If say for example I wanted to change the background color I’m gonna show you
how to do that and I’ll get to color in a little bit. I’ll just use a default
color for now but I want to show you how that’s done. So whenever we’re changing
an attribute of our canvas we are going to have to refer to our self. So a self
dot canvas dot… and you’ll notice as I’m typing Xcode gives you really
helpful suggestions and this is going to help you tremendously so and if you hit
the tab key it will finish what you’re doing. Now if I want to change the
background color, all I do is equals and C4 has some built-in color so if you
just type C4 you’ll get the C4 colors. They’re not the most useful colors
but for testing purposes, they’re useful. Wow what I’ve done here is I’ve
accessed the self that’s the canvas controller and then within the canvas
controller I’ve accessed the canvas and then I use the period to access the
background color. So this period access’s parameters of the previous term
so and you’ll get used to that. It’s really useful and it’s pretty
helpful but let’s hit play and see what happens. There you go.
Now it’s blue. Alright so I’d like to create a shape and I’m gonna
go… a great resource is the C4iOS.com website and I’m going to click on
examples and let’s just do circles and squares. So and let’s change this to a
different color because the default color is C4Blue and let’s do gray
for the background and then let’s talk about shapes. So I will warn you the
examples on C4iOS.com tend to be quite complicated and what I would
suggest that you do is type this stuff out. I wouldn’t copy and paste.
In the interest of time, I’m going to copy and paste for these videos but
try to type it out just so you get used to the process of typing things out in
Xcode. You’ll become a better coder if you type things out. So I’m just gonna go
here and copy rectangle and paste it and let’s let’s go ahead and hit
play and see what happens. And you’ll see Xcode is very verbose.
It will give you a lot of little warnings and errors. Don’t let that scare
you. So when it launches, I know that it’s launched. This is a very light gray.
But nothing happened. So that’s a problem and this is probably going to be one of
your first issues that you have when you create a shape in Xcode in C4.
You have to actually explicitly add it to the canvas and… oops…
that tab is really terrible so I’m going to select all, control I, and
boom, canvas dot add is at the right indent. Okay, so now let’s try it.
There and so you see we’ve created a rectangle. I want to explain to you what
this let means here. In Swift there are a few different ways to store information
and all of our shapes are stored as information. They’re actually called
objects. So this rectangle is an object and each object has a bunch of
attributes like color and line thickness and all that kind of stuff that we can
control, but at the very foundation of that is this let keyword.
So I want to just… you’ll want to remember that let is a constant and var
is a variable. Constants are permanent, non changeable, and vars variables can
change. So you know… a let you would use let for something that doesn’t change
like maybe that’s the the width of the screen. It’s not likely
that that’s going to change but a variable… if you wanted to
change something like you know, like the color is constantly changing… or…
then you want to declare it as a var. So here they’ve declared it as a constant. The
rectangle itself now the rectangle can have attributes that are variables
inside of it, but the rectangle itself is a constant. Then to initialize it we have
this rectangle initializer/constructor and it has a Frame inside of it…
so… and that frame is called a Rect. Rect is another type of object. It just… a rect
just contains four coordinates. So four rectangles we have the X and y
coordinate of the upper left-hand corner. That is up here and then we have the
width and the height. So the width is a 100 pixels and the height is 200. So
that is basically how you would create a rectangle and all the shapes work this
way. As you’re typing things out, what you’ll notice is that Xcode will
automatically fill in ‘Oh rectangle’ ‘Oh you probably want a Frame’ and then you
would put your Rect in there. So I want to talk a little bit about
color and let’s go back to that self dot canvas dot background color equals. So in
order to declare a color in C4 you’re gonna need… there are many different ways
to do that and the color constructor is capital C color with an open parenthesis
and then Xcode gives you all of these different options. The easiest option to
start with, I think, is this color red integer green integer blue integer and
so I would click on that one because this is how we choose colors in
Photoshop. So if I open up Photoshop real quick ‘Welcome to Photoshop Masood.’ I’m
glad I’m here too thank you Adobe. So here’s the color picker in Photoshop. If
you don’t have Photoshop you can use any kind of color picker from any… GIMP will
work… any software but let’s move around and let’s see what happens to the colors.
So let’s choose pure red. So this… gonna close out of this window… so
this red green integer thing is… these are all in this format. That’s what it’s
looking for. RGB. So any color you choose you can just plop in these numbers and
it will copy that color exactly. So let’s do let’s do this so
0, 136, 187 and then alpha. Alpha is a double. So
a double is a number with a decimal point and whenever you see this, it’s
probably looking for a number from 0 to 1.0. So let’s just put 1.0 and alpha is
the transparency so if I put point 0.5, it would be 50% transparent. But a
background color it doesn’t really make sense to have transparency so I would
leave that at 1 and let’s hit play and see what happens and there
you go. So because this code came after this code, it’s gonna honor
this one at the end and that’s color. I would play around with it. Try
the other ones if you’d like. Just keep in mind the difference between int and
double. Int or integer is a whole number, so you can’t do decimals. If you do a
decimal where an int is it will give you an error and doubles have a decimal
point. The dot modifier: okay, so one of the things you will quickly learn is
that you’re gonna need to change attributes. So let’s take this rectangle
for a second and let’s let’s think about what can we change on this rectangle. One
of the ways to change the attributes is just to type rectangle because that’s
what I named it. This here is the name of the variable. It could be called my
rectangle. It could be called anything. So rectangle dot… so now we have all
of these attributes and we can change them if we’d like. Let’s try… let’s try
corner and let’s say equals. I’m just gonna randomly put a number
there and see what happens. “Cannot assign double to type size.” Okay
so this is an error and Xcode is great about giving you errors. If you
can’t remember every single thing like me, then it’ll tell you, no it
wasn’t expecting a double, which is what 10.0 is. It’s expecting a Size, so let’s
change that back to so… capital Size… so usually when it says Size, then it’s
gonna ask you for some kind of… it’ll give you a constructor and I’m just
gonna choose one of them. So width and height. That’s easy for me
to understand. So I’m gonna say 4 and 10 and let’s let’s just see what happens.
So you can see it changed the quality of the of the corners and let’s just make
that a little bit more extreme so that you can actually see… 25… see what
it’s doing. There you go. So that’s a great
little starter to get you started with your assignment and just remember you
know we’re working with a coordinate system. (0,0) is in the upper left
hand corner and in the reading there’s a a trick to finding the width and
height of your your screen. Good luck coding and I will see you in
the next video.

One thought to “1.1 – Creative Coding with Swift – Beginning to Draw with C4”

  1. Totaly Awesome, I totally liked it!, See this New Album 'Monish Jasbird – Death Blow', channel link www.youtube.com/channel/UCv_x5rlxirO-WKjLIyk6okQ?sub_confirmation=1 , you may like it 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *