JavaScript Pixel Manipulation for Beginners

[@Frankslaboratory]

How was your week. This is another of my attempts to get you excited about coding with JavaScript. Have fun. Click the LIKE please :)

[@ShayanBinShad]

Thank you so much for this tutorial!

[@Frankslaboratory]

Thanks Will, happy to hear that :D

[@Frankslaboratory]

Hi Shadow, glad to know you like it :D I have more free time on my hands these days

[@CoolScratcher]

Trying this soon :D

[@MuSic-kl3pd]

Thank you so much for this tutorial.

I only wanted to know how to identify a pixel but then I found this quite interesting and of really great quality

[@yeshayavarghese350]

I just found out about your channel and I wish I would have found it sooner! I didn't know a lot of stuff pure js can do. Amazing advanced tutorials, great job!

[@Frankslaboratory]

Hi Yeshaya, I'm happy you found me :) Pure JS can do a lot, I hope to explore much more in future videos. Thank you for taking the time to leave a comment.

[@javisleon4179]

This is the stuff I need! Been getting into JavaScript and it's these type of projects that make me continue to dive in and see what the possibilities are! Thanks Frank.

[@Frankslaboratory]

Really? Thank you for letting me know Javis, I'm happy that you found this inspiring in some way :)

[@nazirkhan5467]

the speed and the clarity with which you teach is super Crystal clear

[@Frankslaboratory]

Hi Nazir, I'm happy to hear a feedback like this, thank you!

[@Aaackermann]

Great video and wonderfull approach to break down the topic and teach it! Thank you so much!

[@aidanbenbow6682]

It is a good tip about the image load event listener. I spent all day trying to draw an image without this!

[@Frankslaboratory]

Yea it's very important and it is a source of problems ha

[@francisnyasinga9064]

dude you are purely amazing..

[@ShayanBinShad]

To be honest, this video deserves 1M likes! This is great!!! O-O

[@Frankslaboratory]

Thank you Shadow, you always support my content :)

[@AhmedElrhazi]

What series a beginner like me should follow? I am new to CSS, HTML5 and JavaScript. Thanks a lot for your creative efforts!

[@tomask2138]

beautiful tutorial, thank you, it's really clear. I 'm already waiting for the next one ( :

[@Frankslaboratory]

Happy to hear this feedback, thank you Tomas

[@henrmota]

I have 10 years of experience I even do things with shaders but you earned a new subscriber.

[@Frankslaboratory]

Hi Henrique. Thank you for taking the time to comment, nice to meet you. You are much more experienced than me, I hope to get to that level of programming experience one day. What kind of projects do you build with shaders?

[@henrmota]

@@Frankslaboratory hehe the important thing is to have fun. Great tutorials man, even for experienced developers.

[@Frankslaboratory]

Thank you Henrique, very kind. It means a lot to get this kind of feedback from an experienced dev. If you ever see something in my code that can be simplified or better explained please let me know. I am still learning how to make my videos more accessible for beginner programmers.

[@stamrepo]

Wow! Impressive. Very cool, man.

[@markpx]

Excellent instruction! You read my mind about what I wanted to figure out.

[@Frankslaboratory]

I think starting from the basic concept is a good way to get people on board because sometimes I get complains that the effects are too complex. Thanks for nice feedback Mark

[@EstebanArias_]

Thank you very much for this tutorial!! ♥

[@Frankslaboratory]

Hi Esteban, I'm here to help :)

[@BibleTechNutt]

I am fascinated by how much beauty can be made by using Canvas and need to strengthen my portfolio so I am doing it by following these tutorials, I started to go with Pixel-rain tutorial of yours but had some trouble with the PNG tool so I came to something a bit more beginner. I want to get better at javaScript and get a job but have trouble getting motivated but HTML5 Canvas has kind of changed that so I am looking forward to learning with you!!

[@Frankslaboratory]

It can be hard to focus on studies during difficult times like this. That's why it's good to pick up fun project like particles or gamedev once in a while. Hopefully it will keep you motivated. Good luck with your coding Jason. :)

[@BibleTechNutt]

