Coding Challenge #61: Fractal Spirograph

[@4AneR]

I am always glad to spend 20 minutes to draw a circle together with you, Dan :D

[@unityblitz2755]

I have no idea how I found you since when I did, code wasn't even in my vocabulary.But been subbing for a while now and started to learn which was amazing! Right now I've finished my second month of a course I took for programming and absolutly love it! You have truly opened my eyes for math and writing code, you're my hero and idol! Thank you so much for creating your channel!

[@TheCodingTrain]

Wow, I'm so glad to hear, thank you!

[@RobLego]

Daniel is so hard on himself. He's really brilliant. Yes Dan, we are still watching... because it is amazing. I am trying to learn javascript by watching your videos. And thanks to you, I'm starting to get it. This guy has such a crazy knowledge of coding, and math, it's crazy.

[@michalbotor]

15:10 i actually enjoy the fact, that properties in processing can be written without the 'this' keyword, because it make the code so much more concise and readable. when i watch your p5.js tutorials it gets ridiculous sometimes , when you can't fit a function call on one line of code just because it must contain 'this' like 5 times.

[@joem8251]

2 years later and your video is still helpful! I like how you took the video offline for debugging in this one and only referenced a longer segment if we want to follow your thought process. Nice challenge.

[@DY142]

Hey mate! I don't know if somebody already pointed it out-but calculating k^(n-1) for each level is equivalent to multiplying each level's ang velocity by k with respect to the previous. That is the definition of the power function! So that change didn't do any difference. Just leave it as it was and save some calculations, mate :D

[@kuskus_th13]

padronsk or just k multiplied by itself (n-1) times

[@aramavlad-alican9959]

I camnot stop watchi g your videos, i have been seeing them over and over again about 5 time each

[@nero3700]

Watched and rewatched the livestream, but I'm here to check out how this was edited :D Awesome work Dan, as always!

[@gonengazit]

nero3700 you watched it twice?!?!?! You sir, are a madman

[@dogbadjaze600]

It was a pleasure. Thank you very much.

[@dawalton7435]

its the worst when you hear the words #codingtrainwreck and realise that there are still five more minutes of the video :) still love the videos!

[@Zxios]

oh yeah. I caught this live, it was a #codingtrainwreck :P

[@callummann4410]

It's the only trainwreck you look forward to !

[@doityourself73]

Try to code a simple/basic ego shooter

[@pbpbpbpbpbpbpbpbpb]

I'm always exited if you upload something with fractals. How do you find these things? Also, you are awesome!

[@TheCodingTrain]

This was a suggestion from a viewer! github.com/CodingTrain/Rainbow-Topics/issues/11

[@troyanrider]

After using the math formulas for the speed “this resembles the previous pattern really well”... There’s a really good reason for that: both calculations were the same: k^(n-1) = k*(k^(n-2)), being the previous times that constant. Hilarious 😂

[@robtvogel]

I was doing this in p5js along with you and very often had to remind myself "this dot". The song was stuck in my head after awhile. P.S. I do see that you already converted this to p5js in your github page after i finished the video.

[@asdfghjklooish]

