9.22: Custom Shapes - p5.js Tutorial

Поділитися
Вставка
  • Опубліковано 12 лис 2024

КОМЕНТАРІ • 82

  • @samitpaudel7886
    @samitpaudel7886 4 роки тому +57

    Man you're an awesome teacher. What energy. I can't believe you're doing this for us

  • @VickieEB
    @VickieEB 4 роки тому +11

    I'm new to P5.js, I came looking for how to use vertex function, and I was smiling through this video. I have to say, I like your exciting energy, it makes me want to be really excited about P5.js
    Thanks

  • @raybarnes5439
    @raybarnes5439 3 роки тому +2

    Just wanted to say thanks for making these videos. Keeps me sane from my day job. Getting visual feedback from programming is so rewarding. Love the energy!

  • @IDK-mz1gp
    @IDK-mz1gp 4 роки тому +2

    this guy is for real the best coder ever he has helped me out so much because i am a beginer

  • @emperorjustice
    @emperorjustice 2 роки тому

    This video helped me understand so much about creating shapes in my current coding class. Thanks for the lesson. 👍

  • @fazzkefraktal8004
    @fazzkefraktal8004 6 років тому +4

    I was looking for a video explaining curveVortex() to me an I didn't expect that it can be be so great and funny to learn it :D Thank you! It's so amazing :D

  • @devonguinn1890
    @devonguinn1890 3 роки тому

    This video is so delightful and helpful. Literally my favorite coding video I’ve seen to date. Thank you!!!!!!

  • @sehcamille
    @sehcamille 6 років тому +4

    I had to do little modifications to adapt the first custom shape (the "breathing one") to processing ( no angle mode, no let) and this is what I came up with so far, if anyone is interested :
    void setup(){
    size(400, 400);
    }
    float x;
    float y;
    float a;
    float spacing;
    void draw(){
    stroke(255);
    noFill();
    background(0);
    beginShape();
    spacing = map(mouseX, 0, width, radians(5), radians(100));
    for(a = 0; a < radians(360); a += spacing){
    x = 100 * sin(a) + 200;
    y = 100 * cos(a) + 200;
    vertex(x,y);
    println("A is now: ", a, ", x is now: ", x, ", y is now: ", y);
    }
    endShape(CLOSE);
    }

  • @grybouilli5259
    @grybouilli5259 Рік тому +1

    For anyone wondering, the p5 cureVertex uses the *uniform* Catmull-Rom spline :)

  • @lucaslopesf
    @lucaslopesf 7 років тому +2

    You make math so easy and fun

  • @0mara.fattah261
    @0mara.fattah261 7 років тому +2

    You make software development easy and creative, hope you make an angularjs series I would be more grateful than I am already.
    Thank you for every thing

    • @ludanca11
      @ludanca11 7 років тому

      You mean angular4 - The future is now old man :)

    • @0mara.fattah261
      @0mara.fattah261 7 років тому +1

      Noitse Noitse I actually meant angular 4, miss written 😀

    • @javalisson
      @javalisson 5 років тому +2

      @@ludanca11 You mean Angular 8? 🤣

    • @ludanca11
      @ludanca11 5 років тому

      @@javalisson They keep throwing new versions monthly 😂😂

  • @sadhlife
    @sadhlife 7 років тому

    Great video!
    I'm loving your book, it's a perfect read-along with the coding challenges and tutorials!

  • @grainfrizz
    @grainfrizz 7 років тому +1

    Gets everybody closer to gettin that cloud :)

  • @honzasko
    @honzasko 7 років тому +1

    Very nice programing video.

  • @andratek
    @andratek 2 роки тому

    Thank you very much!!!!

  • @ganeshtechchannel5147
    @ganeshtechchannel5147 7 років тому

    Nice video.Helps us for exercises.

  • @phenylalaninemusic
    @phenylalaninemusic 6 років тому +2

    Is there a way to “group” shapes like you would in Illustrator?
    I have a design I’m working on that includes 8 squares. I need to group the first four squares I have created and then basically “copy”, “paste”, and “rotate” on the center axis. How can I do this?

  • @theawkwarddev5229
    @theawkwarddev5229 7 років тому

    Nice, Will use this!

  • @szucsadam0527
    @szucsadam0527 4 роки тому +1

    omg. thank you! now I should be able to make a bent 2d leg😅

  • @davidgiammarco3810
    @davidgiammarco3810 2 роки тому

    is there a way around curveVertex for shape objects? I'm not able to do s.beginShape(), it states curveVertex only works with beginShape()

  • @diegomisina
    @diegomisina 5 років тому

    Best nerd ever! thank you!

  • @shelleykatherine5793
    @shelleykatherine5793 2 роки тому

    Thanks!

  • @tai7123
    @tai7123 3 роки тому

    I can't find the link for the Cloud video you meantion around 9:00

  • @sesamesenpai2426
    @sesamesenpai2426 4 роки тому

    Is there some way to group shapes together. I have made a picture with over 10 shapes and want to group them together. I am trying to control this shape with the keys " w a s d" and i have achieved this with only one shape. If they were all grouped together i could move the entire shape with these keys and not just one. Please help.

  • @AndrewB_NNA
    @AndrewB_NNA 6 років тому +1

    Silly question but did you swap cos and sin at 6:25 ? I am trying to fully understand the polar to cartesian thing and this confused me, I thought cos gives you the x and sin gives y. I know it basically doesn't matter in the whole scheme of things but I just wanna make sure I understand it correctly.

    • @TheCodingTrain
      @TheCodingTrain  6 років тому +2

      Not a silly question at all! And yes, it should be x = r * cos(theta) and y = r * sin(theta)!

  • @MrErrorCZ
    @MrErrorCZ 7 років тому

    For me autocompletion of code des not work for p5.js library at all and for all the functions it says they are undefined even though the code works in the browser. Other libraries work fine. I tried IntelliJ IDEA and Brackets without any luck. Does someone know how to solve this?

  • @fioletoviymewok9665
    @fioletoviymewok9665 7 років тому +13

    There's no "link to a video that goes through that in more detail"... or i'm blind? ;(

  • @POWER_TIME_NOW
    @POWER_TIME_NOW 5 років тому

    Can you go over 3D custom shapes via vertex? and specifying the co ordinates to do so?

  • @hanzalazafar4576
    @hanzalazafar4576 4 роки тому +1

    How do I create a star?

  • @faisaltaher851
    @faisaltaher851 7 років тому

    thx soo much

  • @KarthikVairavan
    @KarthikVairavan 4 роки тому

    what code it is for rectangle

  • @Mantanaaa
    @Mantanaaa 5 років тому

    Hello !! Thanks or the video. How can I create a Spiral?

  • @simranjitsingh2547
    @simranjitsingh2547 7 років тому +2

    Hello sir,
    PLZ tell me which software you are using to code
    And what language you are using

    • @sadhlife
      @sadhlife 7 років тому +1

      hello.
      the software is called atom (or maybe he now uses visual basic code or something, but you can use just any text editor, I'll suggest atom.)
      the language is p5.js, which is a library for JavaScript, and is beautiful. it is processing, implemented into JavaScript.

    • @simranjitsingh2547
      @simranjitsingh2547 7 років тому

      Tushar Sadhwani thx bro.
      I have Dreamweaver
      Can it be ok

    • @apotheosis1368
      @apotheosis1368 7 років тому +1

      I'm not sure if you can write javascript code in dreamweaver or not, but either way dreamweaver is a bit outdated so I would suggest you switch to something like atom or visual studio code.

  • @pn183
    @pn183 4 роки тому +2

    I'm breaking my head trying to create shapes that I can resize by using the mouse. Please help me!

    • @samitpaudel7886
      @samitpaudel7886 4 роки тому +1

      The possibility of doing whatever things to those shapes after you've created them is the reward. Keep going

  • @AugustoCarmo
    @AugustoCarmo 6 років тому

    ther's a way to convert simple svg paths into shape to use inside p5?

    • @k12i
      @k12i 5 років тому

      Looking for this answer too, have you solve it yet?

  • @alonattar3836
    @alonattar3836 7 років тому

    great

  • @niharranjanbhuyan9839
    @niharranjanbhuyan9839 7 років тому +1

    How will I do that on java

    • @sadhlife
      @sadhlife 7 років тому +1

      Nihar Ranjan Bhuyan in this tutorial you need to do it in processing or p5.js, you could proabably do this in java, but this tutorial will not help you, sorry :)

    • @niharranjanbhuyan9839
      @niharranjanbhuyan9839 7 років тому

      Ok

    • @niharranjanbhuyan9839
      @niharranjanbhuyan9839 7 років тому

      Can you tell me how can i directly post java made programme on playstore without going through koltin

  • @kunalks
    @kunalks 7 років тому

    I m waiting MEAN app tutorials

  • @niharranjanbhuyan9839
    @niharranjanbhuyan9839 7 років тому

    Nyc sir

  • @orifl6653
    @orifl6653 7 років тому +1

    stupid question but how did you do that auto spacing at 6:30

  • @obeid_s
    @obeid_s 3 роки тому

    is sin for x ? No !

  • @NatetheAceOfficial
    @NatetheAceOfficial 7 років тому

    Don't forget to stroke your shape.

  • @tusharmaurya1668
    @tusharmaurya1668 7 років тому

    how is your Hand now, Sir?

  • @JordyForNow
    @JordyForNow 7 років тому

    Why are you using let

    • @TheCodingTrain
      @TheCodingTrain  7 років тому

      See: ua-cam.com/video/q8SHaDQdul0/v-deo.html

  • @EatSmilesForLunch
    @EatSmilesForLunch 4 роки тому +2

    "It can be stroked, or filled" *wink* *wink*

  • @samuilnikolov4655
    @samuilnikolov4655 7 років тому

    3

  • @samboy3835
    @samboy3835 4 роки тому

    Why is he always laughing

  • @wolfisraging
    @wolfisraging 7 років тому

    2nd hah

  • @alekmoth
    @alekmoth 7 років тому

    If you don't stop assuming that every video is the first contact viewers have with coding at all I am going to have to stop following you. It is extremely tiresome, plus we who follow you can never get progress as we are always kept behind to the basics..

  • @tcocaine
    @tcocaine 7 років тому

    Think you got cos and sin reversed, shouldn't cos be on the X var? It shouldn't matter but still

    • @twistedsim
      @twistedsim 7 років тому

      TheDucklets it doesnt really matter :)

    • @tcocaine
      @tcocaine 7 років тому

      which is why i specified that in my comment. I was concerned because this is a tutorial video.

    • @twistedsim
      @twistedsim 7 років тому

      You still ask a question. I confirm what you were saying. The sin and cos doesnt need to be on x or y, it will only change the orientation of the shape by 90 degrees.

    • @TheCodingTrain
      @TheCodingTrain  7 років тому +1

      Yes, you are correct, this is my mistake!