@@Frankslaboratory Thanks very much! I am building out a client's site from scratch right now!. Thanks for the encouragement! I'll need another Canvas break after this LOL

[@Frankslaboratory]

@@BibleTechNutt I love building sites from scratch, can be a lot of work especially when you get to mobile/table styles etc. Good luck!

[@BibleTechNutt]

@@Frankslaboratory Every new layout I learn how to create is one more I can use for the next customer! I started getting excited the first time someone put it to me like that. I like it WAY better than trying to build with any website builder. As someone who learned to code HTML and CSS before EVER touching a site builder, they confuse me still lol.

[@Frankslaboratory]

@@BibleTechNutt I have never used site builder, not sure how they work. It gives you great work experience building from scratch, eventually you could be the person building site builders haha. I'm sure these tools are great when you want something quick, and they are improving them all the time, but building from scratch and understanding how it works will always win.

[@abdullahkhan-pr1ip]

I didn't skip any ads in your video. you deserve. it

[@jeremymelix1935]

Awesome tutorial Frank. I Knew about pixel manipulation but had no idea how to do it, and it wasn't something I was looking into. I am self taught and started trying to learn everything I could about the JavaScript language after learning the basics of several languages. I am more recently learning game development. I had no drive to mess with pixel manipulation until I saw the remarkable programs you built with it. Everything in coding involves a learning curve or memorization of built-in methods when learning a API , framework, or library. I didn't know some of the canvas api's built-in methods, such as getImageData(). Looking forward to watching more videos on pixel manipulation. Your an exceptional developer and this channel is simply phenomenal. Thank you so much, I am learning a lot.

[@Frankslaboratory]

Hi Jeremy, it's always nice to see a comment from you. Thank you for being supportive. I'm learning about new things that can be done as well, and trying to combine them in interesting ways. I discovered a couple of very cool tricks I want to make tutorials on, just need to come up with a good project. Are you saying that after trying many languages you settled on JavaScript or are you still undecided?

[@jeremymelix1935]

Hi Frank, Oh no I don't see myself using any other front end development language anytime soon Plus I have already invested to much time into JavaScript. Its a beautiful expressive versatile language. I learned the basics of Java and a few others. There is so much to learn in JavaScript alone that I don't think I will be looking at becoming an expert in any other language anytime soon. But I do need to eventually pick one or two server side languages. I was thinking node.js since its just JavaScript and PHP or Python. I need to revisit SQL as well. Eventually, I would like to be able to combine front end , server side, and database languages to build an online game . For now, my focus is just to get a HTML5 mobile game developed that's download worthy. A game that only needs session or local storage to store a high score and game state. I am getting close but not quite there. Although I understand the language very well using it to build complex applications is very different. Its like saying that because one can write then they must be able to write a great book or best seller. I did take your game and do quite a bit with it. Built a separate small abstract engine, One-off canvas object, and moved some methods to where they were better suited for what I was doing. I added new methods. I added a loadImage, loadAssets, update, and loadHandler methods to a Game object. I added a health bar that looses health when bubbles hit the top of canvas and changes color from green to red when it hits 50% . The bar disappears when there is no more player health , the game state freezes, and a Game over message is displayed. I also have a state for winning when the score gets to a certain point. I was going to post this code, but I felt it was too long. Like this message. I was thinking of doing a video for this code while promoting your page, but I don't want to do you tube videos right now. I have to find a quite place, get into the mind set, and it takes time. Anyhow your tutorials are awesome and you explain stuff with such clarity and charisma. You could teach courses on Udemy if you don't already. Your tutorials are better than most the videos I watch on Udemy.

[@DrSurfman]

This is awesome!! Thank-you!!

[@joakimwretlind4016]

Hi Frank! Yes, you can put viruses in images. Thanks for great tutorials!

[@Frankslaboratory]

That's what I was afraid of :D No idea how virus in image would work, but it's good to be aware of it.

[@zeroOeffect]

you flipping rule! ty so much, I love it.

[@sagar-tt4ub]

I really like the way you explain things.

[@Frankslaboratory]

Hi Sagar, how are you. I try to explain things properly in videos I mark 'for beginners' like this one. I'm glad you noticed :)

