Complete tutorials

main/extensions/penPlus/main.html

@@ -18,11 +18,10 @@ <h2>
   Tutorials
 </h2>
 <ul>
-  <li><a href="">Drawing your first triangle</a></li>
-  <li><a href="">Drawing your first square</a></li>
-  <li><a href="">Explaining Attributes</a></li>
-  <li><a href="">Making your first shader</a></li>
-  <li><a href="">Variables within shaders</a></li>
+  <li><a href="?page=extensions%2FpenPlus%2Ftutorials%2FdrawingShapes">Drawing Shapes</a></li>
+  <li><a href="?page=extensions%2FpenPlus%2Ftutorials%2FuvCoordinates">UV coordinates</a></li>
+  <li><a href="?page=extensions%2FpenPlus%2Ftutorials%2FcreatingShaders">Making your first shader</a></li>
+  <li><a href="?page=extensions%2FpenPlus%2Ftutorials%2FshaderVariables">Variables within shaders</a></li>
 </ul>
 <h2>
   Block Categories

main/extensions/penPlus/tutorials/creatingShaders.html

@@ -0,0 +1,98 @@
+<page-title>Tutorial : Your First Shader!</page-title>
+
+<h1 class="centered">Creating Your First Shader</h1>
+<p>
+    What do you typically think of when somebody says shader?<br>
+    Perhaps you might think of Minecraft Shaders<br><br>
+    <img class="centered" style=" width: 80%; height: auto; border-radius: 16px; filter: drop-shadow(0 0 10px var(--link-hover));" src="main/extensions/penPlus/images/tutorials/creatingShaders/RethinkingVoxels.png"></img>
+    <br><br>
+    While you are not wrong shaders don't always have to involve fancy lighting or graphical effects.<br>
+    In reality shaders are actually just a set of instructions we give the browser on how to draw things!<br>
+    <br>
+    So lets open up the shader editor! Scroll down in the toolbox until you see this button!<br><br>
+    <img class="centered" style=" width: 40%; height: auto; border-radius: 16px; filter: drop-shadow(0 0 10px var(--link-hover));" src="main/extensions/penPlus/images/tutorials/creatingShaders/ShaderButton.png"></img>
+    <br><br>
+    You may be greeted with a popup once you click the button. All you have to do is click allow.<br><br>
+    <img class="centered" style=" width: 60%; height: auto; border-radius: 16px; filter: drop-shadow(0 0 10px var(--link-hover));" src="main/extensions/penPlus/images/tutorials/creatingShaders/caution.png"></img>
+    <br><br>
+
+    When the button is clicked a whole new editor appears! Isn't that neat?<br>
+    This is the Pen+ Shader editor!<br><br>
+    <img class="centered" style=" width: 80%; height: auto; border-radius: 16px; filter: drop-shadow(0 0 10px var(--link-hover));" src="main/extensions/penPlus/images/tutorials/creatingShaders/newEditor.png"></img>
+</p>
+
+<h2>Basic UI navigation</h2>
+<h3>The top bar.</h3>
+<p>
+    First things first the top bar should be elaborated upon.<br>
+
+    The buttons on the left side of the screen will be used the most, so make sure to pay attention to this part.<br><br>
+
+    <img style=" width: 50%; height: auto; border-radius: 16px; filter: drop-shadow(0 0 10px var(--link-hover));" class="centered" src="main/extensions/penPlus/images/topBar_Buttons.png"></img>
+    <ul>
+        <li>
+            The button with the legally distinct cat on it will close the shader editor. 
+            Remember there will be a warning before closing the editor, So always save before quitting!
+        </li>
+        <li>
+            The gear button is your options drop-down. Which will let you turn on dark mode and configure some settings for the editor, like auto compilation and block colors.
+        </li>
+        <li>
+            The middle icon which will be called the terminal icon will hide/show the stage and variable pane.
+        </li>
+        <li>
+            The badge is just a credits screen for the shader editor showing contributors and testers.
+        </li>
+        <li>
+            The final one, which has a floppy disc as it's icon, shows your file management options.<br><br>
+            Exporting and Importing allow you to edit and save shaders to your project!
+        </li>
+    </ul><br>
+
+    On the other side of the top bar is a mode switcher. This allows you to switch between the Scratch and GLSL editors.<br><br>
+    <img style=" width: 25%; height: auto; border-radius: 16px; filter: drop-shadow(0 0 10px var(--link-hover));" class="centered" src="main/extensions/penPlus/images/topBar_Mode.png"></img>
+    <br><br>
+    But for now we will stick with scratch!<br><br>
+</p>
+<h2>Creating a basic rainbow shader!</h2>
+<p>
+    First things first let's drag out the "For each pixel" block.<br>
+    Once it is out in the workspace we might notice a shape appear<br>
+    It is ok if you have a different shape than mine.<br><br>
+    <img style=" width: 80%; height: auto; border-radius: 16px; filter: drop-shadow(0 0 10px var(--link-hover));" class="centered" src="main/extensions/penPlus/images/tutorials/creatingShaders/ItAppears.png"></img>
+    <br><br>
+
+    Now lets drag the "set pixel color" block under our "For each pixel block". And look at that our shape turned blue!
+    <br><br>
+    <img style=" width: 80%; height: auto; border-radius: 16px; filter: drop-shadow(0 0 10px var(--link-hover));" class="centered" src="main/extensions/penPlus/images/tutorials/creatingShaders/SetPixelColor.png"></img>
+    <br><br>
+    Now we can mess around with that color input to change the color of the shape!
+    <br><br>
+    <img style=" width: 80%; height: auto; border-radius: 16px; filter: drop-shadow(0 0 10px var(--link-hover));" class="centered" src="main/extensions/penPlus/images/tutorials/creatingShaders/ChangingColors.gif"></img>
+    <br><br>
+
+    Let's make it change color on its own though!<br>
+    We can go into the colors category and drag out the "hue saturation and value" block!<br>
+    If we set the saturation and value to 100 we end up with a solid red shape!<br>
+    We can go into sensing and put the "timer" block in the hue input to have it change colors over time. Though you may want to multiply the timer by a number also.
+    <br><br>
+    <img style=" width: 80%; height: auto; border-radius: 16px; filter: drop-shadow(0 0 10px var(--link-hover));" class="centered" src="main/extensions/penPlus/images/tutorials/creatingShaders/AutoChanging.gif"></img>
+    <br><br>
+
+    But it really isn't a rainbow right now. But we can fix that!<br>
+    We can add the "Screen U" block to the "timer" block to make it change across the screen!
+    <br><br>
+    <img style=" width: 60%; height: auto; border-radius: 16px; filter: drop-shadow(0 0 10px var(--link-hover));" class="centered" src="main/extensions/penPlus/images/tutorials/creatingShaders/RainbowScript.png"></img>
+    <img style=" width: 80%; height: auto; border-radius: 16px; filter: drop-shadow(0 0 10px var(--link-hover));" class="centered" src="main/extensions/penPlus/images/tutorials/creatingShaders/AutoChangingRainbow.gif"></img>
+    <br><br>
+    Now we can export our shader to Scratch!<br>
+    Click the floppy disk and then click export! Then Name your shader and click save.<br><br>
+    <img style=" width: 80%; height: auto; border-radius: 16px; filter: drop-shadow(0 0 10px var(--link-hover));" class="centered" src="main/extensions/penPlus/images/tutorials/creatingShaders/Saving.gif"></img>
+    <br><br>
+
+    Now we can close the shader editor and head back to Scratch, and drag out the "Draw Triangle Using" block. Making sure it uses our new shader!<br><br>
+    <img style=" width: 60%; height: auto; border-radius: 16px; filter: drop-shadow(0 0 10px var(--link-hover));" class="centered" src="main/extensions/penPlus/images/tutorials/creatingShaders/NewTriangleBlock.png"></img>
+    <img style=" width: 80%; height: auto; border-radius: 16px; filter: drop-shadow(0 0 10px var(--link-hover));" class="centered" src="main/extensions/penPlus/images/tutorials/creatingShaders/UsingShader.gif"></img>
+    <br><br>
+    In the <a href="?page=extensions%2FpenPlus%2Ftutorials%2FshaderVariables">Next Tutorial</a> we will be going over variables in shaders!
+</p>

