Programming Panning & Zooming

A genuinely practical video today! In this video, I take a look at a really useful technique to easily add panning and zooming to your applications.
Source: github.com/OneLoneCoder/Javid...
/ discord
Blog: www.onelonecoder.com
Twitter: @javidx9
Twitch: javidx9

[@neuemage]

Welcome to "Coding in the wilderness", I'm your host Javid

[@javidx9]

"Here we see a rare console programmer, out of its natural habitat...."

[@salagajeff6357]

Thank you very much, if it weren't for you, I would never have figured out how to do zoom to the cursor. I looked at so much information on how to do this, and only you explained how.

[@3DSage]

I'm really glad you showed this topic! One that is so important but most people don't take the time to explain as well as you do.

[@javidx9]

Hey 3DSage, its a bit boring on the surface, but I bet all programmers at some point will need to know how to do it.

[@seditt5146]

More Views in a few hours than my entire channel has over a few months of its existence. Glad to see the Channel picking up steam Javid!

[@seditt5146]

Here thought i had not seen this video yet javid yet I come here and find my comment lol.

[@2frankos]

You, sir, enlightened me with an issue I had for a couple of days now: panning vs scaled texture. I was trying to pan a texture within a frame at where my location coordinates were translated. Works like a charm. I'll try to add zooming later on, I'll see how I hit my head around that, but thanks again!

[@3DSage]

How about making a video on optimization? Sin and cosine look up tables, bitshift multiply and divide, minimizing looping and so on.

[@seditt5146]

I second this Javid, it would be a very good topic I think. Maybe get into Fast Sqrt and perhaps put your Fast Sin algorithm on display a bit more as well.

[@johnnyserup5500]

3DSage I think he already made one

[@ForcesOfOdin]

This is super useful and practically language independent, thank you so much.

[@Cgeta4]

Oh my god a tutorial that actually teaches about how to zoom towards the cursor!

[@chriswinslow]

Excellent video and well explained too. This demonstration can be used in many applications. Thank you for sharing your valuable knowledge with the world.

[@javidx9]

Cheers Chris!

[@Fragler01]

You are a legend. I have been trieing to implement these methods in a HTML canvas project with Javascript. I have not found anyone explaining it for javascript, however the algebra translates through any programming languages, so thanks a lot 😁👍

[@javidx9]

Thanks! I'm pleased you found it useful!

[@vincentcleaver1925]

Thanks​! I'm applying everything I learned on this channel to my Python code; wrote some pseudo perlin noise for my world-building, low res, low poly

[@javidx9]

Very nice, make sure to send some pics!

[@floretionguru2977]

This is exactly what I was looking for- thanks my friend!

[@joshuaeirman2197]

Amazing little program, I love the mouse drag!

[@lennarth.6214]

This is your most underrated video. Love the work

[@gresh1134]

THANK YOU!!! I'd been banging my head against a wall trying to figure out the math for this myself, and this worked perfectly!

[@hatkidchan_]

oh, that's exactly what I'm looking for. you saved a lot of my time, thanks

[@socksockmaster]

Very good explanation, thank you!!! I was banging my head against this problem for a while

[@manuellehmann267]

Interesting, enjoayable and educational as always! Thx!

[@javidx9]

Cheers donnerbrenn!

[@mmx555]

i did not now i can write two lines of code at once !!! thanks man. ( if you can point things like that out next time, it will be great. !) i am glad find you in youtube !

[@NoobishAlpha]

Thanks to you I managed to program the pan !

[@skeletonrowdie1768]

AMAZING THANK YOU. You have no idea how I broke my brain over this.

[@MrSanchezHD]

A quality video as always. The things you can do in relatively few lines of code. Very interesting.

[@javidx9]

Thanks!, I agree, this is a simple technique but very powerful.

[@reidblanton1436]

Thank you! This was very helpful, sir.

[@krakenofdeath1701]

Nice large educational video! Im sure a lot of peeps will learn a bunch from it! -UE4

[@javidx9]

Cheers Kraken!

[@herkyrannala1892]

This is what I've been looking for..Thank You Very Much!!!

[@gkarapeev]

Love this, thank you so much!

[@thefoolishgmodcube2644]

