RGB Color in p5.js for Beginners (1.4)

[@NatetheAceOfficial]

I wish my other classes were as enjoyable as this. Teacher attitude is HUGE part of learning.

[@haixiading3696]

what about your class?

[@flournoats8524]

Thank you for making my ADD brain not feel so strange. The way you present, as scattered but still on subject, is a godsend.

[@davidchristian8473]

Hey man, 10ku, I did knew NOTHING about p5.js, i didn't knew anything about js to say the true. I did this function setup() { createCanvas(600, 400); // put setup code here } function draw() { background(0,125,55); fill(250,255,0); stroke (250,255,0); strokeWeight(2); quad(300,0,0,200,300,400,600,200); fill(0,0,258); noStroke(); circle(300,200,250,250); // put drawing code here } to thank u. *Keep teaching man.*

[@marshallsober]

Dan you saved me, without a doubt my peaceful place is this channel. I'm electrotechnical turning to software this year and it had been A REVELATION to stumble on the train and the processing foundation. I had rough times and days and this is my way of calming down listening to you. very often after extensive videos listening of Dan I simply feel better, not necessarily because I code better yet, the teacher is therapeutic to listen to, its so light but yet deep this is proper teaching. You really should go into a python series and learn the matter you teach at the same time. with proper bases and references I'm sure I would learn ALOT even if you are more a java/js expert

[@marshallsober]

i would suggest to check out the RGB cube if ever you did not before it started making sense after i played with a RGB cubic representation with the central diagonal being the greyscale line...obviously this is basics stuff at best hehe ;)

[@animeshbarman5666]

I can't stop myself liking every video I watch . Really great quality of content s and your passion to teach is helping me learn more and more without any hedache Thank you sir

[@Saldus__]

Thanks! You are the best coding teacher on the internet. Your lessons are easy to understand and they are very fun! Thank you so much i don't know how i would learn to code without you.

[@NitinChauhan-vh2yk]

For the level of enthusiasm, I want to have what this guy is having! :P

[@samdavepollard]

lots of experts can't teach lots of teachers aren't experts and then you get guys like Daniel Shiffman - experts who can bring the subject to life for us learners; they're a gift many thanks

[@josephgarza5973]

Yes they are, indeed they are.

[@donaldazevedo5554]

Whenever I see him I think this myself. Not only his he very knowledgable, he is an engaging teacher. Clearly this is what he loves so much!

[@balsajokic6052]

Thanks man!Your enthusiasm is sooo motivating. Like, after I see you telling me to do a drawing with all that joy I feel like If i don't do it im the scum of the earth,haha!Thanks!

[@forrateam7789]

This guy is the bob ross of code

[@BranchBruh]

lol

[@fantsypants8313]

put a happy little smicolon over here

[@Raf_Kr]

sure is

[@Andrii87]

Today I found out who is Bob Ross. Great tv show!

[@TheFishKing64]

@@Andrii87 you learn something new everyday

[@aneye.]

You must be one of the smartest guy ever born on this "Earth" . You make things so easily that no one ever dare to skip your class.

[@brinalrumao8251]

Your teaching skills are just superb,no room for doubts at all as we cannot have any after watching such awsome amd detailed videos

[@anupamagupta1885]

I love how he remains that much excited everytime

[@drkmgoswami3042]

I start my coding journey from coding training thank you are pro

[@YuvanshVarshney-i8k]

i think that you are the best teacher there and this was the most helpful vid

[@thomasgardner838]

Incredible, I teach and you are completely captivating. A true inspiration.

[@muneebbug]

Such a love and fun while wwtching your videos. A TRUE TEACHER ❤ Love from Pakistan

[@-Rigged]

My fav part so funny 8:30 btw Thank you so much i have wanted to learn code and i think i will be a programmer if i watch this whole series

[@alcoholiccatscoding8540]

I like when he speak care fulling so we can understand and when he joke around i like it i wish i was him

[@TheSourLemonz]

needed to know about transparency for a project thanks dan

[@knowledge_4203]