Your data structure was perfect until you added the while loop in draw(). I think the best solution is to assign the parent the responsibility of drawing the child and likewise with update(). So instead of a while loop, just parent.draw() and in the parent have draw() { /* draw parent */ child.draw() }. You could even do the same with addChild() like { if(child == null) { this.child = new Child() } else { child.addChild() } Other than that, I love your videos, your charisma, and your passion so keep it up!

[@BigB1Lachi]

//Speed should be defined by the radii of its parents //this means all circles roll on the surface of their parents at the same relative speed if (parent.parent == null){ speed = 1 }{elseif( parent == null){ speed = 0 }else{ speed = parent.parent.r / parent.r }

[@JuanJAzpiroz]

I'm amazed with your creations David. Many thanks. Could you teach us someting using Bezier curves?

[@jovdsss]

whos David?

[@tpat90]

The moment you switched times -x parent speed to -x^k It not even resembled what you had before the cut, it was actually the same thing... In your way you just didn't had to calculated it again and again.

[@gloubiboulgazeblob]

Here's an example of parent-child in Javascript, it works : In the main code, create a new TreeWaveVector(args are optionnals), then add childrens to it, one by one. class WaveVector { constructor(x, y, dimension, frequency, phase) { this.x = x === undefined ? 0 : x; this.y = y === undefined ? 0 : y; this.dim = dimension === undefined ? 1 : dimension; this.f = frequency === undefined ? 1 : frequency; this.phase = phase === undefined ? 0 : phase; } } class TreeWaveVector { constructor(x, y, dimension, frequency, phase) { this.waveVector = new WaveVector(x, y, dimension, frequency, phase); this.child = null; } add(waveVector) { //get last child of this entire tree let last = this.lastChild(); last.child = new TreeWaveVector( last.waveVector.x + last.waveVector.dim * cos(last.waveVector.phase), last.waveVector.y + last.waveVector.dim * sin(last.waveVector.phase), waveVector.dim, waveVector.f, waveVector.phase ); } lastChild() { let last = this; while (last.child) { last = last.child; } return last; } }

[@duality4y]

My Current project unrelated to this, but still i watch this while i work on my own project because it's all so facinating and interessting and it's good to have heard of it once like when you work on something and think need to solve this thing and i think i heard about this one thing you can look these videos up it's nice.

[@sergioflorea6063]

The first one is an orphan, and the last one is forever alone, how fitting.

[@Texplanations]

Yes!!! This is what I tried to do but got the idea a bit messed up... Did the program properly... But not the rotation things cause I forgot the name of this...

[@MrZakrencony]

watch unedited 2h of footage to see the debugging? I'm all over it :D

[@rebornreaper194]

Reminds me of those ties with the crazy gyroscopic leaf shapes

[@Quiksand101]

If you want to give the entire thing a flickering effect like in the GIF, just add noise to whole orbit

[@freeshavaacadooo1095]

Hey Dan! I've been watching you for a while and I love to simplify any code to try to get better at programming. It's not perfect but maybe you could repurpose this code I made that can randomly generate a spirograph. It's 27 lines long and if you can shorten it, even more, it would be awesome. (Tried to use some recursion to help practice it as a skill as I am new to coding): var array = [], points = []; function setup() { createCanvas(600, 600); for(var i = 0; i < 3; i++) { array[i] = []; array[i][0] = Math.random()*20+20; array[i][1] = 0; array[i][2] = ((Math.random()*4)/180)*PI; } } function draw() { background(15, 15, 15); circleGraph(0, width/2, height/2); } function circleGraph(i, x, y) { if(i < array.length) { array[i][1] += array[i][2] return circleGraph(i+1, x+(array[i][0]*cos(array[i][1])), y+(array[i][0]*sin(array[i][1]))); } else { points[points.length] = [x, y]; for(var j = 1; j < points.length; j++) { stroke(255, 255, 255); line(points[j][0], points[j][1], points[j-1][0], points[j-1][1]); } } }

[@vitalchance1032]

Wonder how many times he has programmed this same thing over and over and over again... So this video could be produced in fluidity and give the effect that this man is a god darn genius... Come on, tell usssss. tell usss. How many times..?? Give it up.. Tell us your deepest secrets..

[@liquidlulz1373]

How would we stop this from drawing oven itself in the end? Thanks!

[@masterflamaster6377]

Wow, you haven't abandoned Processing yet? YESSSSS

[@NonTwinBrothers]

I don't think they where cheering in the hallway.. I think they were predicting the codingtrainwreck that was about to happen.

[@TheCodingTrain]

haha

[@CodingWithUnity]

I know this videos old and i could google it, but its an excuse to leave a comment. Instead of making another constructor in the orbit class, couldnt you just do `float x_, float y_, float r_, orbit parent_ = null` Which will default parent to null unless you set it when the constructor is called

[@LifEsYouTubeChannel]

Can you make Tetris tutorial in Processing?

[@trevordendel4257]

How is no one talking about the cardiod-like shape he drew at 35:58?!

[@Doge317]

Fractals are really interesting. Can you do a program about the Mandelbrot set? Would be awesome

[@kuskus_th13]

Doge He already did it as a coding challenge in p5.js. Search the playlist!

[@Doge317]

oh really? Nice thank you for pointing that out ^^

[@raegnald]

22:23 Awesome! With twenty-three minutes of video we have managed to draw two circles (But what he does he does well).

[@Holobrine]

You can draw any image with “fractal spirographs”, if you are curious, see GoldPlatedGoof’s video on Fourier transformations.

[@JackFlashTech]

There might be a difference because Spirographs roll on each other, and Fourier representations can rotate the children as fast as they need.

[@NickInts]

22:00 You made a linked list!

[@erikmccall6577]

sweet vid man! I was wondering if you could do more on 3d in p5? love your channel! thank you so much!

[@TheCodingTrain]

I will try to yes!

[@Pankeekii]

How would you stop it from drawing over itself indefinitely?

22:02 RELIEF

[@duality4y]

Can you trace out a mandel brot with circles?

[@naolmstead]

Modify it so that the orbits alternate between being inside and outside the previous one. Say every odd level is outside it's parent and even is inside it's paerent

[@TheCodingTrain]

Great suggestion!

[@rosslahive]

Got through it from start to end :)

