Intro to p5play - 1.3 - Groups
24:33
Intro to p5play - 1.1 - Sprites
33:35
Intro to p5.js - 5.1 - Functions
22:55
Intro to p5.js - 3.2 - Loops
21:42
RTA222 - 1.2 - Shapes and Colors
39:01
RTA222 - 1.1 - Our First Program
24:09
Пікірлер
@arroneisen8646
@arroneisen8646 Ай бұрын
please provide link for animation sequences...i am very frustrated trying to find suitable animation sequences in public domain; otherwise, excellent videos
@davidbouchard
@davidbouchard Ай бұрын
Link is in the description!
@arroneisen8646
@arroneisen8646 2 ай бұрын
Just started p5play today; your videos are excellent; great explanations
@djneils100
@djneils100 3 ай бұрын
I'm loving your tutorials but the link to the completed solution isn't working
@davidbouchard
@davidbouchard Ай бұрын
Hey, that's odd. Thanks for pointing this out. I've updated the link if you're still looking for it.
@djneils100
@djneils100 Ай бұрын
@@davidbouchard many thanks - great videos - my students have been using them to learn more about play
@busidoremikle
@busidoremikle 3 ай бұрын
Thank you, it's an amazing course, very clear and satisfying!! Now I know how to work with data in P5.
@p5play_js
@p5play_js 5 ай бұрын
I like that you show how dynamic group properties can be set with a regular function before showing the arrow function syntax. Another way to make the sparks have no stroke is by setting `sparks.strokeWeight = 0`
@davidbouchard
@davidbouchard 5 ай бұрын
Thanks for the tip for the strokeWeight, I missed that one :) It's definitely more intuitive than setting a transparent color as the stroke!
@p5play_js
@p5play_js 5 ай бұрын
great video! I especially liked how you explained and showed the difference between dynamic and kinematic colliders.
@ajayreddy3528
@ajayreddy3528 5 ай бұрын
Great tutorial! Hope you create more of themm.
@MrTECHNOVIDEO
@MrTECHNOVIDEO 6 ай бұрын
Very clear explanations ! Thanks !
@barcode_artist
@barcode_artist 7 ай бұрын
Thank you for sharing your knowledge! I have watched all your intro videos in a couple of days!
@ignacio.v.j.0302
@ignacio.v.j.0302 8 ай бұрын
Thank you for the video. Do you know which is the syntax to control the phase of an oscillator in Tone.js?
@davidbouchard
@davidbouchard 5 ай бұрын
Trying setting the oscillator's phase property :)
@chriscalver8595
@chriscalver8595 9 ай бұрын
great video tks
@gert-janakerboom1314
@gert-janakerboom1314 Жыл бұрын
i am starting to think this is the best P5JS tutorial series around ! thank you for making these david !
@gauravsaluja2006
@gauravsaluja2006 Жыл бұрын
Latest api is something like: const oscillator = new Tone.Oscillator().start(); oscillator.connect(Tone.getDestination());
@gert-janakerboom1314
@gert-janakerboom1314 Жыл бұрын
Hi there, great tutorials ! would it be possible to automatically add the sketch name to the screenshot ? Cheers !
@patakk8145
@patakk8145 Жыл бұрын
very informative, thank you
@josefinamariano5250
@josefinamariano5250 Жыл бұрын
Hi David, thank you so much for uploading all these videos, i've watched almost all of them by now. This is really valuable info and you explain things in a way that makes it easy to understand. Thank you again, i'll be looking forward to more of your videos! All the best from argentina!
@vtech8716
@vtech8716 Жыл бұрын
Hi, Thanks for your tutorials and lessons. I am started making some simple sketches with p5.js, and they are works well in desktop PC, but when I copy project to my Android device it does not work, how to run p5.js sketches in Android devices?
@ellespencer-lewis1015
@ellespencer-lewis1015 Жыл бұрын
I also downloaded the example code and opened it in visual studio code, but this doesn't work either. Any way you could help?
@ellespencer-lewis1015
@ellespencer-lewis1015 Жыл бұрын
Hi! This is such a cool tutorial! I'm having a little trouble on a couple things. After I entered the code to create the class I get the pendulum visibly but I can't hear it, I've spent a few hours now redoing it and checking and I can't figure out why. I think it is affecting my ability to go forward as when I try to create more than one pendulm I get nothing once I click, just a black screen. I've tried everything and I really want to master this, I just don't understand what I could be doing wrong.
@MangoMang
@MangoMang Жыл бұрын
Hey David, thank you so much for this helpful series- I'm using your logic to create an oscilloscope / waveform visualiser for my final year college project (web synthesizer)- but I'm confused as to how to position the waveform absolutely on the screen.. I can set the width and height, but X/Y coordinates are tricky. I've tried altering the line draw to: p.line(x1+x, y1+y, x2+x, y2+y); - passing in x and y in drawWaveform() and this works, but when I zoom in or out on the webpage it moves out of the box I have it positioned in, even though my canvas is absolutely positioned and resizes relative to its parent container... based off the inspector, the canvas matches the parent container (which holds the rest of the synth GUI) size, so I suspect its perhaps to do with the width/height variables- because I noticed that changing them also changes the position of the waveform on the screen.. Do you have any idea as to why this is?
@daftstuff6406
@daftstuff6406 Жыл бұрын
many thanks - of course this is not a subject that the average punter is interested in but hey thank you so much for doing this. i have some grand designs :) and this is a fantastic intro to my needs
@davidbouchard
@davidbouchard Жыл бұрын
I'm glad that was helpful. You can check out the 2022 videos as well.
@roan6903
@roan6903 Жыл бұрын
04:50 It doesn't hurt if you install two libraries together, right?
@davidbouchard
@davidbouchard Жыл бұрын
For the most part no, although I'd avoid using Tone.js and p5's Sound library at the same time as they both wrap around the same web audio APIs..
@matthiasschulz1430
@matthiasschulz1430 Жыл бұрын
where do you call your draw() method? I don't understand how the loop is created.
@davidbouchard
@davidbouchard Жыл бұрын
We're using a library called p5.js. The library calls setup() once at the beginning of the program and then draw() automatically for us, creating our main loop.
@marcmaurer7390
@marcmaurer7390 Жыл бұрын
Thank you David! Will there be any other videos ? variables and so on
@marcmaurer7390
@marcmaurer7390 Жыл бұрын
Hi, David! There was an introductory p5js course on the channel, where the basics were described in detail. Is it possible to watch them again? I can't find it in any way
@davidbouchard
@davidbouchard Жыл бұрын
Hi Marc, the videos are being rolled out again over the next few weeks for this iteration of the course. Some may get updated along the way as needed.
@marcmaurer7390
@marcmaurer7390 Жыл бұрын
@@davidbouchard Thank you very much David! I really like your videos, the presentation is calm and delicate, what I need!
@bernhagen93
@bernhagen93 Жыл бұрын
nice tutorial
@bernhagen93
@bernhagen93 Жыл бұрын
great tutorial, you could have used div() for friction tho with a value higher than 1.
@davidbouchard
@davidbouchard Жыл бұрын
Good point!
@bernhagen93
@bernhagen93 Жыл бұрын
Great tutorials, thank you very much.
@ignaciocerda7034
@ignaciocerda7034 Жыл бұрын
Thanks for this amazing tutorial serie, David!
@ignaciocerda7034
@ignaciocerda7034 Жыл бұрын
So well explained! Thank you!
@andygray9819
@andygray9819 Жыл бұрын
That's really, really helpful. I've now got a much clearer idea of how to organise my function code.
@BackWoodsWisco
@BackWoodsWisco Жыл бұрын
I have to say, as a software engineer that works in a very different realm of software but has suddenly developed an interest in audio engineering, these videos are HELLA DOPE. Very accessible! I know a lot less about audio/music theory than I do about software, but the way you approach these topics is still very accessible to me. These vids are so balanced, not too easy, not too difficult, yet very informative. You have a gift for fostering comprehension in your viewers! Some other vids on these topics can seem to spend too much time on basics of coding and then presume on the other hand too much knowledge of music and audio. But, to quote goldilocks, this one is just right 😏 Thanks so much for this content man! I hope you continue to keep creating. Do you have any recommendations on books or other resources that would be a good supplementary introduction to these audio engineering topics? Thanks again 👏👏👏
@andygray9819
@andygray9819 Жыл бұрын
Crystal clear. Thanks very much.
@chuckleezy
@chuckleezy Жыл бұрын
great content!
@maximedecarpentries4585
@maximedecarpentries4585 Жыл бұрын
Hi David, seems like the code of the project on P5 editor does not work anymore. The console log an error on line 34. Thanks for your videos btw
@davidbouchard
@davidbouchard Жыл бұрын
That's odd. It works here. What's the error you're getting?
@DickIppel
@DickIppel Жыл бұрын
@@davidbouchard 'Uncaught ReferenceError: Tonal is not defined at initalizeAudio (sketch.js?dev=26:39:3) at mousePressed (sketch.js?dev=26:166:5) at _main.default._onmousedown (p5.js:63630:40)'
@davidbouchard
@davidbouchard Жыл бұрын
@@DickIppel It looks like something changed in the Tonal library that introduced a bug. In the meantime, I downloaded an earlier version of tone.min.js and uploaded the file to the p5 editor instead of downloading the latest version via cdn. It works for now.
@maximedecarpentries4585
@maximedecarpentries4585 Жыл бұрын
@@davidbouchard Thanks David :)
@maximedecarpentries4585
@maximedecarpentries4585 Жыл бұрын
Hey David, thanks for your videos. It helps a lot !
@alvarobyrne
@alvarobyrne Жыл бұрын
wohoo! generators! they finally make some sort of sense!!!!! i'm a happy person! thanks to you, ha ha
@davidbouchard
@davidbouchard Жыл бұрын
Great to hear!
@alvarobyrne
@alvarobyrne Жыл бұрын
eselente home
@alvarobyrne
@alvarobyrne Жыл бұрын
much very thank you
@alvarobyrne
@alvarobyrne Жыл бұрын
well done!. just a small detail: not critical but nice to know: there is an importante message in the console: you've overwritten p5js function called 'move'
@davidbouchard
@davidbouchard Жыл бұрын
Thanks. p5js is a bit over top with the console warnings these days... There is no p5js move() function, but there is Camera.move(). I think there's probably an issue with the keyword matching.
@alvarobyrne
@alvarobyrne Жыл бұрын
@@davidbouchard i didn't check that!
@alvarobyrne
@alvarobyrne Жыл бұрын
nice: are you also aware tha pressing the 'h' keyboard key toggles the visibility of the GUI?
@davidbouchard
@davidbouchard Жыл бұрын
Good tip! I didn't know that.
@alvarobyrne
@alvarobyrne Жыл бұрын
well done on stabilizing the audio graph! y values grow from top to bottom that´s why the graph starts downwards!!!! you can also go `gui.width = 500`, for instance, and gain a bit of resolution for the silders
@davidbouchard
@davidbouchard Жыл бұрын
Indeed, good point re: y values moving downwards. I got confused there for a minute! You are correct about gui.width as well. We don't go super in-depth with dat.GUI in this series, but there's a lot more the library can do!
@yasaroguzocaktan9005
@yasaroguzocaktan9005 Жыл бұрын
how can i Upload data to Google spreadsheet
@grumpyparsnip
@grumpyparsnip Жыл бұрын
Thanks so much for making these videos publicly available! I have learned quite a lot.
@davidbouchard
@davidbouchard Жыл бұрын
I'm glad to hear they've been useful to you.
@MangoMang
@MangoMang Жыл бұрын
Super cool
@kbl9042
@kbl9042 2 жыл бұрын
Thanks david for the quality content you provide for us
@grumpyparsnip
@grumpyparsnip 2 жыл бұрын
I am just some random person interested in math and art who stumbled upon these videos, but I wanted to point out an alternative method for generating squares from two points. The idea is to make the line between the points the diagonal of a square. You can easily find the other two points of the square without any trigonometry. First let v=(delta x , delta y) be the vector from one point to the next. Then w= (-delta y , delta x) is orthogonal to v. If m is the midpoint of the original line, then m +/- w/2 gives the other two points of the square.
@davidbouchard
@davidbouchard 2 жыл бұрын
Indeed, good method! Although now you have to draw the square using 4 vertices, as opposed to one call to rect() :)
@DodaGarcia
@DodaGarcia 2 жыл бұрын
This is amazing content, thank you!
@gospher6342
@gospher6342 2 жыл бұрын
Very nice introduction, looking forward for more content
@jamesyuilltv
@jamesyuilltv 2 жыл бұрын
fantastic tutorial! thank you! is it possible to zoom into the code on the left a bit more?