Coding Challenge

In this video I port the Lissajous Curve Table Processing sketch to JavaScript with the p5.js web editor and the p5.js library.
🎥 Lissajous in Processing: • Coding Challenge #116:...
🔗thecodingtrain....
💻 editor.p5js.or...
🚂 Website: thecodingtrain....
💖 Patreon: / codingtrain
🛒 Store: www.designbyhu...
📚 Books: www.amazon.com...
🎥 Coding Challenges: • Coding Challenges
🔗 p5.js: p5js.org
🔗 Processing: processing.org
📄 Code of Conduct: github.com/Cod...

[@felipeandres254]

6:26 rings bell, code breaks

[@TheCodingTrain]

😂

[@kenhaley4]

Wow, great pair of videos, Dan! I remember programming Lissajous figures using BASIC on my first PC - an Apple ][+ - back in the late '70s. I remember being annoyed by the time it took to draw ONE figure. Here you are drawing over 100 of them simultaneously, each with higher precision and speed, on a machine that's doing many other things at the same time that probably only cost about 1/3 as much. It's truly amazing! Also, it was very useful to see what it takes to convert a Processing program to P5.js. It would be great to see this more often.

[@TheCodingTrain]

Thank you Ken!

[@PranavNutalapati]

Hey Dan, I know this is an old video of yours, but I just wanted to tell you an alternative way to empty an array. You actually can set the length to zero. This is in fact the fastest way to empty a large array in JavaScript in terms of performance, assuming you can't replace it with a new array (as you have done) for whatever reason. eg: this.path.length = 0

[@Daniel-wu9ui]

to reset an array just set its length to zero e.g. if(arr.length != 0) arr.length = 0, this will clear the array of all elements

[@SimonTiger]

3:47 `arr.clear()` is not a thing, but here's a little trick that I use every once in a while! The `arr.splice()` function can remove any amount of elements from `arr`, but by default it just goes all the way to the end. So `arr.splice(n)` will remove everything from n to the end. And guess what now, `arr.splice(0)` will remove everything from the beginning to the end, in other words, _everything!_ There's a similar trick for concatenating two arrays together. Normally, you say something like `arr1 = arr1.concat(arr2)`, but that's not really elegant, because you're resetting `arr1`. In ES6, there's a thing called the _spread operator._ Basically, what it does is this: ...[6, 5, 3, 1, 8, 7, 2, 4] = 6, 5, 3, 1, 8, 7, 2, 4 It turns an array into a _list of arguments for a function._ So, for concatenating 2 arrays together, we can say `arr1.push(...arr2)`! That will put everything from `arr2` on the tail of `arr1`!

[@TheCodingTrain]

Thank youo Simon!

[@misterkite]

If you just want to remove all the elements from an array, splice is very inefficient. Just set array.length = 0.

[@arsebiscuitsandwine]

As someone battling with porting code to JavaScript currently this was a trip to watch! Nice job. I'm going to mess about with Lissajous curves in C# too so I can make shiny things with them in Unity3D. Maybe some kind of 3d Modelled machine that drops sand to make the patterns? That sounds rediculous. I'm going to do it.

[@kenhaley4]

I have another idea! Do a 3-D Lissajous. Circles on each of all 3 axes determine the path of a point in 3D space. I think I'll play with that idea.

[@benjamindragon598]

thisdohhhht thisdohht letletletletlet

[@zacharymcarthur9013]

That timing on the bell hahaha *ding* “oh wait it broke”

[@loic.bertrand]

4:25 there shouldn't be a new in "new createVector()" but it still works 🤔 I'm surprised x)

[@rebornreaper194]

Yeah that's javascript for you. new is merely a suggestion when it comes to functions

[@dylan6801]

Instead of adding vertexes (vertices?) for the paths, you could also use createGraphics to basically make another canvas where you don't refresh the background. Then you just draw an ellipse to the second canvas and it leaves a trail. Really cool video!

[@TheCodingTrain]

Great tip!

[@qoutroy377]

Instead of 'make2DArray', you could use this: new Array(rows).fill(new Array(cols)); Does the same thing, but in one row.

[@TheCodingTrain]

Great tip!

[@morphman86]

If you really wanna be optimal about it, use a single array and reference index using mathemagic, as Dan taught a few videos ago. array = new Array(width + height), index = ycoord * width + xcoord, array[index] = your value

[@dmax1]

Legend says he is still there

[@wamaithanyamu]

You are heaven sent! Thank you so much for making this!

[@himanshere7537]

Love your videos Dan! Man you're a magician

[@louiserouse7914]

This was adorable ❤︎

[@laurihei]

Ringing the bell at the exact moment it would break :'D

[@Holobrine]

What about saveFrame()?

[@Schindlabua]

