Processing-tutorial: Image-Rasterizer (level: beginner & intermediate)
ฝัง
- เผยแพร่เมื่อ 28 ก.ย. 2024
- Level: Beginner & intermediate
In this tutorial i'll guide you through all the necessary steps to rasterize an image with Processing. Throughout the video you'll learn a wide range of fundamental principles of any programming-language.
Please let me know what you think! Any ideas for improvements or better explainations are very welcome.
I'll go through the following topics. You can use the list below to get extra-information, just in case you get stuck:
processing.org...
processing.org...
processing.org...
processing.org...
processing.org...
processing.org...
processing.org...
processing.org...
processing.org...
processing.org...
processing.org...
processing.org...
ENJOY!
Tim
Find the whole code on this page:
timrodenbroeke...
web: timrodenbroeke...
insta: / tim_rodenbroeker
#codingwithtim
this is amazing. I'm just starting out with processing and this is the best tutorial out there!!!!
Thanks, love to hear that!
The best video in hole TH-cam if you are interested in Processing. Congrats!
Thanks alot!
The best tutorial at processing by far Fully understandable :P
Hey there :-) Thanks a lot! Really appreciate it!
Thank you Tim for creating and sharing this! Very helpful and informative. Awesome job!
Thank you Bob!
I really enjoy your tutorials, very clear and calm and well explained - keep it up!
Thanks Lisa! Love to hear that!
Really good and complete tutorial. I wish I saw it when I first started and was panicking about for() loops.
Hypnotized with your voice!!!
Thanks ! Its my second processing attempt and it worked!
Tim, maybe you’ll make also a lesson about vectorialisation (with various styles) of a rasterized image and svg saving the resulted image.
This is by far the best tutorial of processing I have seen (nothing against sir Shiffman hahahahaha). I feel I understand a lot of concepts better now. Thank you so much Tim!
Thank you very much !!!
never seen a video with 900 likes and no dislikes! just found your stuff Tim but seems like you are a great teacher! brilliant tutorial
Thanks Daniel!!
Really love your tutorial, it's so clear and easy to understand
Thanks for the tutorial! Very clear to follow. Will you make a tutorial of that cool effect of the letters at 1.26?
nice tutorials ! I was trying to convert your example in p5js (I'm to old to convert myself to java). After struggling a bit, switching to colorMode(HSB, 255); was helpful :)
as a bilingual myself I find it very funny when your brain is jumping between two languages. It was very cute when you said dot in German, self-corrected and giggled :)
This is another level. Chapeau!!!!!!!!!!!!!!!!!
Thank you a lot Tim!
nice! very clear explained
Awesome!, thanks for sharing
someone know what to do, im getting this:
The file "venus" is missing or inaccessible, make sure the URL is valid or that the file has been added to your sketch and is readable.
NullPointerException
Stunning!!
Processing looks like the After Effects of the developers!!
One question, to start better p5js or processing? I know one is based on javascript and the other on java, so are they logically the same but syntactically different?
thank you for sharing this!!
thank you for the excellent tutorial! is it possible to add colour (example: dark values = red / light values = pink)?
Thanks for the tutorial Tim. I have a question. How could with this same exercise, start with an unmodified color image and then it will transform on hover over the x-axis
Great video.
I really enjoyed this thanks !!!
Thank you!
Great video but I would try to hide the microphone ... Looks weird in front of your face.
Side-note: isn't it a bit of a bad practice to give a variable the same name as a function? 'size' in this case. I mean, it works, obviously. But it might be confusing for beginners. I labeled mine always 'sz', for example.
@@Xeronimo74 Thanks Jerome! Yes i agree! Will keep that in mind for the next one.
@@Xeronimo74 Good point! I also agree to this.
is there is a way that i can set at a specific frame for the drawing to reach and return to its frame 1?
Nice tutorial!
How would you save this if you wanted a certain frame or part of this image?
Thank you !
Does anyone know what’s the problem with my file saving, after i finish the codes, i saved file and once i close it and open it again those codes are all disappeared.
Excelllent work. thank you very much. I amended this code to have an automatic counter instead of moving the mouse to get to the end result but I can't have a reverse effect (i.e. I start with large dots then reducing up to the final picture, but then I would like to revert back to start as a similar step by step and then loop it - a bit like a zoom in zoom out effect, except this is about showing the image and then deconstructing it). Any idea?
how do i change the color of the spheres randomly? pretty new to processing
fill(random(255),random(255),random(255));
which tune did you use in the beginning ?
You are good....
Could you plug in a gif or video file and it still works?
That's not so simple in Processing.
@@timrodenbroeker Yeah.. nothing ever really is with Processing is it
Idiots probably came here and disliked after you posted that it had no dislikes. 😅. Anyways. Great tutorial and literally deserved no dislikes.
haha, yep, that's the case. 3 dislikes now! :-D Thanks for your nice words!
Tried with another image and nothing work, Is there another video or manual to work with images? thanks
With the help of another exemple from your website i did it. your amazing, big thanks. But how can we create exact image without movement of the mouse?? thanks again
Awesome tutorial, how do you do this for Python? I've managed to convert it successfully all the way up to PImage. I'm hung up here and can't find a path through this spot.
try changing the mode or see to it that u started the project in java mode
How to make video in processing. There's no movie maker in the latest processing software.
For sure there is! Tools -> Movie Maker
@@timrodenbroeker I'm using processing 3.5.4. Under Tools, there are only 4 options: Create Font, color Selector, Archive sketch and Add Tools. Am I missing something..? Where is the movie maker..?
wow
seriously, how come the photos could be shown properly with this coding.
theres even no image tag
Oh my God it's fucking Ali G.
Dude, you are killing it! Thank you for this. I appreciate all of your tutorials and especially liked the last two, because you deal with image manipulation which opens many possibilities for cool web-design. Although all of it is applicable to the web, it is (mostly) much easier to persuade a client to invest in something like this if it is based on images rather than abstract patterns. Servus!
Thanks !!! ;-)
i love this tutorial! i've learned for it a lot! thanks!!!
1:18 Genau = exactly =)
Thank you for teaching me
I'm not very good at English
It was very easy to understand and interesting!
I support you!
Great tutorial! It’s explained really well for beginner. Is it possible to rasterize an image with color and have the original image at then end of the width and height ? I tried messing around with hue & saturation as well but it doesn’t come close to the original colors
so I tried the same thing, just with another picture and it just shows a blank white canvas. :(
Is it preferable for the added image to be without a background?
Thank you so much Tim!! Ps : Standard frameRate : 60, not 30
this is sooo good! thank u so much
Great job!
Thank you
You are an AMAZING teacher! THANK YOU SO MUCH!
thank you vermy much !!!
Instant subscribe! Best intro to processing I have come across. Thanks!
Thanks! Love to hear that!!
Hey Thanks Tim this video just introduced me to processing coding and I am in love with it ! I just have a problems when it comes to exporting this code into SVG, no problem with the function pdf or svg but when I open it in AI, there is a lot of small dots not visible by eye but in vector format... Do you know how to get rid of them before exporting it since AI cannot select by size... ^^ Cheers !
It's okay as a British person, I also struggle...
when I thought I had read the red reading book I was mistaken
and didn't actually read the red reading book
any ways thank you for this tutorial/guide, I may just have to download processing again,
to play around with it.
So amazing! Now just need to learn if I’m able! I’m in love with processing. Thanks for the beautiful explanation ❤
amazing
hi i love you video!! can you maybe explain a little bit how to rasterize image but with color.. :)
How can you save this into a video??? I tried with the movie maker tool from the program, but It doesn't work. I know I must be doing something wrong
Hay, if you still there, can you share the music from this video? i love it
Gracias
what's the song playing the background?
open.spotify.com/track/0biU6emniMz12GFjilsfJs
ok i got it, but, when you say for(int i=0; i
10 is just the amount of times the for loop will be iterated, it basically says, whilst the value of i is less than ten, increase the value of i by 1. Since i's value starts at 0, it will take 10 loops for the value of i to reach 10. Once i is greater than 10, the loop will stop looping since the condition has been met. Tldr; 10 is just the amount of times the loop will be run for :)
Any pictures or photo wont load.
They are surely in data folder.
No eroor message, I can run the code properly excepting loading image.
why is that?
actually the photo is loaded but it doesnt look like result that you shoued it's just white ande black dotts
I LOVE YOU THANKS
thanks friend, a lot.
someone knows how to do it with a colorful picture ? :)
like picking the colors from the actual picture or even make the ellipse "transparent" so the colors are shown? (I hope someone understands what I mean) ':D
ty
Thanks, so awesome technique.
how do i export to a video
timrodenbroeker.de/processing-tutorial-video-export/
❤
How do we save as video?
timrodenbroeker.de/processing-tutorial-video-export/
@@felipedolce5757 when i did this it saved the video as a white blank page. what can I do? I would be glad if you help.