diff --git a/main/extensions/penPlus/images/tutorials/creatingShaders/AutoChanging.gif b/main/extensions/penPlus/images/tutorials/creatingShaders/AutoChanging.gif new file mode 100644 index 0000000..3bee290 Binary files /dev/null and b/main/extensions/penPlus/images/tutorials/creatingShaders/AutoChanging.gif differ diff --git a/main/extensions/penPlus/images/tutorials/creatingShaders/AutoChangingRainbow.gif b/main/extensions/penPlus/images/tutorials/creatingShaders/AutoChangingRainbow.gif new file mode 100644 index 0000000..0293869 Binary files /dev/null and b/main/extensions/penPlus/images/tutorials/creatingShaders/AutoChangingRainbow.gif differ diff --git a/main/extensions/penPlus/images/tutorials/creatingShaders/ChangingColors.gif b/main/extensions/penPlus/images/tutorials/creatingShaders/ChangingColors.gif new file mode 100644 index 0000000..f10117b Binary files /dev/null and b/main/extensions/penPlus/images/tutorials/creatingShaders/ChangingColors.gif differ diff --git a/main/extensions/penPlus/images/tutorials/creatingShaders/ItAppears.png b/main/extensions/penPlus/images/tutorials/creatingShaders/ItAppears.png new file mode 100644 index 0000000..eb90164 Binary files /dev/null and b/main/extensions/penPlus/images/tutorials/creatingShaders/ItAppears.png differ diff --git a/main/extensions/penPlus/images/tutorials/creatingShaders/NewTriangleBlock.png b/main/extensions/penPlus/images/tutorials/creatingShaders/NewTriangleBlock.png new file mode 100644 index 0000000..0a9d67c Binary files /dev/null and b/main/extensions/penPlus/images/tutorials/creatingShaders/NewTriangleBlock.png differ diff --git a/main/extensions/penPlus/images/tutorials/creatingShaders/RainbowScript.png b/main/extensions/penPlus/images/tutorials/creatingShaders/RainbowScript.png new file mode 100644 index 0000000..823ca15 Binary files /dev/null and b/main/extensions/penPlus/images/tutorials/creatingShaders/RainbowScript.png differ diff --git a/main/extensions/penPlus/images/tutorials/creatingShaders/RethinkingVoxels.png b/main/extensions/penPlus/images/tutorials/creatingShaders/RethinkingVoxels.png new file mode 100644 index 0000000..a73d77f Binary files /dev/null and b/main/extensions/penPlus/images/tutorials/creatingShaders/RethinkingVoxels.png differ diff --git a/main/extensions/penPlus/images/tutorials/creatingShaders/Saving.gif b/main/extensions/penPlus/images/tutorials/creatingShaders/Saving.gif new file mode 100644 index 0000000..e365c9a Binary files /dev/null and b/main/extensions/penPlus/images/tutorials/creatingShaders/Saving.gif differ diff --git a/main/extensions/penPlus/images/tutorials/creatingShaders/SetPixelColor.png b/main/extensions/penPlus/images/tutorials/creatingShaders/SetPixelColor.png new file mode 100644 index 0000000..b972ad7 Binary files /dev/null and b/main/extensions/penPlus/images/tutorials/creatingShaders/SetPixelColor.png differ diff --git a/main/extensions/penPlus/images/tutorials/creatingShaders/ShaderButton.png b/main/extensions/penPlus/images/tutorials/creatingShaders/ShaderButton.png new file mode 100644 index 0000000..d879384 Binary files /dev/null and b/main/extensions/penPlus/images/tutorials/creatingShaders/ShaderButton.png differ diff --git a/main/extensions/penPlus/images/tutorials/creatingShaders/UsingShader.gif b/main/extensions/penPlus/images/tutorials/creatingShaders/UsingShader.gif new file mode 100644 index 0000000..e006274 Binary files /dev/null and b/main/extensions/penPlus/images/tutorials/creatingShaders/UsingShader.gif differ diff --git a/main/extensions/penPlus/images/tutorials/creatingShaders/caution.png b/main/extensions/penPlus/images/tutorials/creatingShaders/caution.png new file mode 100644 index 0000000..f0e554c Binary files /dev/null and b/main/extensions/penPlus/images/tutorials/creatingShaders/caution.png differ diff --git a/main/extensions/penPlus/images/tutorials/creatingShaders/newEditor.png b/main/extensions/penPlus/images/tutorials/creatingShaders/newEditor.png new file mode 100644 index 0000000..10de07e Binary files /dev/null and b/main/extensions/penPlus/images/tutorials/creatingShaders/newEditor.png differ diff --git a/main/extensions/penPlus/images/tutorials/drawingShapes/FixedAspect.png b/main/extensions/penPlus/images/tutorials/drawingShapes/FixedAspect.png new file mode 100644 index 0000000..9e84a47 Binary files /dev/null and b/main/extensions/penPlus/images/tutorials/drawingShapes/FixedAspect.png differ diff --git a/main/extensions/penPlus/images/tutorials/drawingShapes/Funni.png b/main/extensions/penPlus/images/tutorials/drawingShapes/Funni.png new file mode 100644 index 0000000..7eff07a Binary files /dev/null and b/main/extensions/penPlus/images/tutorials/drawingShapes/Funni.png differ diff --git a/main/extensions/penPlus/images/tutorials/drawingShapes/ThankGolly.png b/main/extensions/penPlus/images/tutorials/drawingShapes/ThankGolly.png new file mode 100644 index 0000000..95ab545 Binary files /dev/null and b/main/extensions/penPlus/images/tutorials/drawingShapes/ThankGolly.png differ diff --git a/main/extensions/penPlus/images/tutorials/drawingShapes/TriangleExample.png b/main/extensions/penPlus/images/tutorials/drawingShapes/TriangleExample.png new file mode 100644 index 0000000..0270460 Binary files /dev/null and b/main/extensions/penPlus/images/tutorials/drawingShapes/TriangleExample.png differ diff --git a/main/extensions/penPlus/images/tutorials/drawingShapes/drawTriangleBlock.png b/main/extensions/penPlus/images/tutorials/drawingShapes/drawTriangleBlock.png new file mode 100644 index 0000000..3ea6bea Binary files /dev/null and b/main/extensions/penPlus/images/tutorials/drawingShapes/drawTriangleBlock.png differ diff --git a/main/extensions/penPlus/images/tutorials/drawingShapes/stretchy.png b/main/extensions/penPlus/images/tutorials/drawingShapes/stretchy.png new file mode 100644 index 0000000..9bb4925 Binary files /dev/null and b/main/extensions/penPlus/images/tutorials/drawingShapes/stretchy.png differ diff --git a/main/extensions/penPlus/images/tutorials/drawingShapes/whyNotthere.png b/main/extensions/penPlus/images/tutorials/drawingShapes/whyNotthere.png new file mode 100644 index 0000000..79b0e7c Binary files /dev/null and b/main/extensions/penPlus/images/tutorials/drawingShapes/whyNotthere.png differ diff --git a/main/extensions/penPlus/images/tutorials/drawingShapes/whySoLong.png b/main/extensions/penPlus/images/tutorials/drawingShapes/whySoLong.png new file mode 100644 index 0000000..c4ef643 Binary files /dev/null and b/main/extensions/penPlus/images/tutorials/drawingShapes/whySoLong.png differ diff --git a/main/extensions/penPlus/images/tutorials/drawingShapes/yippie.png b/main/extensions/penPlus/images/tutorials/drawingShapes/yippie.png new file mode 100644 index 0000000..9ff8149 Binary files /dev/null and b/main/extensions/penPlus/images/tutorials/drawingShapes/yippie.png differ diff --git a/main/extensions/penPlus/images/tutorials/shaderVariables/CreateVariable.png b/main/extensions/penPlus/images/tutorials/shaderVariables/CreateVariable.png new file mode 100644 index 0000000..cb32151 Binary files /dev/null and b/main/extensions/penPlus/images/tutorials/shaderVariables/CreateVariable.png differ diff --git a/main/extensions/penPlus/images/tutorials/shaderVariables/InAction.gif b/main/extensions/penPlus/images/tutorials/shaderVariables/InAction.gif new file mode 100644 index 0000000..01ae5d4 Binary files /dev/null and b/main/extensions/penPlus/images/tutorials/shaderVariables/InAction.gif differ diff --git a/main/extensions/penPlus/images/tutorials/shaderVariables/Loading.gif b/main/extensions/penPlus/images/tutorials/shaderVariables/Loading.gif new file mode 100644 index 0000000..2e76243 Binary files /dev/null and b/main/extensions/penPlus/images/tutorials/shaderVariables/Loading.gif differ diff --git a/main/extensions/penPlus/images/tutorials/shaderVariables/SettingOurVariable.gif b/main/extensions/penPlus/images/tutorials/shaderVariables/SettingOurVariable.gif new file mode 100644 index 0000000..36ae7c9 Binary files /dev/null and b/main/extensions/penPlus/images/tutorials/shaderVariables/SettingOurVariable.gif differ diff --git a/main/extensions/penPlus/images/tutorials/shaderVariables/VariableModal.png b/main/extensions/penPlus/images/tutorials/shaderVariables/VariableModal.png new file mode 100644 index 0000000..f0f84b0 Binary files /dev/null and b/main/extensions/penPlus/images/tutorials/shaderVariables/VariableModal.png differ diff --git a/main/extensions/penPlus/images/tutorials/shaderVariables/creatingVariable.gif b/main/extensions/penPlus/images/tutorials/shaderVariables/creatingVariable.gif new file mode 100644 index 0000000..58d9c48 Binary files /dev/null and b/main/extensions/penPlus/images/tutorials/shaderVariables/creatingVariable.gif differ diff --git a/main/extensions/penPlus/images/tutorials/shaderVariables/replaceTimer.png b/main/extensions/penPlus/images/tutorials/shaderVariables/replaceTimer.png new file mode 100644 index 0000000..bc1a80f Binary files /dev/null and b/main/extensions/penPlus/images/tutorials/shaderVariables/replaceTimer.png differ diff --git a/main/extensions/penPlus/images/tutorials/shaderVariables/usingVariable.gif b/main/extensions/penPlus/images/tutorials/shaderVariables/usingVariable.gif new file mode 100644 index 0000000..d54028b Binary files /dev/null and b/main/extensions/penPlus/images/tutorials/shaderVariables/usingVariable.gif differ diff --git a/main/extensions/penPlus/images/tutorials/uvCoordinates/ApplyUVKnowledge.png b/main/extensions/penPlus/images/tutorials/uvCoordinates/ApplyUVKnowledge.png new file mode 100644 index 0000000..5b9d408 Binary files /dev/null and b/main/extensions/penPlus/images/tutorials/uvCoordinates/ApplyUVKnowledge.png differ diff --git a/main/extensions/penPlus/images/tutorials/uvCoordinates/uvDiagram.png b/main/extensions/penPlus/images/tutorials/uvCoordinates/uvDiagram.png new file mode 100644 index 0000000..0d10fc2 Binary files /dev/null and b/main/extensions/penPlus/images/tutorials/uvCoordinates/uvDiagram.png differ diff --git a/main/extensions/penPlus/images/tutorials/uvCoordinates/uvMeasurement.png b/main/extensions/penPlus/images/tutorials/uvCoordinates/uvMeasurement.png new file mode 100644 index 0000000..2bcf408 Binary files /dev/null and b/main/extensions/penPlus/images/tutorials/uvCoordinates/uvMeasurement.png differ diff --git a/main/extensions/penPlus/main.html b/main/extensions/penPlus/main.html index 1fef321..dcff1ef 100644 --- a/main/extensions/penPlus/main.html +++ b/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 diff --git a/main/extensions/penPlus/tutorials/creatingShaders.html b/main/extensions/penPlus/tutorials/creatingShaders.html new file mode 100644 index 0000000..cdada85 --- /dev/null +++ b/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> \ No newline at end of file diff --git a/main/extensions/penPlus/tutorials/drawingShapes.html b/main/extensions/penPlus/tutorials/drawingShapes.html new file mode 100644 index 0000000..5557932 --- /dev/null +++ b/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> \ No newline at end of file diff --git a/main/extensions/penPlus/tutorials/shaderVariables.html b/main/extensions/penPlus/tutorials/shaderVariables.html new file mode 100644 index 0000000..e1ade5e --- /dev/null +++ b/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> \ No newline at end of file diff --git a/main/extensions/penPlus/tutorials/uvCoordinates.html b/main/extensions/penPlus/tutorials/uvCoordinates.html new file mode 100644 index 0000000..45642ab --- /dev/null +++ b/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> \ No newline at end of file