Live Stream #100.1: Transformations and Clocks with p5.js – Part 1

[ad_1]
Live Stream #100!! I discussion matrix transformations (translate, rotate, scale, push and pop) with the p5.js library. I also attempt a clock coding challenge.

Due to technical problems, this live stream is in two parts.
Link to Part 2:

Edited videos coming soon!

26:08 – Intro to p5-manager
50:12 – Transformations with p5.js
1:24:21 – Scaling with p5.js

Support this channel on Patreon:
To buy Coding Train merchandise:
To Support the Processing Foundation:

Send me your questions and coding challenges!:

Contact:
Twitter:
The Coding Train website:

Links discussed in this video:
Processing Community Day:
ICM-2017 Syllabus:
OF Course:
Interactive Media Arts at ITP:
IMA Facebook page:
IMA | Tisch | NYU on Twitter:
ITP – Interactive Telecommunications Program – NYU:
p5-manager on npm:
Chiun Hau You on Github:
Install Node.js:
Atom:
Jonathan Corum on Twitter:

Videos discussed:
Introduction to Node:
Angles and Angular Motion:

Source Code for the all Video Lessons:

p5.js:
Processing:

For an Introduction to Programming:
For More Live Streams:
For More Coding Challenges:


Posted

in

by

Tags:

Comments

24 responses to “Live Stream #100.1: Transformations and Clocks with p5.js – Part 1”

  1. Rabi Manandhar Avatar

    float x,y,z;
    float angle=PI/8;
    void setup(){
    size(400,400,P3D);
    x=width/2;
    y=height/2;
    z=0;
    }

    void draw(){

    background(50);

    //rectMode(CENTER);
    rotateX(-PI/8);
    rotateY(angle);
    translate(x,y,z);
    stroke(255);
    noFill();
    beginShape();

    line(0,0,0,100,0,0);
    line(100,0,0,100,0,-100);
    line(100,0,-100,0,0,-100);
    line(0,0,-100,0,0,0);

    line(0,0,0,0,100,0);
    line(0,100,0,100,100,0);
    line(100,100,0,100,0,0);
    line(100,0,0,0,0,0);

    line(100,100,0,100,100,-100);
    line(100,100,-100,0,100,-100);
    line(0,100,-100,0,100,0);
    line(0,100,0,100,100,0);

    line(0,100,-100,100,100,-100);
    line(100,100,-100,100,0,-100);
    line(100,0,-100,0,0,-100);
    line(0,0,-100,1,100,-100);
    endShape();
    angle=angle+0.01;

    }
    Sir How to rotate the above cube about Y axis and about a pivot which is the center of the cube. I don't wanna use box command. Thank you Sir

  2. Bill C Avatar

    One of the best things about his streams are his mistakes. As a noob I get to see how he works through a problem or the way he searches the reference. That means as much, or more, than seeing a perfectly coded exercise.

  3. Jbob Avatar

    It's like simple, deprecated OpenGL

  4. Jonathan Craven Avatar

    Maybe do something for stream #128 which is 2^7 and lands on 03/30 next year, which will be the 222nd anniversary of when Guass discovered the construction of the heptadecagon

  5. Jeremy Bell Avatar

    Does he realize his editor doesn't actually edit anything from the video? lol

  6. TheMgoldfarb Avatar

    you can edit the .p5rc file to remove/fix the project that you created at root
    and to know how much room you have on the whiteboard – you could draw a frame that matches the fov of the camera (or big dots just in the 4 corners)

  7. Studio MZK Avatar

    Command (or Control) + l = CLEAR on terminal

  8. Adult Cereal Avatar

    Can you get back to the multi-layer neural networks soon please – the first few were so interesting

  9. Caleb Gorman Avatar

    Thank you for making videos. You're great at it. ๐Ÿ™‚

  10. Simeon Georgiev Avatar

    Can you make Data Structures tutorials(or stream)

  11. cubs0110 Avatar

    Looking forward to stream #420

  12. Dave Briccetti Avatar

    You asked about clearing the screen without typing โ€œclearโ€. Ctrl L and Cmd K work well for me.

  13. Mostafa Ps Avatar

    o man i love you .
    you make programming really fun Thank you .

  14. Pa Pinkelman Avatar

    If I had teachers of this. quality, I probably continued studying.

    A little less goofing around maybe, for me.

  15. Mute Avatar

    its so awesome to have you back Dan

  16. FM Avatar

    Hi Dan, do you have child?

  17. Phoenixx Avatar

    49:47

    Senpai noticed me^^

  18. Zack Mercury Avatar

    As I come from Flash, where you don't need to care about matrix transformations, I don't know why don't they just make it simple as that everywhere .-. You just have a DisplayList, filled with objects, that represent their own coordinate system. And you can add objects one inside of another(except for primitive vector and bitmap shapes, you can't add anything inside of them). You don't think of matrices, you think of objects as containers of graphics. Dan, check out PIXI.js, it's way is copied from Flash. You're gonna love it.
    http://pixijs.github.io/examples/

  19. ืืœื•ืŸ ืขื˜ืจ Avatar

    I like the way you make programming so fun and interesting ๐Ÿ™‚
    Keep it up! (Sorry about my bad English ๐Ÿ™‚

  20. Arindam Baishya Avatar

    Hey mr shiffman i like everything the way you do code…..its very amazing i wish i could have…

  21. Pratik Xavier Avatar

    Appreciate the way you make everything simple Dan…Please visit India some day soon. ๐Ÿ™‚

  22. Adam Temple Avatar

    Would I have to constantly find and clean out the sketch temp files on p5 like I do with processing?

  23. swaminathan swami Avatar

    iam studying CSE 2nd year,iam begginer to coding so plz teach from beginning

  24. Jelto-Tankred Basel Avatar

    Don't turn around bro!!

Leave a Reply

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