10.1: Intro to Images - Processing Tutorial

Book: Learning Processing A Beginner's Guide to Programming, Images,Animation, and Interaction
Chapter: 15
Official book website: learningprocess...
Twitter: / shiffman
This video covers the basics of using the PImage class in Processing.
This video needs links to source code examples!
This video needs links to other things mentioned!
Please write in the comments what is missing and what would be helpful!
Help us caption & translate this video!
amara.org/v/Qbwh/
📄 Code of Conduct: github.com/Cod...

[@oliviobiodiversidade5659]

Last but not least, Thank you, for your incredibely work. I can only imagine how much time you devoted to organize all of this, and then put on youtube, for FREE. It's being really useful for me, as I said, I'm a biologist, I work with genetics. And these lessons are really helping me, I've changed the way I view how to present data in a more interesting way. And I'm defenitely going to use this skills to make some educational videos about natural selection, genetic drift, etc, etc.

[@Luigi-rq4xg]

holy, you are the author of 'the nature of code'???!!! this is amazing!

[@SeanDaPaulSeh]

if you mute it, sometimes he looks like he's rapping

[@thumbwit]

[7:14] "Stretch it, skew it, shrink it, grow it" Someone needs to make this happen.

[@Smomid]

Yeah hes got the hand gestures down

[@conorcorrigan185]

@@thumbwit kzbin.info/www/bejne/emmuamOejZmDqKc

[@thumbwit]

@@conorcorrigan185 that's actually exactly what I was thinking when I saw this lol I had never seen the video for it though its pretty creepy haha

[@mindmissiontutoringservice7797]

OMG You are so RIGHT!

[@letskilliceagebaby291]

yo i have a unit project due 3 days ago and i hardly started bc my teacher makes everything so complicated but this channel is a godsend omg thank you so so so much gonna binge watch and pull an all nighter and hustle thanks again

[@chperrone]

you can also drag an image onto the processing sketch and it will create data folder and add that img

[@TheCodingTrain]

Great tip!

[@jonaxkariuki]

thanks...……………………….

[@TheStormWorm]

Life saver! Thank you!

[@curiousboy7015]

thanks bro you are a great man

[@S2AnnyS2]

omg, I was searching randomly for vid to help me study last minute for a test, and your video is just so funny! xD I was very impressed by the guess of the green eye as well haha Can't wait to watch the other videos, you make them very interesting and easy to understand, thanks! :D

[@bilelbelghith6924]

y ar a blessing to humanity. i learned too much java and will continue following y

[@txnmyn6538]

Thanks a lot for great intro!! But I receive error when I type all the syntax for image, with ‘The file “cat.jpg” is missing or inaccessible, make sure the URL is valid or that the file has been added to your sketch and is readable.” But I don’ t see any sketch folder in my laptop.. should I make one by myself?

[@elenakusevska6266]

I think what you're doing is great :) I'm a computational chemist/computational scientist. I think all this stuff is fascinating and it's nice to make this information available to everyone :)

[@adri2350]

the better teacher for all videos

[@cvadodaria07]

I like your enthu and happyness! Keep it up. I know this is very old video still hv to share my feel. Of course, content is good - not only this but other I have watched.

[@kchaitanya2683]

hey daniel , i'm a newbie and i have got some doubts hope u clear these 1. which programming language are u using? 2.if C or C++ what header files did u include? 3. are SETUP AND DRAW pre-defined functions? hoping for u r replyy

[@syamahmad1229]

this is processing based on java.

[@iampetah5409]

Daaamn it lets you do so many cool things.. You probably won't see this, byt thanks for these videos man! +TheCodingTrain

[@MundoYeko]

You have 100% my attention . I understand you completely . I wish my teacher could explain like you do.

[@loadingninjavods4648]

Everytime i am in a class with my teacher i'm thinking about starting a twitch comedy stream... everytime I take the code of my teacher and type it in just like he explained i'm getting multiple errors per line... record was 27 Errors in just 3 lines of code

[@waterybarfilms2658]

Makes your videos even better that you're always giggling lmao

[@arckemnight6671]

Very good explanation! Can you use this stuff to capture like a video game health bar?? And process it

[@farkhodtursunbaev2121]

null pointer exception. The file "hog.jpg" is missing or inaccessible, make sure the URL is valid or that the file has been added to your sketch and is readable. whyyyyy????

[@elevenz367]

is it in the right directory? is it a jpg? hopefully you've solved it by now