[@markpx]

Please post part 2 of this as soon as you can!

[@Frankslaboratory]

Hi Mark. I want to make sure its the best possible quality. Will release it soon :)

[@cirusMEDIA]

Video begins at 2:56

[@albedobond3827]

Thank you for your all tutorials!!

[@Frankslaboratory]

Thank you for letting me know you found some value here. I will try to make more content like this

[@uddiptalukdar]

Great teaching. Subscribed.

[@tegaogheneovo5881]

King King , I got you thank you very much, subscribed 😎

[@robertkabuusu1084]

wonderful tutorial. great work. Makes things easy to understand.😄

[@akashchokshi2283]

Hello, first of all, your videos are fabulous. Especially, when you explain every line of code. Can you please create a tutorial to code an image editor with features like zoom and pan the images drawn on the canvas?

[@Frankslaboratory]

Akash! thank you so much for a lovely comment. Yes I like this idea, putting it on my to do list. Thank you for letting me know what content you are looking for

[@bargeosch6427]

Very nice. Your videos make coding fun and interesting. Thanks for making these.

[@Frankslaboratory]

You have been going through my library, thank you for leaving nice feedback like this ❤

[@watermelonice4487]

Please make a video on how to make mobile controls for javascript game.. like gba controls.. moving forward,backward,left,right

[@Frankslaboratory]

Hi Doraemon, that's a great idea, I did episode where you can control game character with keyboard arrows, I will do more of that but also maybe clickable controls on screen would be interesting to try

[@sojuthomas7727]

Amazing,great tutorial,Thank you so much

[@Frankslaboratory]

Hi, glad you liked it, I am working on more effects using this technique, ASCII art etc

[@sonodrome]

You're the best Frank! Thanks for all these amazing tutorials, they are super informative and fun :)

[@sonodrome]

If you get the chance, check out my latest HTML/JS experiment here: sonodrome.co.uk/permute

[@Frankslaboratory]

This is so cool, I love coding experiments like this. Did you use vanilla JS or is there a good library for effects like this

[@sonodrome]

@@Frankslaboratory It's all vanilla, just using HTML5, Canvas and webAudio API

[@Frankslaboratory]

@@sonodrome Love it, I will try to create some sound art effect with my next particle systems video, let's see what comes out of it :D

[@sonodrome]

@@Frankslaboratory That would be awesome! It's really cool being able to synchronise and create relationships between audio and visual elements, there's so much potential and I look forward to seeing more of it on the web.

[@miteshchoudhary8499]

Eagerly waiting for part 2

[@Frankslaboratory]

Hi Mitesh, part 2 is in the works :)

[@deepakbhargav7434]

Thank you for the series

[@Frankslaboratory]

Glad you like it Deepak :)

[@yashsharma6112]

Great teaching skills ❤️

[@Frankslaboratory]

Thank you Yash ❤️

[@sachin_6335]

Love your tutorials. learned a lot from these tutorials. Keep making, thanks! Can you please make a tutorial on falling confetti with vanila js.

[@Frankslaboratory]

Sachin! Thank you so much you are very kind. I will make some confetti effects, good idea

[@joakimwretlind4016]

If you use vsCode and get the message "Tokenization is skipped for long lines for performance reasons. The length of a long line can be configured via `editor.maxTokenizationLineLength`." 1. Go to Settings (cogwheel bottom left -> settings) 2. Type 'max' in the search bar at the top 3. Two steps down you will find 'Editor: Max Tokenization Line Lenght' By default, this is set to 20'000. Add for example a 1 in front of this and you should be good to go :)

[@Frankslaboratory]

Hi Joakim, this is a great point, thank you for sharing your knowledge with us!!

[@scottonanski4173]

Hey, Frank. Why not set the body to "{ display: flex; }'", with {align-items: center;}, and {justify-content: center;} to center the canvas? Or is this just a personal preference?

[@Frankslaboratory]