THIS IS THE BEST TUTORIAL EVERRRRRRRRRRRRRRRRRRRRRRR I THANK U VERY MUCH MY BRO!!!!!111111!!!!!1111111!!!!!1111111

[@girisharwade1120]

the best coder ever seen in you tube

[@sufjanchad]

So crazy. I was going back in these videos to try to figure out the atom command for launching a p5 sketch in Chrome and all the vids disappeared and now you are using the web edition.

[@TheCodingTrain]

Hi, apologies! I am in the process of re-organizing the playlists. Note I am not deleting any videos from KZbin just moving some things around. You can find the workflow video here still: kzbin.info/www/bejne/fouXdWatebeUm8U I need to put it back in the playlist but probably later now that I am having beginners start with the web editor.

[@carlosnani]

This video is the best and fun way to learn. Thanks !

[@DragonDrew1818]

Bro you the best dan❤

[@FunOfHeuristic]

Nicely expended, you can make a simple concept pretty interesting.

[@shorako6252]

i am really enjoying your lessons, i am from Egypt, keep going teacher ;)

[@sweethomes674]

Wonderful lesson and enthusiasm 😊

[@ronidey380]

I have already learned JavaScript now i have started learning p5.js with you... thank you so much for these videos... P5.js is easier than canvas HTML5.

[@DeadCandIe]

The way your explaining is fantastic!

[@KZ-ui5yo]

ive learned about RGB when i was playing a game where i can make my own game (Edit) ive also learned about the RBG when i was coloring the lights of the robot we were using in robotics class

[@banditgreat6673]

holy cow, im learning

[@krish-ut9de]

ikr

[@chickenchips6055]

he is always excited i wish my school can hire him

[@bubblebath2892]

Man you are awesome !! and please tell what software you using for magnifying the screen / or focus

[@secular-world7316]

You have a great gift !

[@menahamama]

thank you for teaching me to code

[@saminchowdhury7995]

12:59 if you just centered the ellipse on top of the green rectangle, you would have made Bangladesh flag. Thank you for the video sir.

[@EduardoMazolini]

Hi, I'm Brazilian. I saw your course. I like to use as base to my course for public school children. You inspire me. I will start witch Scratch from MIT, maybe some game platform (construct3, stencyl), then your course. I do not really know the right way. I will be a volunteer but I hope it evolves into a small school in my town.

[@TheCodingTrain]

I am excited to hear about this! please let me know if I can help in any way.

[@billionaireno1]

How is it going?

[@EduardoMazolini]

@@billionaireno1 unfortunately, with COVID, people gave up on doing it. Who knows when the staff get together again.

[@billionaireno1]

@@EduardoMazolini i believe in you man, you can do it. Try doing an online courses for free (or paid, but you said you were going to be a volunteer so probably free.) that you can advertise to kids at their schools so you don’t have to worry about covid.

[@vlahman_]

P5.js is really organised and simplifies the coding writing process; but isn’t it better to just learn the normal javascript code, as in the future we might have to work on projects built without p5 library and we might struggle in adapting to the main way of writing javascript ? I love the p5 way, if you would ask me, I'm just scared that in the future I might struggle with other projects. Thanks for your work, ur tutorials are extremely helpful!

[@thebeastgaming3722]

thanks you bro it helped me understand much more easily

[@whatisgoingon8934]

U help so much thak you for making so great videos

[@Blue_Opossum]

💖💖💖 amazing lesson!! Thank a lot. I gave thumb up and subscribed with theat pleasure!

[@KewlWIS]

another way to set the transparency is by typing alpha ( *insert transparency digit here* ) before the shape

[@nabil170277]

First of all thank you for an awesome and fun way to learn programming, kudos to you Daniel, you are a fabulous teacher. I got one question: I notes it that applying noStroke() before a line() makes the line disappear, do you know why ? Thanks again for the content

[@doe6654]

I think noStroke means no outline so line will be effected

[@abhay_more]

how come at 12:43 when u removed fill() and the color changed frm blue to red....red colur was of ellipse...and another thing that u created rectangle first and then you wrote fill function for the ellipse how come the same color is in rectangle also what happened to order..... BTW LOVE YOUR WORK...ITS SO EASY TO UNDERSTAND U MADE IT EASY FOR US AND ALSO LOVE UR SENSE OF HUMOUR..