The way to clear an array in javascript by the way is `arr.length = 0;` It looks super wonky but it is standards-complaint and works even in strict mode! Just Javascript things.

[@MattRose30000]

I converted this challenge into python/pygame: github.com/MattR0se/Coding-Train/blob/master/lissajous.py Not much deviation from your example though, except some random colors to make it look more interesting.

[@TheCodingTrain]

Nice work! You can submit a link to the coding train website if you like! github.com/CodingTrain/website/wiki/Community-Contributions-Guide

[@ranchieducation6317]

Loved this video ! Sir, I had some basic knowledge about java from my school studies. I started seeing your videos and I have learnt many a things by your codes but Sir I know almost nothing except java coding. I had bought my first laptop last month and I don't know how to install java, which version to install, I just want that setup with which you work, I had gone through many videos in youtube about how to install java but I could not do that path set up and all. Can you help me by letting me know how to do and what to do to get exactly that entire set up of java with which you work. I am excited to start coding but... guide me please

[@TheCodingTrain]

I use Processing (which is built on top of the Java programming language) in many of my videos. It's a good way to get started. For more info, visit processing.org and also this video might help kzbin.info/www/bejne/d57PcpyBqM6sZtE.

[@ailbae1004]

u r the smartes man in the world. im death serius

[@raffaelenicolapiazzolla3927]

Why the same code is faster on the browser? It should be slower on browser and faster when it run on a pc, right? How is this possible?

[@Schindlabua]

Javascript engines these days are heavily optimized mammoths; they are so good that you get close-to-native performance in a lot of cases. Ten years ago you would have probably been right but thanks to google pouring millions of dollars into V8 and chrome that's no longer the case. Python is not known to be blazingly fast anyway; I think it's still mostly an interpreted language while Javascript is mostly compiled.

[@klausbdl]

Pls make an 1 hour version of this project. Only fullscreen with some calm music on the background.

[@lokeshlkr]

#this.Lissajous

[@amirulidzham3686]

Hey guys, anyone know how to draw a text box like we do in Microsoft PowerPoint, we do it in p5 js? I've tried but as I found it is impossible. Anyone have any tricks?

[@TheCodingTrain]

Try the text() function! p5js.org/reference/#/p5/text

[@XYZ-bz8tf]

Dan, I have a request for you:) Actually I really want to know how to do this step by step.Maybe a this type of video can help a lot of people like me. For example,I have a fluid simulation article like this-> www.dgp.toronto.edu/people/stam/reality/Research/pdf/ns.pdf ,how to make a simple simulation by using this article? how path should I follow? My mathematical background is not bad,but I need really extra effort to understand this article.This article just an example.I wonder what we should do when we want to simulate anything.Another example that If I want to simulate a lightning bolt,what kind of research should I do? Do I need to understand all of these formulas to simulate this? Your teaching skill is amazing so I think that it would be great to learn this from you:) I hope you can make a video about that.Thank you:)

[@OonHan]

OMG, two different languages are so different!

[@MasterWind02]

Do a Collatz Conjecture tree next time for us please!

[@TheCodingTrain]

Please suggest here! github.com/CodingTrain/Rainbow-Topics/issues

[@Jousef9]

I watch these video and im not even a programmer LUL ,( but i am an EE so im a little bit programmer tho)

[@artin137]

Bell = freeze

[@eeddeellwweeiiss]

Do a Rubicks cube next time, please))

[@pianfensi]

Can anyone tell, why the youtube compression was mentioned in both videos? what's the matter with this challenge?

[@figfox2425]

Because unfortunatly, KZbin compression makes thin lines or isolated pixels disappear...

[@MattRose30000]

If there is two much change in pixels going on, KZbin compression freaks out and produces a bigger amount of artifacts. kzbin.info/www/bejne/qGe1oWCrpJt7o6s

[@BloodKiingZ]

I feel like this is a stupid question but is it possible for me to use p5.js on mobile .. like write code using my device ?.. because of kinda broke .. so is it possible and if yes .. how?

[@atrumluminarium]

Let song confirmed?

[@OrangeC7]

Elon Musk leaks spoilers for "Let 2"

[@TheCodingTrain]

I'm waiting...

[@hitsoslovepassionaction5707]

we want to look at you!!!!!!

[@sjdpfisvrj]

The last bug reinforces the notion for me to stay away from JS if I can. A bug like that should be caught by the language before you even run it

[@NethTech]

rumborak that's what you get with interpreted languages.

[@YitzharVered]

What's the point

[@wowatomica]

He's doing science ye nim rod

[@Speeskees]

Tbh, I don't like the web editor

[@DaveBriccetti]

I like IntelliJ IDEA for p5.js work

[@lokeshlkr]

#this.Lissajous