Programming Panning & Zooming

Поделиться
HTML-код
  • Опубликовано: 22 янв 2025

Комментарии • 106

  • @salagajeff6357
    @salagajeff6357 11 месяцев назад +4

    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.

  • @neuemage
    @neuemage 6 лет назад +57

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

    • @javidx9
      @javidx9  6 лет назад +36

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

  • @3DSage
    @3DSage 6 лет назад +21

    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
      @javidx9  6 лет назад +6

      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
    @seditt5146 6 лет назад +18

    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
      @seditt5146 6 лет назад +6

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

  • @2frankos
    @2frankos 3 года назад +5

    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
    @3DSage 6 лет назад +49

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

    • @seditt5146
      @seditt5146 6 лет назад +10

      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
      @johnnyserup5500 5 лет назад

      3DSage I think he already made one

  • @vincentcleaver1925
    @vincentcleaver1925 6 лет назад +6

    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
      @javidx9  6 лет назад +1

      Very nice, make sure to send some pics!

  • @ForcesOfOdin
    @ForcesOfOdin 4 года назад +6

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

  • @lennarth.6214
    @lennarth.6214 3 года назад +1

    This is your most underrated video. Love the work

  • @chriswinslow
    @chriswinslow 6 лет назад +7

    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
      @javidx9  6 лет назад +1

      Cheers Chris!

  • @gresh1134
    @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!

  • @Fragler01
    @Fragler01 10 месяцев назад +1

    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
      @javidx9  10 месяцев назад

      Thanks! I'm pleased you found it useful!

  • @floretion
    @floretion 4 года назад +2

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

  • @manuellehmann267
    @manuellehmann267 6 лет назад +4

    Interesting, enjoayable and educational as always! Thx!

    • @javidx9
      @javidx9  6 лет назад

      Cheers donnerbrenn!

  • @krakenofdeath1701
    @krakenofdeath1701 6 лет назад +2

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

    • @javidx9
      @javidx9  6 лет назад

      Cheers Kraken!

  • @hatkidchan_
    @hatkidchan_ 4 года назад +2

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

  • @mmx555
    @mmx555 6 лет назад +2

    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 !

  • @MrSanchezHD
    @MrSanchezHD 6 лет назад +7

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

    • @javidx9
      @javidx9  6 лет назад +2

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

  • @NoobishAlpha
    @NoobishAlpha 4 года назад +2

    Thanks to you I managed to program the pan !

  • @skeletonrowdie1768
    @skeletonrowdie1768 3 года назад

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

  • @ДержиОпыт
    @ДержиОпыт 2 года назад +2

    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
      @unknownpng650 2 года назад

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

  • @socksockmaster
    @socksockmaster 2 года назад

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

  • @themastergames7780
    @themastergames7780 6 лет назад +3

    as always great videos man keep it up

    • @javidx9
      @javidx9  6 лет назад +1

      Cheers buddy!

  • @Nezhadude117
    @Nezhadude117 Месяц назад +1

    Thank you so freaking much

  • @thefoolishgmodcube2644
    @thefoolishgmodcube2644 6 лет назад +5

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

    • @javidx9
      @javidx9  6 лет назад +4

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

  • @spjewkes
    @spjewkes 6 лет назад +8

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

    • @javidx9
      @javidx9  6 лет назад +1

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

    • @vincentcleaver1925
      @vincentcleaver1925 6 лет назад +1

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

    • @PhilBoswell
      @PhilBoswell 6 лет назад

      Vim-TOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO ;-)

  • @unknownpng650
    @unknownpng650 2 года назад

    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

  • @reidblanton1436
    @reidblanton1436 3 года назад +2

    Thank you! This was very helpful, sir.

  • @herkyrannala1892
    @herkyrannala1892 10 месяцев назад

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

  • @hemrajsinghgheeseewan3550
    @hemrajsinghgheeseewan3550 6 лет назад +2

    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
      @javidx9  6 лет назад +1

      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
      @hemrajsinghgheeseewan3550 6 лет назад

      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.

  • @jonathanmoore5619
    @jonathanmoore5619 4 года назад +2

    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
      @javidx9  4 года назад

      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
      @jonathanmoore5619 4 года назад

      @@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
      @javidx9  4 года назад

      @@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
      @jonathanmoore5619 4 года назад

      @@javidx9 kk

  • @joshuaeirman2197
    @joshuaeirman2197 5 лет назад

    Amazing little program, I love the mouse drag!

  • @ananbig8935
    @ananbig8935 Год назад

    why my square is rectangle ,did my console setting wrong?please help me 8:08

  • @colepeterson5392
    @colepeterson5392 6 лет назад +3

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

  • @gkarapeev
    @gkarapeev 5 лет назад +2

    Love this, thank you so much!

  • @PhilBoswell
    @PhilBoswell 6 лет назад +2

    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
      @javidx9  6 лет назад +3

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

    • @BlastinRope
      @BlastinRope 3 года назад

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

  • @jerryhuang7194
    @jerryhuang7194 5 месяцев назад

    Pure elegance!

  • @shankar4510
    @shankar4510 4 года назад

    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
      @shankar4510 4 года назад

      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 ?

  • @johnnyserup5500
    @johnnyserup5500 5 лет назад

    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

  • @kartune0832
    @kartune0832 Год назад

    i was wondering, does it works with sprites?

  • @ananbig8935
    @ananbig8935 Год назад

    why my square is rectangle ,did my console setting wrong?please

  • @qislegit.donttrustthemedia6232
    @qislegit.donttrustthemedia6232 5 лет назад +1

    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
      @javidx9  5 лет назад +1

      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
      @qislegit.donttrustthemedia6232 5 лет назад

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

  • @crew575
    @crew575 6 лет назад

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

  • @johnnyserup5500
    @johnnyserup5500 5 лет назад

    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?

  • @movietrailerspreview9098
    @movietrailerspreview9098 4 года назад

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

  • @vrajshah8075
    @vrajshah8075 2 года назад

    This is so cool. Thank you very much!

  • @johnnyserup5500
    @johnnyserup5500 5 лет назад

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

    • @johnnyserup5500
      @johnnyserup5500 5 лет назад

      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

  • @duckyyy2682
    @duckyyy2682 Год назад

    thank you very much for this useful video!

  • @noahwatson4310
    @noahwatson4310 3 года назад

    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
      @javidx9  3 года назад +1

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

    • @noahwatson4310
      @noahwatson4310 3 года назад

      @@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.

  • @berozzzgaarengineer
    @berozzzgaarengineer Год назад

    from this how much can you zooming

    • @javidx9
      @javidx9  Год назад

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

  • @rednibcoding3412
    @rednibcoding3412 5 лет назад

    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.

  • @bsunjic
    @bsunjic Год назад

    Thank a lot!

  • @joseloeza371
    @joseloeza371 4 года назад +2

    Greetings from Dayton Ohio

  • @alkimista9055
    @alkimista9055 2 года назад

    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

  • @rcookman
    @rcookman 6 лет назад +1

    I just did this in an application.

    • @javidx9
      @javidx9  6 лет назад

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

    • @rcookman
      @rcookman 6 лет назад

      Before, cool video thanks for sharing.

  • @philtoa334
    @philtoa334 4 года назад

    Thx

  • @fckyo333ujhjjkrrrr
    @fckyo333ujhjjkrrrr 6 лет назад

    New Video!

  • @ashutoshaswal
    @ashutoshaswal 5 лет назад +1

    😵😵

  • @kiprus1476
    @kiprus1476 3 года назад

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

  • @6Pope9
    @6Pope9 8 месяцев назад

    the way you're typing x triggers me so much