Outstanding, it could make up to be a useful sprite or map editor

[@javidx9]

Yeah, or any kind of 2D editor, circuit diagrams, audio tools. Very versatile.

[@vrajshah8075]

This is so cool. Thank you very much!

[@rednibcoding3412]

Nice video and awesome channel! I'm interested in almost every topic you cover in your channel. And I'm also kind of nostalgic when it comes to old blocky graphics, reminds me of my childhood. Still have a working NES and im proud of it :). I have one question: could you make a video about visualizing big datasets with olcPixelGameEngine? A bit like you've shown in this video. But with reading curve data from a large csv file (eg. +2gb). So the data has to be read dynamically from the file when the user pan/zoom the view (only data that is been displayed lie in memory), this would make it possible to visualize any size of csv-file/data.

[@user-py8hd1xl7z]

I don't understand what you do in code, but everything in note i do understand. Note explaining helps get concept and now i can implement it myself. I think in programming videos better explain general concepts with hand written notes with no code. There is so much things in code that confuse me that i don't get what is going on. Only way to get though this is try to code it myself ( not just copy video code, implement it myself ) Anyway It's helpful video. But i wish more bloggers do more general concept content.

[@unknownpng650]

same im trying to implement the zoom in c language using a different library for graphical interface

[@duckyyy2682]

thank you very much for this useful video!

[@spjewkes]

Nice video. If I could, I’d give you another thumbs up for the conspicuous can of Vimto.

[@javidx9]

lol cheers Steve, one day they'll give some free ones, one day...

[@vincentcleaver1925]

had to Google it- en.m.wikipedia.org/wiki/Vimto

[@PhilBoswell]

Vim-TOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO ;-)

[@themastergames7780]

as always great videos man keep it up

[@javidx9]

Cheers buddy!

[@johnnyserup5500]

I enjoyed building this using your olcPixelGameEngine, and I noticed that I could select cells outside the grid, also the initial start of the chart was somewhat off. Any suggestions on how to handle the offset for chart, with respect to only drawing inside the grid?

[@bsunjic]

Thank a lot!

[@PhilBoswell]

This is ripe for encapsulation, so your programs just keep track of what is happening in the Game World and the underlying engine takes care of the transformations: nicely done ^_^

[@javidx9]

Absolutely, a "zoomable canvas" class is something you would use over and over.

[@BlastinRope]

All of my projects turn into future proofing something that as no future already

[@colepeterson5392]

consistently awesome!!!!!!!!!!!!!!!!!!

[@javidx9]

Thank you!

[@johnnyserup5500]

Any chance you could give some info on how olcPixelGameEngine could be used togethers with a device context (DC), I would like to render in a MFC Dialog box if possible

[@shankar4510]

Hi . I am Trying to zoom out from the pixel matrix where I use p[i +j*i] in a loop to access width and height (single dimention array for screen surface). however the painting app has to retain the previous drawn pixel when zoomed out as well. Does This meathod work for such type of data as well ? what should I do ?

[@shankar4510]

I program in C and find dufficult to understand . Can You point me to some math website you refer to ? Are you using K-Times Zoom Algorithm ?

[@qislegit.donttrustthemedia6232]

Have you ever seen/played PilotWings on the NES? What kind of graphics engine does it use? It appears 3D but I'm curious as to what techniques are used to get that type of 3D effect. Is it raycasting?

[@javidx9]

It was on the SNES. Its a hardware affine transform called "Mode7". I made a video that emulates the effect called Programming pseudo3d planes.

[@qislegit.donttrustthemedia6232]

@@javidx9 Awesome! Thank you so much! 🙏🏻

[@movietrailerspreview9098]

we use this in our web also on image zooming, right thanks man

[@johnnyserup5500]

Could you make a video about creating an audio sample Visualizer ? or did you already make a video about showing sampled sound ?

[@johnnyserup5500]

Also this video is a perfect start for next topic - how to visualize FFT ; so far there are videos about this in JavaScript, but it would be nice to see it done in C++ with your pixel game engine

[@philtoa334]

Thx

[@unknownpng650]

can someone help me how to implement this in c , i would like to understand the concept of zooming in and out from programming perspective

[@crew575]

There is no funcion 'Fill' anymore i think. Can i replace it with 'FillRect'?

[@hemrajsinghgheeseewan3550]

Hello guys. I am searching for a Scalable Coordinate system which can accommodate a drawing of any size. Can you guys help me find a sample of this in JAVA? Thanks in advance.

[@javidx9]

Hi Kev, "any size" may bring about a lot of philosophical computation problems for you to overcome, do you have a more refined specification?

[@hemrajsinghgheeseewan3550]

Thanks a lot for the response Mr Javid. So, my idea is that I will have x-Axis and y-Axis, both negative and positive sides a on frame. Then, I have to draw a basic shape (square, circle, polygons), from the centre of origin, on the axes. Now, I have 2 options. A and B. Option A: The Scales on the Axes must grow according to the size of the shapes that I am inputting in a text box. Suppose the axes are both initialised to a scale of 10 to -10. If I input a radius of 20 using a basic text box, the scale should then increase to 20 and -20 on both axes. The circle then is shown on the axes. Option B: The scale is initialled to a value, say 10 to -10 on both axes. Then, I input a radius which is within the range of 0 to 10, say 5. Then, I should be able to Zoom or enlarge the circle (using any method: mouse sliding, mouse scroll, or any other methods) and once I reach the last value on my scale, the scale should start to increase with the circle. Its like the Axes grow while I am zooming/enlarging the shape. Either on of those two would be just fine.

[@kartune0832]

i was wondering, does it works with sprites?

[@jonathanmoore5619]

Is there anyway of writing text whilst also increasing the pixel density? So, I guess a separate part of the screen for txt with a wider font size associated too it...I'm thinking legend here... Axis details... And then a more granular pixel setting inside these bounds?

[@javidx9]

Generally all applications operate at a single pixel density, a limitation imposed by the display hardware. One can emulate different densities by drawing 2x2 pixels or 3x3 pixels at a time instead of just the one.

[@jonathanmoore5619]

@@javidx9 so when looping through the screen array buffer... To fill the screen... Change from, for example 4*4 to 8*8 for pixels. Is that what you mean? One final thing.. Ive watch nearly all the vids, is there a brief summary to show the general difference between the console and pixel engines? In terms of the general idea?

[@javidx9]

@@jonathanmoore5619 Yes pretty much. The difference between CGE and PGE is fundamentally nothing - they have the same functions, experience and are compatible. However, PGE is maintained, supported, cross platform, very powerful, documented and used by many. The CGE is none of those things.

[@jonathanmoore5619]

@@javidx9 kk

[@noahwatson4310]

I don't think there's a need for seperate X and Y scale values as, in this program, they're updated in exactly the same way. Therefore the only use of having two scale values instead of one would be to leave the door open for zooming in only 1 axis on its own, which seems like something you'd only do by mistake.

[@javidx9]

Plenty of graphing applications would want zooming per axis, let alone electrical instrumentation, audio generation and editing tools, numerical analysis tools.

[@noahwatson4310]

@@javidx9 that's very true, I suppose I was just focused on the use case of displaying a 2d world and only left my initial reply after making a mistake involving the scaling.

[@joseloeza371]

Greetings from Dayton Ohio

[@javidx9]

Greetings!

[@ananbig8935]

why my square is rectangle ，did my console setting wrong？please help me 8：08

[@ananbig8935]

why my square is rectangle ，did my console setting wrong？please

[@rcookman]

I just did this in an application.

[@javidx9]

Hey thats great rcookman! lol, before or after watching the video? :D

[@rcookman]

Before, cool video thanks for sharing.

[@berozzzgaarengineer]

from this how much can you zooming

[@javidx9]

Theoretically there is no limit. Practically the precision of the data type for your variables will become a factor.

[@fckyo333ujhjjkrrrr]

New Video!

[@javidx9]

lol, that was quick :D

[@fckyo333ujhjjkrrrr]

javidx9 got the notification :]

[@ashutoshaswal]

😵😵

[@alkimista9055]

Thats not for me, I passed the entire night seeing your videos and searching for answers and i dont get any knowledge about this, I start this 21:00 and now its 07:40 and i dont get any worth

[@kiprus1476]

Пора учить английский...

[@6Pope9]

the way you're typing x triggers me so much