Art & Code: Create and Code an Interactive Parallax Illustration

1. Intro: Hi. My name is Jarrett, vocal on Illustrator, and I do some code projects for fun Occasionally had a lot of people ask me about these parallax illustrations I've been making where use different layers to kind of create a three D effect with your artwork. And so I'm finally making it tutorial about it. So this is going to be based on HTML, CSS and JavaScript along with I'm doing my layers inappropriate. And this is an advanced class. So if you haven't taken my beginning appropriated class, I include a link to that in the notes for the course. I would probably recommend going through that first. If you have questions about drawing, uh, but I will have a couple of new things in here, and I'll go over it a little bit. But also just some disclaimers code is inherently complicated. If you don't know anything about code, this is going to be probably kind of throwing you in the deep end just a little bit. I do try to go as simple as I can and keep it not too complicated, but there's going to be things that just go wrong, and I won't be able Teoh, explain all of them or help you with all those things. And I'm sorry in advance, but I would recommend that you go take a quick crash course in HTML and CSS and JavaScript . I know W three schools has some quick intro things or think code Academy has some good ones , and I think any of those would be a great, quick way to use your time before you do this. But if you are an experienced developer and you're going through this class, maybe help people who are having a hard time and also keep in mind that I'm an artist, not a developer, primarily. So go go easy on my code. Don't don't be too mean, but I'm going to be doing this on an iPad pro with apple pencil on Going to be working and procreate. You're welcome to use Photoshopped Clip Studio. I don't know what people use any. Any are making program that can that you can work with layers and then I'm going to be coding in Kota on an iPad pro. I do have a keyboard if you have a keyboard, Bluetooth, USB, whatever. Using this my keyboard. I recommend that because during the sound software keyboard would be a pain. But you're welcome to do whatever you want, and then I'm just going to be doing it into parts. So, uh, yeah, let's get started. 2. Drawing 1 Concept and Thumbnails: All right, We're going to get started on some sketches for this. And, uh, I'm just gonna go into my sketches stack here and appropriate. I'm going to click the plus up in the top right to create a new canvas. And because this is just sketches underscoring screen size, it doesn't really matter, for the sketches will probably create a new document as soon as way start on the actual artwork any week. So, um, if you haven't taken my previous appropriate class, I would I recommend going there for a more thorough overview of how I work in procreate and kinds of things. You can dio Um but I will try to touch on a few things here. Some of the well, actually, first of all, what's let's talk about what we're actually trying to accomplish here before going to appropriate settings and things like that. So, um, going to go to safari. So this is my website, Um and so the effect that we're trying to recreate is this sort of three d parallax where you can kind of move it around. You can see that the layers move in relation to each other, so it feels like I have a shadow box. It's kind of cool. And also you can move your device, and as you tilt it, you can see that the illustration response to the gyroscope So that's pretty cool. So a couple of things that we're going to want to think about as we work on sketches for this are, um, kind of what elements you want in the background. What you want in the foreground, something you need to be aware of is kind of how things overlap each other in here. When I'm working on a full illustration, that's not for motion a lot of the time. Like, say, if something was behind this Bush, I'm just not going to drive back there. It's like, what kind of cut things off right here or something like, say, this little clip thing, which you say I don't care. Nobody's going to see that because it's hidden behind a bush. So you do need to be aware that as you move things on, some of that will be exposed, and you can see I've actually done that on this piece. If you kind of tell that to far others through the subtle section where I've kind of stopped bothering with the shadows because I think I kind of decided halfway through on this one that I was going to do something cool with it with the layers on. And obviously I didn't do a perfect job so that something to think about as you're making your sketches and as you go into creating final artwork, Another thing to think about is you can see that as I tilt this, you can see that you sort of see more than you originally see on the edges, so on, I'll just show you what I've done is I've created kind of a mask frame around the outside, so you can't see it here because the frame is white and the background is white. But if I go over here, this is a version without that in place. So because I have these elements that go right up to the edge, I don't want this effect where you can kind of see things go off the edge and the layers look a little weird that way. I feel like that sort of breaks the three d effect a little bit for me. It might be that you're totally fine with that. It sort of depends on what you're going for. But if for me personally, if I'm going for a defect in the background is kind of full bleed and some different elements are full bleed. I don't want to see kind of some things go off the edge and others I It just short breaks the illusion. I think eso I'm going to be creating kind of mascot. I'm going to be thinking about that as I do the sketch as well. Um, the other thing is, I think there's another one. Um, you can see as you move it. You kind of get this cool tilt effect. And this one I really like because the sword in the foreground and the background, the access is kind of in between those. So the background kind of moves to the left sort kind of moves to the right, and I think that's kind of cool because it makes it feel like the sword is popping off the page. The background is kind of going into the page a little bit, so I want to recreate that effect in this piece that I'm going to make so I want to think about what could be my background, What could be my foreground, that kind of float above. So I can kind of get this cool effect where, uh, it feels like it's sort of rotating around the center, and it just feels more like there's more depth to it. Okay, so those are some things to think about. I'll talk about them a little bit more as I do sketches. Uh, but yeah, let's get back to our sketches from it. So first thing I want to talk about is just kind of set up in appropriate really quickly. So I do have a few custom settings that you might be a little lost if you don't have them set up. So I'm just going to go through what I've set up here. So if you've opened a document which we did earlier on, did you tap on this ranch in the top left? Uh, you can see there's all these little options. The only one that we're looking at right now is press. You can turn on a light interface if you prefer that I tend to prefer dark usually and then if you are left handed, You might find that this is nice. You can move the opacity and size sliders to the other side. So if you were doing like this, which I don't sometimes I like to adjust those with the hand that I'm not drying with so on . Then I'm going to leave the brush curse around. That's kind of personal preference thing, especially because I'm trying and taking a video. That's kind of nice. You can see where my brushes if you're looking at the iPad screen instead of the video of my hands. Um, these other ones So this is the most important one down here for what I'm doing is gesture controls, and this is kind of more advanced stuff. But I just want to show you the way that I haven't set up. Uh, so not going to worry too much about any of those eye dropper I have set up to the little square is referring. Teoh this square here it's their modifier button. So if I hold that down, um, then it effects what the pencil does. So if we go back into gesture controls eso I haven't set up. So my eye dropper color picker tool happens when I hold down that square and, uh, used the apple pencil. Or I can touch and hold on the screen to put my dropper, um, quick shape. I haven't changed, and he felt settings there. And then quick menu, this one you have to turn on so that won't be turned on by default in appropriate. If you haven't used it before. Eso What I have is I haven't set up to touch. So as soon as I touch the screen, quick menu will show up with my finger and not with the apple pencil. And I also have a full screen set to automatically turn on while I'm trying. You may or may not like that. I think that I kind of like it, but probably go back and forth a little bit on you can also topped with four fingers to get into full screen. Um, but let me show you those here really quickly through this. Interesting. If I've customized anything else like don't Oh, I do have layers like that. We'll get into that later, so don't read about that so quick. Menu, Uh, you just kind of touch the screen and you can see this menu comes up. I can't remember exactly what the default options are in here, but to customize them, you tap and hold, and then you can choose from a whole bunch of different actions that you want to do here. Eso the way that I have it is I have paint over here. Erase on Alfa Lock, which I'll talk about more later on actual size. Which, uh, don't say I'm zoomed out on my canvas. If I had actual size, it makes my canvas the size that it really would be if I were to printed or something. Um, you can toggle back and forth between where he resumed to and the actual size. Um, and then I have Phil layer and add text. I'm not really sold on having had text in this quick menu right now, because most of the projects I'm working on don't involve a lot of text s. I'm going to actually change that right now to flip horizontally so you can see that puts the canvas every, Uh Okay, So that's quick menu for you and our gestures. So the other thing that I know a lot of you are going to ask about is what brush I'm going to be using. So for this, for my sketching face, I'm going to be using the technical pencil, and that's a default brush and procreate. I believe it's under sketching, so you can see you have this fresh library when you tap on brushes. And then on this left side you have a whole bunch of different sets of brushes and most of these ones that I haven't hear our default ones. Eso sketching technical pencil and I have created my own brush set with a whole bunch of brushes that I like to use all the time. The way that you would do that is on this left side. Scroll down and you can click this plus and you can make a new set. I don't actually want that. And then But let's just say I did want that you can come in here tap on the brush that you want to move into your set to duplicate, and then you tap and hold Andi with another finger tap on the new set and you could just drop it right there. So, uh, that's pretty useful. I think I'm just going to delete That said, Go back to my favorites on then Just one other thing is so let's say I draw something and then I go to race. I think by default he races on. I can't remember something big brush so come to erase and it's big and I don't want it to be big because I want kind of find control over what I'm racing. So if I go to my brush and I'm on technical pencil there and then I tap and hold on my resort that will automatically use whatever brush I'm using for paint for your razor and networks both ways. So if I had something in reserve Captain, hold our happen. Captain told Captain over the past tense of that works, uh, on the brush than it would switch to whatever I have been using for the razor and Samos much if you use that. So let's just start drawing for a minute. So as we get started on the actual trying, uh, first wouldn't show you this quick shape feature if you haven't already tried this. This is new as a believe procreate forgot to. So you can see a kind of true a rectangle. And then if I sort of stop and hold at the end, it just straightens out the lines for me, and I can kind of rearrange where it is on the screen, and this is super useful for a lot of reasons. But for what I'm going to do here is just kind of creating little frames for my thumbnails . Uh, so I've made this shape and then because it's not a perfect rectangle, I want it at its shape, and I'm just going to talk rectangle. You can see that that redirecting before, um, if you want to make a perfect square or a perfect circle or something, I'm just going to point this out now. You can do your very best to drop perfect square, and it's not perfect, actually did OK on that one, but so you're still holding the pencil down on the screen. You can see I'm still moving my shape around if I add one more finger to the screen that snaps to perfect square and it snaps a 15 degree rotations as well. 15. I don't really want to square for this. I'm going more for like a portrait orientation our work. But you can do whatever you want. Still square. But, you know, you get rectangle on that switch to turn things for me. So that's about the aspect ratio that I'm looking for. I wanted to be to Tommy will make it just a little skinnier. Let's stick with something like that. Um and then also that has worked with circles and triangles as well. If you happen to want to create your work in a triangle or something, you could make a triangle, you can make a circle, and same thing applies. If you kept another finger on the screen, it will switch between constraining to a perfect circle triangle and, uh, kind of the left. You can see that very well here, but you can make interest, and the lips are oval. And it was not to that as well. One finger, well, kind of switch it to a more perfect version of it. Okay, so I want to start with my rectangle, and I'm probably going to do a couple of sketches here, so I'm just going to use my selection tool circle around the whole thing. I probably didn't need to do that because That's the only thing on the layer right now. But force of habit, I guess. And so and you can swipe down with three fingers on the screen and that will give you your cut copy paste menu. Or you can open layers just swipe from the right to the left on that layer and duplicate. And so I'm going to do that and then duplicate this rectangle that I drew over here and then duplicate that again. So I have three different rectangles that I can drive and then to merge those into one layer because I don't really want a bunch of players from a different thumbnail sketches. I'm just going to pinch those together in my layers menu, and you can see them together just one year. Um, I have all these sketches that I can for these little rectangle templates to work with from the sketches. Um, I want to talk about a couple things that I'm looking for in these sketches, and then I'm going to switch to probably time lapse, and I'll just drop for a little while. You can kind of see the process here, but so, like I mentioned when I was showing you those artworks. I kind of want to work within a frame here. I just kind of think about this artwork with the frame from the very starting. So this is going to be kind of my white mask brain thing that I will have some stuff behind it, but it will only be revealed kind of when you tilt the device or move your mouse or finger on the screen. Um, and then the other thing I want to think about is, uh, kind of what's in the background. So maybe maybe I have some clouds or something. We're looking cloud, but, um, and maybe some stars in the background and those could move just a little bit relative to the sky kind of, but and then maybe I have, like, a figure in the foreground, just kind of floating here. Says the best I've ever drive because I don't just spend some time and draw these minute, but I just want to kind of talk about some of the things that I'm looking for in these sketches. Um, so I want this figure in the foreground. If this was the idea that I'm going for, I kind of want to float, so it looks like it's in front of this mask and then maybe I'll have a shadow layer that goes onto the background. And then I want these clouds to look like they're behind. The mask and the sky background look like it's behind the mask as well. And then maybe if I want just a little bit more depth, I could add some a little star floating elements in front of the mask here so they would be maybe behind the figure or in front of the figure in terms of three D. But they will. They will kind of break the frame just a little bit, and I think that could look pretty cool in this context. So you can see I'm using my quick menu. I just You don't have Teoh tap and then tap. You can just happen. Slide disliked what you want. And that does mean that sometimes I am selecting something on accident, as you'll probably notice as I work. Uh, I'm kind of OK with that, because overall it speeds me apple up. Something you do want to be aware of when you're setting after a quick menu is um don't include anything here that you're going to do on accident that you won't notice that you did, if that makes sense. So for instance, I used to have merged layers in here like I would create a new layer, draw something that I would merge it, and I can't even remember exactly why I was doing that. But merged layers is something that unless you haven't to be looking at the top of the screen with little thing that says merged, you might not notice that it happened until quite a bit later. So you you don't want destructive actions that you won't notice. So some of these are destructive, technically, like filling layer. But I'm going to notice that I did that. Eso That's just something. Think about if you're thinking about your quick menu set up. Um, okay, so I'm just going to drop a little bit, uh, come up with a couple of other ideas, probably find now in a little bit, and then hopefully by the end of this section, we're going to have at least one sketch that you can move on to create a full artwork that will work well with a parallax effect. So let's get started. - I think we're ready to go on these sketches. Uh, so I have three sketches. I'm pretty happy with all of them on. Then you decide which one I actually want to use for this parallax project. I might come back to these other sketches for something else or another project like this later. But for now, we just need choose one. And, um, I think I've kind of gone from a little more simple than I'd like over to a little more complicated than I'd like. So I'm kind of leaning towards this middle one for this particular project. Uh, so to the next step is, we're going to move it into a separate campus and then, uh, finish it in color and everything like that, and that's gonna be the next lesson. But before we move on to their I'd like to just start the next lesson already with our thumbnail sketch in place on that campus. So I'm going toe copy the sketch out here, So I'm using my select tool, uh, and just outlining, um, this sketch, make sure I'm on the right layer to copy that, and there's only one layer, so that should be great. And then I'm going to swipe down with three fingers on the screen and just hit Copy there and that copies my artwork here. And then I'm going back to the gallery. I'm going to click Plus and I think that was pretty close to a 43 aspect ratio. Eso Because I want to use this artwork like I'm going to want the highest resolution artwork as well as a lower resolution for the code stuff. I'm going to start with a higher resolution. I'll probably do 4000 by 3000. I have that in here, but I'm just going to show you how you would create that, because that's not one of the default options. So down at the very bottom of this plus menu, I have a lot of extras in here. But if you create custom size here, you can tap 4000. Actually, I wanted 3000 by 4000. That's already 4000. You can choose the DP I. That doesn't really matter unless you're using inches or millimeters or something like that . Um uh, at least not for our purposes here. If you are on an iPad with p three. I like to use Petri color because you can get some really nice reds and greens. Um, and then I'm just going to call this relax project and it done, and that will create a new canvas for me. And I'm going to smack down with three fingers again and hit paste, and that puts my artwork in here. You can see it's a whole lot smaller than this one. Cool trick here that will probably show you again later, as we're working on the actual artwork, is if I tap and hold on this transform icon up here, which you can't see because I'm tapping and holding on it. Uh, this little mouse cursor icon is for a transform, So if I just tried to pan or zoom the canvas that moves this about selected. But if I tap and hold on this arrow, then I can move the canvas without getting rid of my selection on going to hit this fit to canvass button down at the bottom, and that automatically just fills the canvas with my artwork on de, depending on whether you have this Magnetics option turned on, that behaves differently. so if you turned off, then it will do Ah, visit called aspect fit where keeps your aspect ratio. But make sure all of the artwork fits in the canvas where if you have Magnetics turned on and it fit to canvass, it does aspect fill, which keeps your aspect ratio but fills the entire canvas. I probably want something a little in between those just to make sure that I have actually , you know, I'm going to go with fit because I want to make sure my border around this is big enough. I'm turning off Magnetics getting fit to canvas and then I'm going to just tap on that arrow and then we are ready to go in the next lesson. So see you over there. 3. Drawing 2 Refining Your Sketch: Okay, So really, the only thing that we're trying to accomplish in this part of the tutorial is to refine this sketch. So I'm going to spend a couple minutes doing that, and I'll probably just put it on time. Lapse as I work, there's not really a lot of secret to it, other than putting in a lot of time and going through and making sure everything is clean and ready to go. But the goal for this whole lesson is that by the end, you're going to have finished artwork that's colored with layers that were ready to export into a parallax project. And I'll go into a little more detail when we get to that point. I don't want to go too in depth about how I'm drawing in procreative because I have another class about that, and that's not really total point of this class. But for now, I'm just going to work on this sketch, and I'll point out a few things that they get to color. Okay, I think we're ready to go on this sketch. You might have noticed that I changed the guys here like, five times in here, and I'm not 100% happy with that Still, So it's possible. As I go through colors, I'm going to change a couple more things. But overall, I think I have a good enough idea that I can start blocking in some colors, so let's move on to that. 4. Drawing 3 Blocking in Colors: Okay, I'm going to start adding color to this. Most of this is going to be time lapse, but I want to show you the technique that I'm using and kind of how I break it up. Eso first of all, I'm going to start by just blocking in the colors and kind of setting up some of the main layers that were going to be working with here. And then I'll probably do a time lapse after I show you a couple of those things and then come back when I start adding textures and some Grady ants and refining colors, and we'll talk about that a little bit more. But let's get started with just blocking and colors and kind of how I set that up. So I have my thumbnail sketch here. Still, I can probably believe that usually I delete that I'm going to keep it for now, just in case. But I'm going to tap on this in on in my layers menu and just bring the opacity of my sketch layer down and actually going to rename this by tapping on it once and then tapping rename just to sketch. So it's easy to find when I have a 1,000,000 layers in here, and then I'm going to add another layer and just drag and drop that below that sketch layer . And so now if I draw something, um, than the sketch layer will still be above it. Uh, and so a couple of other things I wanted to just touch on really quickly before we get too far on this is You see, I drew this big our rectangle, but almost rectangle around this. This is the mask that I was talking about in the thumbnail phase. So I'm just going to show you how I would set this up. Uh, actually, let's set up a background color first, and I'll probably change this, but just something to get started with. Let's say we have a blue background and then some on my layer here. I'm just going to call it mask and then going toe open my selection tool, which is this little s shaped thing of top left and then just kind of trace over this. Um, when this takes some practice, if you're not used, Teoh, uh, it can get pretty tedious, which is a big part of why I am just going a time Lapse this because this will take a lot longer than it will look like it takes to you. So don't get too discouraged if this is taking you forever on, and I like to kind of build my selections and pieces, there's not really any particular good reason for that, other than that's just kind of how I do it. So by default, this selection tool will add to the selection you already have, so you can see this is area that isn't selected. This is area that is selected. I mean, if I add So if I keep trying a selection and then I come back, we didn't see that. Just added So I have more area selected, so you can kind of build it piece by piece a little bit. You can also tap to add straight lines on so you can switch off with the selection tool between tap tap tab for lots of straight lines, or I'm you can do tack straight line and then draw a line, and that could be curvy if you want to. You don't want it to be, but and some slow kind of nice, because for something like this. I might want a curved line for this corner. A And then I might want to switch to a straight line here, but then continue a curve so I can create a straight line from wherever I stopped. Wherever I start again, and then the next plane without lifting my pen or apple pencil, I guess can be curved so you can really mix and match in a really natural way, which is nice. And then I'm going to go in select White, which already have in my palette here. So I'm going to use white for this mask and then because I have Phil Layer set up in my quick menu, remember, we talked about that. We can just go like that and fill in the area that I have selected. If you didn't set up your quick menu and so I've tapped, I have it set up. So my quick when you opens on touch and then you can tap and hold on something and choose what you wanted to do. So I have that set to fill later. If you don't want your quick menu, you can also tap on your layers tap on the layer that you want to fill and top Phil Layer, and then you get this nice mask. Okay, so now you can see if I was to move that mask around the background is still blue everywhere and where this is going to be important when we get to the actual code part where we're doing the motion controls and moving things around because, like like I mentioned before, you don't want to see the edges of your different layers overlap each other. It just looks a little weird. And then so we're going to have a lot of stuff. Some of this background stuff is going to be behind um, my mask layer, and some of it is going to come in front. And I'm thinking right now that these people will probably be in front of that as well. Uh, so the other thing I want to show you is just So let's say the people are above this for now, we're going to use the selection tool. I'm just going to come in and start just like we did with the mask, selecting out my shapes fast. And I'm just going to choose sculler on Then again, I'm shooting my quick menu to fill, uh and spend. I mean, just do the sheer shape really quickly just to show you how we want to set this. So I feel that with a killer because these two, like I mentioned, are going to be part of the same image in the final export. I'm just going to start grouping things by how I want it to appear when I'm done. So anything of these people because they're going to be on the same layer, especially because they're touching. That would be pretty tricky to do different layers and kind of keep that intact. Um, I'm going to just create a group by selecting these two layers, and you select multiple layers by tapping on one and then swiping towards the right on another one to have multiple and then you tap group, which I just did. And then you can see they appeared in this new group here. But I can tap to rename that I'm just going to call it people or humans, because that's more fun. And then we have our mask, whatever humans, and then I'm going to create a new layer and move this below, and then that's going to be Let's just do this weird cloudy shape for now, and you don't want to just cut this off because this mask is going to move. So my normal instinct with something like this if it if it wasn't a moving illustration, is to say I don't have to draw anything behind here because nobody else besides me will ever see it. But because the layer is going to move as you move your layers around, you do need to think about what will be seen there. You might even want to set that mask to 50% opacity or something so you can see what's going on behind there and just notice if you've decided to quit things subconsciously or something, and so then have to decide on a color for this almost definitely not the color I will want , but serves to show what I'm doing for now and then. One other thing I wanted to point out before I switch this to time lapse mode is just that . I'm going to be using a lot of clipping masks on here, probably, um, so if you're not familiar with that let me just show you. Uh, so I've created a layer above this leg, right? If I tap on it once and then I tapped clipping mask, then it's you can see there's this little arrow pointing down, and it's kind of indented. That means whatever I draw on this clipping mask layer will only show up within the shape that it is masking or that it is being masked by my guess is actually happening. Uh, so if I go and do this kind of knee here and that does not have to be a perfect shape, Uh, and then I turn off my sketch just to make it easier to see and then select a color here. Can you kind of fill that in and you can see it on Lee. You can only see it where it overlaps within me. So if I was to take that off of clipping mask, you can see the entire shape. If I put it back on clipping mask, you can only see the overlap. So I'm going to be using quite a bit of that. And I am probably just going to watch this time lapse now and go through And just all I'm doing right now is blocking in colors. I might get a little carried away on a couple of radiance and things like that, but mostly I'm just trying to get the shapes in and general idea of colors. Okay, I think my colors are mostly blocked in here. So I am going to start tweaking colors, a little bit more outings, ingredients on things, Alex and textures more than I have. Um, and let me talk about brushes just a little bit. Um, So the bushes that I use the most are probably these pencils, and those ones can be found in sketching s. I use the technical pencil a whole lot. That's what accused on this one. And occasionally that HB and six b pencils. Um, and then in artistic, I think there's the white acrylic brush that I use quite a bit. I may have moved it out of here out there just on guy used to quash one as well. Uh, quash gives me a much smoother texture, but so with just a little bit of interest in it And what acrylic can be a lot more, uh, kind of scratchy looking. So let me show you a couple of those. And then also I should mention I have, uh, so my favorite brushes all in this boulder, which I think I mentioned before. But then I've also duplicated all of my brushes in a folder called Multiply. So it's the same brushes, but each one of them has their blend mode set to multiply on. And if you don't know what that does, let me just show you really quickly. Um, so let's say I want a color. This guy's front league here, Um and I was using what? Acrylic on this like very light purple color on. I'm not sure if this is actually good yet, but so I have this layer set to Alfa Lock. You can see there's this little checkerboard behind it, and that means that when I color on this leg, nothing will show up outside of the leg only in the areas that I already have drawn something. If I turn off our flock, you can see it shows up everywhere. Uh, so you'll notice that light purple just doesn't look great. I mean, it's very light, but I want to dark in things while keeping saturation. So if I switch to this multiply version of the same brush multiply blend mode basically darkens things while keeping them saturated. So you can see I can kind of go over that and just darkens everything. It's also a transparent. So even though I have these two things the shadow, I guess that's a different layer. But let's say these were the same layer. I would still be able to see that shadow so kind of darkens everything evenly, which is really nice instead of just covering it with one solid color. I'm not sure actually wanted dark in that quite that much. And maybe I wanted to be just a little more red. So as long as we're talking about filling in with the brush so I'm using this boat Acrylic brush, you can see Okay. Such layers on accident? No, just turned off a lot. Uh, so if I go really lightly, I can get a pretty smooth radiant with it. Or if and this is what I like to do with this brush is really hard in one place, which to be raised and then kind of lighten up after that and just kind of pushed hard every once in a while, and then you get these nice, interesting little textures. So I kind of dark at the end of this kind of interesting. I don't know how well this will show up on the video, but you have kind of this just more interesting texture that you're getting. Um I'm also going to be refining some shapes in here saying, Love this. This ankle kind of like, has a weird little bump here just a little bit. So I'm just going to carp that off with my selection tool, have that area selected, and then I can scrub three fingers back and forth to Greece that you heard clear it, um, kind of scene thing on this layer. Another thing I wanted to show you is layer select. So the way that I have that set up, I can hold this modifier button, and then I could just touch with one finger. And as I slide around the screen, I notice it will tell me what layer I'm currently touching. Or if there's multiple layers like because one of these is sort of transparent, then it will give me options and so I can choose from those two layers. So I want to select that leg and then just kind of clear this little piece of me that I think is a little too much. Um, and again, if you want to set up players, select that way. You tap on the wrench than preferences, gesture controls, Layer Select. And I have such a modifier plus touch on nothing else. And I found that that works pretty well for me. You can play around with different options and see what you like. Um, so see if there's anything else I wanted to talk about here. The other thing I wanted to mention really quickly, and I had a lot of people ask me about this in my previous skill. Shared class ISS, this saturation mask idea. So what I like to do just to make sure that I have good contrast, because sometimes it's a little bit hard to tell. So, for instance, right here, where this girl's arm is against the background, it feels like it's vibrating just a little bit to me. And usually that means that values are a little too close together, don't like that's really awful, but so that's kind of an area where it's like I'm not sure. I just want to kind of quickly look at that. So I'm going to fill this entire layer above everything with black are you could use white , it doesn't matter, and then I'm going to tap the end. So this is my capacity and blend modes for this layer, and then I'm going to top on color on the far right and then tap on saturation. And so now I have this layer that, uh, it just takes all of the color out of everything that keeps my values. And you can see I am actually having some problems with this arm right here because that hand just kind of blends into the background and so all going and fix that I am probably going to a lot of that right this second, but, um, it's it's just really nice to have a quick way to sort of tuggle that on enough. Um, I don't see a whole lot of other issues here, so that's actually pretty good. Usually have more issues than that. So score, uh, I think other than that, I'm just going to start time lapse again. and just go through and, uh, try refined my colors at some credence to things Kind of like I did here, but maybe light in a couple areas dark in a couple areas. I just It makes for a lot more visual interest. If you have kind of subtle color changes in things and I will go from there, I think we are done enough for now. I do just want to add those drop shadows that I was talking about earlier, and I'm going to show you how I would do that. So I'm going to open my layers and because I'm pretty close to out of layers for this canvas. See, I have 28. I mean, I have 12 layers left, but I want to duplicate this entire section with this humans group on, and there are more than 12 layers in there. So I'm going to do is I'm going to tap flatten, we'll tap once, then tap, flatten, and then I'm going to tap out of layers, swipe down with three fingers, copy and then I'm going to undo. And so now it's not platinum anymore, and then I can go to layer below it done swipe down with three fingers and hit based. And then I have a copy of that group, and I'm going to turn on and off a lock for that layer by sweeping down quick menu. And then I am going Teoh, fill it with this light purple color that I've chosen. And then I'm going to switch that to multiply blend mode so you can see I have kind of this shadow of them now. And I do want that to be just a little bit blurry. So when the image in front of it moves, it feels like it's being cast from in front eso. Before I do that, I need to turn off Alfa Lock. And if you don't have quick man, you set up. You can swipe to the right with two fingers and you'll notice the checkerboard pattern is gone. Which means Alfa Lock is off that I'm going to tap on my magic wand up here, which is my adjustments menu and then tap cosy, um, blur and then just sway on the screen towards the right anywhere, and I conclude that as much as I want probably something like that would be pretty good at about 19.7. So do it however you want. If I turned my humans layer group back on and then go to my move tool moved out around and you can see that there's a shadow behind them and then I'm actually going to do the same thing with my mask. Clear because I would like to have the mask casting a shadow on this backdrop as well. So I'm just going to duplicate that because it's just one layer. I have plenty of layers to work with that I can just duplicate it. I'm going to choose the one be low, and then I am going to do that. Same Ghazi and Blur. Um, probably the same amount, actually. Maybe just a little bit less, because I'm thinking the humans will be in front, which means this would maybe be blurred a little bit less. I'm going to do 15% blur on that, and then I'm just going to swipe down to turn on Al Flock. It's right over to fill their without purple color tap on my blend modes. Switch this to multiply, and now if I move this mask around, you can see that there's a shadow of the masked behind it, and I believe that that's it. We're actually creating the artwork. So in the next lesson, I am going to go over how I'm going to group the layers to export then and then we're going to get started on coat. 5. Coding 1 Preparing Your Layers: All right, so in this listen, we're just going to go over how to get your layers exported combined in the way that we want them to be to use in code and then actually into your code editor so we can get started on, uh, putting together your code project eso to start, I'm going to just swipe from the right to the left on this thumbnail of the project that we've been working on and it duplicate and And the reason we want to do that is to reasons . Actually, one is that I don't want to get rid of all of my layers in here, but I do want to combine my layers. And the other reason is that if you remember, I made this larger than I need to for this code project was 3000 by 4000 pixels, which is just gonna be pretty heavy if you're doing something in a Web browser. Especially because I think I'll end up with quite a few layers on this project. So we're going to want to make it smaller, and we're going to want to combine a bunch of layers and then export them, and if I did that in this project, then I would lose a bunch of details that I don't want to lose. So I'm just creating a duplicate opening this up, and then we're going to just decide which layers we want to combine and kind of how we want our project to be set up for the code. First of all, I'm just going to delete my sketches and my saturation mask. I don't need those for this on then. I just want to decide which layers I want to flatten. So I already know these foreground floaty things, Um are going to be just one layer. My humans, they're going to be just one layer. So I'm just tapping once than hitting flatten my shadows. I think I want both of my shadows to be on the same layer because they're just going to be kind of in the same line as the backdrop. So I'm just going to pinch these together to combine uh and then my mask, I just want to be held is thes two sets of floaty elements. I want to stay separate these clouds. I want to stay separate, and you can do this in whatever way makes the most sense to you. Takes a little bit of trial and error to kind of see what makes sense to be on different layers when it moves together on, then I just want to combine into So I have a solid background so I wouldn't use this background color, Uh, for right now, just because you'd have to export it a little bit differently. So I would just copy whatever your background color is onto a layer above the background and then combine it. If you have any other background details, uh, I have 12345678 different layers that I want to export each as a PNG Um, so I'm going to tap on the wrench up here, and actually, before I export them, I need to resize my canvas. I'm going to say canvas crop injury size. And then I think because this is so large, make sure you have re sample turned on, uh, so that means you're re sizing the document instead of cropping it. Re sample is on, and I'm going to tap here, and I think I'm going to try 900 by 1200 pixels for this, uh, and then you just hit done, and it will resize. So you can tell I've lost a little detail, which is what we wanted, which also means they'll be much smaller files. And then I'm going to tap my wrench again up here and hit share. And this is new, Inappropriate 4.3. So if you haven't updated for about three, this is, uh that wouldn't be there for you, But in the share menu, there's this share layers area, and I'm just going to tap on PNG files. So what that does is it exports? Each layer has its own PNG file, and then I'm just going to say, save eight images and that will save them directly to you in my camera roll. So if I don't open that up, you can see you now. I have 12345678 different layers all saved as separate PNG's to make a moral, which is great. Uh, so this next part you can use, uh, whatever code editor you want really? The one that I'm going to be using his coda on. I like that one. A lot for a lot of reasons. I think it's really well done. I think it costs $10 or something like that on the APP store on. It might be different now, but if you don't want to use that, there's also this app called JavaScript anywhere that's free. That's pretty OK, and I'll show you how to import images into there as well. But I'm going to be using coded mostly. So let's start with that. Uh, so this is your first time launching Coda? Uh, there wouldn't be anything here for you. I'm kind of a nerd and I have a bunch of different things that I do in here. So what you're going to want to do is just hit this plus in the top right corner top, new site, and then just give it a name. So I'm going to call this parallax. You can call it whatever you want. If you're a nerd like me and you have other website things that you have administrator access to, you could set those up over here, but I'm not going to go through that right now on if I had done then I just have this blank project, so I'm going to tap Parallax. And again this would be empty for you If you have never opened this out before. So you're going to hit? Plus, and then I just like to keep any project that I do in hearing in its own folder. So I'm going to tap new folder and then I'm going to call this Parallax and then going to hit, create, then tap on that parallax folder which will probably be up at the top for you and then I'm going to talk. Plus, this will probably prompt you at this point, Teoh, allow it access to your photos, so make sure you click OK on that. I've already done that. Eso you can see I have my layers. So this is just everything in my photo library right here you can scroll through, which is convenient. Uh, so I'm just going to tap and you want to go from the back to the front. On your layers are That's what I'm doing anyway. So I'm choosing my very back later my background first and tapping just tapping on that you can see that it's renamed it for me, which is a little annoying, so I'm just going to rename it right here. Layer 11 dot PNG um and then I'm going to go and import. I'm just going to do this for each one of the layers that I'm importing, and you do need Teoh import them or rename them as you go if you're doing it this way, Otherwise it will ask. It will try to rename them the same thing because it's based on the time of day that they were added or something, and it will ask if you want to replace it. So if that's happening, make sure you re naming them one at a time before you import the next one. And this is just a little bit tedious. But, uh, welcome to coding. Also, the reason that I'm giving it to numbers is if I did want to add animation to these, it is I could name something like Layer one underscore to, for instance, Layer one underscore three, and that means like frame one. So it's basically like layer a five frame one. I'm not going to go into animation in this tutorial because it's a little bit more advanced , but maybe in a leader one and last one. Okay, so I've got 12345678 Perfect. Okay, so all of my layers are in here ready to go. We'll come back in the next lesson and go over adding your other code files in there. But right now, I just want to go through this job script anywhere app really quickly. If you choose to use this, um, eso you can see it just has this hello world project already there for you. You can just ignore that. I'm going to hit this plus at the top left. And then I'm just going to call my project Parallax and hit Save and then tap on that and cap over here. It's got some code in there for you. When we get to the code, you want to delete that and just replace it with what we're talking about. But for right now, all you need to do is there's this little picture icon in the bottom left. I'm going to tap on that hit plus and hit import from photo library again. That will probably ask you for access to your photos. So I say, okay. And then same thing you just want to go from back to front. I don't believe that this gives you any way to rename them. Must I am mistaken. Yeah. So I think it's just named what it's named. So miss will matter when you're doing the code, you'll need to come and look for these references instead of where we write the names that we gave them in Kota. And But you'll just do that with every image, just like we did with Kota. Makes it not renaming them. Just make sure that works. Doesn't try to rename it something else. Yeah, so should be fine. And OK, so yeah, all of our layers air set up and ready to go. You can tap on that. You can see that. It's the image that we want eso in the next lesson. We're going to go over getting started with code, getting everything hooked up correctly. So, uh, you can reference your images from your HTML and stuff like that. Uh, so I will see in the next lesson 6. Coding 2 HTML, CSS, and JavaScript: All right, so we're going to get started coding. As I mentioned, I'm going to be using this app called Coda. So I'm getting in here. If you follow along with the previous lesson, you should have all your layers in here already s. So I'm just going to create a folder within this holder on going to call it images, lower case I. And then I'm going to select all of these images and just track them into their and get done. So now I should have a folder in this parallax folder and nothing else. So I'm going to hit this plus and then quick new file here and call it index dot html and then I'm going plus again, slept a new file call this one mean dot Js and one more called styles CSS. Okay, so if you're not familiar with code at all, we're going to go through these just a little bit as we get things set up, but essentially the index dot html. So html is kind of your structure of your page. It's where you kind of organized the different pieces. CSS is your styles for the page, which, uh, basically means like if you want to change colors, sizes of things, positions of things, that's where you would do that. And then the Js or JavaScript file is where you do on any of your logic. So if you want actual things to happen on your page, it's usually going to be in JavaScript. So let's get started with HTML file. And so I've tapped on that. And then I'm going to hit edit in Coda and then So the first thing you're going to want to do and I will make sure that I include finished versions and in progress versions of each of these files and as part of the project. So if you get lost, you can go in reference those we're going to want to do. Opening angle, bracket, exclamation point doc, type all capitals and then ht known lower case. And then it's tomorrow slash pinched, you know. So these are HTML tags, basically these air like little containers. So this one of the top just says this is an HTML document. These ones they're saying okay, and now here's the actual HTML. Anything inside of those in the next thing is going to be called head and I'm gonna close it slash inside of that, we're going to have a couple of metadata things and we're going to import our CSS file. So the first thing we're going to say is title and you can call this whatever you want. I'm going to call it Relax. It doesn't have to be in in slash. Next one is going to be, uh, link equals style Sheet equals text slash CSS Trump equals don't Sasha Styles. And then I could just put special about close it within the opening attack. So this one says the title of my pages, Parallax. This one says, this is where my CSS file is, and that's gonna be important. If you want to move things around page, which we do and then it's next one. Thes ones are right is important. But there Okay, name here, not mine. This next one is It's basically just tells it Teoh under at the size of the device. So if you have a retina display high definition display, this one makes it actually show up with the right size on a couple of other things. Cools equals device because one user Okay, so that's everything for your head element. Andi, can you just copy all of those directly? It's absolute. Probably should put me in there. So then for next piece of this is going to be body. So this is where your actual content goes. So the head stuff is mostly meta data as setting up something you can import scripts there , although it usually makes more sensitive at the bottom. Um, and then if you want to talk about this, did doing Andi somebody might already be familiar with this stuff. So I'm sorry if this is, uh, too complicated or too simple for you. I'm just explaining it the way that I'm explaining it. So eso div basically is just a blink container in html and you're going to see a few other types of containers like body and, for instance, you can have this, I think is a paragraph is what the P stands for. So you have different types of HTML tags. Div is one that I use the most because I like to style things on my on my own where some of these other ones can come with, um, some built in styles to some degrees, so you could have something like H one. That means Header one, and that is just going to be bigger than regular text. But if he used, if it's just kind of blink and ready to use for whatever you want to. So I think those are nice to use, then one other one that we want to talk about. We're not actually going to be using this in the project, but just to make sure that your images are in the right place and being referenced correctly, we're going to include an image right here. So that tag is I am G. And then SRC is the source and you say equals opening. Quote close quote, got slash images slash player one g and I can just close itself with slash it and as well. And then we need to make sure did disclose which it is. Our body is closed, which it is, and the last thing we want to do here is important. We're going to see a script equals text slash JavaScript R c sources equals dot slash mean Jess, and that should be everything we need for now in our HTML. So I'm going to save that. And then there's a little eyeball at the top right of your screen. And I'm going to tap and hold on that actually from the bottom, stuck to my safari browser and then drag and drop it up here and put this side by side. And then I'm going to tap on the eyeball in Kota and say open in safari and that will hope in my page it's a party and you can see that I have things set up right here. So, uh, this test word that I put thank you is showing up at the top of the page and then images right below that, which is just how I said that we don't have any styles yet. So I'm going to tap on this little box icon in the top, left and right from the left to the right on the screen and then open up styles that CSS and there. I just want to put a couple of things se HTM out body. So CSS stands for cascading style sheets on. That means that things that you put at the top level so html in body. If you look at the way that we have our HTML structured HTML is the top level element, and anything indented is a child of that element. So cascading means anything I put in fear should affect the elements be lowered as well, unless I override it somewhere else. So first thing I'm going to say is boxes size and box on, then margin zero. And you can see this margin zero. You can tell there's just a little bit of white margin at the edge of the page right now. So I refresh this and your CSS is hooked up right now you will see that that white little merchant goes away, which is great. And then these things are mostly just to get the get our content in the middle of the page . You don't really have to understand too much about exactly how they work right now. Uh, well, except back on, that just makes the page background white. I could also make black if I wanted to, um and then display Lex. I'm not going to get into the details of how that works. Suffice to say, it's pretty cool, relatively new with CSS, and then it allows you to center things a lot more easily than that's just a center. Then you could without that flex display property. I mean, it's not like so these two lines are just saying center it horizontally and vertically. The last thing I want to do is I don't like having a serif font on my page unless I really wanted for some reason. So for this, I don't want their funds. I'm going to say families answer that we'll just default Whatever your system sans serif font is and then for image container, I don't think that I'm going without back in HD Go. We're going to have a div with a class of image container and then that's gonna be display flex as well. 100% 100% Max with percent go save going to refresh over here. And so it looks like even show that too. Not sure where extra into exactly. I have interesting that's probably covered. Believe this image. Yeah, Texas still there? I'm just going to do that. Leave manage their and OK, so if your page looks like that now or whatever your background is, then your CSS is hooked up. How it should be on the last thing we want to do for this section is just make sure that our javascript violist looked up as it should be a swell. So I'm going to talk on this box again right from the left to the right and then tap on main dot Js and then tap editing coda. And then in here. I'm not going to do too much right now, but I'm just going to stay alert. Opening parenthesis, e opening quote. Hello, Space World Exclamation point. I see. And then, if you save that and then when you refresh your page, we should get a little pop up that says hello world. So if that all happened, then your html CSS and JavaScript and images are all set up, right? If they're not, then I will include these files in the project on, so you'll be able to go through and just compare and see what you got wrong. I don't think there's too much here. That's going to be too picky so far. Things to look for if something isn't working our capital letters in your names of things like javascript and CSS. Uh, this doctor needs to be here before and before you open something and just make sure all of your brackets and things are closed, Right? But again, you might need to just look through your code and compare it to how it should be, because code can just be kind of picky about stuff like that. So I think that that is all I wanted to cover on this particular listen. And then in the next one, we're going to get into actually getting all of your images on the page in the way that we want them to be. So way on to the next list. 7. Coding 3 Drawing to the Canvas: All right. So, uh, we're gonna started on actually putting all of our images into on html five canvas. So the goal by the end of this lesson is instead of using this image tag which we're using here, we're going to use on HTML campus element, which is kind of a cool thing that's designed for kind of Web animation and more interactive stuff. Eso We'll go over how to use that a little bit. And we want to be rendering our images in a render loop using request animation frame, which we'll talk about a little bit more. Eso this one. There's going to be a lot of code, and it might look a little bit intimidating, but nothing here is too complicated. And I'll try to go over kind of what the basics are, what we're doing as we go. But if you're unfamiliar with code, that might feel a little overwhelming. So again I'll provide the files to you at the end, and hopefully that will help of it. But, uh, buckle up, I guess. And so first thing we're going to want to rip out Thies to the center test tag and this test image because we're not going to be using them. And instead we're going to put in canvas class equals invest calls. OK, so this with part. Actually, I want to talk about a couple things here. I'm just going to answer this and I'll talk about why I'm doing this. I'm doing with equals. 900 equals both 100 and I d equals. So you might have noticed that I'm doing these classes and ideas on things. If you're not familiar with HTML, class is usually used for styling things. So that's when you say dot something like this in the CSS file, uh, this dot image container. This is a class, uh, selector for CSS, and that just means it's looking for anything with that class on it in your HTML, and then it's going to apply these styles to it. So I have the class of image container on this div about my canvas, and then I'm using dot image container to style it in CSS. So I had a class of canvas to canvas element, and then I'm going to go. I had some stuff for CSS in a second. This with 900 heightening our had 1200. That's the size of my artwork. If your artwork is a different size, you're going to want to include the size of your artwork. Uh, and then the last thing is this I d equals canvas similar to how class works and you can actually use an idea and CSS as well. But you probably shouldn't unless you have a good reason for it on where you do that is with a, uh, number sign, say, But don't do that. Uh, everyone wanted to canvas like this, but an I D is typically used by JavaScript to grab a grabbing element and do things to it. And we're going to do that in our job script file in a minute. So basically, we just want to be able to grab this canvas element in all the ways JavaScript in CSS, and we just wanted to know that it is a 900 by 1200 canvas on. That doesn't necessarily mean that it's going to show up as 912 100 on our page. But just like if you were to include an image and you could say may get the full size of the page or small or whatever, but it's still knows what size it is. This kind canvas works. We're saying business was big. You are. We might tell you something else in CSS. But just so you know, the business of making actually are, um And then I also see I wanted Teoh. Yes, we're going to do a couple of things on the canvas styling wise and again, This is mostly just to make sure that is centered on the page. So with auto max, 100% X with 100% display, walk and margin. So assuming we did things right on, we refresh our page over here. So my hello world from Dr Ascribed to send nothing should show up. No, I don't know for sure if this will work, but I would say background read on this canvas element and you can see that the campus showed up in the middle of the page and it takes the full width of the page. So what we're going for here is we wanted to take a much space as possible while maintaining its aspect ratio. S o. I resize this. You can see that it takes up with full height of the page, but not full with. This is actually just a little bit tricky to do. But that display flex thing I was talking about in the last lesson helps put this sort of thing a lot. So if you put a background color on your campus, it should be showing up. You can resize your page, and it should always show the entire thing while taking as much space as they can, if that makes sense. Okay, so we're going to leave that for just a second, and we're going to go over to job script. So, by the way, if you're using coda and a keyboard on your iPad, I'm using command shift and then square brackets to switch between these files. I think it's fast. You can also just a pound them about the top. They're just little tabs, so you can say html CSS JavaScript on. So I'm going. Teoh, delete that alert because it would be kind of annoying if that pops up every single time would love the page. And most of what we're going to be doing from here on out is in. JavaScript will come back and do just a couple more things in CSS and HTML, but mostly those air done ish for now. So with javascript, we're going get started by getting a reference to our canvas also. So if I do two slash is like this, that means it's a comment and that doesn't do anything to job script. Is is just for our references. Say good preference to you. So this is just so you know. And so I know what this line of code is doing it. I'm going to save our canvas equals document. Yeah, by I d campus. Okay, So a couple of things to talk about right here already, this bar and JavaScript means variable. And so where variable is just really anything that we want to store to use again later on. So we're calling it canvas, and you can call it whatever you want. I'm going to recommend that you called canvas. If you're coming along with this and and then this document don't get element by I d. And also make sure that you pay attention to where the capital letters are in everything that we do here. If you mess up capital letters, things network. Okay, so we're saying document doc get element by i d and their capitals on element and by and I d and then opening pregnancy quote canvas, closing quote, closing privacy. OK, so semicolon JavaScript is kind of like a period on the sentence. It doesn't usually matter that much was kind of considered good form. If you were to put more than one thing on the same line, it does matter. And sometimes people do that. I'm going to try not to do that. But like, it would still work in my garden This But you should put it there. Just It's good practice. These quotes mean this is a stream, and that means this is not referencing this variable. But I said over here, this is just the word canvas And this get element by i. D. This is a built in function in your browser that just says, Okay, go back to my html Look for whatever I gave the i d. Whatever you've given it here. So remember, in our html we called to this canvas element canvas way gave it I d equals campus. Thank you. So now this is saying Go find that thing that we gave the idea of canvas and set into this variable canvas. Okay, so we should have that now. Then we're going to get the reference to canvas context. And and I'm going to call this bar context. People's canvas don't get context to Okay, I get paid attention. Toe capital letters pay attention to quotes. Um, and what this is is the rendering context for that canvas. So the canvas is kind of html element by itself, but it contains, like, as soon as you create that it always has a two D or three D context contained within. We're going to use the TV context, Um, and then that just gives us something to work with later. So when we draw images were trying to the context, not to the canvas. But the context is part of the campus. It probably doesn't really matter that you know that just so you know, um and then we are going Teoh get initialized a loading variable. So as we load all of our images, we need to know when they're loaded because we have to wait until the images are loaded before we can draw them. So I'm going to do you say and our load underscore Counter People's Europe. Um And so as we loaded imagery just going in as soon as any limited image is loaded, we're going to say load counter plus one, And then once it is equal to the number of images that we have, then we can say, OK, all of our images are loved, and we'll get to that in just a minute. So the other thing that we're going to do here is we're going to initialize image objects for each of our layers. And so if you have different layers or you've named them differently than ideo than I did, you're going to need Teoh hit engine how many layers you have and what they are. So for mine, I have a background image and actually, you're still happy. I could just show you what I'm working with. So we have background, which is here. Uh, background equals new, um, way have shadows equal to do are people. Let me show you these as we go. So there's clouds and actually put shadows out of order here. So let's get that, um so we have clouds. Is this next one and clouds is probably a little term for what those actually are on. Then we have little floaty things, stars and their calls that we're going to put the bar floaties one. Because I know I have more than one of these bowties think, too. And then I believe I have my shadows, which I've already put, and then this next one, you can't see it because white background of tap once you can see that's my mask. Then I think I just have two more. There's the actual people bar humans, this new image and then one more far Blue cheese three. Okay, so if you have more than eight players or less than eight layers, you should have the same number of items here as you have layers. You can call them whatever you want. Thes air, just arbitrary Indians that I'm calling mine. You do need to know the actual image file name for later, but for right now, you can call us whatever you want. Right here. Uh, okay. So the next thing that we're going to dio is create a list earlier objects. So, uh, we're going to save our their list people's brackets. Okay, so these brackets and javascript represent a list, and that means it is. I mean, it's really know how to describe it besides a list. But the important thing to keep in mind is that this is a list of something. It can be strings. It can be numbers. It can be objects, which is what we're going to do. It could really be anything, but they are in order that you create. There's other things and JavaScript you can make that aren't in order by default. But these will be in the order that you put them into order matters here. And so I haven't opening with saying started list. This is saying and a list, and then inside of this, we're going to put something called objects or dictionaries, depending on who you talk to. You probably, um, and each of these has it's It's not in order, but you can have keys and values within this. So this is the key. It's called calling an image. You can see this is a string, and they have to be strings on the key side. And then what? We're going. And it is this background variables that we made up here, so you'll know this background is not in quotes, which means it is referencing the variable that I need. So we're handing out that image, and right now it's just a blink image object. But we'll come back to that and then we need to give it the source on that's going to be. This will be a string, which is a path to your image. So if you set things up the same way that I did, there would be layer 11 g, so that would be not slash images slash layer and record one underscore one dot org. If you didn't put your images in a folder like I did, then it would just be like that dot slash clear underscore one underscored one deputy. If you're using, uh, javascript anywhere, you need to go find what that path is for the image, because I don't think you could change it yourself, and then you would use that path here instead. On day, we're going to give it these ones. I'll explain a little bit more when we come back to that, but for now, just probably copy them down, see index, and that's going to represent how close it looks like this layer is to you. Um, position on this is going to be important for changing the position of the layer. Can you talk about this more later? But you can see that I'm actually giving this position, Teoh a value of another object. So he confessed things like that and it can be kind of convenient. Sometimes we're going to give it a planned. Wouldn't recalling that blend for this one is going to be? No. Because this one is just normal. Flint boat if just say no. This at all. It's no boats. That just means blink in JavaScript. Basically, uh, and then we're going to say capacity because I think I'm going to want to change the opacity on one or two layers on. That's just going to be one. So when we say opacity, zero is transparent, one is opaque and have values in between those. Okay, so that's one later in our layer list, and I have eight, So I'm just going to go through these pretty quickly. Just make sure that you hand them the right image and the right path to the file. Those are the important things, and these just copy down how I have them basically. And then you can tweak stuff later. It doesn't look how you want to. Uh, okay, So I'm just going to copy this entire thing and based it down here and then change the parts that what changed? So it's gonna be clouds layer to, and then you connect. We want this to be just a little bit closer than the background, and then the other things will be the same and paste again. This next one is going to be bodies. One, You're three, and we're going to do this as Native 1.25 And actually, this one I want to put a blend mode on. So back in my appropriate file gave this on overlay blend mode. So I'm going to put quotes, overlay, end, quote on. If you have used one modes on any of your layers, you do it. I don't know that everything from appropriate is supported in javascript, so you might need to look that up if you used a weird one or something for using heart makes. You might ask yourself some hard questions, though. So just a heads up. Although it might be supported that transcript anyway, so I just faced a couple more of these constant floaties, too will be layer for and these index will be negative 0.5. And again, I think this one also has an overlay blend mode on. Then this next one is my shadows. Call it shadows. Yeah, in this. And then that's your five. And actually missed this up when I was creating my layer names and stuff. So I want this one to be back for the Z Index. I wanted to be between the clouds and the background and because we're going to set it to multiply. It doesn't actually matter that it's higher in the stack because of the way I works. It will just combined with layers below it anyway, so it won't look around. But that's not too confusing. And we're going to do 1.25 Actually, let's feel like 1.5. We'll see what that looks like, and you can just kind of play with ease if things don't look how you want them to. I'm going to change this one to multiply, and we'll just leave. Opacity has won. It might come back and change that. And then I think, How do I have left? Three more. So this one is my mask, okay? And that is Layer six, and I want that to be the index's zero. So that will be kind of my center rip rotation. So that will stay in place while everything else moves basically on humans layer seven times and that's the index is going to be positive. So you remember I talked about how it's more fun if something is kind of poking out of the page and something is going into the pages are backgrounds with the negatives, the index. They're going to look like they're going into the page on these things with the positives, the index, they're going to look like they're coming off the page, as as we get two or three D effects. So get that is the index of 0.8 and leave everything else. And then this last one is going to be my floaties tree, and that's layer it. And it is the index. Uh, let's see, um, let's do, too that to be popping off pretty far and I wanted these wants to be just a little bit transparent. So I'm going to say 0.9 as my opacity. That would be 90% capacity. And then one thing you need to watch out for If you've copied and pasted like I have, you cannot have a trailing comma at the end of your subjects like that. So make sure you get rid of that, and that should be all of our layers. So again, that looks intimidating. It's not too complicated. Most of these are just copies of each other. I think the thing that's going to be hardest is just making sure that you have the right number of them making sure you have the right path. And, uh, making sure he used the right image name here that you set above. So again, Don't copy me unless you are actually exactly copying me. But make sure you do things according to your artwork for this. Okay, so on this next part, we're going to say layer west. And remember, that's the list we made appear with square brackets. Um, we call that layer underscored list. So down here, we're going to skate safely your underscore list, which is referencing that list, and then we're using this built in. I can never what this is called. I won't say it aerator, but I might be wrong about that. For each function again. That's with a capital eat. So layer list for each opening pregnancy function. Broken Apprentice E player index. Um, and hoping cruelly racket. Make sure you put a closing something calling at the end. And so what this does is we're saying for every item in that layer list and items in the list of this top level So there are objects, each one of these with the little square brackets. Uh, so we're going to say, for each object in this layer list, we're going to run this function. We're going to hand it the object and the index to that object, which is just what number is it in the list. So that function will know if you ask for layer, it's going to know we're talking about the current layer that it is looking at in that list of layers and then index will be the current number of that layer. So, uh, for each of those layers were going to layer got image, which is referencing this image. We gave it. So it's actually a reference to this that we handed that I am. And then we're going to say dot bomb load people's function opening squarely racket with bracket where you wanna call those And remember, we made this load encounter up here. Load underscore. Counterfeit is currently zero. So every time one of these images loads, we want to say load, underscore counter plus people's one That just means add one to it, whatever it is right now at one. And then, um uh So then we want Teoh. We don't want to do anything else until all of the images are loaded, right? We're going to say if load underscore Counter, uh is greater than or equal to you. Um, player underscored list. Let's see if we are going Teoh Drama are That's a potion we haven't made yet, So walk into that. Interesting. So this is this is an if statement and javascript. It basically just says, if whatever you put in the parentheses here is true, then do the stuff inside of there and you can also say else, do something we're not using else here because all we're interested in is if about it is done. So if we've loaded all of our images, but then we want to you Dr Campus, Um and then so after we've set up that player, that image download, it doesn't know what to load yet. So we need to say layer image s R c for source equals player Doc. Cast R C. Okay, so that's singing Load the image, basically. And then once the images loaded, the image already knows to run this function that we created up here that will draw that chemists. So right now, that's not going to do anything because we don't have a truck and dysfunction. Um, but what we can't do is come down here and actually make our job can dysfunction. So we're going to say function, try this, Uh, on this is just creating a function called canvas that we can call from anywhere in our job script file. So first thing they're going to clear Whatever. Yes, begin this because we're running this What? We will be running this function once, Uh, let's see, like, 60 times a second, I think, And if you don't clear it, I don't think it would actually matter for this particular page, assuming you don't have transparency going all the way through. But it could look a little weird. So basically, you want to clear everything and retry 60 times a second. So we're going clear first by saying context where that's a reference to the context that comes with your canvas. You're correct. Zero comma, zero spaces. Uh, canvas in this. What's that saying is we're going to clear this area defined by starting at the top left. I guess this is left zero top zero and going with a cross and height down. So basically the size of our canvas, we are just clearing that rectangle within the canvas. Uh, men, we need Teoh through and actually draw Fuselier. You don't have to draw these. You have to write these comments out like I am. I kind of like to have them because it makes things a little more clear. What I'm doing is I'm reading through my code again later. Um, so we're going to do that same thing as we did up here as far as the for each thing goes, so you can actually just copy this line if you want to. You say later stock for each. You make sure you closed with a closing square bracket and close parentheses and then for each layer in the list, we're going to say its context. Rock image. We're So that's the image we're trying. And then we need the positions layer Position X. And I think that if we run this now, then this will just work so far. And we're so going to change a couple things before we're done with this lesson. So I'm going to hit save in the top rain, and then I need to bring up safari again over here because I have my photos app open and I'm just going to hit refresh. Let's to go back to index dot html It save hold down on the eyeball, open in safari and you can see that my image showed up over here. So that means that all of my layers are being drawn into the context. So I do need to do a couple more things on. We have these sort of set up to go already. The 1st 1 is we're going. Teoh Roseman. Cursory. Okay, we're going. Teoh, make sure that we use the right blend mode. for each layer. Eso We're just going to say your doctor because this will return policy Late blended Sentinel, which it is on most of these layers, remember? So I have blends. No. If that's false, then it won't do what's here. If it's set Teoh a strain like overlay or multiply that it will do what we have here revising context. Well, how's it equals? Later, when they were going to say else. So if Layer Docklands is no or false, we're going to say context global. Was it Operation People's quote, quote cycle? Um and then as we go down s so we can just say right there had command as so you can talk the check mark in the top, right? I'm going to refresh and you can see that my lawyer blend modes just changed. So my shadows air set to multiply. My little floaties in the background are set to overlay, and that's just like and then one more thing we need to do is just set the opacity. So on that front layer, the floaties in the foreground remember I said it t 0.9 opacity, and right now they're completely opaque. You can't see through them at all. I'm going to say Context, global equals player and now refresh that. You can see they just turned a little bit transparent. So I think this is just about done. The last thing we need to dio is this is only running once, and then it's done. And remember, we talked about how we're going to use a request animation frame to run through the 60 times a second. So you do need to be just a little bit careful here. But basically request animation frame. Is it built anything on your browser that will run a function as many times that can draw to the screen, which on most modern browsers is going to be 60 Rangers again? So instead of calling this with the the parentheses here, instead we're going to say, request animation, opening fantasy. And then we're just giving it the name of the function with nothing. It's just the name of the function, which is dropped canvas and then remember to pay attention to capital letters. So that's request of the lower keys our animation with has with every case a and frame with an upper case F drug canvas eso If we say that, that should go through once, which is great. And then the last thing we need to dio is at the very end of our rocky and dysfunction. So after this layer list for each But before this closing curly bracket, we're going to say that same thing requesting permission. Word of warning right here. Do not do it this way. That will crash. Your probably don't do that. Uh, speaking from experience. So you want to call requesting animation frame? Tracking this and basically what that does is it runs through this. So we said to call it using her quest animation bring here. So then it goes down here, runs it once, and then it gets to the end and it says, Oh, start over. And it just keeps going through this until you talk to stop, which were not telling it to stop. So I'm going to say that I'm going to hear refresh over here, and you shouldn't see any difference, but it is actually rendering 60 times a second. Now that's gonna be important. One update the position based on touch and motion, because that's how we actually move things around. Okay, so the other thing I want to do is gonna go to this background for any help in your CSS. I don't really like having read flash every time I load the page, but I believe that that is going to be it for this lesson. So in the next one, we're actually going to get it to start moving based on touch and mouse, and then we'll go from there. 8. Coding 4 Touch and Mouse Controls: Okay, so if you followed all of the other lessons so far, you should be at a point where all of your images are being drawn to canvas. So this should be a bunch of different layers on the right. But it should look like you're finished image, but it won't actually do anything yet, So we're going to get so when you touch and drag on the screen, the layers actually move around and they look kind of three D. So, uh, to start, I'm going to just create a section at the bottom of my JavaScript file here and using a job script Comment with country Slash is at the start. I'm just going to say touch and controls, um and then So the first thing that we want to do is just This doesn't matter quite as much for touch. But if you're using the mouse, you only want the image to move. When you're clicking and dragging, you don't want to move any time your mouse is in the window. I mean, unless that is what you want, then you do you. But for me, I only wanted to move when I am actually intentionally moving in, So I'm gonna save are being equals falls. And this is just an arbitrary variable that I'm going to create that says, by default, this is false. We're going to come back and reference that later in some of the things that we're doing. It said it too. True to you, start clicking or start touching the screen. But so just do that to start with. And then the next thing we want to do is say we're going to initialize some just kind of containers to hold our touch or mouse co ordinates s. So we need to do two of those One is going to be what is going to be called winter initial , and that's gonna be somewhere where we keep track of where you first touched or where you first clicked on the screen. That's going to be important because, uh, we'll talk about it later. But basically, if you don't keep track of this and just move it to where you touched on screen on things, jump around as soon as you touch her click. What just looks really strange. We're going to say x zero. Why zero? So this is an object number So are key. Is X our value is zero are keys. Why? Value is zero and then we're going to save our pointer. And that's just going to be a container for where our current purser or touch position is on something 00 Um, and then so to actually listen to touch or mouse events, we have to do this thing called adding an event listener Eso We want toe Onley fire this when you tap on the campus to start with So we're going to say canvas And remember, that's a reference to read Shame off canvas dot ad listener And then we're going to say touch, start traceable, right? And then we're going to call the function winter start because we're going to use this for touch and house. So I just means when you start touching the screen, run this function without reading the function way. Want to do the same thing from outsourcing at Listen in the mess? Yeah, call the same person, Mr um So these air both built in just kind of a name for those events that fire in your browser. So you do have to name them that exactly again. Pay attention to capital letters at a lower case letters and these things they do matter. And then we're going to actually create that function. So pointer on a more passive in effect and that will just automatically pass because event listener, you don't have to pass it in. Usually with a function, you have to actually explicitly hand it something that you want it a function to receive, but not in this case. So it's kind of nice. So the first thing that we're going to do as soon as we start touching or start looking is set moving too true, and that's going to come into play in a minute. Um, but so now we know like any time we can just check that variable to see. Are you currently clicking screening? Are you currently touching the screen? The next thing is, let's just make sure that actually works. So it's just it's everything I'm going to say. Alert. Yeah, hello, you the streak. So I'm going to say that community s you can have the little check mark in the top right corner and then I'm just going to refresh the page. I didn't work again. OK, so I have to go back to index. Haven't hold on the eyeball in the top, right. And they open in safari and then refresh the screen, Refresh the page. And then as soon as I touch the screen, I get a Hello, you touch the screen. Okay, so I'm going back to my JavaScript file on, and so I don't actually want that there. That's just to make sure that it was hooked up. Right? If you do happen to have something that has a mouse as well, you can check that should work too. Um, and then we want to see what kind of event this is. We want to check. Is this touchy meant or is this a mouse event? Because even though they seem like they should be the same, you reference them just a little bit differently. But we're going to say if event uptight equals, touch, start. Okay. And then we're going to say touch. Let's just say alert touch and then everyone else you got because we could say else if type equals now, snail, then we can say alert. And I'm not gonna test that because I don't have a house connected to I got obviously as a I was 12.2 or something that I'm using on here. That is not a thing. Eso Then I'm going to refresh over here trips and screen and it says touch. So that means that that's working. Cool. I'm going to leave you with. And then so what? We want to dio once we have started a touch event or a mass event is we want to set the initial that point your initial thing. Remember, we made this point your initial variable up here and we want to just set where did you first touch or click on the screen? Hunter. Initial X equals event Dr. Touches Bracket is here and then something with white. What? Your usual Why touches zero eso this on? This is the difference between touch and mouse. As far as how you're handling them is this touches zero? Because technically, if you're using touch, he could be using multi touch. So the zero means is the first item in the array of touches or the list of touches. Zero is just how you index the first item in the list. So saying the first touch to have touched screen. And what is its position in the client? Should see what browser. And then So from else, we're going to a point. Exp equals Find X. I'm sure smoking because you don't have to say the first mouse that touched the screen. I don't know of any system that supports more than one mouse. Yeah, let me know if you dio um and some better says, uh, now we know where you first touch the screen. So that's how we're going to do there. Um, the next thing we want to do is we want anywhere that you move your mouse or your touch within the entire window. We want to listen to where it is so we can move that we can offset the images based on that . So we're going to say, Window, that event listener window is just a built anything and job scripted. That's what you're talking about. You have to set that up. We're going to say touch, move, and we wanted call this function point your and then window actors. And then we actually need to create our point remove function, and then we want to say he didn't prevent defaults. People yelling outside. Cool on. This is important because as you if if your window is too large, which a lot of the time, it just is based on the way that Safari works on the iPhone or iPad. I need to save us and refresh. Uh, you can see that it's scrolls, even though I don't wanted to scroll. So this event that prevent default is going to be important for that, basically, just says, Don't do what you would normally do when I move my finger or mouse on the screen, and we need to do that in two places. That doesn't work quite yet. But then the other thing we do is remember we have that moving and that moving variable we set up earlier. So to start with, it was false. Then we started clicking or touching the screen, and it became true. And now we just want to say on Lee, if this is true, then do the following things they were saying. If it's true that you can write some other code, so we're going to keep track of where is our print ex equipment? And to start with Rubin Se zero, where is our current white court in it was a 60 and then we're putting in a couple more. If so, sorry. This is getting a couple layers deep saying, if event equals touch, then we are going to say X equals event. Such is your own and, uh, current Y equals touches your All right. So we have our initial position that we set up here and then now we know the current position. And if you remember from physics, then your final position in Let's see, how does this work You're changing distance is final minutes initial, So we're going to go to that in just a minute. Um, but we also want to make sure way to handle a mouse event. Here's what else. If you have a tight cools grant, X equals which is no touching. I really can't take today. Why equals stop playing. Why, Okay, so now we have our current position ever cursor, and then we just want Teoh actually set the pointer offset. So outside of these two statements, So just below this bracket, you want to say Pointer X. And remember, we set that up way up here just as a zero. But we're going over right? That we're going to say pointed at X equals, uh, current X. That's our final position, Remember? Minus Quinter underscore conditional dot Exe pointer y equals current. Why? Minus. So that tells us how far from where you started should this be at this point? Um and then I think Okay, so if you want to just, uh let's go back and actually make this work first, and then we'll go and clean up some little details. But the thing that we want to do to start with is back in our dropcam dysfunction up here before we actually draw the image into the screen. Now we need to see where should we draw the image? Because it's going. I mean, that's kind of the point is, we want to move where we're drawing it, and that will make it look like the layers are a little bit three D based on the parallax effect. Um, so we are going to just say, Let's see, we're going to say layer dot position equals get props. That is a function we're going to write in just a second concept, the later so that get offset punching. We're going right down here, infection. Get upset. And it is this name for a layer. And we're going to say a bar touch upset X equals pointer X, um times layer that Z. So this is going to be important because if we don't do this layer dogs, the index, everything would just move together. And then it just looks like you're scrolling the screen. We're seeing far too much. Why equals Pointer? Why times bigger. See? Remember that Z indexes referencing how close or how far away from the screen we want the that layer to appear So that's going to create our kind of three d effect. Um and then we want to just say we're going to add a couple more things to this. So it seems a little bit pointless right now, but we'll use it in a minute. It's a part offset equals spoken in curly bracket. Thanks is going to touch offset X and why it's going to be touch, why and that with semicolon. And then we're just going to return. This guy's a return offset. And that just says whatever asked for this function. Just give it back this thing that we just said, which is this upset? So now the layered opposition is going to be getting this offset back instead of the 00 that we gave it originally, Um, so now I believe that if we had saved on refreshed this page and I'm gonna take a video so you can actually see what I'm doing with my hand. Um, now, when you use your finger on the screen, your players will move around. You can see it's also scrolling the screen, which we don't really want. So we'll go fix that in just a second, and this is probably too strong of it back. So we're gonna make a couple of adjustments to this, but pretty cool. All right, so first thing we wanted Teoh is probably the easiest is we're just coined it tone down that effect a little bit. So we're going to save our touch multiplier equals 0.3. And then, in each of these little calculations, were saying pointer dot x times is he Index, we're going. Also say times touch, it's a and you consent this touch multiplier to whatever you want. Depending on how larger canvases and things like that you might want to tweak this a little bit so you can play around with that number, See what you like. I did this little earlier, and I like this number. So we're gonna take a video here and just very fresh, and so you can see that's a lot more subtle. Our Disney's still scrolling the screen, so we'll go back and fix that. And so to fix that screen scrolling I think we need to dio is go down here and say, um, canvas don't add event listener. Um, touch, move, and we're going to say function event. So this is called a I called it space efficient, arbitrary function that you're passing to this listener. It means you're not naming it. You're just giving it a function and you're listening for that event. So we're going to say, event stuff, default. So that's going to default behavior when you touch the screen and move is that the campus is going to move around the screen because you're scrolling screen and we don't want that to happen. We only wanted to move based on what we're telling you to do, not based on how tall it thinks the window is and then we're going to do the same thing from us. So I've saved that refreshing my page. And if you play with it with your finger now, no, it will not scroll a page anymore. So that's gonna call. And then we want to dio one last thing here, which is you see, when I stopped touching the screen, it just stays where I stopped on we never that we wanted to snap back to its original position when you let go. So we're going to say windows that so we're using window because you could stop touching off the canvas element. We wanted toe fire whenever you looked your finger anywhere in Brother, it's worth saying. How do you listener much understanding it and not a description? Introspection? We're saying and gesture, I'm sure. Same thing for oh, typing nos. Mr. You know, we're going to say and just you write our digestive function, function and gesture records is going to be personal. We want to make sure moving people small, so if you're using amounts you to notice that as soon as you released your passport and it keeps moving, whatever you move, mess with a screen and this says, Don't do that anymore because now it's false and we're checking to make sure it's true before we move anything. And then the next thing is, we're going to say quicker X equals zero wear y equals. Okay, so now I've saved that and it's taking video. I'm going to refresh this page and release. It snaps back to center. Pretty cool. All right, so that is all for our touch and mouse and whatever the word is moving things based on touching notes. On the next lesson, we're going to add motion controls. So listening to the gyroscope on your device, someone, you move it around physically, the image action moves around, so we will go start that listen. 9. Coding 5 Motion Controls: before we get started on this section. If you are running IOS 12.2 or newer than you need to go into settings and then scroll down to safari and make sure that in the privacy and Security section motion and orientation access is turned on, that's going to be off by default. So you need to flip that switch and make sure it's on. If you don't do that, nothing in this section is going to work. All right, let's get started on implementing motion controls on this so that when we took the device, you can get kind of a three d effect. So just at the very independent I was script file, I'm going to go down and comments saying Motion controls. I like keeping my different sections separate as much as I can. And this isn't It's hard to do completely because there's places where you have tow, mix things up a little bit and use them together. But what extent? I can't think it's nice to have a section for most of my motion controls. Most of my touch controls things like that. The first thing we're going to do is just like we did with the touch controls is we're going to initialize our positions. So we want What angle was the device that when you first refreshed the page and what angle is it at now? So we're going to say initialized variables or emotion based. Relax. And we're going to stay far. Motion underscored initial cools object that some are calling to end X. All right, actually, you could say serial on these. It doesn't matter. Let's see. Well, let's say no. I think that's the way that I had everything before. We're going to stay in motion. Our emotions equals objects, and these ones will be X zero. Why, you're and then down here, we're going to actually listen to the gyroscope position. So we're going to say, uh, well, events. And, uh so we're going to say window dock at event listener, um, device. And then we're gonna pass that not dysfunction. Something weird with my spaces here that I don't like. Um and so what we want to do is the first time that this runs through. This is going to run through kind of constantly as the pages up, but the very first time we wanna say where? Like, what angle is your device currently at? Because we don't want you load the page and it's already at a weird angle, like the images are already offset in some strange way. Uh, so we're going to say if this is the first true, um, if not ocean initial dot Exe and not option underscored initial. Why? So this exclamation point at the start of a variable? So I have this if statement and then I'm saying if exclamation point motion underscore initial exclamation point here, it's kind of a code shorthand for saying knocked this source saying, If this is not there and because we called it null appear was that motion initial dot Exe is no. And we're saying if not motion initial dot Exe because no, that returns true for is it not there? That's a little confusing, but basically we're saying is that set already and if not and same thing for why this end and is saying we're checking for both of these things. So I need to say his ex not set and why It is also not said. Yeah, so both of those are not set. Then we're going to stay in motion underscores initial next equals You've been Dr Scored. Why he calls. So this means we know where the device, what angle the device was held at when we first loaded it. So then after that, we want to see where is the device now and then we can take the difference and see how much should we offset things based on how far it's moved? Since you loaded the page? Eso There's a couple all There's four different orientations that we need to handle here because the axes kind of change based on what way you're holding your devices. So we need to handle. Um, device is in is in portrait orientation. Um, device advice is in landscape upon its decide. Um, the device is in landscape. It's right. Side devices upside down. You're holding it like an animal. Okay, so, uh, this 1st 1 we're just going to say if window dot orientation equals zero, that means it is in portrait. Um, and we're actually going to skip that for now because I'm working on the left side, and I just wanna make sure it's working before we get too carried away with these. And then if the window orientation is 90. That's left side on its landscape on its left side, which is the way that I am currently holding My God. So let's get these other ones set up really quickly. But then I'm going to go back to that. Want to test first equals negative 90? Um, that is this and landscape wanted to right side. And then we can just say else and because the only remaining possibility is that it's upside down, so eso if it is on its left side, then we're going to say motion X. And remember, we set up our motion older here we're overriding Motion X, and we're seeing it equals that's dot pita, which is the current position of the device minus minus motion underscore initial X, and then motion y equals event start. Uh, waas. That should be negative. Event Dark gamma plus emotion. Your score conditional dot Right. Uh, just make sure you have that right. It's about Cameron. Okay, so I think that should be right for holding it in landscape on the left side. So we need Teoh to our get offset function where we are returning the offset of each layer remember, And between your touch offset and you're upset object that we return, we're going to say far promotion underscore offset, underscore X equals, uh dot x Times player Z underscored index. And remember, that is what's going to make our layers move at different rates. Basically, make it look three d. Otherwise, that will move together and you won't really notice anything except that it looks like the pages. It's crawling. So we're going to that and then we're going to save our motion. Underscore, Offset. Underscore. Why was motion? Why was later Dodds Other sport index and then Because I already know that this is a pretty weak effect. I'm going to just make a motion multiplier as well. So it's a bar motion underscore. Bullet supplier equals 2.5, and then same as we did with touch one. I'm going to say times emotion underscore to buy here, and that's just copy and paste it so it's a little faster. And then again, if your canvas is a different size, or if you just want this to be stronger or weaker, you can play with this number, and it will change the strength of the motion effect. Andi, Right here Wednesday plus potion Underscore. Upset. Underscore X here. We're going to say Bless emotion. Underscore. Offset. Underscore Why? And so that's saying the total upset is going to be touch plus motion. So you could be changing the position of the layers with touch and tilting your device at the same time. And they will both work and nothing will jump around in a weird way. So I'm going to save that. And then I am going Teoh Teik Video. Refresh the page and let's just see if it worked actually going to make this a little bit bigger first. All right, so I'm gonna refresh. And then if I told my device, you could see that everything looks kind of cool in three D. Okay, so that is only if it's on its left side. So we need to go and account for each of these different orientations. And I am hoping that these just work if you're following along with my code closely because they can be really tricky to figure out which is which and which should be which way. So if it's not working for you, you might need to just kind of tweak, positives and negatives and tell things work the way that they should. And it could be kind of confusing, but hopefully you won't need to do that. So in this window dot orientation equals zero, which is portrait orientation. We're going to stay in motion. X equals minus motion. Underscore initial. Why? And then motion why equals event? Beta minus motion Underscore Initial, uh, motion initial x and then in the landscape on its right side, which is negative. 90. We're going to emotion about X equals negative, even. Stop beta plus motion of your score initial dot Exe emotion y equals. That's cama minus motion underscore initial. Why on And then if it's upside down, it's going to be the opposite of portrait orientation. So we're going to say commotion dot x equals negative gamma No, I havent equals up here. Just missed u minus would be plus underscored. All right. And then emotion about y equals negative, less style, X. Um OK, so I'm going to see if this and then a this is gonna be a little tricky to hold my phone and check these all same time, But I'm gonna give it my best shot. So going very fresh, I can see my escape did not break. So that's still extreme. I'm gonna tell that into I'm not repressed the page, but you can see that the players are moving the way that they said, Oh, that looks kind of three D. Let's get on the trade side. Same thing They are moving the rag where all this is very tricky. Sorry. Upside down. The players are moving. How they should cool. All right, So to fix that issue where you took that and everything jumps way over to the side, we're going to go below this device orientation listener, and we're just going to say, window dot bad event listener Senator um, orientation, give it a not dysfunction with event semi colon and say emotion underscored initial finish . Initial X equals zero underscored. Initial y equals zero. So now if I say that, take another video. That's going to be another weird awkward having my device around. So now works landscape. I change it a portrait. It actually just puts everything back in the center, and that will work for every reputation. That's weird contortions again. Um, but I believe that that's everything we wanted to ask for emotion controls. So in there, just a couple more things that we can kind of polish a little bit. So next Listen, I'm going to put some finishing touches on things, and we'll go from there. Okay? I did want to point out one last thing with this because I think I'm going to get questions about it. And if you hold your device perfectly upright is a little tricky. You will see that everything jumps. Um, that's just effect of how the gyroscope returns data. And honestly, I have no clue how to fix it. I've spent a long time trying to figure that out, and I do not know. So if any of you are cool development wizards who know how to compensate for that, please let me know and I will update this. Listen, thanks. 10. Coding 6 Finishing Touches: There's just a couple more things that I would I like to change on here. Just some kind of finishing touches, things that make it look a little more polished. So the first of those is going to be a loading screen. So if you're living this off of a server, it could take a couple seconds to load. And it just kind of looks broken as Lakers come in one at a time. So we're already counted, like we already know when everything is loaded. So I'm just going to go to the HTML over here and underneath canvas on it once they do, equals loading dash screen, and then I d equals. And then inside of African state looting duck slash. Okay, I'm going to say about and then go over to your CSS file and underneath dot canvas. We're going to dob loaded ash screen and then opening bracket, and there's gonna be quite a few of these. So you might need a positive get the mall. But I'm gonna say position absolute. Oh, I with 100% 100% background. Zero zero zero Right here. Visibility capacity. Um, textile center display. Fax Flix direction. Uh, line I center just by uh huh. Center under transition. There s he's all your points that's color and also probably don't. Okay, so if you've got all of that one more underneath that says loading bash's screen dot space between those two years, uh, saying visibility hidden. Fasten your So basically, all of this pretty much makes a white overlay screen that has the word loading right in the middle of it will fade out when you add the class hit into it, which will do with your dogs. Good. Um, yeah. There's not really a lot to that other than kind of vertically aligning the text and horizontally lining the text. So I'm gonna get saved there. We're going over to Java script, and then we just add a couple things. So I'm up at the top of the job script file and right above this load count ramblings, they are loaded, equals falls, falls, and then I want to get a reference to the loading screen above that, and that's just gonna be far. Underscore screen equals element by E. And that's called blowing in our HTML. I'm gonna say that I'm going to come down Teoh, where we check it, everything is loaded. So that's right here in our layer list for each inside of this, if load counter is greater than or equal to layer list stopping. So we're going to say hi. That's a function that we need to write. It is all right. And down here we just need to say function. I have a loading and inside of that will say loading underscore screen Plus with a capital L on the list. Uh, okay, so say that refresh over here. And you could see you have a loading screen that shows up and then fades out. It's loaded. So that's a nice little addition. So the next thing that we're going to want to do is we're going to add a little bit of a three D effect. So So you've got your layer offsets. But if you're just looking at this not through a camera, it doesn't look Super three D's. We're going to add kind of a rotation of the entire canvas element as well. Um, this is a little trickier, probably less coming, though, so we're going to go down inside of this jockey and dysfunction just underneath our clear direct lying here at a couple of lines and then we're going to say calculate Oh, much. This should 30. And then we're gonna say our state underscore X equals er why? By since hero Negative 05 us glass fantasy emotion dot Why? Since 1.2 semicolon and then fate y equals, What about next time since your 0.15 plus dot x and then underneath that, we're actually going to rotate the campus? Actually, so we're going to say canvas, that style cools. Uh, this could be a little tricky, so I might actually do this right about here. I'm going to save our transform. Strange, uh, equals. So what we're doing is we're making a strange using some variables inside the string that we're setting as a CSS value. So this is just a little bit weird, but bear with me. I need to be careful about where you put quotes here, though. Rotate X opening pregnancy end quote plus underscore pecs. US opening quote DEG ending parentheses, Space replicate. Why? Okay. Pregnancy end. Quote plus underscore. Why Deck semi colon. Here. We're going reference that treats strict. Okay, So I had saved and I'm going to rotate our way freshman page over here and now you can see that the entire thing actually rotates a little bit. That's so I didn't need that negative, actually. Negative 0.15 and looks better. So now the entire thing kind of rotates just a bit as I move my finger around the screen or if I move my device, one of those is inverted when I'm living my device. So I probably need two times negative on that motion and probably motion Why, Yeah, I think that's better. OK, cool. So now you have more three D effect. Great. Um, and then in the last thing I want to do is you know, this when I'm using touch controls or mouse and then let go just immediately goes back to normal. I'd like to animate that back. I have been trained not to use third party JavaScript libraries mostly, but there's a pretty cool one that I just want to show you really quick called Tween dot Js . So that's available on get have and I will include a link to it in the project on, But you open it up. Let's see if you go to Tween O J s. This is the page that you would come to you and then you and tap on source here and then between Dutch A s and and you can hit rock and you should be able to select everything by tapping and holding on the screen. This could be just a little bit annoying on IOS, but with with enough patients, I think you could do it. I'm going to copy all of that and then back in Kota and going to tap on the little box icon in the top left and then I'm going to hit the plus at the top right of the code, A screen and hit new file Got a problem between dot Js all over case and creed And then I want to tap on Tween dodgy s top editor in Kota Tap ones and paste And it looks like I got everything okay and I'm going to hit save in the top, right? And then I'm just going tap on Tween duchy s at the top and it closed Tween duchess. So then we're going to go back to index dot html And this is just how you would include another job script library So right above our main dot Js file. I'm going to say script type equals slash JavaScript Force equals quote that slash yes, open that. I'm going to save that and then go back to you on Java script file. And there's a couple places that we need to edit this. Let's go back to our image here. Make sure that's working. Okay, so I just don't see place where this is going to start. Kind of conceptually is when you release touch or mouse. So that's in our end gesture function, which is right here. So you're going to delete pointer dot exe and pointer dia y equals zero both of those lines . And instead you're going to say between Capitals capitally and then we're going to say are under underscored mean equals new beatable capitals. A couple sugar that to and thanks zero Why? It's hero. Curly bracket, 300 princey. Easy. I mean back scared. I think that's right. Yeah. Okay, so basically what this does is it says when you stop touching or clicking on the screen, it's going to start a new Tween that will automatically update in our render loop. So we need to go back to our render loop, which is have been hard rock and dysfunction here. So right underneath the part where you clear the oh context, we are instead well known. It's dead. We're just going to say, and we will say that date and I think that's all you need to do. So we could save and then refresh page and then you move it and then let go. You can see that now. It bounces back nicely, so you don't have to do that. That's optional, but I think it's a little nicer. Doesn't feel quite is broken when you let go. Um, and really, that's about it s Oh, I hope you've enjoyed this. Let me know if you have questions in the discussion section. I, unfortunately, can't help everybody with all of their code like I mentioned before. But if you have some specific questions, make sure you check out the code that I'll include and let me know. And thanks so much for working 11. Appendix 1 iOS 13 Support: Hey guys. So I just wanted to give you a quick update since I've had a West 13 and I was 13 came out . I've had a few questions about how to make the gyroscope motion work. Apple has changed that with the latest operating systems. So if you remember in previous lesson, I said you need to go into settings and enable a switch in there to make it work. Three good news is you don't have to do that anymore. The bad news is you have to add a little bit more coated to make this work now. But I think overall it's a better solution than Waas. So this is actually pretty quick. So I'm tilting my iPad. You can't see this, but the image on the right isn't moving at all, and that's not what we want. So this is just starting with the very end of the the code example that I have posted in the resource is section products and resources. And at the very bottom of your main dot Js file, you're just going to add a line that says window dot at event listener, make sure you pay attention to capitalization on these things such end and then function. You close that semicolon and then we're just going to say inside of that enable ocean and then we need to write that enable motion functions We're going to function and able machine . And then within this, we're just going to say if we go dot you guys Korean station on, then device complementation and request permission and close that with, um in parentheses here, and make sure that you get the capital d at the start of this on Capitol owned capital. You this is a built in I don't know this built in thing building thing in your Web browser . So you need to make sure if you get the capitalization wrong, it won't work on going to save this. And then if I go refresh my Web page over here and then I'm tilting my iPad and still nothing is happening. But when I tap the screen, it will display this little message that says, I would like to access motion and orientation, so I'm going to hit, allow. And now, as I told my iPad, you can see that it's working again. Eso you can I'm just doing it based on touch. And that's this ad event listener part over here. Um and that just means when you touch the screen, as soon as you lift your finger, that's going to run. And you can add a but in or something like that, our some other way to enable this. So on my website, if you look at some of these, I have a little button that says Enable orientation access. There's much more CSS involved in that. So I'm not going to bother right now, but that's probably a little bit more obvious way to do things. But for now, this will work. But you do. If you want to enable this some other way, then just one touch end. You can't do it automatically. That's the catch here. You can't just run this as soon as the page loads. It has to be something that the user interacts with that makes it run. Eso that could be a tap click. I don't think you can do it on Swipe. You can try it if you want to you. But, uh, yeah, so I hope that helps some view and, uh, good luck. Let me know if you have questions 12. Appendix 2 Basic Debugging: Hey, so I just wanted to go over a little bit of debugging on this as long as I'm making updates to the class s. Oh, I should have gone over this more originally, but there are some easy ways to figure out or at least get kind of a clue of where your code is going wrong. Eso mostly We've been running our code side by side. So the code editor APP is on the left side and safaris on the right side. But to use this d bugger in code editor or whatever they call it now, uh, you need Teoh actually run your code in their built in preview. Um, so in your index dot html file, you could just tap this eyeball at the top. Um, I think to open it and support you tap and hold a frustration. Do that in a previous lesson. But you just happened once and you can see that you get this nice little preview running right in your half on Ben at the top, right? Just below the check mark. There's a rectangle with cross hairs in it. If you tap on that, you'll see you get this big gray rectangle with some little 20 0 things at the top left of it s So this is called your console. The one in this app isn't fantastic. There's much better ones in desktop browsers. But this is one of the better options on the iPad. So right now you can see I don't have any errors, which means my code is working well, which is great. A lot of you when you run into problems, probably would have a bunch of Ares here. So I'm going to show you kind of what those would look like and how to track something down . So let's just go and change something in here. Like, for instance, let's say I spelled point your initial as punter initial, and I hope that's not a bad word, uh, in a language I don't know or something. But if I go back to my index violin, just hit, refresh at the top, still no errors. But once I tapped the screen to start moving suddenly it's full of red said, saying, Can't find variable pointer initials. So that tells me in my javascript something is wrong with that point. Your initial, uh, variable. So I go back to Java script. Basically, you could do a search in here or something and just try to find what's going on or until the order start basically and on desktop browsers a lot of the time, I will tell you what line number the problem is on as well on bats, these little numbers off to the left side of your screen on. But I just want to fix that. Go back. And then also, if you do end up with a consul completely full of errors like this, you can tap our type clear at the bottom of it with your little function. Parentheses, understood. Entering it will clear everything for you. Yeah, so that's just some really quick debugging tips. Hopefully, that helps somebody, uh, thanks.