Applet Orchard

Coding Challenge #36: Blobby!

[ad_1]
In this short Coding Challenge, I demonstrate how to turn an circle (or any shape you want) into a blob and give the edges have a liquidy / blobby / wobbly look. A technique using beginShape() and endShape() along with perlin noise is used.

This Coding Challenge is loosely linked to the Agar.io multi-part challenge:

Support this channel on Patreon:

Send me your questions and coding challenges!:

Contact:

Source Code for the Video Lessons:

p5.js:
Processing:

For More Supershapes videos:

For More Coding Challenges:

Help us caption & translate this video!

Posted

in

by

appletorchard

Tags:

Comments

32 responses to “Coding Challenge #36: Blobby!”

  1. Andreas Tagger Avatar
    Andreas Tagger

    This series is super good, very creative and artistically driven, broken down in cool ways. Thank you. I did this experiment in 2000 with flash but wasn't as successful.

    Reply
  2. Nobody Zapped Avatar
    Nobody Zapped

    think it could be intresting to have the edge of the circle be perlin noise, but make it 3 dimensional with time being the 3rd dimension like you did in the perlinn noise video with the vetor field. This way the wobble would be continous and somewhat random, could be cool to look at too and if you add for example a sound curve of music to it it might look intrsting too 😀

    Reply
  3. Thaddeus Pitch Avatar
    Thaddeus Pitch

    Pavlov?

    Reply
  4. Iamnottellingyoumyname! Iamnottellingyoumyname! Avatar
    Iamnottellingyoumyname! Iamnottellingyoumyname!

    There is a sharp change in between the beginning and end of the shape partly because that angle would be only 0.0831… ect. The rest of your angles where 0.1 radians. This means that is has less space to strech the change over making it a bit more sharp. Two pi is not a decimal terminating in the 10ths place, so you would have to make your increment in your loop that draws the circle in terms of pi. Try pi/31.5 to be your increment. You would have just as many slices in the blob, but they would be more evenly spaced out. I do not know if this would solve the problem, but it is most likely one of the factors causing the problem.

    Reply
  5. The Faceless Crafter Avatar
    The Faceless Crafter

    Will there every be another print run of the coding rainbow shirts?

    Reply
  6. Wolvemania Avatar
    Wolvemania

    I know your running put of ideas, and I know this was hard to do, but your videos are getting boring, the agar.io and snake thing was fun. Not anything else though…

    Reply
  7. Tomás Mejia Avatar
    Tomás Mejia

    Did anyone else notice the green in his Coding Rainbow shirt interferes with the green screen? It looks like he has a see-through slice in his chest

    Reply
  8. simplecast simplecastic Avatar
    simplecast simplecastic

    clouds please do animated clouds

    Reply
  9. MasterFlamaster Avatar
    MasterFlamaster

    once again, green color in the rainbow on your shirt

    Reply
  10. CoxTH Avatar
    CoxTH

    I am too distracted by how the green part of the rainbow on his shirt was greenscreened out

    Reply
  11. Nathan Woods Avatar
    Nathan Woods

    This looks super cool! I took a stab at getting the edges to be continuous using 3D noise. It samples 2d points from a noise plane in the shape of a circle, then uses the z dimension to get the flowing animation effect.

    https://jsfiddle.net/bign8/gpkf4dhk/

    Reply
  12. Victor Lu Avatar
    Victor Lu

    WHY DIDN"T I FIND YOU DURING MY HIGH SCHOOL DAYS OF JAVA LEARNING? These coding challenges are so helpful.

    Reply
  13. Clokworx Avatar
    Clokworx

    Did anyone else notice the green on his shirt conflicting with the green screen?

    Reply
  14. Cody Thompson Avatar
    Cody Thompson

    fantastic series, super interesting. really well presented too. clever that they are punctuated and content dense as opposed to slow and condescendingly redundant explanation. i watch these for entertainment.

    Reply
  15. Michael Avnyin Avatar
    Michael Avnyin

    Daniel amazing – i love your passion for design and coding. I hope you always continue these wonderful videos

    Reply
  16. Bian Yx Avatar
    Bian Yx

    Hey,buddies, I am really a programming beginner, and I followed alone with this video on my own processing,something I did here seems wrong. Please can anyone help me to figure it out? I would be super grateful.

    Reply
  17. Blade Mercy Avatar
    Blade Mercy

    use calculus XD

    Reply
  18. Nathan King Avatar
    Nathan King

    idea for looping noise: take 1d noise values based on information from a circle of points in a 2d noise function,
    could be expanded to looping 2d noise with a torus
    so like… non euclidean noise?

    Reply
  19. vishnu maheswaran Avatar
    vishnu maheswaran

    is it Java????

    Reply
  20. orazdow Avatar
    orazdow

    How do you get rid of the discontinuity at the bottom?

    Reply
  21. Noel Earl Watson Avatar
    Noel Earl Watson

    How do you do this for spheres?

    Reply
  22. get fun Avatar
    get fun

    i dont know how to add javascript on processing
    i need some help

    Reply
  23. digitalArtform Avatar
    digitalArtform

    If you made the noise a function of vertex x and y then the first and last points, being similar, would get a similar offset and close better. — How would you make it more of a smooth spline through the vertices with no sharp bends? No piece-wise linear fit?

    Reply
  24. Imru I Avatar
    Imru I

    hi, you are brilliant.

    Reply
  25. legotechnic27 Avatar
    legotechnic27

    nice 😀

    Reply
  26. aronkoffler Avatar
    aronkoffler

    best videos, best reactions when the code doesn't work the way u wanted!!!

    so much fun to watch, and LEARN, thanks a lot 🙂

    Reply
  27. riso1990 Avatar
    riso1990

    Any chances of A* path finding algoritham…

    Reply
  28. riso1990 Avatar
    riso1990

    Coolll… 🙂

    Reply
  29. Trolled Woods Avatar
    Trolled Woods

    Where is the page of requests for coding challenges? I really want to see Atari Breakout

    Reply
  30. Malcolm Arcand Avatar
    Malcolm Arcand

    Where can I go to watch these live?

    Reply
  31. Pedro Alejandro Mir Avatar
    Pedro Alejandro Mir

    dude…. you are the best… THX…

    Reply
  32. Trolled Woods Avatar
    Trolled Woods

    First!

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *