Coding Challenge #63.1: Texturing Cloth Simulation Part 1

[ad_1]
In this two part coding challenge, I demonstrate how to render geometry with an image texture (making a waving flag). In this first part, I cover the beginShape(), endShape(), and texture() functions and discuss different options like TRIANGLE_STRIP, QUAD_STRIP, and more.

Link to Part 2:
3D Cloth challlenge:

Support this channel on Patreon:

Send me your questions and coding challenges!:

Contact:
Twitter:
The Coding Train website:

Links discussed in this video:
toxiclibs:

Source Code for the all Video Lessons:

p5.js:
Processing:

For More Coding Challenges:
For an Intro to Programming using p5.js:

Help us caption & translate this video!


Posted

in

by

Tags:

Comments

23 responses to “Coding Challenge #63.1: Texturing Cloth Simulation Part 1”

  1. 游庆林 Avatar

    How can I do this in P5.js? I've tried for many ways and seems uv texture for vertex doesn't exist in P5.js.
    What I want is to stretch the image in some crazy ways, this "texture" function seems working so well but it's invalid in P5.js.
    And thanks for all your tutorials! I've been watch for so long time and learn so much from you! Thanks! This is my first time asking questions.

  2. DayZnublet Avatar

    What language is this?
    Javascript or java?

  3. Mohammed Alghamdi Avatar

    can we use the same concept at Java programming language?? and I wish I see a lessons in Java done by yourself. with the way you use that would be amazing??? thank you for every thing.

  4. Jeremy Behreandt Avatar

    thanks as always, dan, for these wonderful videos!

    not sure where the best place to post this: i wanted to pass it along in case it's a lifesaver for anyone like it was for me. if you have a seamless texture that you want to scale or offset, you can create some vectors or floats and then plug them into the uv slots of the vertex calls. helpful for creating autoscrolling backgrounds, i've found.

    PImage txtr;
    PVector uvScale, uvOff;

    void setup() {
    size(400, 300, P2D);
    txtr = loadImage("whatever.ext");
    textureMode(NORMAL);
    textureWrap(REPEAT);
    uvScale = new PVector(8, 8);
    uvOff = new PVector();
    }

    void draw() {
    background(0);
    beginShape();
    texture(txtr);
    vertex(10, 10, uvOff.x + 0 * uvScale.x, uvOff.y + 0 * uvScale.y);
    vertex(390, 10, uvOff.x + 1 * uvScale.x, uvOff.y + 0 * uvScale.y);
    vertex(390, 290, uvOff.x + 1 * uvScale.x, uvOff.y + 1 * uvScale.y);
    vertex(10, 290, uvOff.x + 0 * uvScale.x, uvOff.y + 1 * uvScale.y);
    endShape(CLOSE);
    uvOff.x += 0.01;
    }

  5. uchihamadara uchihamadara Avatar

    how many year take to master php or coding

  6. John Mayk Brito de Lima Avatar

    I couldn't make the texture stuff work using Brackets and the complete lib from p5 web page :/

  7. UniKitty Avatar

    I haz account now!

  8. Travis G Avatar

    Hey Dan, hope you're doing ok in the Blizzard.

  9. Sawii00 Avatar

    What is you real job?

  10. scott harwood Avatar

    Can we have a little more information about the unikitty? I feel that is one of the more important topics of this video 😛

  11. Hyper Gamer Avatar

    what is procesing? is actualy p5.js for PC write in Java

  12. supertrooperdk Avatar

    Great video as always. Have you ever thought about getting acoustic foam to remove some of the echo?

  13. Zachary Brackett Avatar

    Happy Pi Day! I have enjoyed these videos and working along with you has made me a better programmer. I watch enough to get started, then see how much I can finish without referring to the video. It's actually helped a lot because I am forced to move forward if I don't understand something, coming back to it later. The importance of having a good outline is paramount.

  14. Ghetto Cornetto Avatar

    Mate you're very quickly becoming my favourite person on the internet, that passion for coding is so infectious!

  15. ProCactus Avatar

    So, its not pixel by pixel.
    And what's under the hood in processing ? its another hood :

  16. 1998goodboy Avatar

    Can you do anything else other than p5.js??

  17. TorSkywalker Avatar

    The unikitty is super cute!(:

  18. Hidde Agterberg Avatar

    Do some other programming, instead of js and java! Love your challenges though <3
    There aren't a lot of fun programming videos…

  19. Zohence Avatar

    I just upload a new video watch it right now

  20. Remixt Avatar

    Hi, I love your videos! Do you think you could do a tutorial on making a fully functional web app?

  21. Mr. DaLeX Avatar

    have one Qsgh {Question}
    where are the views goes ? you have 224,455 just less then 10,000 people see this

Leave a Reply

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