[@mindaugasdudenas624]

make sure you name the file name.jpg , not only name and the file type jpg.

[@iampetah5409]

Post your code somewhere online and link it as a response here. It means that you did something like int[] vec; but didnt actually create it with vec = new int[SIZE], or something like that. There are other causes too, so we need your full code.

[@杨萌萌-n6t]

maybe you add the photo in the wrong fold, under the resource fold, not with it

[@braincloset6144]

Solved (for me). I had the same problem, and the issue was with naming. My image was "image.png" because I put png in the name, but that made the name of the file "image.png.png", so try removing .jpg from the picture name (if it is there)

[@oliviobiodiversidade5659]

Hi Daniel, I'm following the course, non stop. Your explanation is really clear. I'm following the playlists that you've organized. Is the sequence ok? In this section, the chapter jumps from 9th to 15th. Thank you for your quick feedback.

[@maggieg8852]

+Olivio Biodiversidade Same question here! Thanks!

[@the_madd_hadda1577]

Yo man just want to say thanks for the help you are a good person.

[@YLprime]

These videos are so wonderful

[@oliviobiodiversidade5659]

I get some basics on khan academy. Did the course cover some things on how to work with maps? I would like to use a map (from google maps) as a baackground to do some interesting stuff.

[@gerimeni7323]

Hi, i want to make some nice image processing in any programming languish. i want to be able to tag faces and then recognize them, to detect object and shapes and trace them. can i do that in processing? do you have some recommendation for me? i heard of OPEN CV library, is it good? thanks you are the best man i saw all of your videos

[@sifsif2725]

Do you do a video for image processing with Fourier Transform?

[@Liberty23232]

I really really really like your videos!!! They are very clear and it is well done explained!!!

[@TheCodingTrain]

Thank you!

[@chaimadrai4905]

can you do a video about lbp and processing

[@zemash9290]

Hi there. I am currently thinking about my fyp. And I talked to my supervisor if we can process an image to such an extent that we can identify the waste material or litter in the image. And he said it would be really difficult for you. He is PhD in this area. And I was just wanted to ask you if he is right. Cause I really wanna do that project.

[@davemozart8227]

hi, like all your vid, can I ask if you have any tutorial that I can use in making my own map. it's an map with real time coordinates

[@jmmfresno]

Man, you rules!! thx for everything!

[@denismendez6221]

and how to load images from the web (without copy-paste)?

[@ozonwh4464]

hello, thx for ur great explaination... i wanna ask, what's IDE you use ?

[@loadingninjavods4648]

processing.org/download/

[@oseiraynald243]

How can you Scale an image up or down in size, keeping its proportions, so it is at least as big as the other_image specified i.e. Image.setSameSize(other Image) I really need help with that Thank You

[@achibaba]

man you are awesome!

[@MegaSven3000]

I'm still just trying to set a video as my background, with code running over it, but having NO luck!

[@SokarEntertainment]

I might be completely missing something here, but how do you use a void draw? I assume this is a library of some sort. Could you clarify?

[@TheCodingTrain]

This video uses Processing (which is built on top of the Java programming language). For more info, visit processing.org and also this video might help kzbin.info/www/bejne/d57PcpyBqM6sZtE.

[@ElboxD]

When you want to only print something to the screen, you can use the void function. But, if you want to return a value, then you can't use the void function.

[@kaptkrutch]

I had to pause the video for a second to setup my drawing and listen to The Breeders.

[@leowang4692]

Hi, I have a question with my Processing 3. How can I make the window's size fit with the image loaded in?

[@thuro431]

I think you have to change the size of the image, not the window

[@Frank-xc2ib]

Before I process those images, I have seen those jitterings on my screen.

[@sherkhan_5050]

What programming language are we using here?

[@mohamedafridi8231]

Lmao

[@Ambigious]

Sher Khan a easy vertion of java

[@yurinagel2270]

Java, processing

[@LFUK116]

link for Microsoft needed for additional app for pseudocode and flowchart for Mac

[@sephalopod]

I can't figure out where the Pimage thing comes from, is it an external library that he imported or something that he created earlier and it's only going to show us later in the course?

[@TheCodingTrain]

It's from processing.org/!

[@storyteller7178]

Can you do a video about OCR?

[@muhammadridhwan7315]

have you create how to put multiple images including ost/background music? need help on that

[@ajinkyakarande675]

Best,Best and Best

[@Ainz586]

it says The file "" is missing or inaccessible what can I do ?