main/extensions/penPlus/tutorials/drawingShapes.html

@@ -0,0 +1,51 @@
+<page-title>Tutorial : Drawing Shapes</page-title>
+
+<h1 class="centered">Drawing Shapes!</h1>
+<h2>Welcome!</h2>
+<p>
+    Now there are 2 reasons you might be here.
+    <ol>
+        <li>You are somebody who is new to pen+ and you are wanting to learn.</li>
+        <li>You are just curious what are in these tutorial pages.</li>
+    </ol>
+    Either way this tutorial covers basic shape drawing in pen+<br>
+    Starting off with squares if we drag out the "stamp square" block and click it we might notice that nothing is there.<br><br>
+    <img class="centered" style=" width: 60%; height: auto; border-radius: 16px; filter: drop-shadow(0 0 10px var(--link-hover));" src="main/extensions/penPlus/images/tutorials/drawingShapes/whyNotthere.png"></img>
+
+    <h3>"Now why is that?"</h3> you might ask inquisitively.<br>
+    Well the square stamp relies off of the current pen size!<br>
+    if we where to set the pen size to 100 and try again we will see the square appear.<br><br>
+    <img class="centered" style=" width: 60%; height: auto; border-radius: 16px; filter: drop-shadow(0 0 10px var(--link-hover));" src="main/extensions/penPlus/images/tutorials/drawingShapes/yippie.png"></img>
+    <br><br>
+
+    Now another thing we can note from this is that the color of the square is based off of the current pen color also!<br>
+    Let's try drawing the square with a texture.<br><br>
+    <img class="centered" style=" width: 60%; height: auto; border-radius: 16px; filter: drop-shadow(0 0 10px var(--link-hover));" src="main/extensions/penPlus/images/tutorials/drawingShapes/stretchy.png"></img>
+    <br><br>
+
+    Huh that is quite odd. The image seems stretched!<br>
+    Do not fret! We can use attributes to modify the square!<br>
+    We can use this helpful attribute setter to change the square's height multiplier!<br><br>
+    <img class="centered" style=" width: 60%; height: auto; border-radius: 16px; filter: drop-shadow(0 0 10px var(--link-hover));" src="main/extensions/penPlus/images/tutorials/drawingShapes/ThankGolly.png"></img>
+    <img class="centered" style=" width: 60%; height: auto; border-radius: 16px; filter: drop-shadow(0 0 10px var(--link-hover));" src="main/extensions/penPlus/images/tutorials/drawingShapes/FixedAspect.png"></img>
+    <br><br>
+
+    Wow look at that! We now have a big ol dango cat on the pen layer!<br>
+    Now what about triangles next?<br>
+</p>
+<h2>Triangles!</h2>
+<p>
+    The triangle block may look intimidating at first, due to it's length. But it is actually very simple!<br>
+    The block itself only has 3 components each being the X and Y position of each point on the triangle!<br><br>
+    <img class="centered" style=" width: 60%; height: auto; border-radius: 16px; filter: drop-shadow(0 0 10px var(--link-hover));" src="main/extensions/penPlus/images/tutorials/drawingShapes/drawTriangleBlock.png"></img>
+    <br><br>
+    Now if we where to set those coords and click the block our triangle would appear!<br><br>
+    <img class="centered" style=" width: 60%; height: auto; border-radius: 16px; filter: drop-shadow(0 0 10px var(--link-hover));" src="main/extensions/penPlus/images/tutorials/drawingShapes/TriangleExample.png"></img>
+    <br><br>
+    Hmm let's try adding a texture<br><br>
+    <img class="centered" style=" width: 60%; height: auto; border-radius: 16px; filter: drop-shadow(0 0 10px var(--link-hover));" src="main/extensions/penPlus/images/tutorials/drawingShapes/Funni.png"></img>
+    <br><br>
+    Ooh what a thrilling scene! A giant dango cat in the background behind our dango cat!<br>
+    But now that poses the question. Can we change what pixels it takes from the costume?<br>
+    Yes we can! Though you will have to check out the <a href="?page=extensions%2FpenPlus%2Ftutorials%2FuvCoordinates">Next Tutorial</a> for that!
+</p>