[@TheCodingTrain]

wow!

[@rosslahive]

and enjoyed it to.

[@progfr9097]

For a coding challenge coul'd you code a game that use gps data like the well known pokemonGo game. and if possible making it as an android app.

[@mouhcine4831]

Nice !

[@ironmon9]

Daaaamn Daniell

[@StormCraftable]

I am Just sitting in front of my PC and kindly saying: "good sir, why not use a chain of responsibility?"

[@wengeance8962]

what makes you choose to do some coding challenges in Java(processing) vs JavaScript (p5)? thanks

[@TheCodingTrain]

Honestly it's pretty arbitrary! I discuss some more reasons in my "comparing p5 and processing" Q&A videos.

[@wengeance8962]

Thanks, ill check those.

[@benjamins2683]

i am going to follow your coding in c# :D

[@BrunoPontoTxT]

use trackingjs.com/ to "learn", "recognize" and display objects name in the screen

[@gustavoandre8866]

Speed(n) = k^(n-1), k=±2, ±3, ±4, .... what is "n" in this expression help please 1-1

[@kevinfulghum7524]

what are your settings for p5.Js?

[@CrispySpicyChickenWings]

27:37 Hmmmmmmmteresting.................

[@jasperdiscovers]

I did it! #codingtrainwreck but you fixed it :) Entertaining stuff.

[@sprajapati566]

coding challenge : make a glitch effect video/image or anything.

[@vitalchance1032]

"Coding challenge in an attempt" It's not a "challenge" when you mastered it, and already produced it multiple times before you act like you are giving it a "wing" -- Impressive none the less but come onnnnnnnnnnn, no way.. If this is a first "attempt", I might as well bury myself is junk food until I am no longer capable of thinking how unbelievable this is.

[@lemonlordminecraft]

"'parent'; 'child'. No I could call this 'sun';'moon'." What does the moon orbit...?

[@alexcsillag7816]

I was wondering why is it not spinning.... I was searching for the mistake for about 20 minute and checked the github page, and nothing. I forgot to assign 0.1 value to the speed variable... oml

[@mctuble]

Yeah I made it all the way through easily. It was very interesting to me #-1codingtrainwreck

[@thefiverranimator6518]

how you make a video with background cool with zooming in real time, are you a group of people who help all this out...

[@GABRIELFILMSTUDIOS]

The Fiverr Animator Ähm, what exactly is your question?