Hi Scott, this is a great suggestion thank you. In my job I have to support old internet Explorer, so I guess it became a habit to avoid flexbox, because some of it's properties won't work in Internet Explorer. But for tutorials like this with experimental modern JavaScript code it doesn't really make sense for me not to use it. Thank you for a useful comment, I will try to remember that in the future :)

[@geloh1]

Had the Cross origin issue. I was able to get it working by starting Chrome with the --allow-file-access-from-files option

[@Frankslaboratory]

Hi Angelo, thank you for sharing, cross origin issues can be tricky to deal with

[@amirrezaranjbar2853]

Intro 10/10

[@Frankslaboratory]

Thank you :D

[@JM-de2gh]

OK, that was some pretty cool stuff -- thanks Frank! "What is it you like about creative coding?" @ 2:26 - I'm the first answer. Are you the third answer, Frank?

[@Frankslaboratory]

Hi Jon, how do you know me so well. For me it is the third one and also the first one. I make a lot of mistakes as well as any student and this is a good practice for me.

[@alishata8]

Actually Creative Coding was my first passion when I came to programming

[@Frankslaboratory]

Amazing. Glad to hear I'm not alone like that. You are talented I saw your work

[@alishata8]

This means a lot to me, thank I consider you as my inspiration and when I feel depressed I just take one of your courses to give me the portion of motivation I need@@Frankslaboratory

[@nicholarucitadhamma6000]

Is it just me who's experiencing this? I can't set the scannedImage.data = scannedData. The console said that scannedImage.data is a read only property meaning that I can't set the value of that property

[@jeteloriaga]

sorry, frank, but sometimes i get so engrossed in your tutorials from beginning to end that i forget to hit like XD

[@Frankslaboratory]

Hi Jet, you are forgiven hahaha. Thank you for watching my videos, hope to see some of your creative projects in the future :)

[@shaikhsanuar5339]

Wonderful

[@marcinkalmar9964]

great video

[@0Xmo]

hi sir, hope u doing will i have a question howcan i get all pixels for same color in image and then remove this color or change it to white

[@nazirkhan5467]

can you please increase the font size so that people viewing on mobile finds it easier to follow your video

[@Frankslaboratory]

Hi Nazir, the video I just released still has small font size, but I will keep that in mind and increase it for the next ones

[@gopinathkrm58]

Hair glittering animation at 1:45 is so nice

[@Frankslaboratory]

Hi Gopinath. I was playing with some variations. This one turned out quite nice. Thank you

[@gopinathkrm58]

@@Frankslaboratory do u have that

[@Frankslaboratory]

@@gopinathkrm58 what do you mean

[@gopinathkrm58]

@@Frankslaboratory I mean which video are u doing that kind of animation

[@Frankslaboratory]

Oh. I havent released tutorial for that. Its variation on particle rain effect I show off in this video a lot. The base effect will be the second part of this video when I finish it

[@0xdeadbeef131]