[@wilhelm.reeves]

Dan for President

[@akashkanteti6964]

how can I load an image in my program are there tutorials as you using PImage where canI find those basics

[@xxx-pliskin-sniper-xxx8538]

Do you have another channel? I feel like I’ve seen you somewhere before 😂, thanks for this, this was so helpful.

[@tommicava9675]

Hi, I have a question about images. I did as you’ve shown in the video, but in the end processing doesn’t load my images. I think (as far as I can tell) it’s because they are to heavy, infact if I load small images they actually appear on the screen.. Is there anyone knowing a way to preload Images in Processing before the code, so they can actually appear on my screen? Thanks in advance, interesting video! Hope someone could help me

[@replikat4314]

"Array index out of range: 1" what does that mean

[@johndeshaies7548]

What program is used to process the code for these examples?

[@maishazarinanan5028]

java

[@loadingninjavods4648]

processing.org/download/ Processing is a java-based environment, so the other one responding before me wasn't completely wrong

[@jasonahwoei4460]

Hi, I m programming newbie. Can i know what programming language r u using ? or it is a programming language?

[@pinguino55h40]

java

[@tekniyapa748]

On using PImage .. Error is coming .. unExpected Identifier.. using P5js editor.. Kindly help

[@ishakmalkic5414]

I did my own photo, now how to save it as normal jpg image and send to others or post on social media?

[@reshulw884]

In which tool you are performing these operations??

[@twitte0king]

i did exactly wht you did, but my processing new window is a small square that show only small portion of my image

[@TheCodingTrain]

Do you have the size() function? Is your image the same size as your window?

[@dennisreyes6793]

Is there a way to change the color or tint of an image on click?

[@marym7763]

Hi there, I have a project where I'dd like to add some small images (png), unfortunately after 3 images processing shows me: java.lang.NullPointerException and then : at processing.core.PGraphics.image(PGraphics.java:3792) . I then visited processing.org/reference/PGraphics.html , which also was good to know, but didn't help me out... Does anyone know how to add more images? As mentioned, the problem is not to add an image, but to add several ones.... thank you!

[@Dmiiimooo]

hi, i dont know if anybody will see this comment.. but I'm new ini Processing & java, I have a problem on exported app : I cant open the App (Code that has been exported) when there's an image/ loadImage on the code? I try to put the jpg/png on the same folder, still a no no.. please somebody GUIDE me :(

[@rohrho3669]

An error saying" Sketchbook folder no longer exists.... Processing will then stop talking about itself in third person." shows up.

[@eric9964]

Anyone know why my image would show up mirrored? I replicated his code line for line. Is there a way to mirror it again?

[@shirishu.deshpande4790]

i dont want the background of the img how to remove that?? btw ur ssly good and cute

[@alphaprokiller7438]

May I know what IDE or language you are using , sir? I am asking because you just made a variable of pimage and I do not know where does it come from ..

[@rostosgyumi]

He's using Processing

[@TheCodingTrain]

This video uses Processing (which is built on top of the Java programming language). For more info, visit processing.org and also this video might help kzbin.info/www/bejne/d57PcpyBqM6sZtE.

[@alphaprokiller7438]

He is not using processing ... He is using a java library

[@mellisa6541]

Im doing it n VSC using JavaScript and it doesn't work, why? void setup() { size (600,400); hog = loadImage ("hog.jpg"); } void draw() { background (0); image(hog,0,0, mouseX, mouseY); }

[@gertrudekyei6690]

What IDE are you using please

[@TheEduneliZ]

I feel like if we'd get a beer together we'd be best buds

[@astupiddog]

The Breeders

[@TheCodingTrain]

glad you noticed!

[@n3verstop632]

How to import an transparent image and keep it transparent?

[@zakariachahboun]

Hello World :D Thank You ;)

[@itsagon167]

Writing code on a board just makes it look complex and messy thats why i skip straight to the part where he writes in processing

[@ai_zj]

Great! I made Ricardo Milos dance with my mouse cursor with light effects using tints and the mouse press function.

[@visionvlogs3056]

I am begging you to share your code

[@claudiofeldman]

thanks !!

[@garimasingh7544]

I am not able to run this code,may be bcs you are doing in mac and me in windows 8

[@mohamedfathi9024]

where i can find Pimage class ?

[@sreeshakv5405]

Programming language is java rite???

[@puweiwang9608]

data file, movie file, sound file (oh, wait a second, Seinfeld? what my brain😂)