[@abd-allahmuhammad9285]

when i make a shape on top of the fill it still fills it. why? because i thought it was everything under the fill with this code it fills the circle when its on top of the fill function setup() { createCanvas(400, 400); } function draw() { background(220); circle(100,100,50) fill(0,255,0) }

[@KG-gg1op]

Good job man keep the good work!!

[@6754bettkitty]

The main reason that RGB is limited to 256 is because it is defined in an 8 bit scheme. You could expand the range by expanding the bit width, but nobody does that...

[@Tnak321]

thank you for explaining this

[@corrinabrouillard5728]

Four somr resion the fill stroak and elipse will not wrick

[@shauryaveerchaudhry2163]

@Coding train... thank you... can you also have similar tutorials for MatterJS and Greensock and JQuery?

[@Miiguel-mn]

So, i have a question, when using functions like stroke, strokeWeight or fill they work for all the shapes written after these commands, how can i make it so that these colour settings affect only one shape and not all of the ones that come after? Im loving the series!

[@caterinatahan1400]

You have to use the push () and pop () functions, which are always used together. For example_ function setup() { createCanvas(240, 120); } function draw() { background(204); fill(255,0,0); push (); fill(0,0,255); noStroke(); rect(30,30,50,85); pop(); rect(3,3,90,87); } This way, with push you "open" an area where the function fill with an argument that corresponds to red, and the function noStroke, will only be applied to what you draw inside there. When you want to "close" that area, you use pop. In order to prove you that those changes are only applied to the objects inside the push and pop, I used the function fill with red value on top. You will see that, as the second rectangle is not contained in the push and pop, it will actually be filled with red and not blue.

[@percussion1999]

function setup() { createCanvas(100, 100, WEBGL); } function draw(){ background(200); line(-20, -30, 35, 25); rotateX(frameCount * 2) translate(20,40,10) sphere(15); describe( 'A black line on a gray canvas running from top-center to bottom-right.' ); }

[@knowledge_4203]

THANK U SOOOOOOOOOOOOOOOO MUCHHHHHHHHHHHHH AGAIN NNNNNNNNNNN!!!!!!!111111!!!!!!!111111!!!!!1111111!!!

[@dct028]

Is there a way where I can like the videos straight on the website.

[@lindahartley7390]

If you want to see my creation, put this into p5.js: function setup() { createCanvas(400, 300); } function draw() { background(100); rectMode(CENTER); fill(0, 255, 0); stroke(0, 0, 255); strokeWeight(4); rect(200, 150, 150, 150); fill(255, 0, 0, 175); noStroke(); ellipse(150, 250, 100, 75); }

[@bhavanipakki3524]

i may say its bad

[@mandy1339]

very nice

[@FreeLancer-s1r]

Amzeeing video

[@chickenchips6055]

I love this guy

[@kulbhushanpatel2554]

Hey!! I reallisrd That we can also use background("red or something") and the color named appears

[@isabellebailey7771]

so i have a triangle and then a bunch of lines underneath. i set a fill/stroke for the triangle and then the stroke was the same for the lines underneath. is there a way to end the logic after my triangle so my lines are not affected besides setting their own fill/stroke?

[@IndubioProbene]

Is it necessary to type a semicolon after each "line"?

[@TheCodingTrain]

Not necessary but I prefer to use them for clarity!

[@estadodigital42]

would the exact half of the value 255 be 127 or 128? thanks!

[@waltercisneros9535]

Please I have a doubt, when you create a rectangle lets say 100 x 100 pixels, does this create a 99 x 99 rectangle with fill, and a 1 pixel surround with stroke? Or does stroke add a pixel to the shape to be now 101 x 101 pixels? Thanks, I hope to share something after the tutorials

[@JordanCassady]

Are you also Gordon Clark of Halt and Catch Fire?

[@강봉준-m4k]

