10.3: The Pixel Array – p5.js Tutorial

[ad_1]
This video looks at how to access the pixels of an HTML5 canvas in p5.js.

p5.js code:

Contact:

Next video:

Learn JavaScript basics:

Learn HTML / CSS basics:

Working with Data / APIs:

Help us caption & translate this video!


Posted

in

by

Tags:

Comments

25 responses to “10.3: The Pixel Array – p5.js Tutorial”

  1. Amanda Princess Avatar

    Hello sir
    I am a student of software engineering .i want to build a simple webapp for logic circuit simulation for my college minor project..i checked ur android app Logic simulation pro ,it is really cool.
    Plz help me how to make such thing in a website. Which JavaScript can I use for it??
    Plz reply

  2. Da fle Avatar

    I really don't get it, how to get 60 pixel value ? Does they have 30 pixels? I can't understand I know 60 pixels that means how long is that certain array in the video.

  3. Charbel Sarkis Avatar

    i have a question? could you make facebook. i mean we all know you know these animations and shit but what about this type of database manipulation

  4. Anton Demkin Avatar

    This is really awesome, but when i added this code to my p5 sketch for gradient background it became really-really slow. I mean like 1fps. How can i speed up the code? Other stuff is working fine at 60 fps.

  5. fox fyre3 Avatar

    What is the performance hit like when you re-compute the index every pixel?
    If you hit ALL the indexes sequentially like this why not:
    index=0
    yloop:
    xloop:
    pixelgetting[index]
    pixel processing
    pixelsetting[index]
    index+=4

    I know multiplies are computationally expensive, does processing pick up on it and optimize? Your Mac looks very fast.

  6. saurabh datta Avatar

    For a special case (for SVG saving I'm using https://github.com/zenozeng/p5.js-svg/releases I've to use p5.js@0.4.13 ). pixelDesnity() only work with latest P5.js ver 0.5.5 currently.. How can I make pixelDesnity() work in ver0.4.13 or is there a patch I can fix without using pixelDensity() ; in earlier versions of p5 ?

  7. ChronSyn Avatar

    I absolutely love these videos on p5.js. I've been interested in creative web projects for as long as I can remember, and watching a few of these videos has given me some fantastic ideas!

    No intro and actually seeing someone working these things out in real time is a great way of presenting on subjects like this. Keep doing what you're doing!

  8. Zap Z  YT Avatar

    what editor are you using and what version? because i have p5editor and i cant open the html part.

  9. Scremsi Avatar

    I am frustrated, pixelDensity just didn't work for me 🙁 any advice?

  10. chihabgoku Avatar

    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!

  11. Brutal Tooth Avatar

    I've made a pixel array using your tuition, being new to P5 I came up with this: http://codepen.io/brettmitchell/pen/RoZMLe
    I hope you like it, it's eventually going to be for a slideshow to roll through a series of images.
    Thanks for the great tutorials.

  12. Romain Dewaele Avatar

    Is there a way to draw an image from a pixel array outside the canvas? In a html img element?
    I wrote a function that create pixel arrays, and I would like the user to be able to download the images

  13. Andy Dolphin Avatar

    Is this faster than using point(x,y) if you're only setting the pixel colour?

  14. BlackTrusty Avatar

    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 ?

  15. argmoth Avatar

    tried this out and it wouldn't work. getting an unhandled exception about putImageData not being good to go. anyine else having this issue. p5js ver. 0.5.2; latest. chrome and firefox…

  16. ich3aa wadjinny Avatar

    the first time you sid you have 30 px and the second time you side you have 60px

  17. I am Clint Avatar

    simple and easy to understand.

  18. ComputDroid Developer Avatar

    can i set image in pixel

    i mean to ask can we set another image of pixel in other image

  19. Thomas Waller Avatar

    Does this work in ProcessingJava?

  20. Nuts Bomārs Avatar

    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!

  21. Giorgio Martini Avatar

    Awesome dan! hey do you have a video on vectors with p5js ? thx!

  22. Kurt Strong Avatar

    Is there a general preference for the first loop to effect 'x' or 'y' in nested loops?

  23. pephito12 Avatar

    Good job ,congratulations
    you are the great master en p5.js

Leave a Reply

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