[@aamnam.4316]

Can you check, please where I want wrong... I'm suppose to be making a tennis points ..and its not working PImage Tennis Court ;// image code for Tennis Court photo PImage Tennis Icon;// image code for the background logo void setup(){ size(800,600);// Canvas size background(21,181,235);// Blue Background surface.setResizable(true); } void draw(){ loadImage ("tennis court.jpg");// code to load Tennis Court image image ("tennis court,0,150, 800,600");// code to load Tennis Court image loadImage ("1236909-Black-And-White-Tennis-Icon.jpg");// code to load background logo image (TennisIcon,-30,0, 830,150);// code to load background logo image String Team1Name = "Aligators"; String Team2Name = "Dragonflies"; String Team3Name = "Tigerous"; String Team4Name = "Strickers"; int Team1Wins; Team1Wins = 15; int Team1Losses; Team1Losses= 4; int Team2Wins; Team2Wins = 13; int Team2Losses; Team2Losses= 6; int Team3Wins; Team3Wins = 10; int Team3Losses; Team3Losses= 9; int Team4Wins; Team4Wins = 8; int Team4Losses; Team4Losses= 11; int Team1Points = (Team1Wins * 3); int Team2Points = (Team2Wins * 3); int Team3Points = (Team3Wins * 3); int Team4Points = (Team4Wins * 3); fill(#F0F0F0); textSize(15); rect(10,200,180,300); fill(#000000); text("Team" ,30, 220); text(Team1Name, 30, 280); text(Team2Name, 30, 340); text(Team3Name, 30, 400); text(Team4Name, 30, 460); //text(Team1Points, 30, 500); fill(255); rect(220,200,120,300); fill(0); text("Wins" ,265, 220); text(Team1Wins, 270, 280); text(Team2Wins, 270, 340); text(Team3Wins, 270, 400); text(Team4Wins, 270, 460); fill(255); rect(340,200,120,300); fill(0); text("losses", 380, 220); text(Team1Losses, 395, 280); text(Team2Losses, 395, 340); text(Team3Losses, 395, 400); text(Team4Losses, 392, 460); fill(255); rect(460,200,120,300); fill(0); text("Points" , 500, 220); text(Team1Points, 520, 280); text(Team2Points, 520, 340); text(Team3Points, 520, 400); text(Team4Points, 520, 460); fill(255); rect(10,190,570,30); rect(190, 220, 30, 280); fill(0); text("Standings",30,210 ); text("1", 200, 280); text("2", 200, 340); text("3", 200, 400); text("4", 200, 460); text("Wins" ,265, 240); text("Losses" ,380, 240); text("Points" ,510, 240); }

[@TheCodingTrain]

+Amina Shahbaz you've got several syntax errors. Variable names cannot have spaces in them for example. You also will want to call loadImage() in setup() rather than draw(). forum.processing.org is generally best for pasting code examples and getting help. Good luck!

[@truesheltopusik1140]

What language is this for btw?

[@shubhamtiwari7704]

which software you are using

[@daniyalali9048]

processing

[@KasanovOFFICIAL]

Are you stupid?

[@aryanhasanzadeh]

is that a python?

[@aparnapallod7991]

do these codeswwork on p5 web editor?

[@TheCodingTrain]

Yes! The syntax is a little different. If you want to hop in the discord we can help there! discord.gg/hPuGy2g

[@fsociety3366]

It says file is missing

[@hugodiderot8180]

size is not working

[@Lukeade815]

Why the hell is this video interlaced

[@supermariologin1]

if you mute him, the video becomes cooler

[@solarredeclipse8857]

did not work

[@Rodrigo-ux6mr]

4:13 as you want ;)

[@Krazy0]

Into blueeeeoee 11:52

[@SouthernHadoken]

I don't think this is Java. anybody know?

[@TheCodingTrain]

It is Java! But in Processing (which is built on top of Java with a few simplifications) For more see: processing.org and kzbin.info/www/bejne/d57PcpyBqM6sZtE

[@robertidonotsharemyfullnam496]

at the most 1080 ? lol

[@demberanez6901]

que cagada no sé inglés!

[@mike_vahemoubayed8099]

101th comment

[@shujathachettiar8247]

too much talking on a simple description

[@fabienetheve5630]

you can't writting !

[@bryvntz]

Hey! is there a way to overlay an image through a live video?

[@bayisanatea8201]

Pls tell me the software/tools u use with version.