play with transparency :D function setup() { createCanvas(400, 400); } function draw() { background(1); stroke(255,0,0,100); strokeWeight(30); fill(0,0,255,100); circle (200,200,240); strokeWeight(); fill(0,0,255,245); triangle(200,200,150,250,250,250); fill(0,0,255,235); triangle(200,200,100,300,300,300); fill(0,0,255,225); triangle(200,200,50,350,350,350); fill(0,0,255,215); triangle(200,200,0,400,400,400); }

[@sureshpawal1]

When we have to leave a line?

[@intellectualbrainstorm665]

My only Question, are there more arguments of for lets say background? I gave it like twelve arguments, and it started behaving like crazy, so what are significance of other arguments, other than rgb and alpha ? Please if anyone knows, please help me.

[@luquis-17]

THank you so much

[@evanhood9059]

Is there a way to colour in a section of your canvas without using 'rect'? maybe using x,y coordinates?

[@banditgreat6673]

yes, its the background code

[@paolagonzalez1553]

Hey, what if i have differents shapes like your example and i want to make the ellipse just transparent where the ellipse and the rect meets, like the intersection of the shapes.

[@Xeronimo74]

that's way more difficult ...

[@I_like_science]

Bruh! that's way more difficult ...

[@khushalrawat690]

Why does the size of the shape decrease if I increase the strokeWeight, shouldn't it stay the same and let the huge outline go out of the canvas. My guess is that p5 doesn't allow anything to exceed the specified canvas? Please help.

[@zeke_poe]

function setup() { createCanvas(400, 400); } function draw() { background(0, 255 , 255); rectMode(CENTER); rect(200, 200, 200, 50); rect(300, 200, 100, 100, 0, 50, 50, 0); line(340, 200, 355, 200,); line(355, 200, 365, 195); line(365, 195, 375, 205); line(375, 205, 385, 195); line(385, 195, 395, 205); line(395, 205, 400, 200); circle(100, 150, 120); circle(100, 250, 120); }

[@zeke_poe]

Update in the next video comments!

[@krupalibusa9146]

Hello can you tell me how to fill one pixel in canvas? is there any inbuilt function?

[@mimifangs]

what if you wanted a shape to be half one colour, or just a section of it filled? Is that possible?

[@akankshasingh704]

Can we change the colour of the text?

[@Darkmateo]

Is there a way to fill under a line, i know i could also just draw a rectangle and fill it the color i want. But i would love to know if its possible to just draw a line in the middle of the canvas and change the color under that line.

[@Zoozazzeh]

why the rectMode ( centre) only applied to the rect not both shapes? however the colors did!

[@cashermans4214]

Hi, I love coding and I love using p5 but if I want to code a game like minecraft. I need to use an other program. I have downloaded c++ but the commands doesn't work in there. And where do I see in c++ what I have coded. This is a question that I have searched many times on the internet but no one really explained it and I still don't get it.

[@joshduriden519]

Now you can party in full RGB editor.p5js.org/full/BJknBqS5X

[@65FM1Edits]

For me, Green 255 and blue 255 is the best.

[@ipiudementi]

U r great. Greetings from Italy

[@Pittre]

Isnt yellow the main color with red and blue And not green?

[@slowedsoundnetwork8288]

i'm having a bit of trouble. I'm trying to fill a rectangle in using the fill command, but It makes the ellipse the same color for some reason.

[@gamerdio2503]

What's your code?

[@kyushii1921]

Greetings from germany! what a great content! Very easy to understand ^^ but I have a question (I know this vid is 2 years old but hopefully someone can help me lol): I need the outline stroke to stay but the inside strokes to vanish. There are may shapes for building one big shape but the strokes of the inner shape should go away. Hopefully its understandable :D Thanks!

[@TerrarianCrab]

What do you mean by inside stroke? if you mean fill, you can do this simple command. stroke(R, G ,B ); noFill(): rect, tri, quad etc(whatever settings you like);

[@kyushii1921]

@@TerrarianCrab I mean, I have many squares or triangles and they form one big shape. Bute I need those lines or stroke that are inside of the big shape I want to vanish. The outline of the shape should stay. Is this posible?

