WEBVTT 00:00.000 --> 00:14.520 Hi everyone, welcome to this tutorial on how to integrate p5.js sketches into the University 00:14.520 --> 00:17.400 of Oslo Vortex Editor. 00:17.400 --> 00:23.400 We're going to be going over a few examples today, the first of which is a non-interactive, 00:23.400 --> 00:26.400 pretty basic p5.js sketch. 00:26.400 --> 00:32.000 The next being an interactive one, followed by one that includes sound, and finally integrating 00:32.000 --> 00:37.280 multiple p5.js sketches into the same UIO Vortex page. 00:37.280 --> 00:41.560 So let's start by introducing this first one right here. 00:41.560 --> 00:48.660 It's a pretty basic p5.js sketch that generates multiple smiley faces of different sizes over 00:48.660 --> 00:50.260 and over again. 00:50.260 --> 00:57.360 So now we can view the JavaScript code that actually puts the p5.js sketch into the Vortex 00:57.360 --> 00:58.420 body. 00:58.420 --> 01:04.620 So as you can see right here, we're declaring a function with a variable called s1, one 01:04.620 --> 01:08.060 function argument that we're just calling sketch. 01:08.060 --> 01:11.180 You'll see that this is very important for later. 01:11.180 --> 01:16.060 And then up on top we have to declare a few things that weren't in the original p5.js 01:16.060 --> 01:17.060 sketch. 01:17.060 --> 01:22.980 First off, just the canvas, and then the wrapper, and then the wrapper class, which should always 01:22.980 --> 01:29.340 be the Vortex article body, as well as the parent ID, which in this one we're just calling 01:29.340 --> 01:35.220 p5.js workshop1 segment3 because this is from a previous workshop. 01:35.220 --> 01:45.240 So instead of the original way of declaring the function by saying function setup like 01:45.420 --> 01:53.180 this, we need to change it up because it's a part of the sketch here. 01:53.180 --> 01:58.040 So we'll change it up by doing this. 01:58.040 --> 02:02.800 Sketch.setup is equal to, and then if there's no arguments, it's just empty braces. 02:02.800 --> 02:06.200 And then we can finally go into our function. 02:06.200 --> 02:14.640 And as you'll notice, this sketch. right here, anything that p5.js uses as a function or 02:14.640 --> 02:20.720 a variable or whatever, you have to put the sketch. before and or else the console will 02:20.720 --> 02:22.880 complain. 02:22.880 --> 02:27.320 So now that we have that out of the way, we can see another thing that we don't have in 02:27.320 --> 02:35.120 our original p5.js is declaring the wrapper, which you do by doing document.getElement 02:35.120 --> 02:38.960 by class name, wrapper class zero. 02:38.960 --> 02:45.280 And then the parent, which is document.getElement by ID, the parent ID that we've declared right 02:45.280 --> 02:46.480 here. 02:46.480 --> 02:52.120 And then from there, we can find the canvas width, which is the wrapper.offsetWidth. 02:52.120 --> 02:57.080 And then we can put that in our canvas, which will do the createCanvas. 02:57.080 --> 03:01.280 Again there's sketch. before it because this is a p5.js function. 03:01.280 --> 03:07.080 And as the width, we'll use the canvas width so that it better matches with the article 03:07.080 --> 03:08.940 body for Vortex. 03:08.940 --> 03:11.780 And then just a normal height of 400. 03:11.780 --> 03:16.640 We need to hard code that for this example, at least. 03:16.640 --> 03:22.380 And then finally, you set the canvas.parentID to the parent ID that we've set. 03:22.380 --> 03:26.100 And then we go forward just editing the normal code that we have. 03:26.100 --> 03:29.220 In this case, we have sketch.background. 03:29.220 --> 03:32.580 And then it's also important to note that there should be a semicolon enclosing every 03:32.580 --> 03:38.820 function within the S1 function right here. 03:39.700 --> 03:44.660 So the setup, the draw, and the drawSmiley functions all end with semicolons as well 03:44.660 --> 03:46.980 as the final S1 function. 03:46.980 --> 03:49.300 So make sure you do that. 03:49.300 --> 03:55.460 And then the code works pretty much exactly the same except we do sketch.draw, sketch.translate, 03:55.460 --> 04:00.220 sketch.width, sketch.random, so on and so forth. 04:00.220 --> 04:03.460 You might be able to get it all at once, but it might be trial and error. 04:03.460 --> 04:08.020 Also all the drawing tools and the drawSmiley, such as sketch.fill and sketch.stroke, they 04:08.020 --> 04:12.340 should all have sketch.beforehand as well. 04:12.340 --> 04:16.580 So once we're done with all that, we go down here and we write one final line. 04:16.580 --> 04:21.540 We create a variable called myP5, which is equal to newP5. 04:21.540 --> 04:29.820 And then we put whatever the name of our function is, and then the name of our parent ID here. 04:29.820 --> 04:35.620 So once that's all matched up, now we can upload it to a spot on Vortex. 04:35.620 --> 04:41.260 I'm putting it all in a folder called app. 04:41.260 --> 04:46.300 And we just need to upload p5integration.js. 04:46.300 --> 04:52.060 Be very careful about capitals here because all of these are lowercase now. 04:52.060 --> 04:57.740 So I called it p5integration with a capital I, and then they make it a lowercase I. 04:57.740 --> 05:00.800 And this is going to be very important for the next section. 05:00.800 --> 05:08.360 So now we go to our normal edit article page right here for our test article. 05:08.360 --> 05:14.280 And we're going to scroll down to where the main content is and press the source button. 05:14.280 --> 05:21.320 And once we're here, we see that we have a script that contains the p5.js library. 05:21.320 --> 05:24.720 We have that in our app folder under p5.min.js. 05:24.720 --> 05:29.000 I believe you'll be able to find that online. 05:29.000 --> 05:34.840 Under normal circumstances, you should be able to go to the p5js.org slash download 05:34.840 --> 05:35.840 link. 05:35.840 --> 05:40.920 But in order to keep things consistent with our tutorial, you can just go straight to 05:40.920 --> 05:47.000 the Creative Computing Hub app folder and download it from there, and then put it into 05:47.000 --> 05:53.000 whatever folder that you want to in order to use it for yourself. 05:53.000 --> 05:59.240 And then a script that also includes the p5integration.js file that we've uploaded 05:59.240 --> 06:00.240 here as well. 06:00.240 --> 06:06.440 Once we've declared those two scripts, we can declare a div ID with the name of our 06:06.440 --> 06:09.380 parent ID that we declared in the file. 06:09.380 --> 06:17.200 And then once all that is done, you should be able to press save and view. 06:17.200 --> 06:20.080 And our p5 sketch is uploaded here. 06:20.080 --> 06:24.720 So the next example we're going to be viewing is this wave maker example here. 06:24.720 --> 06:31.360 This was taken from the p5.js example for the wave maker. 06:31.360 --> 06:36.840 But yeah, so basically it's an interactive example where you move your mouse and you 06:36.840 --> 06:40.200 can affect how the waves change. 06:40.200 --> 06:42.000 So you can view in the code here. 06:42.000 --> 06:48.040 It works pretty much exactly the same as the normal sketch, except all of the interactive 06:48.040 --> 06:54.800 elements that p5.js uses, such as mouse X and mouse Y, they also have to have sketch 06:54.800 --> 07:00.080 dot on there as well, as well as this frame count variable that we're using to count the 07:00.080 --> 07:07.560 frames and the sine and the cosine functions that we're using to calculate the angles. 07:07.560 --> 07:11.040 I've called this the interactive example. 07:11.040 --> 07:19.600 So I'm going to upload that file now to app. 07:19.600 --> 07:22.520 Interactive example dot JS. 07:22.520 --> 07:23.920 Upload that. 07:23.920 --> 07:34.080 Now I'm going to go back to the edit page, go to the source. 07:34.080 --> 07:41.120 Interactive example dot JS in our new script right here. 07:41.120 --> 07:47.560 And then we need to get the new parent ID as well. 07:47.560 --> 07:53.040 Once you have that, should be able to save and view. 07:53.040 --> 07:56.120 And our wave maker example will be on here. 07:56.120 --> 08:04.040 And now you can interact with it. 08:04.040 --> 08:08.560 Now you'll notice that also if you're off the screen, you can still interact with the 08:08.560 --> 08:10.700 example for something like this. 08:10.700 --> 08:12.360 It's not that big of a deal. 08:12.360 --> 08:16.960 But for instance, if you're working with sound, that might be a much bigger deal. 08:16.960 --> 08:21.100 And that's what we're going to examine in the next example. 08:21.100 --> 08:28.820 So here we have a new example that shows a basic oscillator made in p5.js where the X 08:28.820 --> 08:35.140 axis controls the frequency of the sine oscillator and the Y axis controls the amplitude. 08:35.140 --> 08:43.160 As you can see here, based on the visual clues. 08:43.160 --> 08:48.660 So we put all of that in this sound example dot JS file right here. 08:48.660 --> 08:54.600 And then we go to the tutorial page and you can see we have our p5 min dot JS and the 08:54.600 --> 08:57.820 sound example and the new div ID. 08:57.820 --> 09:03.060 We press save and view. 09:03.060 --> 09:04.820 And it doesn't appear on the page. 09:04.820 --> 09:06.780 So this is another good thing to note. 09:06.780 --> 09:11.660 If you ever need to debug, you just need to inspect the page and then you can head over 09:11.660 --> 09:14.740 to the console and you can read the errors. 09:14.740 --> 09:18.780 In our case, it says p5 dot sign off is not a constructor. 09:18.780 --> 09:27.260 Now that error comes because we did not add the p5 dot min dot sound package as a script 09:27.700 --> 09:29.900 So we need to add a new script. 09:29.900 --> 09:33.700 We can just copy this right here. 09:33.700 --> 09:34.700 Oops. 09:34.700 --> 09:38.020 Get rid of that. 09:38.020 --> 09:45.100 And then add our p5 dot sound dot min dot JS file to it. 09:45.100 --> 09:50.020 There we go. 09:50.020 --> 09:56.940 Now once we have that, we should be able to save and view. 09:57.620 --> 09:59.180 And here's our oscillator. 09:59.180 --> 10:05.860 Now if I didn't do any extra code for this, the biggest problem with this is that once 10:05.860 --> 10:08.740 the oscillator is started, it will never stop. 10:08.740 --> 10:15.380 So you open the web page and you just hear this noise and you can't stop it at all. 10:15.380 --> 10:20.220 So in order to fix that, I had to add a couple lines that weren't in the original sketch 10:20.220 --> 10:21.980 at the end here. 10:21.980 --> 10:26.420 One of them is the mouse pressed function and the other is the mouse released function 10:26.420 --> 10:29.420 that come predefined from p5 JS. 10:29.420 --> 10:35.980 So basically if any time the mouse is pressed and it must be within the bounds of the canvas, 10:35.980 --> 10:39.460 that's very important because otherwise it would be if you click anywhere on the web 10:39.460 --> 10:40.460 page. 10:40.460 --> 10:45.620 So you have to check to see if the mouse X is greater than zero, less than the sketch 10:45.620 --> 10:50.340 width mouse Y is greater than zero and less than the sketch height. 10:50.340 --> 10:51.820 Then we start the oscillator. 10:51.820 --> 10:56.940 Otherwise when the mouse is released, we stopped no matter where it is on the canvas. 10:56.940 --> 10:59.820 So when you click on the canvas here, you can still hear it. 10:59.820 --> 11:01.340 Even if you go off, you can still hear it. 11:01.340 --> 11:05.780 But then when you release on the canvas or off the canvas, you don't hear the oscillator 11:05.780 --> 11:07.220 anymore. 11:07.220 --> 11:09.380 So that's all well and good. 11:09.380 --> 11:14.900 But the question is, what do we do if we want to have two different sketches on the same 11:14.900 --> 11:16.420 page? 11:16.420 --> 11:20.820 So let's take our sound example right here. 11:20.820 --> 11:22.980 Let's copy all of this over. 11:22.980 --> 11:29.860 And then all we have to do is just put it underneath this and it all must be in the 11:29.860 --> 11:30.860 same file. 11:30.860 --> 11:31.860 That's very important. 11:31.860 --> 11:36.940 You can't have two different files and then two different sketches from those files on 11:36.940 --> 11:37.940 the same page. 11:37.940 --> 11:41.540 I'm not exactly sure why, but it all must be in the same file. 11:41.540 --> 11:50.100 So I'm just pasting my sound example into the p5 integration example, saving it. 11:50.380 --> 12:01.540 And now I'm going to upload the new p5 integration file into the app folder. 12:01.540 --> 12:13.060 And now I have to go back to the edit page, go back to the source and create a new div. 12:13.060 --> 12:21.020 This time for this sketch right here. 12:21.020 --> 12:29.900 And then it's a actually p5 integration JS. 12:29.900 --> 12:38.260 So once we have all that, we should be able to save and view. 12:38.340 --> 12:44.220 And then we have both examples on the same page like so. 12:44.220 --> 12:47.460 And you can still interact with this one and this one still works perfectly fine.