Hey great video! Question. I want to store imageData rgb array and use it after it is loaded OUTSIDE load function. So i came up with this code : (inside constructor of class named "BitmapBase64") this.width = 0; this.height = 0; const sprite = new Image(); sprite.src = data; sprite.addEventListener('load',function(){ this.width = sprite.width; this.height = sprite.height; m_context.drawImage(sprite,0,0,sprite.width,sprite.height); const scannedImage = m_context.getImageData(0,0,sprite.width,sprite.height); this.pixels = scannedImage; console.log(this.pixels); }); I tried to store data to pixels but it is undefined when i try to access it. let sprite = new Bitmap('**put base64 text here**); console.log(sprite.pixels); //undefined what am i doing wrong?>?

[@olygood]

i love tuto

[@Frankslaboratory]

Thanks Oly, nice to meet you

[@tarun7617]

More pixel manipulation !!!! Awesome 👍 !! This time it's also on a big scale , cool !! And I have finally done with my game , I just ended up adding weird ai I.e. which player car hit the other car it bump toward other side and have it's speed decreased ..... I need to study a ton more , to start making some decent games .... It's gonna sometime

[@Frankslaboratory]

Its good to have a project like that, with your game. It motivates you to learn new coding tricks. Some game mechanics can be tricky to implement if you try to figure it out yourself. Most has already been invented so sometimes its good to look at other peoples code. Even if its in a different programming language. The logic will work the same

[@tarun7617]

@@Frankslaboratory I'll love to try new things , even if it gives weird result , I like to do crazy stuff

[@Frankslaboratory]

Me tooo :D Weird stuff is the best :D

[@tarun7617]

@@Frankslaboratory HAHAHAHA , SO true 😂😝

[@marleenloohuis2111]

Solved it by viewing the site in Xammp localhost

[@Frankslaboratory]

Hi Marleen, awesome. glad you found it!

[@marleenloohuis2111]

Thanks for making this awesome videos. I was looking for an intro to JavaScript gamedevelopment. I liked the first video so much, I want to see the whole playlist.

[@eddujoel2514]

Gracias, te amo.

[@Frankslaboratory]

🙏🙏❤

[@albedobond3827]

Could you make a video about fluid simulation with Navier-Stokes equation???! Sir

[@Frankslaboratory]

Like this? www.outpan.com/app/44bdd9869c/interactive-fluid-simulation I would love to make this one yea

[@albedobond3827]

@@Frankslaboratory Yess!!! Wow that app is fantastic o.O

[@Frankslaboratory]

@@albedobond3827 Yes, the code seems complex, will try to break it down to see if it can be simplified. I'm not familiar with this technique yet

[@albedobond3827]

@@Frankslaboratory You should!! Thank your for your kind answering😍😍👍

[@RbyLearning]

You are Amzing

[@Frankslaboratory]

Thank you :)

[@mohsol86]

thanks!

[@Frankslaboratory]

You are welcome Mohammad :)

[@sapolio1538]

Isn't there a chance to get data right from the image, skipping the step of drawing it within the canvas element?

[@Frankslaboratory]

Hi Aleksandr. Probably there is a way to do that, code can do anything, but not with canvas API because getImageData will get pixel information from canvas element so the image needs to be drawn on canvas for its pixels to be analysed.

[@giancarloandrebravoabanto7091]

converting base64 is like putting all the image weight into the code. even is more heavy. is there another solution?

[@Frankslaboratory]

Hi, I don't think it makes the code heavier, since the image code needs to be loaded before any JavaScript that depends on that image can run. It doesn't make much difference if that image code is in .js file as base64 data string or if it's read directly from .png file. It has no effect on performance. If you want to use this technique with image files, if you point src attribute to that image it will work, if the image and code file sit on the same server. It will not work locally on an offline machine, since that will trigger CORS.

[@ale711]

Ty

[@Frankslaboratory]

I'm here to help

[@FFergussond]

Frank! I love your videos, Thank u ! I don't know why I get this error: Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data. at Image. My JS CODE: const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); canvas.width = 425; canvas.height = 600; const image1 = new Image(); image1.src = './Dua.png'; image1.addEventListener('load', function(){ ctx.drawImage(image1, 0, 0, canvas.width, canvas.height); const scannedImage = ctx.getImageData(0, 0, canvas.width, canvas.height); console.log(scannedImage) })

[@Frankslaboratory]

Hi. I address this issue if you watch 5 more minutes into the video. Let me know how it goes:)

[@FFergussond]

MAN FUCK HAHAHAHAHA When I got this error, I paused the video and I start a big research to fix it, when I fix the problem, I start the video again, and in the next seconds you explain the error... hahahaha, I passed 3 hours searching how fix this and you explain to me it in 3 minutes, your videos are amazing

[@codingawarenes]

Where is the part 2 plZ anyone can give me link?

[@yeshayavarghese350]

Is there a way to get the pixel data in hex code or would you have to convert rgba to hex using js?

[@Frankslaboratory]

Hi Yeshaya, the pixel data array contains 0-255 values so you would have to convert it, the algorithm to convert rgba to hex is quite simple css-tricks.com/converting-color-spaces-in-javascript/

[@yeshayavarghese350]

@@Frankslaboratory Thank you so much! I tried making an image filter tool with this tutorial. It would be awesome if you could check it out in your free time and give me feedback. codepen.io/steelshot/pen/LYZJmGR