[@TerrarianCrab]

The inside part is called fill(); if you want to delete it, you can do this simple command. stroke(R, G ,B ); noFill(): rect, tri, quad etc(whatever settings you like); noFill is the command that deletes the inside part (fill)

[@kyushii1921]

@@TerrarianCrab I´ll try that. Thank you very much :)

[@TejasIsAmazing]

@Kyushii Oof i am late, but instead of remove the lines inside the big shape, you can instead draw the big shape after the other shapes. The order of the shapes that you draw matter. So if you have a shape that you want on top of the other shape, and you dont want the lines of the other shapes to come inside the original shape, then you can just put the drawing code of the original shape, after the shape you want to draw on top off. You might have already figured it out, but it might help others, so ya.

[@uninsane7616]

From where did you learn coding

[@sub2pewdiepie180]

Ik I'm really late on this and you probably won't read this but my CENTER comand isn't working and I don't know why Any tips would be great Much appreciate thanks

[@6754bettkitty]

uh, it should work. consult the p5*js faq

[@kathyhunter1211]

int c = 255; fill(c); c-=60; How does this work the -=

[@apaulphilip1]

Here is the project thingy .editor.p5js.org/Chrisbis/full/NK5i8Is8K

[@Sapgreenbooks-l1g]

TE AMO

[@Holobrine]

You should have stroke(null) mean no outline. It would spare you a few functions.

[@mukeshkumar-nr2wx]

If i am learn p5.js what is the benifit? i am looking for strong in javascript.but p5.js is help for this?

[@TheCodingTrain]

p5.js is a library for JavaScript so you will learn the basics of JS in this series! If you are interested in web development or server side programming with JavaScript you might want to check out other tutorials on native JS, React, node.js, etc.

[@MRESAT42]

how can we create extra canvas?

[@rishabhtomar3352]

guys can anyone send me that oscillation by nature of code link. its not working in dan's description.

[@TheCodingTrain]

I'd like to fix this! I dont remember what this sketch was, do I refer to it in the video?

[@shannu_boi]

I'm having a problem. Whenever I type noStroke(); It removes all the strokes in all the shapes after this line. Is there a way I can undo or remove this function after a few lines or something

[@lioncat731]

yeah, me too. Anyone knows what the problem would be? Even I put noStroke(); at the end of the function.

[@lioncat731]

editor.p5js.org/CodingMadMax/full/S1TwF4uoQ //with stoke editor.p5js.org/CodingMadMax/full/S1TwF4uoQ //no stroke.

[@kristofkovacs5836]

Hi guys! Use push(); and pop(); (you can check it out on this site p5js.org/reference/), or you can use stroke(number); if you want stroke

[@abhiroopcvk13]

@@lioncat731 hey! Once you declare noStroke(); all code below it will lose its stroke. To get stroke back, you would have to declare stroke again. Example: stroke(0); to declare a stroke of black

[@huhgo8179]

@@kristofkovacs5836 thnaks!!

[@ThsHunt]

8:36 we can not use ur finger cus they r ur own fingers

[@Jonathan-xq6dv]

Can anyone tell me where suppose 1.7 where we learn how to animate them is?

[@TheCodingTrain]

Here's the full playlist: kzbin.info/aero/PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA

[@leolocoism]

Thank you again, again and again :)

[@ctbram0627]

Okay this is making me insane. For whatever damn reason the cursor keeps setting itself to overwrite and I have to keep pressing the damn insert key to get it back in insert mode. And since I have to look at my damn fingers when I type I find out when I look up and see I have overwriten an entire line of code!!!!! Please what key or action keeps resetting the web editoer to overwrite mode?????

[@goldthumb]

I can't figure out the message on Daniel's T-shirt. 🤣

[@TheCodingTrain]

It's from here! distributedweb.care/posts/products/

[@slymagpie]

Hey Dan, is this new or a repost?

[@TheCodingTrain]

It's a new video (edited out of a recent live stream) but the content is a re-post as I made a similar video ~3 years ago. I am remaking some of them to use the new p5.js Web Editor.