NoBS Code
NoBS Code
  • 7
  • 235 969
Xiaolin Wu's Line Algorithm - Rasterizing Lines with Anti-Aliasing
In this video we'll take a look at Xiaolin Wu's line algorithm. It can draw anti-aliased lines at sub-pixel positions, which results in lines that look and move smoother than those drawn using e.g. Bresenham's algorithm.
- Chapters -
0:00 - Introduction
0:40 - Notes and Recap
1:22 - Deconstructing Wu's Line
3:25 - Plotting Points
5:22 - Distances & Opacities
6:35 - Fixing the Function
7:58 - Handling the Endpoints
10:17 - Conclusion
- Music Credits -
Music by Tokyo Walker Music, released under the CC BY-NC-SA 3.0 license.
Songs:
Closing Time - www.soundcloud.com/user-356546060/closing-time
Lamp - soundcloud.com/user-356546060/lamp
Artist Media & Socials:
Spotify: open.spotify.com/artist/7cktl8j9CsS2TwsgzakhsD
Apple Music: music.apple.com/us/artist/tokyo-m…walker/1503480346
TH-cam: th-cam.com/channels/3lLfvhpPGtwd5qD25cMDcA.html
Instagram: tokyo_music_walker
Twitter: TMW99407138
มุมมอง: 61 276

วีดีโอ

The Midpoint Circle Algorithm Explained Step by Step
มุมมอง 112Kหลายเดือนก่อน
In this video we'll take a look at how the midpoint circle algorithm works. We go through all steps required to implement the algorithm. - Chapters - 0:00 - Introduction 1:07 - First Implementation 4:05 - Testing the Midpoint 5:40 - Initial Decision Parameter 8:10 - Approximation 9:52 - Incrementing Decision Parameter 13:03 - Conclusion - Music Credits - Music by Tokyo Walker Music, released un...
Bresenham's Line Algorithm - Demystified Step by Step
มุมมอง 60K4 หลายเดือนก่อน
Bresenham's Line Algorithm is simple, but how exactly does it work? In this video we go through the steps necessary to draw a line inside a grid of pixels using only integers. To do this, we're going to write the algorithm from scratch and derive the decision parameter used in Bresenham's algorithm. - Chapters - 0:00 - Intro 2:00 - Draw Lines using Floats 3:32 - Supporting all Octants (Floats) ...
How Computers Store Text - ASCII, Unicode, UTF-8, UTF-16, and UTF-32
มุมมอง 2.1K4 หลายเดือนก่อน
How do computers store text? In this video you will learn how we encode text into numbers, and decode those back into text. We'll talk about the ASCII and Unicode standards, as well as the UTF-8, UTF-16, and UTF-32 text encodings. The former standards represent characters and codepoints respectively to store text in binary. The UTF-8, UTF-16, and UTF-32 encodings are used to actually represent ...
How Computers Store Binary Data - RAM, ROM, Flash, Magnetic, and Optical
มุมมอง 8295 หลายเดือนก่อน
This video explains how computers are able to store data using physical devices, such as Hard Disk Drives, Solid State Drives, Memory, and more. We go over volatile storage devices like dynamic random access memory, to non-volatile devices such as ROM, Flash Memory, and so on. Chapters 0:00 - Intro 0:18 - Switches & Transistors 1:42 - Semiconductor 3:13 - Building a Diode 4:37 - Building a Tran...
How does Hexadecimal work? And why do we use it?
มุมมอง 4555 หลายเดือนก่อน
This video explains how hexadecimal works in simple terms. It covers the basics and how to convert hexadecimal to decimal, convert decimal to hexadecimal, convert hexadecimal to binary, convert binary to hexadecimal, and explains why we would use hexadecimal in the first place. - Chapters - 0:00 - Hexadecimal Number System 1:09 - Hexadecimal to Decimal 1:33 - Decimal to Hexadecimal 2:41 - Hexad...
How does Binary work? From the Basics to Floating Point
มุมมอง 9075 หลายเดือนก่อน
This video explains how binary works in simple terms. No prior knowledge required. It covers everything from basic conversions to binary arithmetic, sign bits, ones complement, twos complement, biases, fixed point, floating point numbers, and more. - Chapters - 0:00 Intro 0:11 Binary Numeral System 1:00 Binary to Decimal 1:15 Decimal to Binary 2:01 Conversion by Halving 2:30 Conversion by Doubl...