main/extensions/penPlus/tutorials/shaderVariables.html

@@ -0,0 +1,44 @@
+<page-title>Tutorial : Shader Variables</page-title>
+
+<h1 class="centered">Variables within Shaders</h1>
+<p>
+    Did you know shaders could have variables in them? Let's go over creating a variable in our shader and setting it in scratch!<br><br>
+    <img style=" width: 80%; height: auto; border-radius: 16px; filter: drop-shadow(0 0 10px var(--link-hover));" class="centered" src="main/extensions/penPlus/images/tutorials/shaderVariables/Loading.gif"></img>
+    <br><br>
+    After re-opening our shader in the editor we want to go down to the variables category, then we click "Make a Variable"<br><br>
+    <img style=" width: 60%; height: auto; border-radius: 16px; filter: drop-shadow(0 0 10px var(--link-hover));" class="centered" src="main/extensions/penPlus/images/tutorials/shaderVariables/CreateVariable.png"></img>
+    <br><br>
+    Now a popup should appear letting us customize our variable! There are 3 Different components to a variable. It's name, type, and scope.<br>
+    The types can be summed up like this.
+    <ul>
+        <li>Float - A number</li>
+        <li>Vectors 2-4 - A number with multiple parts, like X,Y, and Z</li>
+        <li>Texture - A costume</li>
+        <li>Cubemap - A box with pictures on the sides</li>
+        <li>Matrix - A 2D list of numbers</li>
+    </ul>
+    And scopes can be summed up like this
+    <ul>
+        <li>Array - Lists</li>
+        <li>Uniforms - A global variable that we can set from scratch</li>
+        <li>Attribute - A variable for each point of a shape</li>
+        <li>Varying - Set on each vertex it smoothly transitions between pixels</li>
+        <li>Hat - A thread variable!</li>
+    </ul>
+    Lets create a Uniform Float
+    <br><br>
+    <img style=" width: 80%; height: auto; border-radius: 16px; filter: drop-shadow(0 0 10px var(--link-hover));" class="centered" src="main/extensions/penPlus/images/tutorials/shaderVariables/creatingVariable.gif"></img>
+    <br><br>
+    We can replace the "timer" block with our new variable. You may notice the "Uniforms/Arrays" button below our preview that will let us mess around with our new variable.
+    <br><br>
+    <img style=" width: 60%; height: auto; border-radius: 16px; filter: drop-shadow(0 0 10px var(--link-hover));" class="centered" src="main/extensions/penPlus/images/tutorials/shaderVariables/creatingVariable.gif"></img>
+    <img style=" width: 40%; height: auto; border-radius: 16px; filter: drop-shadow(0 0 10px var(--link-hover));" class="centered" src="main/extensions/penPlus/images/tutorials/shaderVariables/usingVariable.gif"></img>
+    <br><br>
+    Now lets export our shader again this time overriding our last one, unless you don't want to. Make sure you also have the variable name remembered.
+    I named mine Rainbow. Since we are using a Float we can use the "Set number" block.
+    <br><br>
+    <img style=" width: 80%; height: auto; border-radius: 16px; filter: drop-shadow(0 0 10px var(--link-hover));" class="centered" src="main/extensions/penPlus/images/tutorials/shaderVariables/SettingOurVariable.gif"></img>
+    <img style=" width: 80%; height: auto; border-radius: 16px; filter: drop-shadow(0 0 10px var(--link-hover));" class="centered" src="main/extensions/penPlus/images/tutorials/shaderVariables/InAction.gif"></img>
+    <br><br>
+    And that is it for now. Now go experiment!
+</p>

