From a8ea0946975cbb5fb8cb12cfe58fc783d724b332 Mon Sep 17 00:00:00 2001 From: enes <139135923+cys27@users.noreply.github.com> Date: Tue, 30 Apr 2024 23:11:31 +0300 Subject: [PATCH 1/3] Update article.md --- .../02-script-async-defer/article.md | 140 +++++++++--------- 1 file changed, 70 insertions(+), 70 deletions(-) diff --git a/2-ui/5-loading/02-script-async-defer/article.md b/2-ui/5-loading/02-script-async-defer/article.md index a8936dd3b..deda1478e 100644 --- a/2-ui/5-loading/02-script-async-defer/article.md +++ b/2-ui/5-loading/02-script-async-defer/article.md @@ -1,136 +1,136 @@ -# Scripts: async, defer +# Komut Dosyaları (Scripts): async, defer -In modern websites, scripts are often "heavier" than HTML: their download size is larger, and processing time is also longer. +Modern websitelerinde, genellikle komut dosyaları (scripts), HTML kodlarından daha yoğunluktadır: onların indirme boyutu daha fazla ve işlem süreleri daha uzundur. -When the browser loads HTML and comes across a `` tag, it can't continue building DOM. It must execute the script right now. The same happens for external scripts ``: the browser must wait until the script downloads, execute it, and only after process the rest of the page. +Tarayıcı HTML'i yüklediği sırada `` kısmına denk geldiğinde, DOM'u oluşturmaya devam edemeyebilir. Tarayıcı böyle bir durumda script'i çalıştırmak zorundadır. Benzer durum `` şeklinde dışarıdan aktarılan script'ler içinde geçerlidir: tarayıcı, script indirilene kadar bekleyecek, onu çalıştıracak ve sonrasında sayfanın geri kalanını işleyecektir. -That leads to two important issues: +Bu durum iki önemli soruna yol açar: -1. Scripts can't see DOM elements below them, so can't add handlers etc. -2. If there's a bulky script at the top of the page, it "blocks the page". Users can't see the page content till it downloads and runs: +1. Script'ler, onların altındaki DOM öğelerini (element) göremeyebilir, yani işleyici fonksiyonlar (handlers) vb. ekleyemezsiniz. +2. Sayfanın üst kısmında büyük bir script varsa, bu "sayfanın yüklenmesini engeller". Kullanıcılar, script indirilip, çalıştırılana kadar sayfa içeriğini göremez. ```html run height=100 -

...content before script...

+

...script'ten önceki içerik...

- -

...content after script...

+ +

...script'ten sonraki içerik...

