<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
  <channel>
    <title>Galdoon</title>
    <link>https://galdoon.codeberg.page/en/</link>
    <description>Recent content on Galdoon</description>
    <generator>Hugo -- gohugo.io</generator>
    <language>en</language>
    <copyright>Galdoon  © 2025 is licensed under CC BY-NC 4.0. To view a copy of this license, visit https://creativecommons.org/licenses/by-nc/4.0/</copyright>
    <lastBuildDate>Fri, 12 Sep 2025 13:02:04 -0300</lastBuildDate>
    <atom:link href="https://galdoon.codeberg.page/en/index.xml" rel="self" type="application/rss+xml" />
    <item>
      <title>How to program an isometric (2.5D) game</title>
      <link>https://galdoon.codeberg.page/en/posts/isometrico-tutorial/</link>
      <pubDate>Fri, 12 Sep 2025 13:02:04 -0300</pubDate>
      <guid>https://galdoon.codeberg.page/en/posts/isometrico-tutorial/</guid>
      <description>&lt;h2 id=&#34;tldr&#34;&gt;TL;DR&lt;/h2&gt;
&lt;p&gt;Here’s the JavaScript function to convert a three-dimensional point into a two-dimensional one:&lt;/p&gt;






&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-javascript&#34; data-lang=&#34;javascript&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#66d9ef&#34;&gt;function&lt;/span&gt; &lt;span style=&#34;color:#a6e22e&#34;&gt;to_isometric&lt;/span&gt;(&lt;span style=&#34;color:#a6e22e&#34;&gt;point&lt;/span&gt;) {
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;  &lt;span style=&#34;color:#66d9ef&#34;&gt;const&lt;/span&gt; &lt;span style=&#34;color:#a6e22e&#34;&gt;angle&lt;/span&gt; &lt;span style=&#34;color:#f92672&#34;&gt;=&lt;/span&gt; Math.&lt;span style=&#34;color:#a6e22e&#34;&gt;PI&lt;/span&gt; &lt;span style=&#34;color:#f92672&#34;&gt;/&lt;/span&gt; &lt;span style=&#34;color:#ae81ff&#34;&gt;6&lt;/span&gt;; &lt;span style=&#34;color:#75715e&#34;&gt;// 30°
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#75715e&#34;&gt;&lt;/span&gt;  &lt;span style=&#34;color:#66d9ef&#34;&gt;const&lt;/span&gt; &lt;span style=&#34;color:#a6e22e&#34;&gt;cos&lt;/span&gt; &lt;span style=&#34;color:#f92672&#34;&gt;=&lt;/span&gt; Math.&lt;span style=&#34;color:#a6e22e&#34;&gt;cos&lt;/span&gt;(&lt;span style=&#34;color:#a6e22e&#34;&gt;angle&lt;/span&gt;); &lt;span style=&#34;color:#75715e&#34;&gt;// ≈ 0.866
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#75715e&#34;&gt;&lt;/span&gt;  &lt;span style=&#34;color:#66d9ef&#34;&gt;const&lt;/span&gt; &lt;span style=&#34;color:#a6e22e&#34;&gt;sin&lt;/span&gt; &lt;span style=&#34;color:#f92672&#34;&gt;=&lt;/span&gt; Math.&lt;span style=&#34;color:#a6e22e&#34;&gt;sin&lt;/span&gt;(&lt;span style=&#34;color:#a6e22e&#34;&gt;angle&lt;/span&gt;); &lt;span style=&#34;color:#75715e&#34;&gt;// = 0.5
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#75715e&#34;&gt;&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;  &lt;span style=&#34;color:#66d9ef&#34;&gt;return&lt;/span&gt; {
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;    &lt;span style=&#34;color:#a6e22e&#34;&gt;x&lt;/span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;:&lt;/span&gt; (&lt;span style=&#34;color:#a6e22e&#34;&gt;point&lt;/span&gt;.&lt;span style=&#34;color:#a6e22e&#34;&gt;x&lt;/span&gt; &lt;span style=&#34;color:#f92672&#34;&gt;-&lt;/span&gt; &lt;span style=&#34;color:#a6e22e&#34;&gt;point&lt;/span&gt;.&lt;span style=&#34;color:#a6e22e&#34;&gt;y&lt;/span&gt;) &lt;span style=&#34;color:#f92672&#34;&gt;*&lt;/span&gt; &lt;span style=&#34;color:#a6e22e&#34;&gt;cos&lt;/span&gt;,
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;    &lt;span style=&#34;color:#a6e22e&#34;&gt;y&lt;/span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;:&lt;/span&gt; (&lt;span style=&#34;color:#a6e22e&#34;&gt;point&lt;/span&gt;.&lt;span style=&#34;color:#a6e22e&#34;&gt;x&lt;/span&gt; &lt;span style=&#34;color:#f92672&#34;&gt;+&lt;/span&gt; &lt;span style=&#34;color:#a6e22e&#34;&gt;point&lt;/span&gt;.&lt;span style=&#34;color:#a6e22e&#34;&gt;y&lt;/span&gt;) &lt;span style=&#34;color:#f92672&#34;&gt;*&lt;/span&gt; &lt;span style=&#34;color:#a6e22e&#34;&gt;sin&lt;/span&gt; &lt;span style=&#34;color:#f92672&#34;&gt;-&lt;/span&gt; &lt;span style=&#34;color:#a6e22e&#34;&gt;point&lt;/span&gt;.&lt;span style=&#34;color:#a6e22e&#34;&gt;z&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;  };
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;}&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;If you can’t convert this into the programming language you’re using, you don’t deserve to have an isometric design in your game.&lt;/p&gt;
&lt;h2 id=&#34;more-detailed-explanation&#34;&gt;More detailed explanation&lt;/h2&gt;
&lt;p&gt;Isometric graphics were and still are common in games. This style offers a kind of blend between 2D and 3D that creates a unique look.&lt;/p&gt;</description>
      <content:encoded><![CDATA[<h2 id="tldr">TL;DR</h2>
<p>Here’s the JavaScript function to convert a three-dimensional point into a two-dimensional one:</p>






<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#66d9ef">function</span> <span style="color:#a6e22e">to_isometric</span>(<span style="color:#a6e22e">point</span>) {
</span></span><span style="display:flex;"><span>  <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">angle</span> <span style="color:#f92672">=</span> Math.<span style="color:#a6e22e">PI</span> <span style="color:#f92672">/</span> <span style="color:#ae81ff">6</span>; <span style="color:#75715e">// 30°
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>  <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">cos</span> <span style="color:#f92672">=</span> Math.<span style="color:#a6e22e">cos</span>(<span style="color:#a6e22e">angle</span>); <span style="color:#75715e">// ≈ 0.866
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>  <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">sin</span> <span style="color:#f92672">=</span> Math.<span style="color:#a6e22e">sin</span>(<span style="color:#a6e22e">angle</span>); <span style="color:#75715e">// = 0.5
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>
</span></span><span style="display:flex;"><span>  <span style="color:#66d9ef">return</span> {
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">x</span><span style="color:#f92672">:</span> (<span style="color:#a6e22e">point</span>.<span style="color:#a6e22e">x</span> <span style="color:#f92672">-</span> <span style="color:#a6e22e">point</span>.<span style="color:#a6e22e">y</span>) <span style="color:#f92672">*</span> <span style="color:#a6e22e">cos</span>,
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">y</span><span style="color:#f92672">:</span> (<span style="color:#a6e22e">point</span>.<span style="color:#a6e22e">x</span> <span style="color:#f92672">+</span> <span style="color:#a6e22e">point</span>.<span style="color:#a6e22e">y</span>) <span style="color:#f92672">*</span> <span style="color:#a6e22e">sin</span> <span style="color:#f92672">-</span> <span style="color:#a6e22e">point</span>.<span style="color:#a6e22e">z</span>
</span></span><span style="display:flex;"><span>  };
</span></span><span style="display:flex;"><span>}</span></span></code></pre></div>
<p>If you can’t convert this into the programming language you’re using, you don’t deserve to have an isometric design in your game.</p>
<h2 id="more-detailed-explanation">More detailed explanation</h2>
<p>Isometric graphics were and still are common in games. This style offers a kind of blend between 2D and 3D that creates a unique look.</p>
<p><img src="/pt/posts/isometrico-tutorial/simscity.jpg" alt="The game SimCity is an example of one that uses the isometric art style."></p>
<p><em>The game SimCity is an example of one that uses the isometric art style.</em></p>
<p>Isometric drawing works through three lines separated by 60º from each other, where each represents a dimension. These lines allow you to convert a three-dimensional point into a two-dimensional one using orthographic projection:</p>
<p><img src="/pt/posts/isometrico-tutorial/iso_axis.png" alt="The three lines of isometric drawing"></p>
<h3 id="the-math-behind-it">The math behind it</h3>
<p><img src="/pt/posts/isometrico-tutorial/geogebra-axis.png" alt="The three lines"></p>
<p>In isometric drawing, as mentioned, we have three lines separated by 60º from each other. However, since the Z axis is completely vertical, let’s focus, for now, only on X and Y:</p>
<p><img src="/pt/posts/isometrico-tutorial/geogebra-axis-xy.png" alt="X and Y axes"></p>
<p>As you can see, the X and Y axes are at an angle of 30º <em>relative to the real X axis</em> (in the previous case they were at angles of 60º from each other). So the first thing to do is to find the points on each line according to the distance from the origin — which can be done with sine and cosine. For this, let’s suppose a three-dimensional point <em>T</em> = (3, 5, 0) (the Z dimension won’t be considered for now), and we want to find a two-dimensional point <em>A</em> (on the X line) and <em>B</em> (on the Y line):</p>
<span class="katex-display"><span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML" display="block"><semantics><mrow><mover accent="true"><mi>T</mi><mo>⃗</mo></mover><mo>=</mo><mrow><mo fence="true">(</mo><mtable rowspacing="0.16em" columnalign="center" columnspacing="1em"><mtr><mtd><mstyle scriptlevel="0" displaystyle="false"><mn>3</mn></mstyle></mtd></mtr><mtr><mtd><mstyle scriptlevel="0" displaystyle="false"><mn>5</mn></mstyle></mtd></mtr><mtr><mtd><mstyle scriptlevel="0" displaystyle="false"><mn>0</mn></mstyle></mtd></mtr></mtable><mo fence="true">)</mo></mrow></mrow><annotation encoding="application/x-tex">
       \vec{T} = \begin{pmatrix} 
              3 \\
              5 \\
              0
       \end{pmatrix}
</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.9663em;"></span><span class="mord accent"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.9663em;"><span style="top:-3em;"><span class="pstrut" style="height:3em;"></span><span class="mord mathnormal" style="margin-right:0.13889em;">T</span></span><span style="top:-3.2523em;"><span class="pstrut" style="height:3em;"></span><span class="accent-body" style="left:-0.1522em;"><span class="overlay" style="height:0.714em;width:0.471em;"><svg xmlns="http://www.w3.org/2000/svg" width="0.471em" height="0.714em" style="width:0.471em" viewBox="0 0 471 714" preserveAspectRatio="xMinYMin"><path d="M377 20c0-5.333 1.833-10 5.5-14S391 0 397 0c4.667 0 8.667 1.667 12 5
3.333 2.667 6.667 9 10 19 6.667 24.667 20.333 43.667 41 57 7.333 4.667 11
10.667 11 18 0 6-1 10-3 12s-6.667 5-14 9c-28.667 14.667-53.667 35.667-75 63
-1.333 1.333-3.167 3.5-5.5 6.5s-4 4.833-5 5.5c-1 .667-2.5 1.333-4.5 2s-4.333 1
-7 1c-4.667 0-9.167-1.833-13.5-5.5S337 184 337 178c0-12.667 15.667-32.333 47-59
H213l-171-1c-8.667-6-13-12.333-13-19 0-4.667 4.333-11.333 13-20h359
c-16-25.333-24-45-24-59z"/></svg></span></span></span></span></span></span></span><span class="mspace" style="margin-right:0.2778em;"></span><span class="mrel">=</span><span class="mspace" style="margin-right:0.2778em;"></span></span><span class="base"><span class="strut" style="height:3.6em;vertical-align:-1.55em;"></span><span class="minner"><span class="mopen"><span class="delimsizing mult"><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist" style="height:2.05em;"><span style="top:-4.05em;"><span class="pstrut" style="height:5.6em;"></span><span style="width:0.875em;height:3.600em;"><svg xmlns="http://www.w3.org/2000/svg" width="0.875em" height="3.600em" viewBox="0 0 875 3600"><path d="M863,9c0,-2,-2,-5,-6,-9c0,0,-17,0,-17,0c-12.7,0,-19.3,0.3,-20,1
c-5.3,5.3,-10.3,11,-15,17c-242.7,294.7,-395.3,682,-458,1162c-21.3,163.3,-33.3,349,
-36,557 l0,84c0.2,6,0,26,0,60c2,159.3,10,310.7,24,454c53.3,528,210,
949.7,470,1265c4.7,6,9.7,11.7,15,17c0.7,0.7,7,1,19,1c0,0,18,0,18,0c4,-4,6,-7,6,-9
c0,-2.7,-3.3,-8.7,-10,-18c-135.3,-192.7,-235.5,-414.3,-300.5,-665c-65,-250.7,-102.5,
-544.7,-112.5,-882c-2,-104,-3,-167,-3,-189
l0,-92c0,-162.7,5.7,-314,17,-454c20.7,-272,63.7,-513,129,-723c65.3,
-210,155.3,-396.3,270,-559c6.7,-9.3,10,-15.3,10,-18z"/></svg></span></span></span><span class="vlist-s">​</span></span><span class="vlist-r"><span class="vlist" style="height:1.55em;"><span></span></span></span></span></span></span><span class="mord"><span class="mtable"><span class="col-align-c"><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist" style="height:2.05em;"><span style="top:-4.21em;"><span class="pstrut" style="height:3em;"></span><span class="mord"><span class="mord">3</span></span></span><span style="top:-3.01em;"><span class="pstrut" style="height:3em;"></span><span class="mord"><span class="mord">5</span></span></span><span style="top:-1.81em;"><span class="pstrut" style="height:3em;"></span><span class="mord"><span class="mord">0</span></span></span></span><span class="vlist-s">​</span></span><span class="vlist-r"><span class="vlist" style="height:1.55em;"><span></span></span></span></span></span></span></span><span class="mclose"><span class="delimsizing mult"><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist" style="height:2.05em;"><span style="top:-4.05em;"><span class="pstrut" style="height:5.6em;"></span><span style="width:0.875em;height:3.600em;"><svg xmlns="http://www.w3.org/2000/svg" width="0.875em" height="3.600em" viewBox="0 0 875 3600"><path d="M76,0c-16.7,0,-25,3,-25,9c0,2,2,6.3,6,13c21.3,28.7,42.3,60.3,
63,95c96.7,156.7,172.8,332.5,228.5,527.5c55.7,195,92.8,416.5,111.5,664.5
c11.3,139.3,17,290.7,17,454c0,28,1.7,43,3.3,45l0,9
c-3,4,-3.3,16.7,-3.3,38c0,162,-5.7,313.7,-17,455c-18.7,248,-55.8,469.3,-111.5,664
c-55.7,194.7,-131.8,370.3,-228.5,527c-20.7,34.7,-41.7,66.3,-63,95c-2,3.3,-4,7,-6,11
c0,7.3,5.7,11,17,11c0,0,11,0,11,0c9.3,0,14.3,-0.3,15,-1c5.3,-5.3,10.3,-11,15,-17
c242.7,-294.7,395.3,-681.7,458,-1161c21.3,-164.7,33.3,-350.7,36,-558
l0,-144c-2,-159.3,-10,-310.7,-24,-454c-53.3,-528,-210,-949.7,
-470,-1265c-4.7,-6,-9.7,-11.7,-15,-17c-0.7,-0.7,-6.7,-1,-18,-1z"/></svg></span></span></span><span class="vlist-s">​</span></span><span class="vlist-r"><span class="vlist" style="height:1.55em;"><span></span></span></span></span></span></span></span></span></span></span></span><p>Calculating <em>A</em> and <em>B</em>:</p>
<span class="katex-display"><span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML" display="block"><semantics><mrow><mover accent="true"><mi>A</mi><mo>⃗</mo></mover><mo>=</mo><msub><mi>T</mi><mn>1</mn></msub><mrow><mo fence="true">(</mo><mtable rowspacing="0.16em" columnalign="center" columnspacing="1em"><mtr><mtd><mstyle scriptlevel="0" displaystyle="false"><mrow><mi>cos</mi><mo>⁡</mo><msup><mn>30</mn><mo>∘</mo></msup></mrow></mstyle></mtd></mtr><mtr><mtd><mstyle scriptlevel="0" displaystyle="false"><mrow><mi>sin</mi><mo>⁡</mo><msup><mn>30</mn><mo>∘</mo></msup></mrow></mstyle></mtd></mtr></mtable><mo fence="true">)</mo></mrow><mo>∴</mo><mover accent="true"><mi>A</mi><mo>⃗</mo></mover><mo>=</mo><mn>3</mn><mo>⋅</mo><mrow><mo fence="true">(</mo><mtable rowspacing="0.16em" columnalign="center" columnspacing="1em"><mtr><mtd><mstyle scriptlevel="0" displaystyle="false"><mrow><mi>cos</mi><mo>⁡</mo><msup><mn>30</mn><mo>∘</mo></msup></mrow></mstyle></mtd></mtr><mtr><mtd><mstyle scriptlevel="0" displaystyle="false"><mrow><mi>sin</mi><mo>⁡</mo><msup><mn>30</mn><mo>∘</mo></msup></mrow></mstyle></mtd></mtr></mtable><mo fence="true">)</mo></mrow><mo>≈</mo><mn>3</mn><mo>⋅</mo><mrow><mo fence="true">(</mo><mtable rowspacing="0.16em" columnalign="center" columnspacing="1em"><mtr><mtd><mstyle scriptlevel="0" displaystyle="false"><mn>0.87</mn></mstyle></mtd></mtr><mtr><mtd><mstyle scriptlevel="0" displaystyle="false"><mn>0.5</mn></mstyle></mtd></mtr></mtable><mo fence="true">)</mo></mrow><mo>=</mo><menclose notation="box"><mstyle scriptlevel="0" displaystyle="false"><mstyle scriptlevel="0" displaystyle="false"><mstyle scriptlevel="0" displaystyle="true"><mrow><mo fence="true">(</mo><mtable rowspacing="0.16em" columnalign="center" columnspacing="1em"><mtr><mtd><mstyle scriptlevel="0" displaystyle="false"><mn>2.61</mn></mstyle></mtd></mtr><mtr><mtd><mstyle scriptlevel="0" displaystyle="false"><mn>1.5</mn></mstyle></mtd></mtr></mtable><mo fence="true">)</mo></mrow></mstyle></mstyle></mstyle></menclose></mrow><annotation encoding="application/x-tex">
       \vec{A} = T_1 \begin{pmatrix} 
              \cos 30 ^ \circ \\
              \sin 30 ^ \circ
       \end{pmatrix}
       \therefore 
       \vec{A} = 3 \cdot \begin{pmatrix} 
              \cos 30 ^ \circ \\
              \sin 30 ^ \circ
       \end{pmatrix}
       \approx
       3 \cdot \begin{pmatrix} 
              0.87 \\
              0.5
       \end{pmatrix}
       =
       \boxed{
              \begin{pmatrix} 
                     2.61 \\
                     1.5
              \end{pmatrix}
       }
</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.9663em;"></span><span class="mord accent"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.9663em;"><span style="top:-3em;"><span class="pstrut" style="height:3em;"></span><span class="mord mathnormal">A</span></span><span style="top:-3.2523em;"><span class="pstrut" style="height:3em;"></span><span class="accent-body" style="left:-0.0966em;"><span class="overlay" style="height:0.714em;width:0.471em;"><svg xmlns="http://www.w3.org/2000/svg" width="0.471em" height="0.714em" style="width:0.471em" viewBox="0 0 471 714" preserveAspectRatio="xMinYMin"><path d="M377 20c0-5.333 1.833-10 5.5-14S391 0 397 0c4.667 0 8.667 1.667 12 5
3.333 2.667 6.667 9 10 19 6.667 24.667 20.333 43.667 41 57 7.333 4.667 11
10.667 11 18 0 6-1 10-3 12s-6.667 5-14 9c-28.667 14.667-53.667 35.667-75 63
-1.333 1.333-3.167 3.5-5.5 6.5s-4 4.833-5 5.5c-1 .667-2.5 1.333-4.5 2s-4.333 1
-7 1c-4.667 0-9.167-1.833-13.5-5.5S337 184 337 178c0-12.667 15.667-32.333 47-59
H213l-171-1c-8.667-6-13-12.333-13-19 0-4.667 4.333-11.333 13-20h359
c-16-25.333-24-45-24-59z"/></svg></span></span></span></span></span></span></span><span class="mspace" style="margin-right:0.2778em;"></span><span class="mrel">=</span><span class="mspace" style="margin-right:0.2778em;"></span></span><span class="base"><span class="strut" style="height:2.4em;vertical-align:-0.95em;"></span><span class="mord"><span class="mord mathnormal" style="margin-right:0.13889em;">T</span><span class="msupsub"><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist" style="height:0.3011em;"><span style="top:-2.55em;margin-left:-0.1389em;margin-right:0.05em;"><span class="pstrut" style="height:2.7em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mtight">1</span></span></span></span><span class="vlist-s">​</span></span><span class="vlist-r"><span class="vlist" style="height:0.15em;"><span></span></span></span></span></span></span><span class="mspace" style="margin-right:0.1667em;"></span><span class="minner"><span class="mopen delimcenter" style="top:0em;"><span class="delimsizing size3">(</span></span><span class="mord"><span class="mtable"><span class="col-align-c"><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist" style="height:1.45em;"><span style="top:-3.61em;"><span class="pstrut" style="height:3em;"></span><span class="mord"><span class="mop">cos</span><span class="mspace" style="margin-right:0.1667em;"></span><span class="mord">3</span><span class="mord"><span class="mord">0</span><span class="msupsub"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.6741em;"><span style="top:-3.063em;margin-right:0.05em;"><span class="pstrut" style="height:2.7em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mbin mtight">∘</span></span></span></span></span></span></span></span></span></span><span style="top:-2.41em;"><span class="pstrut" style="height:3em;"></span><span class="mord"><span class="mop">sin</span><span class="mspace" style="margin-right:0.1667em;"></span><span class="mord">3</span><span class="mord"><span class="mord">0</span><span class="msupsub"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.6741em;"><span style="top:-3.063em;margin-right:0.05em;"><span class="pstrut" style="height:2.7em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mbin mtight">∘</span></span></span></span></span></span></span></span></span></span></span><span class="vlist-s">​</span></span><span class="vlist-r"><span class="vlist" style="height:0.95em;"><span></span></span></span></span></span></span></span><span class="mclose delimcenter" style="top:0em;"><span class="delimsizing size3">)</span></span></span><span class="mspace" style="margin-right:0.2778em;"></span><span class="mrel amsrm">∴</span><span class="mspace" style="margin-right:0.2778em;"></span></span><span class="base"><span class="strut" style="height:0.9663em;"></span><span class="mord accent"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.9663em;"><span style="top:-3em;"><span class="pstrut" style="height:3em;"></span><span class="mord mathnormal">A</span></span><span style="top:-3.2523em;"><span class="pstrut" style="height:3em;"></span><span class="accent-body" style="left:-0.0966em;"><span class="overlay" style="height:0.714em;width:0.471em;"><svg xmlns="http://www.w3.org/2000/svg" width="0.471em" height="0.714em" style="width:0.471em" viewBox="0 0 471 714" preserveAspectRatio="xMinYMin"><path d="M377 20c0-5.333 1.833-10 5.5-14S391 0 397 0c4.667 0 8.667 1.667 12 5
3.333 2.667 6.667 9 10 19 6.667 24.667 20.333 43.667 41 57 7.333 4.667 11
10.667 11 18 0 6-1 10-3 12s-6.667 5-14 9c-28.667 14.667-53.667 35.667-75 63
-1.333 1.333-3.167 3.5-5.5 6.5s-4 4.833-5 5.5c-1 .667-2.5 1.333-4.5 2s-4.333 1
-7 1c-4.667 0-9.167-1.833-13.5-5.5S337 184 337 178c0-12.667 15.667-32.333 47-59
H213l-171-1c-8.667-6-13-12.333-13-19 0-4.667 4.333-11.333 13-20h359
c-16-25.333-24-45-24-59z"/></svg></span></span></span></span></span></span></span><span class="mspace" style="margin-right:0.2778em;"></span><span class="mrel">=</span><span class="mspace" style="margin-right:0.2778em;"></span></span><span class="base"><span class="strut" style="height:0.6444em;"></span><span class="mord">3</span><span class="mspace" style="margin-right:0.2222em;"></span><span class="mbin">⋅</span><span class="mspace" style="margin-right:0.2222em;"></span></span><span class="base"><span class="strut" style="height:2.4em;vertical-align:-0.95em;"></span><span class="minner"><span class="mopen delimcenter" style="top:0em;"><span class="delimsizing size3">(</span></span><span class="mord"><span class="mtable"><span class="col-align-c"><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist" style="height:1.45em;"><span style="top:-3.61em;"><span class="pstrut" style="height:3em;"></span><span class="mord"><span class="mop">cos</span><span class="mspace" style="margin-right:0.1667em;"></span><span class="mord">3</span><span class="mord"><span class="mord">0</span><span class="msupsub"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.6741em;"><span style="top:-3.063em;margin-right:0.05em;"><span class="pstrut" style="height:2.7em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mbin mtight">∘</span></span></span></span></span></span></span></span></span></span><span style="top:-2.41em;"><span class="pstrut" style="height:3em;"></span><span class="mord"><span class="mop">sin</span><span class="mspace" style="margin-right:0.1667em;"></span><span class="mord">3</span><span class="mord"><span class="mord">0</span><span class="msupsub"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.6741em;"><span style="top:-3.063em;margin-right:0.05em;"><span class="pstrut" style="height:2.7em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mbin mtight">∘</span></span></span></span></span></span></span></span></span></span></span><span class="vlist-s">​</span></span><span class="vlist-r"><span class="vlist" style="height:0.95em;"><span></span></span></span></span></span></span></span><span class="mclose delimcenter" style="top:0em;"><span class="delimsizing size3">)</span></span></span><span class="mspace" style="margin-right:0.2778em;"></span><span class="mrel">≈</span><span class="mspace" style="margin-right:0.2778em;"></span></span><span class="base"><span class="strut" style="height:0.6444em;"></span><span class="mord">3</span><span class="mspace" style="margin-right:0.2222em;"></span><span class="mbin">⋅</span><span class="mspace" style="margin-right:0.2222em;"></span></span><span class="base"><span class="strut" style="height:2.4em;vertical-align:-0.95em;"></span><span class="minner"><span class="mopen delimcenter" style="top:0em;"><span class="delimsizing size3">(</span></span><span class="mord"><span class="mtable"><span class="col-align-c"><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist" style="height:1.45em;"><span style="top:-3.61em;"><span class="pstrut" style="height:3em;"></span><span class="mord"><span class="mord">0.87</span></span></span><span style="top:-2.41em;"><span class="pstrut" style="height:3em;"></span><span class="mord"><span class="mord">0.5</span></span></span></span><span class="vlist-s">​</span></span><span class="vlist-r"><span class="vlist" style="height:0.95em;"><span></span></span></span></span></span></span></span><span class="mclose delimcenter" style="top:0em;"><span class="delimsizing size3">)</span></span></span><span class="mspace" style="margin-right:0.2778em;"></span><span class="mrel">=</span><span class="mspace" style="margin-right:0.2778em;"></span></span><span class="base"><span class="strut" style="height:3.08em;vertical-align:-1.29em;"></span><span class="mord"><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist" style="height:1.79em;"><span style="top:-5.08em;"><span class="pstrut" style="height:5.08em;"></span><span class="boxpad"><span class="mord"><span class="mord"><span class="minner"><span class="mopen delimcenter" style="top:0em;"><span class="delimsizing size3">(</span></span><span class="mord"><span class="mtable"><span class="col-align-c"><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist" style="height:1.45em;"><span style="top:-3.61em;"><span class="pstrut" style="height:3em;"></span><span class="mord"><span class="mord">2.61</span></span></span><span style="top:-2.41em;"><span class="pstrut" style="height:3em;"></span><span class="mord"><span class="mord">1.5</span></span></span></span><span class="vlist-s">​</span></span><span class="vlist-r"><span class="vlist" style="height:0.95em;"><span></span></span></span></span></span></span></span><span class="mclose delimcenter" style="top:0em;"><span class="delimsizing size3">)</span></span></span></span></span></span></span><span style="top:-3.79em;"><span class="pstrut" style="height:5.08em;"></span><span class="stretchy fbox" style="height:3.08em;border-style:solid;border-width:0.04em;"></span></span></span><span class="vlist-s">​</span></span><span class="vlist-r"><span class="vlist" style="height:1.29em;"><span></span></span></span></span></span></span></span></span></span><span class="katex-display"><span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML" display="block"><semantics><mrow><mover accent="true"><mi>B</mi><mo>⃗</mo></mover><mo>=</mo><msub><mi>T</mi><mn>2</mn></msub><mrow><mo fence="true">(</mo><mtable rowspacing="0.16em" columnalign="center" columnspacing="1em"><mtr><mtd><mstyle scriptlevel="0" displaystyle="false"><mrow><mo>−</mo><mi>cos</mi><mo>⁡</mo><msup><mn>30</mn><mo>∘</mo></msup></mrow></mstyle></mtd></mtr><mtr><mtd><mstyle scriptlevel="0" displaystyle="false"><mrow><mi>sin</mi><mo>⁡</mo><msup><mn>30</mn><mo>∘</mo></msup></mrow></mstyle></mtd></mtr></mtable><mo fence="true">)</mo></mrow><mo>∴</mo><mover accent="true"><mi>B</mi><mo>⃗</mo></mover><mo>=</mo><mn>5</mn><mo>⋅</mo><mrow><mo fence="true">(</mo><mtable rowspacing="0.16em" columnalign="center" columnspacing="1em"><mtr><mtd><mstyle scriptlevel="0" displaystyle="false"><mrow><mo>−</mo><mi>cos</mi><mo>⁡</mo><msup><mn>30</mn><mo>∘</mo></msup></mrow></mstyle></mtd></mtr><mtr><mtd><mstyle scriptlevel="0" displaystyle="false"><mrow><mi>sin</mi><mo>⁡</mo><msup><mn>30</mn><mo>∘</mo></msup></mrow></mstyle></mtd></mtr></mtable><mo fence="true">)</mo></mrow><mo>≈</mo><mn>5</mn><mo>⋅</mo><mrow><mo fence="true">(</mo><mtable rowspacing="0.16em" columnalign="center" columnspacing="1em"><mtr><mtd><mstyle scriptlevel="0" displaystyle="false"><mrow><mo>−</mo><mn>0.87</mn></mrow></mstyle></mtd></mtr><mtr><mtd><mstyle scriptlevel="0" displaystyle="false"><mn>0.5</mn></mstyle></mtd></mtr></mtable><mo fence="true">)</mo></mrow><mo>=</mo><menclose notation="box"><mstyle scriptlevel="0" displaystyle="false"><mstyle scriptlevel="0" displaystyle="false"><mstyle scriptlevel="0" displaystyle="true"><mrow><mo fence="true">(</mo><mtable rowspacing="0.16em" columnalign="center" columnspacing="1em"><mtr><mtd><mstyle scriptlevel="0" displaystyle="false"><mrow><mo>−</mo><mn>4.35</mn></mrow></mstyle></mtd></mtr><mtr><mtd><mstyle scriptlevel="0" displaystyle="false"><mn>2.5</mn></mstyle></mtd></mtr></mtable><mo fence="true">)</mo></mrow></mstyle></mstyle></mstyle></menclose></mrow><annotation encoding="application/x-tex">
       \vec{B} = T_2 \begin{pmatrix} 
              -\cos 30 ^ \circ \\
              \sin 30 ^ \circ
       \end{pmatrix}
       \therefore
       \vec{B} = 5 \cdot \begin{pmatrix} 
              -\cos 30 ^ \circ \\
              \sin 30 ^ \circ
       \end{pmatrix}
       \approx
       5 \cdot \begin{pmatrix} 
              -0.87 \\
              0.5
       \end{pmatrix}
       =
       \boxed{
              \begin{pmatrix} 
                     -4.35 \\
                     2.5
              \end{pmatrix}
       }
</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.9663em;"></span><span class="mord accent"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.9663em;"><span style="top:-3em;"><span class="pstrut" style="height:3em;"></span><span class="mord mathnormal" style="margin-right:0.05017em;">B</span></span><span style="top:-3.2523em;"><span class="pstrut" style="height:3em;"></span><span class="accent-body" style="left:-0.1522em;"><span class="overlay" style="height:0.714em;width:0.471em;"><svg xmlns="http://www.w3.org/2000/svg" width="0.471em" height="0.714em" style="width:0.471em" viewBox="0 0 471 714" preserveAspectRatio="xMinYMin"><path d="M377 20c0-5.333 1.833-10 5.5-14S391 0 397 0c4.667 0 8.667 1.667 12 5
3.333 2.667 6.667 9 10 19 6.667 24.667 20.333 43.667 41 57 7.333 4.667 11
10.667 11 18 0 6-1 10-3 12s-6.667 5-14 9c-28.667 14.667-53.667 35.667-75 63
-1.333 1.333-3.167 3.5-5.5 6.5s-4 4.833-5 5.5c-1 .667-2.5 1.333-4.5 2s-4.333 1
-7 1c-4.667 0-9.167-1.833-13.5-5.5S337 184 337 178c0-12.667 15.667-32.333 47-59
H213l-171-1c-8.667-6-13-12.333-13-19 0-4.667 4.333-11.333 13-20h359
c-16-25.333-24-45-24-59z"/></svg></span></span></span></span></span></span></span><span class="mspace" style="margin-right:0.2778em;"></span><span class="mrel">=</span><span class="mspace" style="margin-right:0.2778em;"></span></span><span class="base"><span class="strut" style="height:2.4em;vertical-align:-0.95em;"></span><span class="mord"><span class="mord mathnormal" style="margin-right:0.13889em;">T</span><span class="msupsub"><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist" style="height:0.3011em;"><span style="top:-2.55em;margin-left:-0.1389em;margin-right:0.05em;"><span class="pstrut" style="height:2.7em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mtight">2</span></span></span></span><span class="vlist-s">​</span></span><span class="vlist-r"><span class="vlist" style="height:0.15em;"><span></span></span></span></span></span></span><span class="mspace" style="margin-right:0.1667em;"></span><span class="minner"><span class="mopen delimcenter" style="top:0em;"><span class="delimsizing size3">(</span></span><span class="mord"><span class="mtable"><span class="col-align-c"><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist" style="height:1.45em;"><span style="top:-3.61em;"><span class="pstrut" style="height:3em;"></span><span class="mord"><span class="mord">−</span><span class="mspace" style="margin-right:0.1667em;"></span><span class="mop">cos</span><span class="mspace" style="margin-right:0.1667em;"></span><span class="mord">3</span><span class="mord"><span class="mord">0</span><span class="msupsub"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.6741em;"><span style="top:-3.063em;margin-right:0.05em;"><span class="pstrut" style="height:2.7em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mbin mtight">∘</span></span></span></span></span></span></span></span></span></span><span style="top:-2.41em;"><span class="pstrut" style="height:3em;"></span><span class="mord"><span class="mop">sin</span><span class="mspace" style="margin-right:0.1667em;"></span><span class="mord">3</span><span class="mord"><span class="mord">0</span><span class="msupsub"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.6741em;"><span style="top:-3.063em;margin-right:0.05em;"><span class="pstrut" style="height:2.7em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mbin mtight">∘</span></span></span></span></span></span></span></span></span></span></span><span class="vlist-s">​</span></span><span class="vlist-r"><span class="vlist" style="height:0.95em;"><span></span></span></span></span></span></span></span><span class="mclose delimcenter" style="top:0em;"><span class="delimsizing size3">)</span></span></span><span class="mspace" style="margin-right:0.2778em;"></span><span class="mrel amsrm">∴</span><span class="mspace" style="margin-right:0.2778em;"></span></span><span class="base"><span class="strut" style="height:0.9663em;"></span><span class="mord accent"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.9663em;"><span style="top:-3em;"><span class="pstrut" style="height:3em;"></span><span class="mord mathnormal" style="margin-right:0.05017em;">B</span></span><span style="top:-3.2523em;"><span class="pstrut" style="height:3em;"></span><span class="accent-body" style="left:-0.1522em;"><span class="overlay" style="height:0.714em;width:0.471em;"><svg xmlns="http://www.w3.org/2000/svg" width="0.471em" height="0.714em" style="width:0.471em" viewBox="0 0 471 714" preserveAspectRatio="xMinYMin"><path d="M377 20c0-5.333 1.833-10 5.5-14S391 0 397 0c4.667 0 8.667 1.667 12 5
3.333 2.667 6.667 9 10 19 6.667 24.667 20.333 43.667 41 57 7.333 4.667 11
10.667 11 18 0 6-1 10-3 12s-6.667 5-14 9c-28.667 14.667-53.667 35.667-75 63
-1.333 1.333-3.167 3.5-5.5 6.5s-4 4.833-5 5.5c-1 .667-2.5 1.333-4.5 2s-4.333 1
-7 1c-4.667 0-9.167-1.833-13.5-5.5S337 184 337 178c0-12.667 15.667-32.333 47-59
H213l-171-1c-8.667-6-13-12.333-13-19 0-4.667 4.333-11.333 13-20h359
c-16-25.333-24-45-24-59z"/></svg></span></span></span></span></span></span></span><span class="mspace" style="margin-right:0.2778em;"></span><span class="mrel">=</span><span class="mspace" style="margin-right:0.2778em;"></span></span><span class="base"><span class="strut" style="height:0.6444em;"></span><span class="mord">5</span><span class="mspace" style="margin-right:0.2222em;"></span><span class="mbin">⋅</span><span class="mspace" style="margin-right:0.2222em;"></span></span><span class="base"><span class="strut" style="height:2.4em;vertical-align:-0.95em;"></span><span class="minner"><span class="mopen delimcenter" style="top:0em;"><span class="delimsizing size3">(</span></span><span class="mord"><span class="mtable"><span class="col-align-c"><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist" style="height:1.45em;"><span style="top:-3.61em;"><span class="pstrut" style="height:3em;"></span><span class="mord"><span class="mord">−</span><span class="mspace" style="margin-right:0.1667em;"></span><span class="mop">cos</span><span class="mspace" style="margin-right:0.1667em;"></span><span class="mord">3</span><span class="mord"><span class="mord">0</span><span class="msupsub"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.6741em;"><span style="top:-3.063em;margin-right:0.05em;"><span class="pstrut" style="height:2.7em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mbin mtight">∘</span></span></span></span></span></span></span></span></span></span><span style="top:-2.41em;"><span class="pstrut" style="height:3em;"></span><span class="mord"><span class="mop">sin</span><span class="mspace" style="margin-right:0.1667em;"></span><span class="mord">3</span><span class="mord"><span class="mord">0</span><span class="msupsub"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.6741em;"><span style="top:-3.063em;margin-right:0.05em;"><span class="pstrut" style="height:2.7em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mbin mtight">∘</span></span></span></span></span></span></span></span></span></span></span><span class="vlist-s">​</span></span><span class="vlist-r"><span class="vlist" style="height:0.95em;"><span></span></span></span></span></span></span></span><span class="mclose delimcenter" style="top:0em;"><span class="delimsizing size3">)</span></span></span><span class="mspace" style="margin-right:0.2778em;"></span><span class="mrel">≈</span><span class="mspace" style="margin-right:0.2778em;"></span></span><span class="base"><span class="strut" style="height:0.6444em;"></span><span class="mord">5</span><span class="mspace" style="margin-right:0.2222em;"></span><span class="mbin">⋅</span><span class="mspace" style="margin-right:0.2222em;"></span></span><span class="base"><span class="strut" style="height:2.4em;vertical-align:-0.95em;"></span><span class="minner"><span class="mopen delimcenter" style="top:0em;"><span class="delimsizing size3">(</span></span><span class="mord"><span class="mtable"><span class="col-align-c"><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist" style="height:1.45em;"><span style="top:-3.61em;"><span class="pstrut" style="height:3em;"></span><span class="mord"><span class="mord">−</span><span class="mord">0.87</span></span></span><span style="top:-2.41em;"><span class="pstrut" style="height:3em;"></span><span class="mord"><span class="mord">0.5</span></span></span></span><span class="vlist-s">​</span></span><span class="vlist-r"><span class="vlist" style="height:0.95em;"><span></span></span></span></span></span></span></span><span class="mclose delimcenter" style="top:0em;"><span class="delimsizing size3">)</span></span></span><span class="mspace" style="margin-right:0.2778em;"></span><span class="mrel">=</span><span class="mspace" style="margin-right:0.2778em;"></span></span><span class="base"><span class="strut" style="height:3.08em;vertical-align:-1.29em;"></span><span class="mord"><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist" style="height:1.79em;"><span style="top:-5.08em;"><span class="pstrut" style="height:5.08em;"></span><span class="boxpad"><span class="mord"><span class="mord"><span class="minner"><span class="mopen delimcenter" style="top:0em;"><span class="delimsizing size3">(</span></span><span class="mord"><span class="mtable"><span class="col-align-c"><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist" style="height:1.45em;"><span style="top:-3.61em;"><span class="pstrut" style="height:3em;"></span><span class="mord"><span class="mord">−</span><span class="mord">4.35</span></span></span><span style="top:-2.41em;"><span class="pstrut" style="height:3em;"></span><span class="mord"><span class="mord">2.5</span></span></span></span><span class="vlist-s">​</span></span><span class="vlist-r"><span class="vlist" style="height:0.95em;"><span></span></span></span></span></span></span></span><span class="mclose delimcenter" style="top:0em;"><span class="delimsizing size3">)</span></span></span></span></span></span></span><span style="top:-3.79em;"><span class="pstrut" style="height:5.08em;"></span><span class="stretchy fbox" style="height:3.08em;border-style:solid;border-width:0.04em;"></span></span></span><span class="vlist-s">​</span></span><span class="vlist-r"><span class="vlist" style="height:1.29em;"><span></span></span></span></span></span></span></span></span></span><p>Plotting the points on the graph:</p>
<p><img src="/pt/posts/isometrico-tutorial/geogebra-points.png" alt="Points A and B on the graph"></p>
<p>Now, to find the real point <em>R</em> — the one that will be drawn on the screen — we need to add the two vectors:</p>
<span class="katex-display"><span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML" display="block"><semantics><mrow><mover accent="true"><mi>R</mi><mo>⃗</mo></mover><mo>=</mo><mover accent="true"><mi>A</mi><mo>⃗</mo></mover><mo>+</mo><mover accent="true"><mi>B</mi><mo>⃗</mo></mover><mo>∴</mo><mover accent="true"><mi>R</mi><mo>⃗</mo></mover><mo>=</mo><mrow><mo fence="true">(</mo><mtable rowspacing="0.16em" columnalign="center" columnspacing="1em"><mtr><mtd><mstyle scriptlevel="0" displaystyle="false"><mn>2.61</mn></mstyle></mtd></mtr><mtr><mtd><mstyle scriptlevel="0" displaystyle="false"><mn>1.5</mn></mstyle></mtd></mtr></mtable><mo fence="true">)</mo></mrow><mo>+</mo><mrow><mo fence="true">(</mo><mtable rowspacing="0.16em" columnalign="center" columnspacing="1em"><mtr><mtd><mstyle scriptlevel="0" displaystyle="false"><mrow><mo>−</mo><mn>4.35</mn></mrow></mstyle></mtd></mtr><mtr><mtd><mstyle scriptlevel="0" displaystyle="false"><mn>2.5</mn></mstyle></mtd></mtr></mtable><mo fence="true">)</mo></mrow><mo>=</mo><menclose notation="box"><mstyle scriptlevel="0" displaystyle="false"><mstyle scriptlevel="0" displaystyle="false"><mstyle scriptlevel="0" displaystyle="true"><mrow><mo fence="true">(</mo><mtable rowspacing="0.16em" columnalign="center" columnspacing="1em"><mtr><mtd><mstyle scriptlevel="0" displaystyle="false"><mrow><mo>−</mo><mn>1.74</mn></mrow></mstyle></mtd></mtr><mtr><mtd><mstyle scriptlevel="0" displaystyle="false"><mn>4</mn></mstyle></mtd></mtr></mtable><mo fence="true">)</mo></mrow></mstyle></mstyle></mstyle></menclose></mrow><annotation encoding="application/x-tex">
\vec{R} = \vec{A} + \vec{B}
\therefore
\vec{R} = \begin{pmatrix} 
              2.61 \\
              1.5
\end{pmatrix} +
\begin{pmatrix} 
       -4.35 \\
       2.5
\end{pmatrix} =
\boxed{
\begin{pmatrix}
       -1.74 \\
       4
\end{pmatrix}
}
</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.9663em;"></span><span class="mord accent"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.9663em;"><span style="top:-3em;"><span class="pstrut" style="height:3em;"></span><span class="mord mathnormal" style="margin-right:0.00773em;">R</span></span><span style="top:-3.2523em;"><span class="pstrut" style="height:3em;"></span><span class="accent-body" style="left:-0.1522em;"><span class="overlay" style="height:0.714em;width:0.471em;"><svg xmlns="http://www.w3.org/2000/svg" width="0.471em" height="0.714em" style="width:0.471em" viewBox="0 0 471 714" preserveAspectRatio="xMinYMin"><path d="M377 20c0-5.333 1.833-10 5.5-14S391 0 397 0c4.667 0 8.667 1.667 12 5
3.333 2.667 6.667 9 10 19 6.667 24.667 20.333 43.667 41 57 7.333 4.667 11
10.667 11 18 0 6-1 10-3 12s-6.667 5-14 9c-28.667 14.667-53.667 35.667-75 63
-1.333 1.333-3.167 3.5-5.5 6.5s-4 4.833-5 5.5c-1 .667-2.5 1.333-4.5 2s-4.333 1
-7 1c-4.667 0-9.167-1.833-13.5-5.5S337 184 337 178c0-12.667 15.667-32.333 47-59
H213l-171-1c-8.667-6-13-12.333-13-19 0-4.667 4.333-11.333 13-20h359
c-16-25.333-24-45-24-59z"/></svg></span></span></span></span></span></span></span><span class="mspace" style="margin-right:0.2778em;"></span><span class="mrel">=</span><span class="mspace" style="margin-right:0.2778em;"></span></span><span class="base"><span class="strut" style="height:1.0497em;vertical-align:-0.0833em;"></span><span class="mord accent"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.9663em;"><span style="top:-3em;"><span class="pstrut" style="height:3em;"></span><span class="mord mathnormal">A</span></span><span style="top:-3.2523em;"><span class="pstrut" style="height:3em;"></span><span class="accent-body" style="left:-0.0966em;"><span class="overlay" style="height:0.714em;width:0.471em;"><svg xmlns="http://www.w3.org/2000/svg" width="0.471em" height="0.714em" style="width:0.471em" viewBox="0 0 471 714" preserveAspectRatio="xMinYMin"><path d="M377 20c0-5.333 1.833-10 5.5-14S391 0 397 0c4.667 0 8.667 1.667 12 5
3.333 2.667 6.667 9 10 19 6.667 24.667 20.333 43.667 41 57 7.333 4.667 11
10.667 11 18 0 6-1 10-3 12s-6.667 5-14 9c-28.667 14.667-53.667 35.667-75 63
-1.333 1.333-3.167 3.5-5.5 6.5s-4 4.833-5 5.5c-1 .667-2.5 1.333-4.5 2s-4.333 1
-7 1c-4.667 0-9.167-1.833-13.5-5.5S337 184 337 178c0-12.667 15.667-32.333 47-59
H213l-171-1c-8.667-6-13-12.333-13-19 0-4.667 4.333-11.333 13-20h359
c-16-25.333-24-45-24-59z"/></svg></span></span></span></span></span></span></span><span class="mspace" style="margin-right:0.2222em;"></span><span class="mbin">+</span><span class="mspace" style="margin-right:0.2222em;"></span></span><span class="base"><span class="strut" style="height:0.9663em;"></span><span class="mord accent"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.9663em;"><span style="top:-3em;"><span class="pstrut" style="height:3em;"></span><span class="mord mathnormal" style="margin-right:0.05017em;">B</span></span><span style="top:-3.2523em;"><span class="pstrut" style="height:3em;"></span><span class="accent-body" style="left:-0.1522em;"><span class="overlay" style="height:0.714em;width:0.471em;"><svg xmlns="http://www.w3.org/2000/svg" width="0.471em" height="0.714em" style="width:0.471em" viewBox="0 0 471 714" preserveAspectRatio="xMinYMin"><path d="M377 20c0-5.333 1.833-10 5.5-14S391 0 397 0c4.667 0 8.667 1.667 12 5
3.333 2.667 6.667 9 10 19 6.667 24.667 20.333 43.667 41 57 7.333 4.667 11
10.667 11 18 0 6-1 10-3 12s-6.667 5-14 9c-28.667 14.667-53.667 35.667-75 63
-1.333 1.333-3.167 3.5-5.5 6.5s-4 4.833-5 5.5c-1 .667-2.5 1.333-4.5 2s-4.333 1
-7 1c-4.667 0-9.167-1.833-13.5-5.5S337 184 337 178c0-12.667 15.667-32.333 47-59
H213l-171-1c-8.667-6-13-12.333-13-19 0-4.667 4.333-11.333 13-20h359
c-16-25.333-24-45-24-59z"/></svg></span></span></span></span></span></span></span><span class="mspace" style="margin-right:0.2778em;"></span><span class="mrel amsrm">∴</span><span class="mspace" style="margin-right:0.2778em;"></span></span><span class="base"><span class="strut" style="height:0.9663em;"></span><span class="mord accent"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.9663em;"><span style="top:-3em;"><span class="pstrut" style="height:3em;"></span><span class="mord mathnormal" style="margin-right:0.00773em;">R</span></span><span style="top:-3.2523em;"><span class="pstrut" style="height:3em;"></span><span class="accent-body" style="left:-0.1522em;"><span class="overlay" style="height:0.714em;width:0.471em;"><svg xmlns="http://www.w3.org/2000/svg" width="0.471em" height="0.714em" style="width:0.471em" viewBox="0 0 471 714" preserveAspectRatio="xMinYMin"><path d="M377 20c0-5.333 1.833-10 5.5-14S391 0 397 0c4.667 0 8.667 1.667 12 5
3.333 2.667 6.667 9 10 19 6.667 24.667 20.333 43.667 41 57 7.333 4.667 11
10.667 11 18 0 6-1 10-3 12s-6.667 5-14 9c-28.667 14.667-53.667 35.667-75 63
-1.333 1.333-3.167 3.5-5.5 6.5s-4 4.833-5 5.5c-1 .667-2.5 1.333-4.5 2s-4.333 1
-7 1c-4.667 0-9.167-1.833-13.5-5.5S337 184 337 178c0-12.667 15.667-32.333 47-59
H213l-171-1c-8.667-6-13-12.333-13-19 0-4.667 4.333-11.333 13-20h359
c-16-25.333-24-45-24-59z"/></svg></span></span></span></span></span></span></span><span class="mspace" style="margin-right:0.2778em;"></span><span class="mrel">=</span><span class="mspace" style="margin-right:0.2778em;"></span></span><span class="base"><span class="strut" style="height:2.4em;vertical-align:-0.95em;"></span><span class="minner"><span class="mopen delimcenter" style="top:0em;"><span class="delimsizing size3">(</span></span><span class="mord"><span class="mtable"><span class="col-align-c"><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist" style="height:1.45em;"><span style="top:-3.61em;"><span class="pstrut" style="height:3em;"></span><span class="mord"><span class="mord">2.61</span></span></span><span style="top:-2.41em;"><span class="pstrut" style="height:3em;"></span><span class="mord"><span class="mord">1.5</span></span></span></span><span class="vlist-s">​</span></span><span class="vlist-r"><span class="vlist" style="height:0.95em;"><span></span></span></span></span></span></span></span><span class="mclose delimcenter" style="top:0em;"><span class="delimsizing size3">)</span></span></span><span class="mspace" style="margin-right:0.2222em;"></span><span class="mbin">+</span><span class="mspace" style="margin-right:0.2222em;"></span></span><span class="base"><span class="strut" style="height:2.4em;vertical-align:-0.95em;"></span><span class="minner"><span class="mopen delimcenter" style="top:0em;"><span class="delimsizing size3">(</span></span><span class="mord"><span class="mtable"><span class="col-align-c"><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist" style="height:1.45em;"><span style="top:-3.61em;"><span class="pstrut" style="height:3em;"></span><span class="mord"><span class="mord">−</span><span class="mord">4.35</span></span></span><span style="top:-2.41em;"><span class="pstrut" style="height:3em;"></span><span class="mord"><span class="mord">2.5</span></span></span></span><span class="vlist-s">​</span></span><span class="vlist-r"><span class="vlist" style="height:0.95em;"><span></span></span></span></span></span></span></span><span class="mclose delimcenter" style="top:0em;"><span class="delimsizing size3">)</span></span></span><span class="mspace" style="margin-right:0.2778em;"></span><span class="mrel">=</span><span class="mspace" style="margin-right:0.2778em;"></span></span><span class="base"><span class="strut" style="height:3.08em;vertical-align:-1.29em;"></span><span class="mord"><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist" style="height:1.79em;"><span style="top:-5.08em;"><span class="pstrut" style="height:5.08em;"></span><span class="boxpad"><span class="mord"><span class="mord"><span class="minner"><span class="mopen delimcenter" style="top:0em;"><span class="delimsizing size3">(</span></span><span class="mord"><span class="mtable"><span class="col-align-c"><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist" style="height:1.45em;"><span style="top:-3.61em;"><span class="pstrut" style="height:3em;"></span><span class="mord"><span class="mord">−</span><span class="mord">1.74</span></span></span><span style="top:-2.41em;"><span class="pstrut" style="height:3em;"></span><span class="mord"><span class="mord">4</span></span></span></span><span class="vlist-s">​</span></span><span class="vlist-r"><span class="vlist" style="height:0.95em;"><span></span></span></span></span></span></span></span><span class="mclose delimcenter" style="top:0em;"><span class="delimsizing size3">)</span></span></span></span></span></span></span><span style="top:-3.79em;"><span class="pstrut" style="height:5.08em;"></span><span class="stretchy fbox" style="height:3.08em;border-style:solid;border-width:0.04em;"></span></span></span><span class="vlist-s">​</span></span><span class="vlist-r"><span class="vlist" style="height:1.29em;"><span></span></span></span></span></span></span></span></span></span><p>Plotting it on the graph:</p>
<p><img src="/pt/posts/isometrico-tutorial/geogebra-point-r.png" alt="Point R on the graph"></p>
<p>To add the Z axis, just add this value to the real Y value plotted — since the Z axis is completely vertical —, so if the Z value of point <em>T</em> were 3, the position vector to be drawn would be $\begin{pmatrix}
-1.74 \
7
\end{pmatrix}$.</p>
<h4 id="generic-function">Generic function</h4>
<p>A generic function would look like this:</p>
<span class="katex-display"><span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML" display="block"><semantics><mrow><mover accent="true"><mi>f</mi><mo>⃗</mo></mover><mo stretchy="false">(</mo><mover accent="true"><mi>x</mi><mo>⃗</mo></mover><mo stretchy="false">)</mo><mo>=</mo><msub><mi>x</mi><mn>1</mn></msub><mrow><mo fence="true">(</mo><mtable rowspacing="0.16em" columnalign="center" columnspacing="1em"><mtr><mtd><mstyle scriptlevel="0" displaystyle="false"><mrow><mi>cos</mi><mo>⁡</mo><msup><mn>30</mn><mo>∘</mo></msup></mrow></mstyle></mtd></mtr><mtr><mtd><mstyle scriptlevel="0" displaystyle="false"><mrow><mi>sin</mi><mo>⁡</mo><msup><mn>30</mn><mo>∘</mo></msup></mrow></mstyle></mtd></mtr></mtable><mo fence="true">)</mo></mrow><mo>+</mo><msub><mi>x</mi><mn>2</mn></msub><mrow><mo fence="true">(</mo><mtable rowspacing="0.16em" columnalign="center" columnspacing="1em"><mtr><mtd><mstyle scriptlevel="0" displaystyle="false"><mrow><mo>−</mo><mi>cos</mi><mo>⁡</mo><msup><mn>30</mn><mo>∘</mo></msup></mrow></mstyle></mtd></mtr><mtr><mtd><mstyle scriptlevel="0" displaystyle="false"><mrow><mi>sin</mi><mo>⁡</mo><msup><mn>30</mn><mo>∘</mo></msup></mrow></mstyle></mtd></mtr></mtable><mo fence="true">)</mo></mrow><mo>+</mo><mrow><mo fence="true">(</mo><mtable rowspacing="0.16em" columnalign="center" columnspacing="1em"><mtr><mtd><mstyle scriptlevel="0" displaystyle="false"><mn>0</mn></mstyle></mtd></mtr><mtr><mtd><mstyle scriptlevel="0" displaystyle="false"><msub><mi>x</mi><mn>3</mn></msub></mstyle></mtd></mtr></mtable><mo fence="true">)</mo></mrow></mrow><annotation encoding="application/x-tex">
\vec{f}(\vec{x}) = x_1 \begin{pmatrix} 
              \cos 30 ^ \circ \\
              \sin 30 ^ \circ
       \end{pmatrix} + x_2 \begin{pmatrix} 
              -\cos 30 ^ \circ \\
              \sin 30 ^ \circ
       \end{pmatrix} + \begin{pmatrix} 
              0 \\
              x_3
       \end{pmatrix}
</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:1.2274em;vertical-align:-0.25em;"></span><span class="mord accent"><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist" style="height:0.9774em;"><span style="top:-3em;"><span class="pstrut" style="height:3em;"></span><span class="mord mathnormal" style="margin-right:0.10764em;">f</span></span><span style="top:-3.2634em;"><span class="pstrut" style="height:3em;"></span><span class="accent-body" style="left:-0.0688em;"><span class="overlay" style="height:0.714em;width:0.471em;"><svg xmlns="http://www.w3.org/2000/svg" width="0.471em" height="0.714em" style="width:0.471em" viewBox="0 0 471 714" preserveAspectRatio="xMinYMin"><path d="M377 20c0-5.333 1.833-10 5.5-14S391 0 397 0c4.667 0 8.667 1.667 12 5
3.333 2.667 6.667 9 10 19 6.667 24.667 20.333 43.667 41 57 7.333 4.667 11
10.667 11 18 0 6-1 10-3 12s-6.667 5-14 9c-28.667 14.667-53.667 35.667-75 63
-1.333 1.333-3.167 3.5-5.5 6.5s-4 4.833-5 5.5c-1 .667-2.5 1.333-4.5 2s-4.333 1
-7 1c-4.667 0-9.167-1.833-13.5-5.5S337 184 337 178c0-12.667 15.667-32.333 47-59
H213l-171-1c-8.667-6-13-12.333-13-19 0-4.667 4.333-11.333 13-20h359
c-16-25.333-24-45-24-59z"/></svg></span></span></span></span><span class="vlist-s">​</span></span><span class="vlist-r"><span class="vlist" style="height:0.1944em;"><span></span></span></span></span></span><span class="mopen">(</span><span class="mord accent"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.714em;"><span style="top:-3em;"><span class="pstrut" style="height:3em;"></span><span class="mord mathnormal">x</span></span><span style="top:-3em;"><span class="pstrut" style="height:3em;"></span><span class="accent-body" style="left:-0.2077em;"><span class="overlay" style="height:0.714em;width:0.471em;"><svg xmlns="http://www.w3.org/2000/svg" width="0.471em" height="0.714em" style="width:0.471em" viewBox="0 0 471 714" preserveAspectRatio="xMinYMin"><path d="M377 20c0-5.333 1.833-10 5.5-14S391 0 397 0c4.667 0 8.667 1.667 12 5
3.333 2.667 6.667 9 10 19 6.667 24.667 20.333 43.667 41 57 7.333 4.667 11
10.667 11 18 0 6-1 10-3 12s-6.667 5-14 9c-28.667 14.667-53.667 35.667-75 63
-1.333 1.333-3.167 3.5-5.5 6.5s-4 4.833-5 5.5c-1 .667-2.5 1.333-4.5 2s-4.333 1
-7 1c-4.667 0-9.167-1.833-13.5-5.5S337 184 337 178c0-12.667 15.667-32.333 47-59
H213l-171-1c-8.667-6-13-12.333-13-19 0-4.667 4.333-11.333 13-20h359
c-16-25.333-24-45-24-59z"/></svg></span></span></span></span></span></span></span><span class="mclose">)</span><span class="mspace" style="margin-right:0.2778em;"></span><span class="mrel">=</span><span class="mspace" style="margin-right:0.2778em;"></span></span><span class="base"><span class="strut" style="height:2.4em;vertical-align:-0.95em;"></span><span class="mord"><span class="mord mathnormal">x</span><span class="msupsub"><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist" style="height:0.3011em;"><span style="top:-2.55em;margin-left:0em;margin-right:0.05em;"><span class="pstrut" style="height:2.7em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mtight">1</span></span></span></span><span class="vlist-s">​</span></span><span class="vlist-r"><span class="vlist" style="height:0.15em;"><span></span></span></span></span></span></span><span class="mspace" style="margin-right:0.1667em;"></span><span class="minner"><span class="mopen delimcenter" style="top:0em;"><span class="delimsizing size3">(</span></span><span class="mord"><span class="mtable"><span class="col-align-c"><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist" style="height:1.45em;"><span style="top:-3.61em;"><span class="pstrut" style="height:3em;"></span><span class="mord"><span class="mop">cos</span><span class="mspace" style="margin-right:0.1667em;"></span><span class="mord">3</span><span class="mord"><span class="mord">0</span><span class="msupsub"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.6741em;"><span style="top:-3.063em;margin-right:0.05em;"><span class="pstrut" style="height:2.7em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mbin mtight">∘</span></span></span></span></span></span></span></span></span></span><span style="top:-2.41em;"><span class="pstrut" style="height:3em;"></span><span class="mord"><span class="mop">sin</span><span class="mspace" style="margin-right:0.1667em;"></span><span class="mord">3</span><span class="mord"><span class="mord">0</span><span class="msupsub"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.6741em;"><span style="top:-3.063em;margin-right:0.05em;"><span class="pstrut" style="height:2.7em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mbin mtight">∘</span></span></span></span></span></span></span></span></span></span></span><span class="vlist-s">​</span></span><span class="vlist-r"><span class="vlist" style="height:0.95em;"><span></span></span></span></span></span></span></span><span class="mclose delimcenter" style="top:0em;"><span class="delimsizing size3">)</span></span></span><span class="mspace" style="margin-right:0.2222em;"></span><span class="mbin">+</span><span class="mspace" style="margin-right:0.2222em;"></span></span><span class="base"><span class="strut" style="height:2.4em;vertical-align:-0.95em;"></span><span class="mord"><span class="mord mathnormal">x</span><span class="msupsub"><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist" style="height:0.3011em;"><span style="top:-2.55em;margin-left:0em;margin-right:0.05em;"><span class="pstrut" style="height:2.7em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mtight">2</span></span></span></span><span class="vlist-s">​</span></span><span class="vlist-r"><span class="vlist" style="height:0.15em;"><span></span></span></span></span></span></span><span class="mspace" style="margin-right:0.1667em;"></span><span class="minner"><span class="mopen delimcenter" style="top:0em;"><span class="delimsizing size3">(</span></span><span class="mord"><span class="mtable"><span class="col-align-c"><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist" style="height:1.45em;"><span style="top:-3.61em;"><span class="pstrut" style="height:3em;"></span><span class="mord"><span class="mord">−</span><span class="mspace" style="margin-right:0.1667em;"></span><span class="mop">cos</span><span class="mspace" style="margin-right:0.1667em;"></span><span class="mord">3</span><span class="mord"><span class="mord">0</span><span class="msupsub"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.6741em;"><span style="top:-3.063em;margin-right:0.05em;"><span class="pstrut" style="height:2.7em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mbin mtight">∘</span></span></span></span></span></span></span></span></span></span><span style="top:-2.41em;"><span class="pstrut" style="height:3em;"></span><span class="mord"><span class="mop">sin</span><span class="mspace" style="margin-right:0.1667em;"></span><span class="mord">3</span><span class="mord"><span class="mord">0</span><span class="msupsub"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.6741em;"><span style="top:-3.063em;margin-right:0.05em;"><span class="pstrut" style="height:2.7em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mbin mtight">∘</span></span></span></span></span></span></span></span></span></span></span><span class="vlist-s">​</span></span><span class="vlist-r"><span class="vlist" style="height:0.95em;"><span></span></span></span></span></span></span></span><span class="mclose delimcenter" style="top:0em;"><span class="delimsizing size3">)</span></span></span><span class="mspace" style="margin-right:0.2222em;"></span><span class="mbin">+</span><span class="mspace" style="margin-right:0.2222em;"></span></span><span class="base"><span class="strut" style="height:2.4em;vertical-align:-0.95em;"></span><span class="minner"><span class="mopen delimcenter" style="top:0em;"><span class="delimsizing size3">(</span></span><span class="mord"><span class="mtable"><span class="col-align-c"><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist" style="height:1.45em;"><span style="top:-3.61em;"><span class="pstrut" style="height:3em;"></span><span class="mord"><span class="mord">0</span></span></span><span style="top:-2.41em;"><span class="pstrut" style="height:3em;"></span><span class="mord"><span class="mord"><span class="mord mathnormal">x</span><span class="msupsub"><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist" style="height:0.3011em;"><span style="top:-2.55em;margin-left:0em;margin-right:0.05em;"><span class="pstrut" style="height:2.7em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mtight">3</span></span></span></span><span class="vlist-s">​</span></span><span class="vlist-r"><span class="vlist" style="height:0.15em;"><span></span></span></span></span></span></span></span></span></span><span class="vlist-s">​</span></span><span class="vlist-r"><span class="vlist" style="height:0.95em;"><span></span></span></span></span></span></span></span><span class="mclose delimcenter" style="top:0em;"><span class="delimsizing size3">)</span></span></span></span></span></span></span><h5 id="why-is-z-subtracted-in-the-javascript-function-instead-of-added">Why is Z subtracted in the JavaScript function instead of added?</h5>
<p>If you’re very observant, you may have noticed this. The reason is that in most graphics libraries (SDL, HTML Canvas, Raylib, p5.js, etc.), the smaller the Y value, the <em>higher</em> the point appears — which is the opposite of most Cartesian planes, like GeoGebra’s, which I used to demonstrate how it works. However, if you’re using a game engine like Unity or Godot, you should change it to add instead of subtract.</p>
<h2 id="implementing-in-p5js">Implementing in p5.js</h2>
<p>By opening <a href="https://editor.p5js.org/">editor.p5js.org</a>, there’s an online editor where you can program in JavaScript using the p5.js graphics library — it’s not one of the best for creating games, but it’s very easy and widely used for learning programming.</p>
<p>Initially, a code like this will appear:</p>






<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#66d9ef">function</span> <span style="color:#a6e22e">setup</span>() {
</span></span><span style="display:flex;"><span>  <span style="color:#a6e22e">createCanvas</span>(<span style="color:#ae81ff">400</span>, <span style="color:#ae81ff">400</span>);
</span></span><span style="display:flex;"><span>}
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">function</span> <span style="color:#a6e22e">draw</span>() {
</span></span><span style="display:flex;"><span>  <span style="color:#a6e22e">background</span>(<span style="color:#ae81ff">220</span>);
</span></span><span style="display:flex;"><span>}</span></span></code></pre></div>
<p>The <code>setup</code> function runs only once, at the start of the game, while <code>draw</code> runs every loop. Running it, we only see this:</p>
<p><img src="/pt/posts/isometrico-tutorial/p5-blank.png" alt="Blank screen"></p>
<p>What we want to do is create a grid that moves like waves, and for that, we’ll use the function from the <a href="/en/posts/isometrico-tutorial/#tldr">TL;DR</a>. Then, we’ll draw equally spaced points using that function:</p>






<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span>[...]
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">function</span> <span style="color:#a6e22e">draw</span>() {
</span></span><span style="display:flex;"><span>  <span style="color:#a6e22e">background</span>(<span style="color:#ae81ff">220</span>);
</span></span><span style="display:flex;"><span>  
</span></span><span style="display:flex;"><span>  <span style="color:#75715e">// Put the camera in the center
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>  <span style="color:#a6e22e">translate</span>(<span style="color:#a6e22e">width</span><span style="color:#f92672">/</span><span style="color:#ae81ff">2</span>, <span style="color:#a6e22e">height</span><span style="color:#f92672">/</span><span style="color:#ae81ff">2</span>)
</span></span><span style="display:flex;"><span>  
</span></span><span style="display:flex;"><span>  <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">grid_size</span><span style="color:#f92672">=</span><span style="color:#ae81ff">5</span>
</span></span><span style="display:flex;"><span>  <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">grid_distance</span><span style="color:#f92672">=</span><span style="color:#ae81ff">30</span>
</span></span><span style="display:flex;"><span>  <span style="color:#66d9ef">for</span> (<span style="color:#66d9ef">let</span> <span style="color:#a6e22e">y</span><span style="color:#f92672">=-</span><span style="color:#a6e22e">grid_size</span>; <span style="color:#a6e22e">y</span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">grid_size</span>; <span style="color:#a6e22e">y</span><span style="color:#f92672">++</span>) {
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">for</span> (<span style="color:#66d9ef">let</span> <span style="color:#a6e22e">x</span><span style="color:#f92672">=-</span><span style="color:#a6e22e">grid_size</span>; <span style="color:#a6e22e">x</span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">grid_size</span>; <span style="color:#a6e22e">x</span><span style="color:#f92672">++</span>) {
</span></span><span style="display:flex;"><span>      <span style="color:#75715e">// Transform 3D point into 2D
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>      <span style="color:#66d9ef">let</span> <span style="color:#a6e22e">drawn_point</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">to_isometric</span>(
</span></span><span style="display:flex;"><span>        {<span style="color:#a6e22e">x</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">x</span><span style="color:#f92672">*</span><span style="color:#a6e22e">grid_distance</span>, <span style="color:#a6e22e">y</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">y</span><span style="color:#f92672">*</span><span style="color:#a6e22e">grid_distance</span>, <span style="color:#a6e22e">z</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">0</span>}
</span></span><span style="display:flex;"><span>      )
</span></span><span style="display:flex;"><span>      
</span></span><span style="display:flex;"><span>      <span style="color:#75715e">// Draw the point
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>      <span style="color:#a6e22e">stroke</span>(<span style="color:#ae81ff">255</span>, <span style="color:#ae81ff">0</span>, <span style="color:#ae81ff">0</span>)
</span></span><span style="display:flex;"><span>      <span style="color:#a6e22e">strokeWeight</span>(<span style="color:#ae81ff">3</span>)
</span></span><span style="display:flex;"><span>      <span style="color:#a6e22e">point</span>(<span style="color:#a6e22e">drawn_point</span>.<span style="color:#a6e22e">x</span>, <span style="color:#a6e22e">drawn_point</span>.<span style="color:#a6e22e">y</span>)
</span></span><span style="display:flex;"><span>    }
</span></span><span style="display:flex;"><span>  }
</span></span><span style="display:flex;"><span>}</span></span></code></pre></div>
<p>Thus, the result is this:</p>
<p><img src="/pt/posts/isometrico-tutorial/p5-grid-simples-estatica.png" alt="Grid of points"></p>
<h3 id="animating-the-points">Animating the points</h3>
<p>For this, we’ll use the sine function, which, on a graph, looks like this:</p>
<p><img src="/pt/posts/isometrico-tutorial/sinegraph.png" alt="Sine graph"></p>
<p>Passing the time since the start of the program into the function, which can be done with p5.js’s <code>millis()</code> function — it returns how many milliseconds since the start of execution — we can animate them:</p>






<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#66d9ef">let</span> <span style="color:#a6e22e">drawn_point</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">to_isometric</span>(
</span></span><span style="display:flex;"><span>  {<span style="color:#a6e22e">x</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">x</span><span style="color:#f92672">*</span><span style="color:#a6e22e">grid_distance</span>, <span style="color:#a6e22e">y</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">y</span><span style="color:#f92672">*</span><span style="color:#a6e22e">grid_distance</span>, <span style="color:#a6e22e">z</span><span style="color:#f92672">:</span> Math.<span style="color:#a6e22e">sin</span>(<span style="color:#a6e22e">millis</span>()<span style="color:#f92672">/</span><span style="color:#ae81ff">1000</span>)<span style="color:#f92672">*</span><span style="color:#ae81ff">20</span>}
</span></span><span style="display:flex;"><span>)</span></span></code></pre></div>
<p>Result:</p>
<p><img src="/pt/posts/isometrico-tutorial/p5-initially-animated.gif" alt="Initial animation"></p>
<p>However, as we can see, all the points move equally. To change this, let’s add an <em>offset</em> value for each point, defined by their Y position:</p>






<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#66d9ef">let</span> <span style="color:#a6e22e">drawn_point</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">to_isometric</span>(
</span></span><span style="display:flex;"><span>  {<span style="color:#a6e22e">x</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">x</span><span style="color:#f92672">*</span><span style="color:#a6e22e">grid_distance</span>, <span style="color:#a6e22e">y</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">y</span><span style="color:#f92672">*</span><span style="color:#a6e22e">grid_distance</span>, <span style="color:#a6e22e">z</span><span style="color:#f92672">:</span> Math.<span style="color:#a6e22e">sin</span>(<span style="color:#a6e22e">millis</span>()<span style="color:#f92672">/</span><span style="color:#ae81ff">1000</span><span style="color:#f92672">+</span><span style="color:#a6e22e">y</span>)<span style="color:#f92672">*</span><span style="color:#ae81ff">20</span>}
</span></span><span style="display:flex;"><span>)</span></span></code></pre></div>
<p>Result:</p>
<p><img src="/pt/posts/isometrico-tutorial/p5-offset-animated.gif" alt="Offset animation"></p>
<h3 id="adding-sprites">Adding sprites</h3>
<p>For this, I’ll use <a href="https://opengameart.org/content/sandbox-style-terrain-pack">these</a> sprites from opengameart.org. Then, I cropped and reduced the resolution in GIMP so it’s just a cube:</p>
<p><img src="/pt/posts/isometrico-tutorial/cube.png" alt="Isometric pixel-art cube"></p>
<p>Download this image and place it in the editor. To do this, create an account and then click the arrow on the left side of the editor, then click the “plus” symbol and “Upload file,” and select the cube file.</p>
<p>To draw the cube, define a global variable called <code>cube</code>:</p>






<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#66d9ef">let</span> <span style="color:#a6e22e">cube</span></span></span></code></pre></div>
<p>Then, inside the <code>setup()</code> function, assign the variable as the cube texture:</p>






<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#a6e22e">cube</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">loadImage</span>(<span style="color:#e6db74">&#39;cube.png&#39;</span>)</span></span></code></pre></div>
<p>And instead of drawing the point, draw the texture, remembering to keep its size as <code>grid_distance</code> times two:</p>






<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#75715e">/*stroke(255, 0, 0)
</span></span></span><span style="display:flex;"><span><span style="color:#75715e">strokeWeight(3)
</span></span></span><span style="display:flex;"><span><span style="color:#75715e">point(drawn_point.x, drawn_point.y)*/</span>
</span></span><span style="display:flex;"><span><span style="color:#a6e22e">image</span>(<span style="color:#a6e22e">cube</span>, <span style="color:#a6e22e">drawn_point</span>.<span style="color:#a6e22e">x</span>, <span style="color:#a6e22e">drawn_point</span>.<span style="color:#a6e22e">y</span>, <span style="color:#a6e22e">grid_distance</span><span style="color:#f92672">*</span><span style="color:#ae81ff">2</span>, <span style="color:#a6e22e">grid_distance</span><span style="color:#f92672">*</span><span style="color:#ae81ff">2</span>)</span></span></code></pre></div>
<p>Result:</p>
<p><img src="/pt/posts/isometrico-tutorial/p5-texture-animated.gif" alt="Animation with textures"></p>
]]></content:encoded>
    </item>
    <item>
      <title>Linux Mint 22.2 &#34;Zara&#34; released: main highlights</title>
      <link>https://galdoon.codeberg.page/en/posts/linux-mint-22-2-lancado/</link>
      <pubDate>Thu, 04 Sep 2025 12:44:33 -0300</pubDate>
      <guid>https://galdoon.codeberg.page/en/posts/linux-mint-22-2-lancado/</guid>
      <description>&lt;p&gt;Today the new version of Linux Mint was released, 22.2 named “Zara”.&lt;/p&gt;
&lt;p&gt;Linux Mint is known as one of the most popular Linux distributions for beginners, being based on Ubuntu LTS — providing good stability — and featuring a graphical interface with a &lt;em&gt;desktop&lt;/em&gt; paradigm similar to Windows.&lt;/p&gt;
&lt;h2 id=&#34;main-changes&#34;&gt;Main changes&lt;/h2&gt;
&lt;h3 id=&#34;sticky-notes&#34;&gt;Sticky Notes&lt;/h3&gt;
&lt;p&gt;Linux Mint 22.2 comes with improvements to sticky notes, such as now having rounded corners and support for Wayland, which is the most modern desktop technology — standard in most distros such as Fedora, Arch, and Ubuntu. In the latest Mint updates, support for Wayland in its interface, Cinnamon, has been improved.&lt;/p&gt;</description>
      <content:encoded><![CDATA[<p>Today the new version of Linux Mint was released, 22.2 named “Zara”.</p>
<p>Linux Mint is known as one of the most popular Linux distributions for beginners, being based on Ubuntu LTS — providing good stability — and featuring a graphical interface with a <em>desktop</em> paradigm similar to Windows.</p>
<h2 id="main-changes">Main changes</h2>
<h3 id="sticky-notes">Sticky Notes</h3>
<p>Linux Mint 22.2 comes with improvements to sticky notes, such as now having rounded corners and support for Wayland, which is the most modern desktop technology — standard in most distros such as Fedora, Arch, and Ubuntu. In the latest Mint updates, support for Wayland in its interface, Cinnamon, has been improved.</p>
<p><img src="/pt/posts/linux-mint-22-2-lancado/notes.png" alt="Notes App"></p>
<p><em>New look of sticky notes</em></p>
<h3 id="login-screen">Login Screen</h3>
<p>The login screen has been updated with a new look featuring a <em>blur</em> effect and user <em>avatars</em>:</p>
<p><img src="/pt/posts/linux-mint-22-2-lancado/slick_greeter.png" alt="Login Screen"></p>
<h3 id="fingerprint-authentication">Fingerprint Authentication</h3>
<p>Linux Mint 22.2 includes a new application called <a href="https://github.com/xapp-project/fingwit">Fingwit</a>, which allows you to register fingerprints and use them to unlock the screen, in Sudo, and in administration applications.</p>
<h3 id="libadwaita-compatibility">LibAdwaita Compatibility</h3>
<p>This is, in my opinion, one of the best changes.</p>
<p>LibAdwaita is a library created by GNOME to follow its <em>design</em> guidelines, maintaining a consistent look across all programs — similar to how Apple does with Cocoa. However, it comes with the drawback of having a completely out-of-place look on distros that don’t use GNOME, such as Linux Mint.</p>
<p>Previously, Linux Mint used older versions of GNOME applications that did not use the library to maintain consistency. However, now they have started modifying it so that the global theme is applied:</p>
<p><img src="/pt/posts/linux-mint-22-2-lancado/libadwaita.gif" alt="Theme compatibility with LibAdwaita"></p>
<p>As we can see, applications like Gnome Calendar — which use the library — now have their theme more consistent with the system’s defined theme, unlike previous versions where, regardless of the theme, they would always have the same look.</p>
<p>The fork is available on <a href="https://github.com/xapp-project/libadapta">GitHub</a> under the name LibAdapta.</p>
<h1 id="how-to-update">How to update</h1>
<p>To update Linux Mint to the latest version, it is recommended to first make a <em>backup</em> of your files, which can be done using the distro’s own tool, Timeshift.</p>
<p>After that, go to the update manager, click “Edit” and then “Upgrade to Linux Mint 22.2 Zara”:</p>
<p><img src="/pt/posts/linux-mint-22-2-lancado/shadow_upgrade1.png" alt="Upgrade Menu"></p>
<p>Then, restart your computer and you should have the latest version installed.</p>
]]></content:encoded>
    </item>
    <item>
      <title>How to Run AIs Locally on Your Computer (or Phone)</title>
      <link>https://galdoon.codeberg.page/en/posts/como-rodar-ias-no-computador/</link>
      <pubDate>Wed, 03 Sep 2025 13:54:19 -0300</pubDate>
      <guid>https://galdoon.codeberg.page/en/posts/como-rodar-ias-no-computador/</guid>
      <description>&lt;p&gt;In recent years, AI chats like ChatGPT, Gemini, and Claude have become quite popular. They have significantly changed the way people do various tasks — such as programming, doing homework, writing, etc. — for better or worse.&lt;/p&gt;
&lt;p&gt;However, most of the popular AI models are &lt;em&gt;closed&lt;/em&gt;: they run on &lt;em&gt;closed&lt;/em&gt; software on a &lt;em&gt;closed&lt;/em&gt; server — they don’t run natively on your computer. Instead, your message is sent to a server, processed there, and then the result is returned.&lt;/p&gt;</description>
      <content:encoded><![CDATA[<p>In recent years, AI chats like ChatGPT, Gemini, and Claude have become quite popular. They have significantly changed the way people do various tasks — such as programming, doing homework, writing, etc. — for better or worse.</p>
<p>However, most of the popular AI models are <em>closed</em>: they run on <em>closed</em> software on a <em>closed</em> server — they don’t run natively on your computer. Instead, your message is sent to a server, processed there, and then the result is returned.</p>
<p>Nevertheless, it is quite easy to run AI models natively on your computer using <a href="https://ollama.com/">Ollama</a>, a tool written in Go for handling and running LLMs. Keep in mind, though, that without a powerful computer you won’t be able to run the best models, but you can still experiment with simpler ones.</p>
<p>The first step is to <a href="https://ollama.com/download">install Ollama</a>. You can use the official installer, build from source, or install it via your Linux distro’s package manager. On Fedora, for example:</p>






<pre tabindex="0"><code>sudo dnf install ollama  </code></pre>
<p>Once installed, start the Ollama server by typing:</p>






<pre tabindex="0"><code>ollama serve  </code></pre>
<p>And to run a model, type:</p>






<pre tabindex="0"><code>ollama run &lt;model name&gt;  </code></pre>
<p>There are several options, such as <a href="https://ollama.com/library/gpt-oss">DeepSeek</a> and <a href="https://ollama.com/library/gpt-oss">GPT-OSS</a>. However, on a weaker machine without a dedicated GPU, larger models won’t run. That’s why you should look for models with fewer parameters — for example, in the Qwen3 models:</p>
<p><img src="/pt/posts/como-rodar-ias-no-computador/qwen3-modelos.png" alt="Qwen3 models table"></p>
<p>As we can see, there are many. The ‘b’ stands for <em>billions of parameters</em>, so qwen3:8b has 8 billion parameters, and qwen3:0.6b has 600 million parameters. Running a large model requires not only a good GPU but also a lot of VRAM. Smaller models, up to 4 billion, can be run on the CPU.</p>
<p>In my tests, the best models are <a href="https://ollama.com/library/qwen3">Qwen3</a>, <a href="https://ollama.com/library/gemma3">Gemma3</a>, and <a href="https://ollama.com/library/llama3.2">LLaMA 3.2</a>. They are small but can still be useful. Other models, like <a href="https://ollama.com/library/deepseek-r1">Deepseek R1</a> in their basic versions, make many mistakes and can’t even speak Portuguese properly.</p>
<p>For example, to run the 1-billion-parameter Gemma3, you would do:</p>






<pre tabindex="0"><code>$ ollama run gemma3:1b  
&gt;&gt; Hello, how are you?  
Hello, I’m fine, thank you for asking! How are you doing? 😊

And you, how are you? How can I help?  </code></pre>
<p>To list models, use <code>ollama list</code>, and to remove one, use <code>ollama rm &lt;model&gt;</code>.</p>
<h2 id="how-to-run-on-your-phone">How to Run on Your Phone</h2>
<p>To run it on your phone, install <a href="https://play.google.com/store/apps/details?id=com.termux&amp;pcampaignid=web_share">Termux</a> — an open-source Linux terminal for Android —, install Ollama with <code>pkg install ollama</code>, and follow the same steps as mentioned above.</p>
]]></content:encoded>
    </item>
    <item>
      <title>Firefox Has Been Terrible. What Are the Alternatives and Which One Should Zorin OS Have Chosen?</title>
      <link>https://galdoon.codeberg.page/en/posts/firefox-pessimo-alternativas/</link>
      <pubDate>Thu, 15 May 2025 10:40:40 -0300</pubDate>
      <guid>https://galdoon.codeberg.page/en/posts/firefox-pessimo-alternativas/</guid>
      <description>&lt;p&gt;Firefox used to be one of the most popular browsers. Since its release in 2004, its popularity grew steadily, nearly surpassing Internet Explorer. However, with the arrival of Chrome—a faster, more secure browser with more features—Firefox&amp;rsquo;s popularity dropped.&lt;/p&gt;
&lt;p&gt;As a result, Firefox&amp;rsquo;s marketing shifted to focus on one keyword: &lt;strong&gt;privacy&lt;/strong&gt;. That word is everywhere in Firefox. After all, Firefox &lt;em&gt;is&lt;/em&gt;, in fact, more private than something like Google Chrome, which tracks everything you access.&lt;/p&gt;</description>
      <content:encoded><![CDATA[<p>Firefox used to be one of the most popular browsers. Since its release in 2004, its popularity grew steadily, nearly surpassing Internet Explorer. However, with the arrival of Chrome—a faster, more secure browser with more features—Firefox&rsquo;s popularity dropped.</p>
<p>As a result, Firefox&rsquo;s marketing shifted to focus on one keyword: <strong>privacy</strong>. That word is everywhere in Firefox. After all, Firefox <em>is</em>, in fact, more private than something like Google Chrome, which tracks everything you access.</p>
<p>But that has changed—with the browser’s new terms of service, it now includes this clause:</p>
<p><em>You give Mozilla the rights necessary to operate Firefox. This includes processing your data as we describe in the Firefox Privacy Notice. It also includes a nonexclusive, royalty-free, worldwide license for the purpose of doing as you request with the content you input in Firefox. This does not give Mozilla any ownership in that content.</em></p>
<p>Essentially, Firefox has rights over your data. Reading the <a href="https://www.mozilla.org/en-US/privacy/firefox/">Firefox Privacy Notice</a>, we can see how that data is used:</p>
<ul>
<li>To provide the Firefox browser</li>
<li>To tailor Firefox to your needs</li>
<li>To provide and improve search functionality</li>
<li>To provide relevant content and advertising on Firefox’s New Tab page</li>
<li>To provide Mozilla accounts</li>
<li>To provide AI chatbots</li>
<li>To provide the Review Checker, including sponsored content</li>
<li>To provide and enable add-ons (addons.mozilla.org)</li>
<li>To maintain and improve features, performance, and stability</li>
<li>To improve security</li>
<li>To understand Firefox usage</li>
<li>To market our services</li>
<li>To pseudonymize, de-identify, aggregate, or anonymize data</li>
<li>To communicate with you</li>
<li>To comply with applicable laws, identify and prevent harmful, unauthorized, or illegal activity</li>
</ul>
<p>Which is rather strange for a supposedly privacy-respecting browser. So, I’ll show a few alternatives I consider viable and, at the end, reflect on which one Zorin OS should have used, since <a href="https://news.itsfoss.com/zorin-os-17-3/">Zorin OS switched its default browser to Brave</a>.</p>
<h1 id="alternatives-to-firefox">Alternatives to Firefox</h1>
<h2 id="brave"><a href="https://brave.com/">Brave</a></h2>
<p><img src="/pt/posts/firefox-pessimo-alternativas/brave.jpg" alt="Brave Browser"></p>
<p>I’ll put this one last. Even though it has good default privacy settings, it has two major drawbacks:</p>
<ul>
<li>It&rsquo;s Chromium-based</li>
<li>It&rsquo;s developed by a company</li>
</ul>
<p>Regarding being Chromium-based, this is more of an ethical issue than a privacy or security one. I’m against Chromium-based browsers because they only contribute to Google&rsquo;s monopoly over the internet. This is already evident with <a href="https://blog.chromium.org/2024/05/manifest-v2-phase-out-begins.html">Manifest v2 being removed from Chromium</a>, breaking critical privacy extensions like <a href="https://github.com/gorhill/uBlock">uBlock Origin</a>. That’s why I support non-Blink browsers like <a href="https://ladybird.org/">Ladybird</a>, which, although still slow, can already render pages well—YouTube videos included.</p>
<p>As for being developed by a company, I have nothing against companies contributing to open source projects, but the problem is when they start negatively modifying the project for users, which Brave has done by <strong>integrating AI and cryptocurrencies</strong> into the browser.</p>
<p>That said, it still has pros:</p>
<ul>
<li>Strong default privacy settings</li>
<li>It&rsquo;s open-source — absolutely essential</li>
</ul>
<h2 id="zen"><a href="https://zen-browser.app/">Zen</a></h2>
<p><img src="/pt/posts/firefox-pessimo-alternativas/zen.png" alt="Zen Browser"></p>
<p>Zen is an open-source browser based on Firefox, which is already a plus. It is heavily inspired by the minimalist Chromium-based browser <a href="https://arc.net/">Arc</a>. It has many features, somewhat reminiscent of Opera (in my opinion), with the advantage of being free software.</p>
<p>The interface might be a bit confusing for those used to traditional browsers, but it allows excellent tab organization and also has a compact mode where the page takes up the entire window.</p>
<p>Moreover, it’s not owned by any company, another positive point. However, it’s still in beta, though perfectly usable for daily use.</p>
<p>That said, it lacks good default privacy settings, so you&rsquo;ll probably have to tweak things yourself if that&rsquo;s a concern.</p>
<h2 id="librewolf"><a href="https://librewolf.net/">LibreWolf</a></h2>
<p><img src="/pt/posts/firefox-pessimo-alternativas/librewolf.jpg" alt="LibreWolf Browser"></p>
<p>This is by far one of the best Firefox alternatives when it comes to privacy. It looks a lot like Mozilla&rsquo;s browser but comes perfectly configured for privacy, even including uBlock Origin by default.</p>
<p>Besides being open-source and not owned by any company, <strong>they don’t accept donations(!)</strong>. From their <a href="https://librewolf.net/docs/faq">FAQ</a>, it says:</p>
<p><em>Why don’t we accept donations?</em></p>
<p><em>We don’t want to deal with the administration required to manage donations properly. If we don’t need funding, we won’t risk becoming dependent on it. And also: no donations means no expectations. That allows people working on LibreWolf the freedom to move on to other projects when they wish.</em></p>
<p>Despite all these advantages, LibreWolf&rsquo;s default settings — though ideal for privacy and security — may pose challenges for average users:</p>
<ul>
<li>Uses DuckDuckGo by default — some may prefer Google</li>
<li>Comes with uBlock Origin pre-installed — some sites might ask you to disable it</li>
<li>Uses Firefox’s strict mode by default — some sites, including Twitter, may not work</li>
<li>Deletes all cookies upon browser close</li>
<li>Doesn’t ask to save passwords by default</li>
<li>Disables DRM (Digital Rights Management) — for example, you can’t watch Netflix</li>
</ul>
<p>Still, all of this can be easily changed in the browser settings.</p>
<h1 id="which-of-these-should-zorin-os-have-picked">Which of These Should Zorin OS Have Picked?</h1>
<p>Answer: either let the user choose, or just leave Firefox.</p>
<p>The truth is that, unlike Windows, most Linux distros give you <strong>choice</strong> — meaning: a user who doesn’t care much about privacy can easily install Chrome and remove Firefox, while a more privacy-conscious user might install something like LibreWolf and remove Firefox.</p>
<p>However, something that few Linux distros do is offer that choice <strong>during installation</strong>. So far, the only distro I’ve seen doing this is <a href="https://www.raspberrypi.com/software/">Raspberry Pi OS</a>, which gives you the option to install either Chromium or Firefox. That’s why it would be interesting if Zorin OS provided these browser options for users to choose:</p>
<ul>
<li>Chromium</li>
<li>Firefox</li>
<li>Brave</li>
<li>LibreWolf</li>
<li>No browser</li>
</ul>
<p>Because, honestly, switching from Firefox to Brave won’t make much difference for most users, who will end up installing another browser anyway — just like nobody really uses Microsoft Edge.</p>
]]></content:encoded>
    </item>
  </channel>
</rss>
