1.4: Color - p5.js Tutorial

แชร์
ฝัง
  • เผยแพร่เมื่อ 8 พ.ย. 2024

ความคิดเห็น • 112

  • @squarebynature
    @squarebynature 9 ปีที่แล้ว +192

    You are by far the best programming teacher I have ever heard Buddy! I relly enjoy your classes...thumb up!

    • @TheCodingTrain
      @TheCodingTrain  9 ปีที่แล้ว +22

      +Bernat Ferragut thank you for nice feedback!

    • @Rarasiq
      @Rarasiq 7 ปีที่แล้ว

      yes i agree with him

  • @DavAliTV
    @DavAliTV 6 ปีที่แล้ว +26

    You're like the Bob Ross of the coding world, thank you.

  • @loic.bertrand
    @loic.bertrand 6 ปีที่แล้ว +7

    I watch your videos and livestreams for a long time now and I'm a great fan of what you do, but I still come to these beginner friendly videos because I like how you teach, and I find it very entertaining xD Thank you !!!

  • @thirstypooch
    @thirstypooch 6 ปีที่แล้ว +1

    whenever i am down which is very often lately i come here to see you.
    Thank you !!! you inspired me to keep coding no matter how rubbish life might get.

  • @RameenFallschirmjager
    @RameenFallschirmjager 5 ปีที่แล้ว +2

    this channel is wonderful! finally there is someone who speaks human tongue when teaching programming!

  • @H3000-v7i
    @H3000-v7i 7 ปีที่แล้ว

    You're charisma is just the best!!! If all teachers was like you, everybody would be smarter!!

  • @angelicasilva9097
    @angelicasilva9097 3 ปีที่แล้ว

    The best programming teacher I've seen in my entire life!

  • @raysun5027
    @raysun5027 7 ปีที่แล้ว +1

    It's a pity, that I didn't had such a teacher at school. you are the best! thank you

  • @carlosfernandez6470
    @carlosfernandez6470 6 ปีที่แล้ว

    I don t think there s a better teacher in the world . Awesome way to explain things. I ll see the whole bunch of videos of all you teach just because is easy and fun to learn this way. Thanks

  • @deltaforce3329
    @deltaforce3329 ปีที่แล้ว

    I want to have a teacher like this in my School !! He has talent for teaching !!!

  • @joejoeman3645
    @joejoeman3645 7 ปีที่แล้ว +1

    love the length of these videos, I am somewhat familiar with programing from python so its ez to pick up. Thanks dude, ill be sure to become a patron when i have free funds.

  • @noahreeverts465
    @noahreeverts465 6 ปีที่แล้ว

    I would add that if you want to find a specific color, or rather play around with a color wheel instead of guessing the RGB of a color; in google, search "RGB color selector" (or something like that). There are tons of applications that let you see and choose the color that you want. They return those three arguments (R, G, B) so that you can implement that exact color that you want into your code.
    Edit: google actually has one built in. If you search "RGB color picker" a color wheel will pop up IN THE SEARCH ENGINE :) so you don't even have to click a link, Just get your three numbers between 0 and 255 and keep coding.
    P.S. i am a beginner and i just love your videos. im trying to decide between python3 and JS/P5JS for which one i should really stick with for now, and your videos are so very helpful and so entertaining. thank you for sticking with the platform and doing what you do

  • @chavenadehemoglobina94
    @chavenadehemoglobina94 8 ปีที่แล้ว

    8:45 "the body is red, the eyes are green, the head is blue"... no one does tutorials like you.
    I enjoy your content. cheers.

  • @Aktunes47
    @Aktunes47 8 ปีที่แล้ว +1

    3:49 you crack me up! (and I'm learning at the same time) ... thank you for your outstanding contributions!

  • @ТинкерРеармович
    @ТинкерРеармович 7 ปีที่แล้ว +6

    I am from Ukraine and i almoust dont understead you, but you teach so good, that i am going to became a programmer! Thank you!

  • @warrengeorge7126
    @warrengeorge7126 6 ปีที่แล้ว

    Your teaching style is excellent, entertaining and informative in just the right measure

  • @DrawMakeCode
    @DrawMakeCode 8 ปีที่แล้ว +32

    THUMBS UP for "I've really turned into a crazy person...counting on my fingers in a room by myself." lol

  • @life42theuniverse
    @life42theuniverse 8 ปีที่แล้ว +7

    its 256 colors per color because they are using 8 digit binary number(a byte) under the hood which can represent all the numbers from 0 - 255 and I think they actually use 4 bytes r,g,b,a a for alpha transparency. Which compacts the color nicely into 32 bits of information which most of your hardware has 32 bit processors and can execute chunks of information this size very efficiently

    • @TheCodingTrain
      @TheCodingTrain  8 ปีที่แล้ว +4

      +life42theuniverse thanks for adding this helpful info!

  • @yuriurine3120
    @yuriurine3120 6 ปีที่แล้ว

    Thank you so much!! I'm picking up a lot of stuff from this course. You are the best teacher I have ever seen and because of that, I can't wait to buy some of your books because i can already tell It's gonna be an awesome investment

  • @ioannagiannopoulou8673
    @ioannagiannopoulou8673 6 ปีที่แล้ว

    I was thinking of coding a little, then I thought I could see a movie, but guess what, I had so much fun in one of your videos, so I started watching you from the beginning!! I laughed and I was creative at the same time!! Amazing!! Well done!! When you 'll be bored of programming, you should seriously start a career as a comedian :D

  • @AnthonyGaff
    @AnthonyGaff 7 ปีที่แล้ว

    I'll echo all the praise for the teaching and entertainment value of this video, and then I'll add something I didn't see in the comments: I love how the spots on his shirt where the two blue stripes intersect is bright enough to trigger the greenscreen effect and you can see through him. Made me laugh more than once. :) Great work! Keep it up. Thanks for these vids!!!

  • @vaddiparthirithika9919
    @vaddiparthirithika9919 4 ปีที่แล้ว

    Never understood coding better before !! Thank you so much for this content :)

  • @mehediabdullah9852
    @mehediabdullah9852 7 ปีที่แล้ว

    You make me to smile while learning.....
    Thnx For making this tutorial..

  • @santiagocalvo
    @santiagocalvo 3 ปีที่แล้ว

    You are such a legend man

  • @leobetancourt6758
    @leobetancourt6758 7 ปีที่แล้ว

    9:19 SNAIL! great video!!

  • @SeungCanFade
    @SeungCanFade 7 ปีที่แล้ว

    I like how part of your shirt gets caught in the green screen. You are slowly melding with your code!

  • @raoulsmits9748
    @raoulsmits9748 6 ปีที่แล้ว

    ways to define color (white): rgba(225,225,225,255),#fff,white (you can use every available coloring system in JavaScript)(there are websites with a colorpicker to transfer that into RGB or other color systems)

  • @noahnajjar3075
    @noahnajjar3075 4 ปีที่แล้ว

    If anyone wants to put arms on the figure that is being shown in the video put this in:
    // Arms
    line(230, 150, 220, 160);
    line(250, 150, 260, 160);

  • @RameenFallschirmjager
    @RameenFallschirmjager 5 ปีที่แล้ว

    this guy is super awesome!

  • @alejandroalvarez6245
    @alejandroalvarez6245 7 ปีที่แล้ว

    I will follow your videos. Congrats ... is an excellent work.

  • @garrettsmith6014
    @garrettsmith6014 7 ปีที่แล้ว +4

    I could not stop laughing when you counted to 9 from 0 with your fingers and didn't understand what happened when you never reached 10! Funniest thing I've seen all week.

  • @icyshows25
    @icyshows25 8 ปีที่แล้ว

    i really like your coding

  • @johnbritolima
    @johnbritolima 7 ปีที่แล้ว

    The rectMode(CENTER) sets the CENTER of the rectangle as the positional reference in the canvas.

  • @abhayagarwal5097
    @abhayagarwal5097 4 ปีที่แล้ว

    Ty for so awesome tutorials

  • @larryeliemenye8105
    @larryeliemenye8105 5 ปีที่แล้ว +3

    5:59 The funny mind blowing moment you thought you had 9 fingers HAHAHA! Your face was hilarious, Good Videos though.

  • @kareemhenry1974
    @kareemhenry1974 7 ปีที่แล้ว

    Dude you can teach your behind OFF!!! My brain cells thank you Sensei. I WANT MORE!!! Standing Ovation 👏 👏 👏 👏 👏 👏 👏 👏 👏 👏 👏 👏 👏

  • @HeyTiGBeats
    @HeyTiGBeats 7 ปีที่แล้ว

    really appreciate these videos, thank you

  • @goldthumb
    @goldthumb ปีที่แล้ว

    JavaScript is the last programming language I want to take seriously. Swift can do stuff on iPad and iPhone; Java and Kotlin can play with Android phones; Python is behind SageMath and AI and has the amazing turtle drawing; C++ is forced by some programming competitions; C# may be the thing met by kids on Windows. Now I change my mind since JavaScript dominates the whole world and Daniel demonstrated the amazing power of p5js in his videos. I decided to watch one one more time.

  • @lulu4483
    @lulu4483 6 ปีที่แล้ว

    you're a great teacher!

  • @fredianriko5648
    @fredianriko5648 4 ปีที่แล้ว

    I think it would be more amazing if the p5 adopting OOP concept when using the shape function. Like when writing rect() function, all the properties like coloring the rectangle, or set the size, or animation, applied inside the function
    What i wish it would be more like this
    Function draw(){
    Function rect(){
    Stroke(255,0,0)
    }
    }

  • @maurobono5324
    @maurobono5324 7 ปีที่แล้ว

    You are the Obi Wan Kenobi of Coding. I wanna be your Padawan!!! :) Great tutorials, thanx a lot!!!!!!

  • @ghjfghj8318
    @ghjfghj8318 7 ปีที่แล้ว

    ALL HAIL ZOOG! First he took the publication world by storm, then the internet. Where next? The big screen? Hollywood? East Asian incredibly weird game shows? Jupiter? Find out in ep 20.01 : A Zoog Odyssey!

  • @shabdokirah3053
    @shabdokirah3053 4 ปีที่แล้ว

    Thank you very much sur

  • @programmingkitten1326
    @programmingkitten1326 7 ปีที่แล้ว

    Thank you for the nice tutorial you are the best !

  • @sokadroid
    @sokadroid 7 ปีที่แล้ว

    The best teacher thanks :)

  • @awesomejolten
    @awesomejolten 7 ปีที่แล้ว

    thanks for everythning you are my book for school :)

  • @pavolslamka9214
    @pavolslamka9214 6 ปีที่แล้ว +1

    They should do in p5.js´(That is just my idea)
    rect (240, 150, 212);
    *fill.rect* (255, 0 , 0); - So, it can avoid mistakes

  • @bingwen5509
    @bingwen5509 2 ปีที่แล้ว

    Thanks! It's very useful and you are so cute😆

  • @charlscatipay
    @charlscatipay 5 ปีที่แล้ว

    Coooooooolor!

  • @grafeniels
    @grafeniels 8 ปีที่แล้ว +8

    Is there a way we can get a gradient color background?

    • @crisiberny
      @crisiberny 6 ปีที่แล้ว

      That's a really good question! I think you can work with the individual pixels, working one by one and changing its color just a little bit, but I don't really know how to do the gradient color background. I'm just a newbee in P5 and JS.
      If anyone knows, please share!

    • @mariamshqair9611
      @mariamshqair9611 4 ปีที่แล้ว

      You can use Photoshop
      Or you can use inspect window use style using color :red for example a square box will appear with red color press on the square and you can pick any color in screen .
      You can apply this techniques in any website and take the same color you would like to get.
      Hope it help someone

  • @nathen1778
    @nathen1778 4 ปีที่แล้ว

    DA BEST

  • @kingyyyDEV
    @kingyyyDEV 7 ปีที่แล้ว

    9:07 looooool

  • @AjinkyaBorade
    @AjinkyaBorade 7 ปีที่แล้ว

    thanks again for an awesome video

  • @TheLearningFrontier
    @TheLearningFrontier 7 ปีที่แล้ว

    sir you are awsm....

  • @timmellis5038
    @timmellis5038 7 ปีที่แล้ว

    Hi Dan, is it possible to make the alien into a variable so you can move it around? Not to move it around in animation but to be able to move them around and line them up, et cetera, also animate them? I can make an array but I'm having trouble figuring out how to make the alien into a variable. Would you make an object or two? Thank you, your videos are awesome!

    • @TheCodingTrain
      @TheCodingTrain  7 ปีที่แล้ว +1

      Yes, keep watching I show how to do this stuff in future videos in this playlist!

  • @theresa_arethuza
    @theresa_arethuza 8 ปีที่แล้ว

    i love you man

  • @thecodersexperience
    @thecodersexperience 7 ปีที่แล้ว

    gr8 man jzt reach your channel , jzt want to know -> Whats the secret of your energy????? and please do some video on python too....

  • @sofiagarcia3581
    @sofiagarcia3581 9 ปีที่แล้ว

    lol thank you for being you... love the lecture

  • @HonkChamp
    @HonkChamp 7 ปีที่แล้ว

    You the best

  • @robertravikumar5207
    @robertravikumar5207 5 ปีที่แล้ว

    Is there a way to identify the color space of an image ?
    I want to check whether the image is in CMYK color space?

  • @Humance
    @Humance 8 ปีที่แล้ว

    Gideon Goddard, is that u!?

  • @VivekKumar-wm9jo
    @VivekKumar-wm9jo 8 ปีที่แล้ว

    Sir, How can i made this type video as you can display computer screen easily zoom in/out..

  • @pmmartins
    @pmmartins 7 ปีที่แล้ว +1

    upvote for the realization at 6:20 xD

  • @AnjaliKumari-np7sv
    @AnjaliKumari-np7sv 4 ปีที่แล้ว

    you did not mention.. that we can directly write the color name between double quotes.. that works too..

  • @HOUSIENable
    @HOUSIENable 3 ปีที่แล้ว

    what happen when we put strokeWeight(8) above line? Why all the strokeWeight Bold "rect, line, ellipse" ?

  • @prasadsasane9139
    @prasadsasane9139 7 ปีที่แล้ว

    Sir , Actually i want help from you ..Question -- from 3Dcolor picker , if I am clicking on any color from color picker then I want to zoom the color along with its neighbors color also...

  • @sangam1829
    @sangam1829 8 ปีที่แล้ว

    Hey! daniel.I'm using p5 editor as suggested by you.I have a question that fill(255,0,0) does not give me red color.it gives me black color.and fill(0,0,255) gives white color. plz help

  • @coreyweaver209
    @coreyweaver209 8 ปีที่แล้ว

    I'm writing code that is drawing an ellipse and dragging that ellipse leaving behind its shape for the purpose of writing. your name or something like that. I am attempting to use the keyPressed method to change the color of the ellipse while the program is running. 'R' or 'r" to change to a red that I have already chosen. The error that keeps popping up states I need a variable, but I am not sure what other variable I need to label. Do you have any advice?

  • @MrHellboye
    @MrHellboye 8 ปีที่แล้ว

    hey Daniel,
    if i write these function codes in p5 it work fine but when i write the same code in note++ with all the required tags,it dosnt work.(these function goes between script tags,isn't it?
    please reply mate
    cheers

  • @AntonyAllocious
    @AntonyAllocious 9 ปีที่แล้ว

    Hi Daniel,
    I am newly learning Javascript now a days. In your tutorial videos showing some examples, i was tried Aptana Editor., i couldn't find a result. Please help me out, whether its running p5 editor only...

    • @TheCodingTrain
      @TheCodingTrain  9 ปีที่แล้ว

      +Antony Allocious In my videos I am using the p5.js editor which you can download here: p5js.org/download/#editor

    • @AntonyAllocious
      @AntonyAllocious 9 ปีที่แล้ว

      Hi Daniel,
      Thanks for your prompt reply man, But i have some questions with you, I tried P5 software, with your teaching materials, its running fine, But i tried in my HTML Section itself i tried, there is no response. Can you please guide me, why its not supporting other editors.

    • @TheCodingTrain
      @TheCodingTrain  9 ปีที่แล้ว

      +Antony Allocious It should work with other editors, I suggest following the instructions on these two pages: p5js.org/get-started/ and github.com/processing/p5.js/wiki/Local-server

  • @thelonghairdudetlhd1474
    @thelonghairdudetlhd1474 6 ปีที่แล้ว

    how do you make floats in js?

  • @jc-gd9fq
    @jc-gd9fq 6 ปีที่แล้ว

    Hi, I want to ask that how can i add a theme into my picture just like a image in the picture?

  • @zeiko5941
    @zeiko5941 7 ปีที่แล้ว

    Confusing part here is that once the coding is in Brackets, with the library from processing, and then again it is in Processing.

  • @Castle3179
    @Castle3179 5 ปีที่แล้ว

    Instead of a alien creature, I made a crude minimalist picture of deadpool.

  • @arungrg
    @arungrg 7 ปีที่แล้ว

    the fourth argument on the color; you can also go for the 5th argument on rect. gets you rounded rect. made a mistake and found out.

  • @mohitb124
    @mohitb124 7 ปีที่แล้ว

    IF I NEED OBJECT WHICH HAS NO COLOR AND OTHER WHICH HAS COLOR WHAT SHOULD I DO FOR IT

  • @kalimero0258
    @kalimero0258 7 ปีที่แล้ว

    Hi can u help me , why i got an error every time when i hit run in P5, it says Uncaught SyntaxError: Unexpected token . what is that ?

  • @steveburrus9347
    @steveburrus9347 6 ปีที่แล้ว +1

    I'm sorry but try as I have I HAVE NOT been able sto ac cess that P5 Editor! I keep on downloading that small zip file but I simply cannot extract that editor from it. Can someone PLEASE help me with this problem?

    • @TheCodingTrain
      @TheCodingTrain  6 ปีที่แล้ว

      Apologies this editor has been deprecated. Stay tuned we are about to release a new one! (Spoiler alert, try: alpha.editor.p5js.org/)

  • @chiazdigitalsolutions115
    @chiazdigitalsolutions115 5 ปีที่แล้ว

    i cant find a free version of P5.js editor....kindly help!

  • @RS-hs2hc
    @RS-hs2hc 6 ปีที่แล้ว

    can someone help me how to download canvas

  • @tmdg306
    @tmdg306 8 ปีที่แล้ว

    I need help i cant get the ''alien shape'' or the color of it, HELP!!

    • @sameerazsashachannel4125
      @sameerazsashachannel4125 4 ปีที่แล้ว

      you can just search in google : rgb colors chart you can get all things there

  • @aehphea1411
    @aehphea1411 7 ปีที่แล้ว

    oops come on mouse :D

  • @sethbase6960
    @sethbase6960 6 ปีที่แล้ว +1

    Get rect son

  • @DhiSvajita
    @DhiSvajita 6 ปีที่แล้ว

    what is rectmode();

    • @DhiSvajita
      @DhiSvajita 6 ปีที่แล้ว

      significance?

  • @bradleystone9099
    @bradleystone9099 7 ปีที่แล้ว

    It's not working -_-

  • @julienmartinache4172
    @julienmartinache4172 7 ปีที่แล้ว

    it's me or i don't heard enought

  • @sumitdas962
    @sumitdas962 7 ปีที่แล้ว

    hey !!!can we run this on Windows ....... because when i m trying to do stuff it is not working

  • @zappisyoman9608
    @zappisyoman9608 8 ปีที่แล้ว +3

    f:ll ( __ , __ , __ )
    dan 2015/2015

  • @Matyanson
    @Matyanson 5 ปีที่แล้ว

    Please, does anybody have an idea how to tint a image that is made by createimg()?
    if i want to load some picture from URL and then change its color, how do i do it?
    mycode:
    //setup()
    dvd = createImg('upload.wikimedia.org/wikipedia/commons/7/78/DVD_video_logo.png');
    dvd.hide();
    //draw()
    tint(0, 153, 204);
    image(dvd,x, y, width, height);
    thanks :D

  • @swanandgaikwad8746
    @swanandgaikwad8746 3 ปีที่แล้ว

    just 18 dislikes woah

  • @immaginariumworld1914
    @immaginariumworld1914 6 ปีที่แล้ว

    i 'm the 888th to LIKE ahahaha

  • @thecodersexperience
    @thecodersexperience 7 ปีที่แล้ว

    gr8 man jzt reach your channel , jzt want to know -> Whats the secret of your energy????? and please do some video on python too....