[@Trent-tr2nx]

he uses the magnifier tool in Mac's accessibility options -- it's not a special editing tool

[@TheCodingTrain]

indeed!

[@hamzanasab1713]

you livestream on youtube ?

[@TheCodingTrain]

yes indeed! Every Friday (and sometimes more often)

[@liviuiosim1870]

The Coding Train do you have specific hours?

[@kuskus_th13]

Liviu Iosim 10:30 his time (~15:30 GMT)

[@NathanBreunig]

I literally started adding con after all constructor variable names. I know how you feel. hahaha

[@JBFFSK18]

#codingtrainrek or sth like that xDD as always great video, keep it up :D

[@my_virtual_officemyvritsys688]

can i run python in an email as the running program?

[@ashleyburgess5923]

Can this be coded in a 3D space?

[@BrunoInec]

How did you resist calling it "be nice equation"?

[@TheCodingTrain]

I know! Can't believe I missed that.

[@michalbotor]

29:48 piston! ;)

[@duality4y]

Couldn't you do this.x = x; to indicated i am going to assign to this class attribute the value that is in parameter x. instead of doing x = x_; that is the convention i use in my code.

[@angelcaru]

The way I would do the "show everything" is, in the Orbit class: void show() { stroke(255); strokeWeight(2); noFill(); circle(x, y, r * 2); if(child != null) { child.show(); } }

[@damiandassen7763]

that moment at 3:10

[@ALLCAPS]

326 likes, 0 dislikes. WOW.... Impressive! (dislikes) xD jkjk

[@ChenHuang]

be nice equation.

[@ninjaclantech6421]

Can you code conways game of life?

[@TheCodingTrain]

I'm thinking of doing it soon yes!

[@KnakuanaRka]

He’s done that; check his challenges.

[@gerhardbiebl9778]

Implemented an alternative Version in C# /.Net Forms without visible Circle Objects: github.com/bieblsoft/Spiro. Though your Implementation showing the Circles is interesting thanks to the possibility to create multiple Circle levels.

[@charbelsarkis3567]

has he made this in p5?

[@TheCodingTrain]

Check the github repo I believe there are some ports listed in the README. If not, file a github issue!

[@MINHHOANG-hl7gp]

like if you learn programing more from coding train than in school

[@kuskus_th13]

I don't know if schools even teach programming. Most don't. At all.

[@dennisvaningen3827]

KusKusPL in the netherlands many highschools do some basic coding but programming is very rare now I'm in college now and learn programming because thats my major🤷‍♂️

[@Kitulous]