ความคิดเห็น

  • @VideoNOLA
    @VideoNOLA วันที่ผ่านมา

    The intermediate conclusion that 2x+1 predicts the next increment, is synonymous with what calculus shows as the slope of the curve x*2 + 2x + c. It's just the slope or derivative of the quadratic at a given value of x, which is not only helpful to realize, but definitely computationally leaner than just calculating points brute-force. Nice tutorial!

  • @WhiteDragon103
    @WhiteDragon103 วันที่ผ่านมา

    One minor flaw - 45 degree lines will be about 30 percent thinner than horizontal or vertical lines, since the algorithm basically "shears" a square rather than rotating and stretching it.

  • @Dyas777
    @Dyas777 วันที่ผ่านมา

    Nice style of explanation!

  • @ВладимирОгородников-и1ы
    @ВладимирОгородников-и1ы 4 วันที่ผ่านมา

    The slight difference you've noticed when truncating 0.25 appears because of using > instead of >=. For INTEGER values A and B, the inequality A + 0.25 > B is equivalent to A >= B. So in the code you need to replace the check "p > 0" with "p >= 0".

  • @gigelgigica
    @gigelgigica 7 วันที่ผ่านมา

    This video would’ve saved me in university, keep it up 🫡

  • @fremsoft
    @fremsoft 7 วันที่ผ่านมา

    Super! What software are you using for creating these wonderful animations?

  • @MiccaPhone
    @MiccaPhone 8 วันที่ผ่านมา

    Why flipping coordinate system against mathematical standards? Want to sound important?

  • @benholroyd5221
    @benholroyd5221 8 วันที่ผ่านมา

    0:43 I can think of simple ways of mirroring a quarter circle into a whole circle. doing it with 16ths would seem to be as hard as the original problem. or am I missing somthing

  • @ZomB1986
    @ZomB1986 8 วันที่ผ่านมา

    I'm disappointed for two reasons. First off, it's nicely animated, no worries there. The problem is the algorithm is simple. I was interested because it had a fancy name, but it turns out to be something I independently invented long ago, and probably many others did so too. Second, you don't seem to apply sRGB correction, i.e. 50%+50% ≠ 100%. In fact it's more like 69%+69% = 100% in sRGB space. That's why in all your animations, the line looks like it has gaps in every place where two half-opaque pixels meet.

  • @menachemsalomon
    @menachemsalomon 10 วันที่ผ่านมา

    "There is zero room for bigotry and racism" well, CNN, you are hosting Mehdi Hassan, so that's a false statement right there.

  • @menachemsalomon
    @menachemsalomon 11 วันที่ผ่านมา

    Thanks. I've seen Bresenham's algorithm before, but this explained it in a way I would be able to reproduce (or rederive) without having to memorize the algorithm. An additional note you may find humorous: You are referring to _y_ subscript 0 as "y naught", but the way you pronounce _naught_ sounded to me as if you had said, "Let's change _why_ to _why not."_ (People make fun of New Yorkers for the way we say _cawfee,_ but our _naught_ doesn't sound like our _not.)_

  • @BartomiejGawron
    @BartomiejGawron 12 วันที่ผ่านมา

    I did it the same way a long time ago, but instead of calculations I used the fact that the squares of consecutive natural numbers differ by consecutive odd numbers (which also comes out at 11:20), so all I had to do was add and subtract

  • @rkalle66
    @rkalle66 13 วันที่ผ่านมา

    I'm not into this stuff of optimizing but my idea is to calculate only every second step and filling the gap with DrawLine. Does it work?

  • @creative1978
    @creative1978 13 วันที่ผ่านมา

    Your ability to explain is amazing. Thank you for this video and for the time you have dedicated to us.

  • @creative1978
    @creative1978 13 วันที่ผ่านมา

    I subscribed to your channel in a split second, very good, keep it up!

  • @mjthebest7294
    @mjthebest7294 14 วันที่ผ่านมา

    The opacity is messed up. Lines look terrible, not "perfectly antialiased". Even if the opacity is corrected, vertical/horizontal distance is just an approximation due to triangular inequality. No DDA? Floats? Python?? C'mon! The video had a lot of potential for the way it is presented.

  • @hrayz
    @hrayz 14 วันที่ผ่านมา

    You showed the partially finished result but not the end result. Show how it looks completed.

  • @em00k
    @em00k 16 วันที่ผ่านมา

    An excellent explanation, really expressed how the algorithm works Top video.

  • @saultube44
    @saultube44 22 วันที่ผ่านมา

    Initially, This is the worst kind of explanation you can make: figure the problem out, and them put solutions that are at the end to the beginning, to make you look smart, offering no process why it was done that way; seen this on teachers that lack pedagogical skills. You should have continue with your previous example, more to the point: with the original example; then, observe the potential improvements & implement them. You don't explain why those variables are there, you just describe the code, you explain Nothing. The rest of the explanation makes not much sense, you don't explain yNext and many other things' origins, your introverted explanation doesn't make sense, only for you; you should redo this video

  • @Skyliner_369
    @Skyliner_369 22 วันที่ผ่านมา

    I wonder if theres a version of this that is tweaked for the edge of triangles

  • @Necrozene
    @Necrozene 22 วันที่ผ่านมา

    I think one can get a better result by assuming the line is actually a skinny rectangle, and calculate the percentage of the pixel covered.

  • @monkey7218
    @monkey7218 23 วันที่ผ่านมา

    Awesome explanation! One question: Is it a mistake at 11:58 that the - 2 * dx * y turns into a + 2 * dx * y and then back again in the following re-arrangement? Or what am I missing?

  • @RubenPalenqueArriola
    @RubenPalenqueArriola 23 วันที่ผ่านมา

    This is an a great idea for can use the pixels Matrix with flotas values so assume that make an a sub Matrix that pixels for each pixel. This is an a great way to gain resolución on the radials corners of the circles 😊😊😊 Goog explanation of this kind of renderization tricks!!

  • @AK-vx4dy
    @AK-vx4dy 23 วันที่ผ่านมา

    Antialiased explanation 😉 Nice and clean job at every angle. Excellent job.

  • @ArnaudMEURET
    @ArnaudMEURET 24 วันที่ผ่านมา

    Final optimization that should be layered on all these algorithms: memoization.

  • @Paultimate7
    @Paultimate7 24 วันที่ผ่านมา

    This was overly complex for such a simple thing..

  • @Narigopia
    @Narigopia 26 วันที่ผ่านมา

    Excellent, I wish I had this 55 years ago...

  • @gblenemy
    @gblenemy 26 วันที่ผ่านมา

    I'm struggling with the end point of the line. if the end point is 0.1, 0.2, 0.3 or 0.4 above pixel, I get a gap at the end

  • @davidhu8768
    @davidhu8768 27 วันที่ผ่านมา

    This video explains the algorithm almost too well. It's hard to follow along. Explaining the goal and approach was most useful.

  • @gblenemy
    @gblenemy 28 วันที่ผ่านมา

    I would actually love a video on thick lines. :)

  • @MegaArti2000
    @MegaArti2000 28 วันที่ผ่านมา

    I had this problem once I wanted to code generating a circle in minecraft. Thanks for the video!!

  • @marike113
    @marike113 28 วันที่ผ่านมา

    nick wu!!

  • @gblenemy
    @gblenemy 29 วันที่ผ่านมา

    that was great. thank you!

  • @FrankHarwald
    @FrankHarwald 29 วันที่ผ่านมา

    Note: it's possible to combine Bresenham's integer only multiply-free slope update computation with anti-aliasing à la Wu if you do basically do 2 parallel Bresenham iterations per step of the main loop, but while one is for the position of the pixel to draw & controlling the loop exit, the other one runs independently of the former one in the loop & is responsible for the opacity. Both of these Bresenham parts need to be initialized differently though. Note: & these Bresenham algorithms can be further generalized to draw arbitrary polynomial curves (including the AA) if you subdivide the polynomial into screen diagonal bound parts & add root-finding (of these diagonals to the shapes) prior the main loops while in the main loop you further differentiate the polynomial step update by using newton's method of iterative polynomial differences (from Newton's divided differences triangular scheme, except here we aren't dividing the differences because we want integer only solutions so we end up simply using two integers per resulting difference coefficient updating in lock step, which is what Bresenham is all about).

  • @nagesh007
    @nagesh007 หลายเดือนก่อน

    Awesome , Thanks 😍

  • @dunnydunn458
    @dunnydunn458 หลายเดือนก่อน

    This was pretty good video, but I felt that there were a few areas that would have benefited from a more in depth explanation. Nonetheless, good, job!

  • @soran2290
    @soran2290 หลายเดือนก่อน

    And with elipses?

    • @buysnoah
      @buysnoah 23 วันที่ผ่านมา

      Circle algorithm not ellipse

  • @andreasherz4605
    @andreasherz4605 หลายเดือนก่อน

    I love it!!!!

  • @촉촉한초코칩-j8t
    @촉촉한초코칩-j8t หลายเดือนก่อน

    상!

  • @atom1kcreeper605
    @atom1kcreeper605 หลายเดือนก่อน

    7:25 you can also just check if the slope is greater than 1

  • @Ivan....Ivanov
    @Ivan....Ivanov หลายเดือนก่อน

    It's beautiful!

  • @spaceguy20_12
    @spaceguy20_12 หลายเดือนก่อน

    for some reason that anti aliasing is very annoying sometimes, especially when you’re drawing a thin circle and try to fill it it fills the entire thing

  • @강현규-g3g
    @강현규-g3g หลายเดือนก่อน

    its very cool and easy

  • @diodebridge
    @diodebridge หลายเดือนก่อน

    I believe the N64 used a similar algorithm

  • @prog_5952
    @prog_5952 หลายเดือนก่อน

    There's actually a lot more convenient way for drawing a circle. Saving the coordinates of the midpoint in an array of 2 dimensions and by using cos(theta) and sin(theta) from mathematics you can draw short lines from pixel to pixel say from {centerpoint[0] + cos(theta), centerpoint[1] + sin(theta)} to {centerpoint[0] + cos(theta+1), centerpoint[1] + sin(theta+1)} theta ranging from 0 to 359 degrees.

    • @misterkite
      @misterkite 29 วันที่ผ่านมา

      This algorithm ends up using a bitshift and some addition.. replacing that with sin and cos isn't "more convenient".

  • @JackBond1234
    @JackBond1234 หลายเดือนก่อน

    I came up with a similar algorithm for drawing pixelated circles by hand. Starting at x=0 and y=-r, increment x and calculate the offset y given the known x offset and radius plugged into the Pythagorean theorem. Once you reach x=r/2, you can mirror the result 7 more times.

  • @SAhellenLily
    @SAhellenLily หลายเดือนก่อน

    Python program for wafer Cp test equipment

  • @VideosViraisVirais-dc7nx
    @VideosViraisVirais-dc7nx หลายเดือนก่อน

    Learners* damnit

  • @VideosViraisVirais-dc7nx
    @VideosViraisVirais-dc7nx หลายเดือนก่อน

    A very good video for intermediate leaners

  • @VideosViraisVirais-dc7nx
    @VideosViraisVirais-dc7nx หลายเดือนก่อน

    Indeed