``` -There are some workarounds to that. For instance, we can put a script at the bottom of the page. Then it can see elements above it, and it doesn't block the page content from showing: +Bunun içi bazı geçici çözümler vardır. Örneğin, script'i sayfanın alt kısmına yerleştirebiliriz. Bu sayede script, kendinden önce bulunan öğeleri görebilir ve sayfa içeriğinin görüntülenmesini engellemez: ```html - ...all content is above the script... + ...tüm içerik script'in üzerindedir... ``` -But this solution is far from perfect. For example, the browser notices the script (and can start downloading it) only after it downloaded the full HTML document. For long HTML documents, that may be a noticeable delay. +Fakat bu çözüm mükemmel olmaktan uzaktır. Örneğin, tarayıcı, script'i HTML belgesinin tamamını indirdikten sonra farkeder (ve onu indirmeye başlayabilir). Uzun HTML belgelesi için, bu fark edilebilir bir gecikme olabilir. -Such things are invisible for people using very fast connections, but many people in the world still have slower internet speeds and use far-from-perfect mobile internet. +Bu tür durumlar çok hızlı bir internet bağlantısına sahip olanlar için önemsizdir, fakat dünyada birçok insan hala yavaş bir internet hızına sahip ve mükemmel olmaktan uzak olan mobil interneti kullanıyor. -Luckily, there are two ` - -

...content after script...

+ +

...script'lerden sonraki içerik...

``` -- Scripts with `defer` never block the page. -- Scripts with `defer` always execute when the DOM is ready, but before `DOMContentLoaded` event. +- `defer` kullanılan script, sayfayı engellemez. +- `defer` kullanılan script, her zaman DOM hazır olduğunda, `DOMContentLoaded` olayından (event) önce çalıştırılır. -The following example demonstrates that: +Aşağıdaki örnek bunu göstermektedir: ```html run height=100 -

...content before scripts...

+

...script'lerden önceki içerik...

-

...content after scripts...

+

...script'lerden sonraki içerik...

``` -1. The page content shows up immediately. -2. `DOMContentLoaded` waits for the deferred script. It only triggers when the script `(2)` is downloaded is executed. +1. Sayfa içeriği hemen görünür. +2. `DOMContentLoaded`, ertelenmiş (deferred) script'i bekler. Sadece script `(2)` indirilip, çalıştırıldığında tetiklenir. -Deferred scripts keep their relative order, just like regular scripts. +Ertelenmiş script'ler (deferred scripts), tıpkı normal script'ler gibi göreli sıralarını korurlar. -So, if we have a long script first, and then a smaller one, then the latter one waits. +Yani, ilk olarak büyük bir script'e ve sonrasında küçük bir tanesine sahipsek, sonuncusu bekler. ```html ``` -```smart header="The small script downloads first, runs second" -Browsers scan the page for scripts and download them in parallel, to improve performance. So in the example above both scripts download in parallel. The `small.js` probably makes it first. +```smart header="Küçük komut dosyası önce indirilir, sonra çalıştırılır." +Tarayıcılar, performansı artırmak için sayfadaki komut dosyalarını tarar ve paralel/eş zamanlı olarak indirmeye başlar. Yani yukarıdaki örnekte her iki komut dosyasıda eş zamanlı olarak indirilir. Muhtemelen `small.js` ilk önce indirilecektir. -But the specification requires scripts to execute in the document order, so it waits for `long.js` to execute. +Ancak komut dosyalarının sayfadaki sıraya göre çalıştırılması gerekir, bu nedenle `long.js` çalıştırılmasını bekler. ``` -```smart header="The `defer` attribute is only for external scripts" -The `defer` attribute is ignored if the ` -

...content after scripts...

+

...script'lerden sonraki içerik...

``` -1. The page content shows up immediately: `async` doesn't block it. -2. `DOMContentLoaded` may happen both before and after `async`, no guarantees here. -3. Async scripts don't wait for each other. A smaller script `small.js` goes second, but probably loads before `long.js`, so runs first. That's called a "load-first" order. +1. Sayfa içeriği hemen görünür: `async` sayfayı engellemez. +2. `DOMContentLoaded`, `async`'den öncede gerçekleşebilir, sonrada gerçekleşebilir. Burada garanti yok. +3. Asenkron script'ler birbirlerini beklemezler. Küçük script `small.js` ikinci sıradadır, fakat muhtemelen `long.js`'den önce yüklenecektir, dolayısıyla önce o çalıştırılacaktır. Buna "ilk sıradakini yükle" denir. -Async scripts are great when we integrate an independent third-party script into the page: counters, ads and so on, as they don't depend on our scripts, and our scripts shouldn't wait for them: +Asenkron script'ler, bağımsız bir üçüncü taraf script'i sayfaya eklediğimizde harikadır: sayaçlar, reklamlar vb. bizim script'lerimize bağlı olmadıkları için komut dosyalarımız onları beklememelidir. ```html - + ``` -## Dynamic scripts +## Dinamik Komut Dosyaları (Dynamic Scripts) -We can also add a script dynamically using JavaScript: +Ayrıca, JavaScript kullanarak dinamik olarak bir script ekleyebiliriz: ```js run let script = document.createElement('script'); @@ -138,15 +138,15 @@ script.src = "/article/script-async-defer/long.js"; document.body.append(script); // (*) ``` -The script starts loading as soon as it's appended to the document `(*)`. +Script `(*)`, belgeye eklenir eklenmez yüklenmeye başlar. -**Dynamic scripts behave as "async" by default.** +**Dinamik scriptler varsayılan olarak "async" gibi davranır..** -That is: -- They don't wait for anything, nothing waits for them. -- The script that loads first -- runs first ("load-first" order). +Yani: +- Onlar herhangi bir şeyi beklemezler, hiçbir şeyde onları beklemez. +- İlk yüklenen script, önce çalıştırılır ("ilk sıradakini yükle") -We can change the load-first order into the document order (just like regular scripts) by explicitly setting `async` property to `false`: +`async` özelliğini `false` olarak ayarlarsak, yükleme sırasını belge sırası olacak şekilde değiştirebiliriz: ```js run let script = document.createElement('script'); @@ -159,7 +159,7 @@ script.async = false; document.body.append(script); ``` -For example, here we add two scripts. Without `script.async=false` they would execute in load-first order (the `small.js` probably first). But with that flag the order is "as in the document": +Örneğin, burada iki adet script ekledik. `script.async=false` olmadığından ilk sıradakini yükleye göre çalıştırılacaktı (muhtemelen `small.js` önce çalışacaktı). Fakat bu flag sayesinde sıra "belgedeki sıra gibi" olur. ```js run @@ -170,29 +170,29 @@ function loadScript(src) { document.body.append(script); } -// long.js runs first because of async=false +// long.js, async=false olduğundan dolayı önce çalıştırılır. loadScript("/article/script-async-defer/long.js"); loadScript("/article/script-async-defer/small.js"); ``` -## Summary +## Özet -Both `async` and `defer` have one common thing: they don't block page rendering. So the user can read page content and get acquanted with the page immediately. +`async` ve `defer` niteliklerinin ortak bir özelliği vardır: sayfanın yüklenmesini (render) engellemezler. Böylece kullanıcı sayfa içeriğini okuyabilir ve sayfayla hemen etkileşime geçebilir. -But there are also essential differences between them: +Ama onların arasında temel farklılıklar var: -| | Order | `DOMContentLoaded` | +| | Sıra | `DOMContentLoaded` | |---------|---------|---------| -| `async` | *Load-first order*. Their document order doesn't matter -- which loads first | Irrelevant. May load and execute while the document has not yet been fully downloaded. That happens if scripts are small or cached, and the document is long enough. | -| `defer` | *Document order* (as they go in the document). | Execute after the document is loaded and parsed (they wait if needed), right before `DOMContentLoaded`. | +| `async` | *İlk sırayı yükle*. Belgedeki sıraları önemleri değildir -- hangisi önce yüklenirse | Alakasız. Henüz belgenin tamamı indirilmemişken yüklenebilir ve çalıştırılabilir. Bu durum, eğer scriptler küçük veya önbellekte mevcut ise ve belge yeterince uzun ise gerçekleşir.| +| `defer` | *Belge sırası* (belgeye girdikleri gibi). | Belge yüklenip, çözümlendendikten sonra (gerekirse beklerler), `DOMContentLoaded` olayından (event) hemen önce çalıştırılır. | -```warn header="Page without scripts should be usable" -Please note that if you're using `defer`, then the page is visible *before* the script loads. +```warn header="Sayfa, scriptler olmadan kullanılabilir olmalıdır." +`defer` kullanıyorsanız, lütfen sayfanın script yüklenmeden *önce* görüntüleneceğini unutmayın. -So the user may read the page, but some graphical components are probably not ready yet. +Yani kullanıcılar sayfayı okuyabilir, fakat bazı grafiksel bileşenler muhtemelen henüz hazır değildir. -There should be "loading" indication in proper places, not-working buttons disabled, to clearly show the user what's ready and what's not. +Kullanıcıya neyin hazır olup, neyin olmadığını göstermek için uygun yerlere "yükleniyor" ifadesi yerleştirilmeli, çalışmayan düğmeler (button) devre dışı bırakılmalıdır. ``` -In practice, `defer` is used for scripts that need the whole DOM and/or their relative execution order is important. And `async` is used for independent scripts, like counters or ads. And their relative execution order does not matter. +Pratikte, `defer` tüm DOM'a ihtiyaç duyan ve/ya da göreli yürütme sırası önemli olan scriptler için kullanılır. Ve `async` sayaçlar, reklamlar gibi bağımsız scriptler için kullanılır. Ve onlarda sıra önemli değildir. From 4982b7cf52cba6579fc4e71a9c532bd554b2e3b1 Mon Sep 17 00:00:00 2001 From: enes <139135923+cys27@users.noreply.github.com> Date: Mon, 20 May 2024 12:23:52 +0300 Subject: [PATCH 2/3] Bezier curve --- 7-animation/1-bezier-curve/article.md | 176 +++++++++++++------------- 1 file changed, 88 insertions(+), 88 deletions(-) diff --git a/7-animation/1-bezier-curve/article.md b/7-animation/1-bezier-curve/article.md index 10a047bf2..5431d1011 100644 --- a/7-animation/1-bezier-curve/article.md +++ b/7-animation/1-bezier-curve/article.md @@ -1,201 +1,201 @@ -# Bezier curve +# Bezier Eğrisi -Bezier curves are used in computer graphics to draw shapes, for CSS animation and in many other places. +Bezier eğrileri, bilgisayar grafiklerinde şekiller çizmek için, CSS animasyonları için ve birçok diğer yerlerde kullanılır. -They are a very simple thing, worth to study once and then feel comfortable in the world of vector graphics and advanced animations. +Çok basit bir konudur, bir kez çalıştıktan sonra vektör grafikleri ve gelişmiş animasyonlar dünyasında kendinizi rahat hissedebilirsiniz. -## Control points +## Kontrol Noktaları -A [bezier curve](https://en.wikipedia.org/wiki/B%C3%A9zier_curve) is defined by control points. +Bir [bezier eğrisi](https://tr.wikipedia.org/wiki/B%C3%A9zier_e%C4%9Frisi) kontrol noktaları ile tanımlanır. -There may be 2, 3, 4 or more. +2, 3, 4 (adet) veya daha fazlası -For instance, two points curve: +Örneğin, iki noktalı eğri: ![](bezier2.svg) -Three points curve: +Üç noktalı eğri: ![](bezier3.svg) -Four points curve: +Dört noktalı eğri: ![](bezier4.svg) -If you look closely at these curves, you can immediately notice: +Eğrilere yakından bakarsınız, hemen farkedebilirsiniz: -1. **Points are not always on curve.** That's perfectly normal, later we'll see how the curve is built. -2. **The curve order equals the number of points minus one**. -For two points we have a linear curve (that's a straight line), for three points -- quadratic curve (parabolic), for four points -- cubic curve. -3. **A curve is always inside the [convex hull](https://en.wikipedia.org/wiki/Convex_hull) of control points:** +1. **Noktalar her zaman eğri üzerinde değil.** Bu tamamen normal, daha sonra eğrinin nasıl oluşturulduğunu göreceğiz. +2. **Eğri derecesi, nokta sayısından bir eksiğine eşittir**. +İki nokta için doğrusal bir eğriye sahibiz (düz bir çizgi), üç nokta için -- kuadratik eğri (parabolik), dört nokta için -- kübik eğri. +3. **Bir eğri her zaman kontrol noktalarının [dışbükey gövdesi](https://en.wikipedia.org/wiki/Convex_hull)nin içindedir**: ![](bezier4-e.svg) ![](bezier3-e.svg) -Because of that last property, in computer graphics it's possible to optimize intersection tests. If convex hulls do not intersect, then curves do not either. So checking for the convex hulls intersection first can give a very fast "no intersection" result. Checking the intersection or convex hulls is much easier, because they are rectangles, triangles and so on (see the picture above), much simpler figures than the curve. +Bu son özellik sayesinde, bilgisayar grafiklerinde kesişim testlerini optimize etmek mümkündür. Dışbükey gövdeler (convex hulls) kesişmiyorsa, eğrilerde kesişmez. Dolayısıyla, dışbükey gövde kesişimini kontrol etmek "kesişim yok" sonucunu çok hızlı bir şekilde verebilir. Kesişimi veya dışbükey gövdeleri kontrol etmek çok daha kolaydır, çünkü bunlar dikdörtgenler, üçgenler ve benzerleridir (yukarıdaki görsele bakın), eğriden çok daha basit şekillerdir. -**The main value of Bezier curves for drawing -- by moving the points the curve is changing *in intuitively obvious way*.** +**Bezier eğrilerinin ana önemi -- kontrol noktaları hareket ettirildiğinde *sezgisel olarak bariz bir şekilde* eğri değişiyor.** -Try to move control points using a mouse in the example below: +Aşağıdaki örnekte kontrol noktalarını fareyi (mouse) kullanarak hareket ettirmeyi deneyin: [iframe src="demo.svg?nocpath=1&p=0,0,0.5,0,0.5,1,1,1" height=370] -**As you can notice, the curve stretches along the tangential lines 1 -> 2 and 3 -> 4.** +**Fark edebileceğiniz gibi, eğri 1 -> 2 ve 3 -> 4 teğet çizgileri boyunca uzanmaktadır.** -After some practice it becomes obvious how to place points to get the needed curve. And by connecting several curves we can get practically anything. +Biraz pratik yaptıktan sonra, istenen eğriyi elde etmek için noktaların nasıl konumlandırılacağı belli olur. Ve birkaç eğriyi birleştirerek, pratik olarak her şeyi elde edebiliriz. -Here are some examples: +İşte bazı örnekler: ![](bezier-car.svg) ![](bezier-letter.svg) ![](bezier-vase.svg) -## De Casteljau's algorithm +## De Casteljau'nun Algoritması -There's a mathematical formula for Bezier curves, but let's cover it a bit later, because -[De Casteljau's algorithm](https://en.wikipedia.org/wiki/De_Casteljau%27s_algorithm) it is identical to the mathematical definition and visually shows how it is constructed. +Bezier eğrileri için matematiksel bir formül vardır, fakat bunu daha sonra ele alalım, çünkü +[De Casteljau'nun algoritması](https://en.wikipedia.org/wiki/De_Casteljau%27s_algorithm), matematiksel tanımla aynıdır ve nasıl oluşturulduğunu görsel olarak gösterir. -First let's see the 3-points example. +İlk olarak 3 noktalı örneğe bakalım. -Here's the demo, and the explanation follow. +İşte demo ve açıklamaları aşağıda. -Control points (1,2 and 3) can be moved by the mouse. Press the "play" button to run it. +Kontrol noktaları (1,2 ve 3) fare ile hareket ettirilebilir. "play" butonuna basarak çalıştırın. [iframe src="demo.svg?p=0,0,0.5,1,1,0&animate=1" height=370] -**De Casteljau's algorithm of building the 3-point bezier curve:** +**De Casteljau'nun 3-noktalı bezier eğrisi oluşturma algoritması:** -1. Draw control points. In the demo above they are labeled: `1`, `2`, `3`. -2. Build segments between control points 1 -> 2 -> 3. In the demo above they are brown. -3. The parameter `t` moves from `0` to `1`. In the example above the step `0.05` is used: the loop goes over `0, 0.05, 0.1, 0.15, ... 0.95, 1`. +1. Kontrol noktaları çizme. Yukarıdaki örnekte bunlar `1`, `2`, `3` olarak adlandırılmıştır. +2. 1 -> 2 -> 3 kontrol noktaları arasında parçalar oluşturun. Yukarıdaki demoda bunlar kahverengidir. +3. `t` parametresi, `0`'dan `1` gider. Yukarıdaki örnekte `0.05` kademe kullanılmıştır: döngü `0, 0.05, 0.1, 0.15, ... 0.95, 1` şeklinde ilerler. - For each of these values of `t`: + Bu `t` değerlerinin her biri için: - - On each brown segment we take a point located on the distance proportional to `t` from its beginning. As there are two segments, we have two points. + - Her kahverengi parça üzerinde, parçanın başlangıcından `t` ile orantılı uzaklıkta bulunan bir nokta alıyoruz. İki parça olduğundan dolayı iki noktamız var. - For instance, for `t=0` -- both points will be at the beginning of segments, and for `t=0.25` -- on the 25% of segment length from the beginning, for `t=0.5` -- 50%(the middle), for `t=1` -- in the end of segments. + Örneğin, `t=0` için -- her iki nokta da parçaların başlangıcında olacaktır, ve `t=0.25` için -- başlangıcından itibaren parça uzunluğunun 25%'inde, `t=0.5` için -- 50% (ortası), `t=1` için -- parçanın sonunda. - - Connect the points. On the picture below the connecting segment is painted blue. + - Noktaları birleştirin. Aşağıdaki görselde bağlantı parçası maviye boyanmıştır. -| For `t=0.25` | For `t=0.5` | +| `t=0.25` için | `t=0.5` için | | ------------------------ | ---------------------- | | ![](bezier3-draw1.svg) | ![](bezier3-draw2.svg) | -4. Now in the blue segment take a point on the distance proportional to the same value of `t`. That is, for `t=0.25` (the left picture) we have a point at the end of the left quarter of the segment, and for `t=0.5` (the right picture) -- in the middle of the segment. On pictures above that point is red. +4. Şimdi mavi parçada, aynı `t` değeri ile orantılı uzaklıkta bir nokta alın. Yani, `t=0.25` için (soldaki görsel) parçanın sol çeyreğinin sonunda bir nokta, ve `t=0.5` için (sağdaki görsel) -- parçanın orta noktasında. Yukarıdaki görsellerde bu nokta kırmızıdır. -5. As `t` runs from `0` to `1`, every value of `t` adds a point to the curve. The set of such points forms the Bezier curve. It's red and parabolic on the pictures above. +5. `t`, `0`'dan `1`'e doğru ilerlerken, `t`'nin her değeri eğriye bir nokta ekler. Bu noktaların kümesi Bezier eğrisini oluşturur. Yukarıdaki görsellerde kırmızı ve paraboliktir. -That was a process for 3 points. But the same is for 4 points. +Bu işlemler 3 nokta içindi. Fakat 4 nokta içinde geçerlidir. -The demo for 4 points (points can be moved by a mouse): +4 nokta için demo (noktalar fare ile hareket ettirilebilir): [iframe src="demo.svg?p=0,0,0.5,0,0.5,1,1,1&animate=1" height=370] -The algorithm for 4 points: +4 nokta için algoritma: -- Connect control points by segments: 1 -> 2, 2 -> 3, 3 -> 4. There will be 3 brown segments. -- For each `t` in the interval from `0` to `1`: - - We take points on these segments on the distance proportional to `t` from the beginning. These points are connected, so that we have two green segments. - - On these segments we take points proportional to `t`. We get one blue segment. - - On the blue segment we take a point proportional to `t`. On the example above it's red. -- These points together form the curve. +- Kontrol noktalarını parçalarla bağlayın: 1 -> 2, 2 -> 3, 3 -> 4. 3 tane kahverengi parça olacak. +- `0` ile `1` aralığındaki her `t` için: + - Bu parçalar üzerinde başlangıçtan `t` ile orantılı uzaklıkta noktalar alıyoruz. Bu noktalar birbirlerine bağlandığında iki (adet) yeşil parçamız olur. + - Bu parçalar üzerinde `t` ile orantılı noktalar alıyoruz. Bir mavi parça elde ederiz. + - Mavi parça üzerinde `t` ile orantılı bir nokta alıyoruz. Yukarıdaki örnekte kırmızı. +- Bu noktalar birlikte eğriyi oluşturur. -The algorithm is recursive and can be generalized for any number of control points. +Algoritma tekrarlamalı olup herhangi bir sayıda kontrol noktası için genelleştirilebilir. -Given N of control points: +N tane kontrol noktası verildiğinde: -1. We connect them to get initially N-1 segments. -2. Then for each `t` from `0` to `1`, we take a point on each segment on the distance proportional to `t` and connect them. There will be N-2 segments. -3. Repeat step 2 until there is only one point. +1. N-1 tane parça elde etmek için onları birleştiriyoruz. +2. Sonra `0` ile `1` aralığındaki her `t` için, her parça üzerinde `t` ile orantılı uzaklıkta bir nokta alıyoruz ve onları birleşiriyoruz. N-2 parça olacak. +3. Yalnızca bir nokta kalana kadar 2. adımı tekrarlayın. -These points make the curve. +Bu noktalar eğriyi oluşturur. ```online -**Run and pause examples to clearly see the segments and how the curve is built.** +**Parçaların ve eğrinin nasıl oluşturulduğunu açıkça görmek için örnekleri çalıştırın ve duraklatın.** ``` -A curve that looks like `y=1/t`: +`y=1/t`'ye benzeyen bir eğri: [iframe src="demo.svg?p=0,0,0,0.75,0.25,1,1,1&animate=1" height=370] -Zig-zag control points also work fine: +Zig-zag kontrol noktaları da iyi/sorunsuz çalışır: [iframe src="demo.svg?p=0,0,1,0.5,0,0.5,1,1&animate=1" height=370] -Making a loop is possible: +Bir ilmek/düğüm oluşturmak mümkündür: [iframe src="demo.svg?p=0,0,1,0.5,0,1,0.5,0&animate=1" height=370] -A non-smooth Bezier curve (yeah, that's possible too): +Düzgün olmayan bir Bezier eğrisi (evet, bu da mümkün): [iframe src="demo.svg?p=0,0,1,1,0,1,1,0&animate=1" height=370] ```online -If there's something unclear in the algorithm description, please look at the live examples above to see how -the curve is built. +Algoritma açıklamasında net olamayan bir şey varsa, eğrinin nasıl oluşturulduğunu görmek için lütfen yukarıdaki canlı örneklere bakın. ``` -As the algorithm is recursive, we can build Bezier curves of any order, that is: using 5, 6 or more control points. But in practice many points are less useful. Usually we take 2-3 points, and for complex lines glue several curves together. That's simpler to develop and calculate. -```smart header="How to draw a curve *through* given points?" -To specify a Bezier curve, control points are used. As we can see, they are not on the curve, except the first and the last ones. +Algoritma tekrarlamalı olduğundan, herhangi bir düzende Bezier eğrileri oluşturabiliriz, yani: 5, 6 veya daha fazla kontrol noktası kullanarak. Ama pratikte çok sayıda nokta daha az kullanışlıdır. Genellikle 2-3 nokta alırız ve karmaşık çizgiler için birkaç eğriyi birbirleriyle birleştiririz. Bunu geliştirmek ve hesaplamak daha basittir. -Sometimes we have another task: to draw a curve *through several points*, so that all of them are on a single smooth curve. That task is called [interpolation](https://en.wikipedia.org/wiki/Interpolation), and here we don't cover it. +```smart header="Verilen noktalar üzerinden bir eğri nasıl çizilir?" +Bir Bezier eğrisi oluşturmak için kontrol noktaları kullanılır. Gördüğümüz gibi, ilki ve sonuncusu hariç eğri üzerinde değiller. -There are mathematical formulas for such curves, for instance [Lagrange polynomial](https://en.wikipedia.org/wiki/Lagrange_polynomial). In computer graphics [spline interpolation](https://en.wikipedia.org/wiki/Spline_interpolation) is often used to build smooth curves that connect many points. +Bazen başka bir amacımız daha vardır: *birkaç nokta boyunca* bir eğri çizmek, böylece hepsi tek bir eğri üzerinde olur. Bu işleme [intepolasyon](https://tr.wikipedia.org/wiki/%C4%B0nterpolasyon) denir, burada bu konuyu ele almayacağız. + +Bu tür eğriler için matematiksel formüller vardır, örneğin [Lagrange polinomu](https://en.wikipedia.org/wiki/Lagrange_polynomial). Bilgisayar grafiklerinde [spline interpolasyonu](https://en.wikipedia.org/wiki/Spline_interpolation) genellikle birçok noktayı birbirine bağlayan düzgün eğriler oluşturmak için kullanılır. ``` -## Maths +## Matematik -A Bezier curve can be described using a mathematical formula. +Bir Bezier eğrisi matematiksel bir formül kullanılarak tanımlanabilir. -As we saw -- there's actually no need to know it, most people just draw the curve by moving points with a mouse. But if you're into maths -- here it is. +Gördüğümüz gibi -- aslında bunu bilmeye gerek yok, çoğu insan sadece bir fare ile noktaları hareket ettirerek eğri çizer. Ama matematikle ilgiliyseniz -- işte burada. -Given the coordinates of control points Pi: the first control point has coordinates P1 = (x1, y1), the second: P2 = (x2, y2), and so on, the curve coordinates are described by the equation that depends on the parameter `t` from the segment `[0,1]`. +Pi kontrol noktalarının koordinatları göz önüne alındığında: birinci kontrol noktasının koordinatları P1 = (x1,y1), ikincisinin: P2 = (x2, y2), ve benzer şekilde, eğri koordinatları `[0,1]` aralığındaki `t` parametresine bağlı olan denklemle tanımlanır. -- The formula for a 2-points curve: +- 2 noktalı eğri için formül: P = (1-t)P1 + tP2 -- For 3 control points: +- 3 kontrol noktalı için: P = (1−t)2P1 + 2(1−t)tP2 + t2P3 -- For 4 control points: +- 4 kontrol noktalı için: P = (1−t)3P1 + 3(1−t)2tP2 +3(1−t)t2P3 + t3P4 -These are vector equations. In other words, we can put `x` and `y` instead of `P` to get corresponding coordinates. +Bunlar vektör denklemleridir. Başka bir deyişle, karşılık gelen koordinatları elde etmek için `P` yerine `x` ve `y`'yi koyabiliriz. -For instance, the 3-point curve is formed by points `(x,y)` calculated as: +Örneğin, 3 noktalı eğri şu şekilde hesaplanan `(x,y)` noktaları tarafından oluşturulur: - x = (1−t)2x1 + 2(1−t)tx2 + t2x3 - y = (1−t)2y1 + 2(1−t)ty2 + t2y3 -Instead of x1, y1, x2, y2, x3, y3 we should put coordinates of 3 control points, and then as `t` moves from `0` to `1`, for each value of `t` we'll have `(x,y)` of the curve. +x1, y1, x2, y2, x3, y3 yerine 3 kontol noktasının koordinatlarını koymalıyız, sonrasında `t`, `0`'dan `1`'e gittikçe, `t`'nin her bir değeri için `(x,y)` değerlerini elde ederiz. -For instance, if control points are `(0,0)`, `(0.5, 1)` and `(1, 0)`, the equations become: +Örneğin, kontrol noktaları `(0,0)`, `(0.5, 1)` ve `(1, 0)` ise, denklemler şöyle olur: - x = (1−t)2 * 0 + 2(1−t)t * 0.5 + t2 * 1 = (1-t)t + t2 = t - y = (1−t)2 * 0 + 2(1−t)t * 1 + t2 * 0 = 2(1-t)t = –t2 + 2t -Now as `t` runs from `0` to `1`, the set of values `(x,y)` for each `t` forms the curve for such control points. +Şimdi `t`, `0`'dan `1`'e gittikçe, her `t` için `(x,y)` değerleri kümesi bu kontrol noktaları için eğriyi oluşturur. -## Summary +## Özet -Bezier curves are defined by their control points. +Bezier eğrileri kontrol noktaları ile tanımlanır. -We saw two definitions of Bezier curves: +Bezier eğrilerinin iki tanımını gördük: -1. Using a drawing process: De Casteljau's algorithm. -2. Using a mathematical formulas. +1. Bir çizim işlemi kullanmak: De Casteljau's algoritması. +2. Matematiksel formüller kullanmak. -Good properties of Bezier curves: +Bezier eğrilerinin iyi özellikleri: -- We can draw smooth lines with a mouse by moving control points. -- Complex shapes can be made of several Bezier curves. +- Kontrol noktalarını fare ile hareket ettirerek düzgün eğriler çizebiliriz. +- Karmaşık şekilleri birkaç Bezier eğrisi ile oluşturabiliriz. -Usage: +Kullanım: -- In computer graphics, modeling, vector graphic editors. Fonts are described by Bezier curves. -- In web development -- for graphics on Canvas and in the SVG format. By the way, "live" examples above are written in SVG. They are actually a single SVG document that is given different points as parameters. You can open it in a separate window and see the source: [demo.svg](demo.svg?p=0,0,1,0.5,0,0.5,1,1&animate=1). -- In CSS animation to describe the path and speed of animation. +- Bilgisayar grafiklerinde, modelleme ve vektör grafik editörlerinde. Yazı tipleri Bezier eğrileri ile tanımlanır. +- Web geliştirmede -- Canvas ve SVG formatında grafikler için. Bu arada, yukarıdaki "canlı" örnekler SVG'de yazılmıştır. Bunlar aslında parametre olarak farklı noktalar verilen tek bir SVG belgesidir. Bunu ayrı bir pencerede açabilir ve kaynağı görebilirsiniz: [demo.svg](demo.svg?p=0,0,1,0.5,0,0.5,1,1&animate=1). +- CSS animasyonunda animasyonun yolunu ve hızını tanımlamak için kullanılır. From 5d8fe7540123a048c83aaae3bef9042eab6cc8a6 Mon Sep 17 00:00:00 2001 From: enes <139135923+cys27@users.noreply.github.com> Date: Thu, 13 Jun 2024 18:35:00 +0300 Subject: [PATCH 3/3] Update article.md --- 2-ui/5-loading/02-script-async-defer/article.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/2-ui/5-loading/02-script-async-defer/article.md b/2-ui/5-loading/02-script-async-defer/article.md index deda1478e..7044796cb 100644 --- a/2-ui/5-loading/02-script-async-defer/article.md +++ b/2-ui/5-loading/02-script-async-defer/article.md @@ -1,9 +1,9 @@ # Komut Dosyaları (Scripts): async, defer -Modern websitelerinde, genellikle komut dosyaları (scripts), HTML kodlarından daha yoğunluktadır: onların indirme boyutu daha fazla ve işlem süreleri daha uzundur. +Modern websitelerinde, genellikle script'ler HTML'den daha baskındır: script'lerin dosya/indirme boyutları büyüktür ve işlenme süreleri uzundur. -Tarayıcı HTML'i yüklediği sırada `` kısmına denk geldiğinde, DOM'u oluşturmaya devam edemeyebilir. Tarayıcı böyle bir durumda script'i çalıştırmak zorundadır. Benzer durum `` şeklinde dışarıdan aktarılan script'ler içinde geçerlidir: tarayıcı, script indirilene kadar bekleyecek, onu çalıştıracak ve sonrasında sayfanın geri kalanını işleyecektir. +Tarayıcı, HTML'i yüklerken `` etiketiyle karşılaştığında, DOM'u oluşturmaya devam edemez. Böyle bir durumda script'i çalıştırmak zorundadır. Benzer durum `` şeklinde dışarıdan aktarılan script'ler içinde geçerlidir: Tarayıcı script indirilene kadar bekleyecek, sonrasında onu çalıştıracak ve en sonunda sayfanın geri kalananı işleyecektir. Bu durum iki önemli soruna yol açar: @@ -180,7 +180,7 @@ loadScript("/article/script-async-defer/small.js"); `async` ve `defer` niteliklerinin ortak bir özelliği vardır: sayfanın yüklenmesini (render) engellemezler. Böylece kullanıcı sayfa içeriğini okuyabilir ve sayfayla hemen etkileşime geçebilir. -Ama onların arasında temel farklılıklar var: +Ancak aralarında temel farklılıklar vardır: | | Sıra | `DOMContentLoaded` | |---------|---------|---------|