[@Frankslaboratory]

Wow you made it into interactive colour shift project with colour picker and everything. I wish I had this idea before making this tutorial, haha. Would have built something like that instead. I followed you on Codepen. This is actually a nice project for coding portfolio as well.

[@yeshayavarghese350]

@@Frankslaboratory wow! Thank you😄

[@marleenloohuis2111]

What to do with error: Uncaught DOMException :The operation is insecure? When console logging scannedImage.

[@Frankslaboratory]

Hi Marleen, did you manage to solve it? I assume you are doing something different than me in the video, most likely running it though server or something right?

[@Андреич-с4н]

At 8:13 I run into an error: Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data. at Image. (file:///F:/JS_test/Pixel_Manipulation/script.js:12:27)

[@Frankslaboratory]

If you keep watching I explain how to fix it in the next couple of minutes. Sorry I structured the video in a way that this error happens at first

[@Андреич-с4н]

Thanks, Frank. This text string looks ugly but is seems to be a powerful tool to control every single pixel. I gues this allows to perform some computer vision tricks like pattern recognition?

[@pluscday2]

you have adjusted 2 loops into 1 loop which is much better now.

[@Frankslaboratory]

Hi Alex, 1 loop is always better yes, I try to do it when possible, unless doing that requires too much explanation and the tutorial is aimed for beginners. Sometimes I choose to be less optimal if it means the video is easier to understand

[@aaendi6661]

I tried to make a PNG file in MSPaint, but it keeps giving a "cross origin" error when I try to get data.

[@Frankslaboratory]

You get cross origin errors when you use an image file locally on your computer combined with GetImageData method. It's expected. This is an old video, I'm sure I explain and cover how to deal with that in the video itself.

[@Андреич-с4н]

The line 14: const scannedData=scannedImage.data; and the line 18: scannedData[i]=averageColorValue; should produce an error - an attempt to modify a constant. But they work. What am I getting wrong?

[@Frankslaboratory]

Hi, this will not produce an error since you are no reassigning const variable to a completely different value, you are just modifying values within that same array. Assigning const variable doesn't freeze array completely. Const cannot be reassigned but can be modified.

[@Андреич-с4н]

@@Frankslaboratory I see. Thank you

[@EDMVibes24]

@@Frankslaboratory thanks I had the same doubt

[@startail007]

超強

[@Frankslaboratory]

Thank you, although I can't really read traditional Chinese :)

[@hou-yawang516]

@@Frankslaboratory it means "that's so impressive!" :D

[@BlOups_13]

I have à problem at 7:48 it say Uncaught DOMExeption: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': the canvas has been tainted by cross-origin data I dont understand ... I am french that not help me 😂

[@Frankslaboratory]

I address that problem if you keep watching the video

[@ultimatechallenge540]

Can you make tetris game using circle ball If color of three of 3 ball is same in horizontal or vertical the ball will disappear Anyone ?????

[@EDMVibes24]

Hai Ultimate Challange Am a Web Game Developer

[@ultimatechallenge540]

@@EDMVibes24 Just try this and let me know

[@sadamhussain9176]

At last you like aliens unique tutorial

[@Frankslaboratory]

HI Sadam, happy you like the tutorial, I am trying to bring more creative coding on KZbin

[@rdawo6408]

🥹😍

[@devHarshit]

the thumbnail-

[@Frankslaboratory]

What's wrong with it 😅

[@harknesswolf3526]

Your videos are wonderful. I figured out your particle trick, and how to set up a GitHub repo if you want to take a look: github.com/Bad-Wolf-42/particle-painting I don't know if it's okay to post links to my own stuff in comments. If not, then I apologize. I had a lot of fun making this. Thank you.

[@Frankslaboratory]

Hi Wolf. Thank you for your feedback. Impressive. It seems you came up with a different solution to the same problem. You are good, this is not easy to do. Thank you for sharing. You can post anything in comments, sometimes KZbin puts it in spam folder because it contains a link but I check it once in a while and approve the comments. I think the solution you came up with is actually better than mine :D

[@MuSic-kl3pd]

lol

[@Frankslaboratory]

😀