main/extensions/penPlus/tutorials/uvCoordinates.html

@@ -0,0 +1,24 @@
+<page-title>Tutorial : UV Coordinates</page-title>
+
+<h1 class="centered">UV coordinates</h1>
+<p>
+    So we want to manipulate what pixels we render from a costume?<br>
+    Well that is where UV coordinates come in!<br>
+    Now one might naturally ask <h3>What are UV coordinates?</h3> to put it simply they are the image equivilent to X and Y, but way smaller!<br><br>
+    <img class="centered" style=" width: 40%; height: auto; border-radius: 16px; filter: drop-shadow(0 0 10px var(--link-hover));" src="main/extensions/penPlus/images/tutorials/uvCoordinates/uvDiagram.png"></img>
+    <br><br>
+    As we can see the U coordinate goes horizontally, while the V coordinate goes vertically!<br><br>
+    But how do we measure these? Well it's real simple! Each side goes from 0-1, each representing a corner in the image!<br><br>
+    <img class="centered" style=" width: 40%; height: auto; border-radius: 16px; filter: drop-shadow(0 0 10px var(--link-hover));" src="main/extensions/penPlus/images/tutorials/uvCoordinates/uvMeasurement.png"></img>
+    <br><br>
+    With that figured out we can apply this new knowledge!<br><br>
+
+    <h2 class="centered">Before</h2>
+    <img class="centered" style=" width: 80%; height: auto; border-radius: 16px; filter: drop-shadow(0 0 10px var(--link-hover));" src="main/extensions/penPlus/images/tutorials/drawingShapes/Funni.png"></img>
+    <h2 class="centered">After</h2>
+    <img class="centered" style=" width: 80%; height: auto; border-radius: 16px; filter: drop-shadow(0 0 10px var(--link-hover));" src="main/extensions/penPlus/images/tutorials/uvCoordinates/ApplyUVKnowledge.png"></img>
+
+    <br><br>
+    And look at that. We changed what pixels it took from the costume!<br><br>
+    In the <a href="?page=extensions%2FpenPlus%2Ftutorials%2FcreatingShaders">Next Tutorial</a> we will create a shader!
+</p>