11.3: The Pixel Array - p5.js Tutorial

References:

Related Coding Challenges:

Timestamps:
0:00 Hello!
2:17 The pixel array
3:48 R, G, B values
6:26 The formula for getting the numerical pixel on the screen
7:43 loadPixels and updatePixels
10:00 Using a nested loop to change every pixel
13:00 Using pixelDensity() to deal with high density displays
14:21 Outro

Editing by Mathieu Blanchette
Animations by Jason Heglund
Music from Epidemic Sound

#p5js #pixelarray #javascript

[tikrasseo]

I've got this badass wave generator made by some company for our university. And I've had to send the whole image (not canvas, but rather graphics object thingy) to a php file via ajax. Your video saved my arse, since pixels array is a good way to generate a pic via php gd. <3

[pozlong]

I love your videos! Whenever I'm stuck learning something I look for your links and always walk away with a clearer understanding. Thank you!

[chihabgoku]

Dude! I bumped into this by mistake, but I'm loving this! I was looking for how to use Python's library, pygame, on javascript. This is awesome, I'm gonna follow your videos!

[NiconD]

Thank you so much! I was searching for hours for a solution, when you explained it in few minutes

[vnkris]

thank you, hours n hours spent on google, this explains everything!

[anaghaachakrapani]

this is inspiring and motivating for someone who just started out with coding! thank you so much!!

[TehSuperWaffle]

i entered a digital media course for university, i didn't know it had this much coding, but your videos make it more tolerable

[anidea]

Your genius Dani because when i struck, your the first one showed up in my brain 💗

[unoriginalpun]

Ahhh! I was watching your video “Pixel Sorting in Processing” and was going CRAZY wondering why my pixel manipulation was not working the same way yours did! (I was using p5 web-editor). I probably lost like 2 hours of coding trying to figure out what was going on.

[eleanorgrever]

I’m not very articulate in P5.js yet, so I might be missing a building block that would allow me to figure this out, but I was hoping there’s away to create separate pixel arrays within shapes on the same canvas?

These videos are providing really helpful
and accessible foundations for this program for me! Thanks a million for sharing the hard work!

[Frankslaboratory]

I am getting inspired in your videos for my channel, very creative, thank you

[nutsbomars]

Hi, Daniel! Thanks for the awesome videos! I have a question about images in p5. I am using loadImage() and loadPixels() to color correct couple of images. I would like to put the results in <img> tags, but as far as i can tell looking at p5 reference page createImg() only accepts source path/url. Is it possible to do something like that with p5? Thank you!

[ritikkhatri]

at 12:24 when I tried it, my laptop also didn't cover whole screen but I m not using a mac ?

[samfeigenbaum]

Oh my god you're a lifesaver, thank you.

[erispe]

Why did looping over the number of pixels (width by height) by steps of 4 not work? Like this:
for(var i=0; i<width*height; i+=4){
pixels[i] = 255;
pixels[i+1] = 255;
pixels[i+2] = 255;
pixels[i+3] = 255;
}

It gave me the same result as you did with the correct code before fixing your pixelDensity.

[Krebzonide]

I'm surprised how fast it can run through that for loop of a quarter million values. I've been trying to keep my stuff under like 1000 so it doesn't lag.

[moneygettingalways]

6:40 what does the 4 do? 11:15 how does he know to use 4?

[christianloizou]

4:24 you were so stressed with the maths that you said 6x5=60? 😂 Great vid, thanks!

[BlackTrusty]

Hello,
I have a question. Do the colorMode(HSB) change the way pixels[] array is defined ?
I'd like to sort pixels by brightness. Is it possible ?

[johnbeaudin]

4:12 No Sir, I don't remember you previously saying there are 60 pixels. I do remember you said/showed 30 pixels. 😊