KusKusPL we were learning programming in 9th grade by using algorithmic language (some really weird and useless language that consisted of RUSSIAN words and abbreviations (I live in Russia), it only had variables (with explicit types), loops and conditionals and custom procedures declarations. And that's all. No functions whatsoever. That was as bad as it could be, so I used Pascal while others tortured to use this weird algorythmic language (thankfully my teacher knew Pascal).

[@purpleice2343]

If you """learn""" to program in any way than by doing it yourself you do it wrong.

[@asston712]

In grade 8 we had a coding elective and all we did was play video games and all I learned was variables and if statements in Java. I was hoping they would teach C# or C++

[@MrEst97]

It's pronounced 'be nice'

[@bastibob660]

I made the same thing in 32 lines of code

[@cassandradawn780]

Github page? Or source code?

[@bastibob660]

HHRD how can i send you the code? Just paste it in the comments

[@krccmsitp2884]

LInks or it didn't happen.

[@bastibob660]

@@krccmsitp2884 int iterations = 5; float time = 0; ArrayList path = new ArrayList(); void setup() { size(900, 900); } void draw() { for (int i = 0; i < 20; i++) { background(0); orbit(width/2, height/2, 150, 0); time += TWO_PI / 200; } stroke(255, 0, 255); beginShape(); for (int i = 0; i < path.size(); i++) { vertex(path.get(i).x, path.get(i).y); } endShape(); } void orbit(float x, float y, float r, float n) { if (n > iterations) return; noFill(); stroke(255, 150); ellipse(x, y, 2*r, 2*r); float nspeed = pow(-4, n-1) / 10; float nr = r + r/2.5f; float nx = x + cos(nspeed * time - HALF_PI) * nr; float ny = y + sin(nspeed * time - HALF_PI) * nr; orbit(nx, ny, r/2.5f, n+1); if (n == iterations) { if (path.size() < 10000) { path.add(new PVector(x, y)); } else { path.remove(0); } } }

[@icode2206]

What is the app?

[@ΛεωνίδαςΓκώγκος]

He is using processing to edit the code

[@GABRIELFILMSTUDIOS]

You say your way if labeling constructor arguments is annoying and cryptic. I actually like it very much, a lot of people here in Germany use "pvariable", so e. g. "px", "py", etc. (p standing for "parameter"). I find that much more annoying, your way is so nicer, because it 1. Doesn't change the beginning of the variable name, 2. Doesn't add a letter, which distracts from the actual name

[@TheCodingTrain]

Thanks for the feedback!

[@charliejulietdavies8715]

heya, daniel! i got inspired by this idea so i paused and had a go before coming back and watching how you did it. i'm surprised how many things i ended up doing similarly to you! my code: www.openprocessing.org/sketch/409963 a couple of interesting things i did differently: - made the draw function use the linked structure; each orbiter draws itself and tells the child to draw. - made each object dumb to it's position, putting that information in the draw function's parameters. unintentionally, that's how i avoided keeping a reference to the parent - just a small one and a question: i tend to want to put draw() and update() code in one method. is there a particular reason you always write it with two separate functions? excellent video as always.

[@ayushman_sr]

He is too funny

[@dunste123]

#codingtrainwreck

[@simewu]

It's painful to see you not using recursion... the code could be so much simpler

[@liquidexw]

1:13 P🅱ector, huh?

[@Tim-Jaeger]

1st, that is my first time ever

[@Willomane]

#codingtrainwreck sup sup sup

[@xPinoyTribal]

Hey, what should i specialized in Computer Science: Algorithms, Embedded Systems and Architecture, or Networked Systems / Security. Can you label it from 1 - 3; where 1 is the most valuable field? I am often confused because I feel like algorithms is superior to all branches since it focuses on solving problems, but I feel like there is a lot more math rather than actual implementation...Network Systems can teach you cyber security, hacking, cryptography (Algorithms is important for this field I guess). And lastly Embedded System seems like it's fun because it allows you to control Software / Hardware and learn how to make your own electronics etc...Although it's fun I feel like it isnt valuable lol. Here are the different tracks offered at my school for BS catalogue.uci.edu/donaldbrenschoolofinformationandcomputersciences/departmentofcomputerscience/#majorstext Thank you!!! Love all the vidoes!

[@xPinoyTribal]

I know like everyone else, you'd probably say it's up to me haha. So I guess to simplify my question, what do you think which is the most valuable field of study in computer science? ( I can't have all of them, that's why /: because UC Irvine has tracks for it /:)

[@xPinoyTribal]

If you were to do computer science or software engineering all over again...which field of study would you focus more on and why ?

[@ACCALLONATO]

it's pronounced "benice"... duh!

[@dan-mg4tc]

Helpful (!)

[@Luffi98]

Try k=+10, resolution=10 and 100 its BEAUTIFUL

[@anusha8085]

It's like those crocheted tablecloths getting spun out :D

[@Luffi98]

How do you separate things with a command? like ellipse(x,y,z,p); to ellipse(x, y, z, p);

[@TheCodingTrain]

I use a package called "atom beautify"

[@aslansi1906]

#codingtrainwreck

[@David-jp9wv]

#codingtrainwreck

[@Daniel20030]

#codingtrainwreck

[@Mavhawk64]

#codingtrainwreck