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 @@

Tutorials

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 @@ +Tutorial : Your First Shader! + +

Creating Your First Shader

+

+ What do you typically think of when somebody says shader?
+ Perhaps you might think of Minecraft Shaders

+ +

+ While you are not wrong shaders don't always have to involve fancy lighting or graphical effects.
+ In reality shaders are actually just a set of instructions we give the browser on how to draw things!
+
+ So lets open up the shader editor! Scroll down in the toolbox until you see this button!

+ +

+ You may be greeted with a popup once you click the button. All you have to do is click allow.

+ +

+ + When the button is clicked a whole new editor appears! Isn't that neat?
+ This is the Pen+ Shader editor!

+ +

+ +

Basic UI navigation

+

The top bar.

+

+ First things first the top bar should be elaborated upon.
+ + The buttons on the left side of the screen will be used the most, so make sure to pay attention to this part.

+ + +


+ + On the other side of the top bar is a mode switcher. This allows you to switch between the Scratch and GLSL editors.

+ +

+ But for now we will stick with scratch!

+

+

Creating a basic rainbow shader!

+

+ First things first let's drag out the "For each pixel" block.
+ Once it is out in the workspace we might notice a shape appear
+ It is ok if you have a different shape than mine.

+ +

+ + Now lets drag the "set pixel color" block under our "For each pixel block". And look at that our shape turned blue! +

+ +

+ Now we can mess around with that color input to change the color of the shape! +

+ +

+ + Let's make it change color on its own though!
+ We can go into the colors category and drag out the "hue saturation and value" block!
+ If we set the saturation and value to 100 we end up with a solid red shape!
+ 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. +

+ +

+ + But it really isn't a rainbow right now. But we can fix that!
+ We can add the "Screen U" block to the "timer" block to make it change across the screen! +

+ + +

+ Now we can export our shader to Scratch!
+ Click the floppy disk and then click export! Then Name your shader and click save.

+ +

+ + 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!

+ + +

+ In the Next Tutorial we will be going over variables in shaders! +

\ 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 @@ +Tutorial : Drawing Shapes + +

Drawing Shapes!

+

Welcome!

+

+ Now there are 2 reasons you might be here. +

    +
  1. You are somebody who is new to pen+ and you are wanting to learn.
    2. +
  2. You are just curious what are in these tutorial pages.
    3. +
+ Either way this tutorial covers basic shape drawing in pen+
+ Starting off with squares if we drag out the "stamp square" block and click it we might notice that nothing is there.

+ + +

"Now why is that?"

you might ask inquisitively.
+ Well the square stamp relies off of the current pen size!
+ if we where to set the pen size to 100 and try again we will see the square appear.

+ +

+ + Now another thing we can note from this is that the color of the square is based off of the current pen color also!
+ Let's try drawing the square with a texture.

+ +

+ + Huh that is quite odd. The image seems stretched!
+ Do not fret! We can use attributes to modify the square!
+ We can use this helpful attribute setter to change the square's height multiplier!

+ + +

+ + Wow look at that! We now have a big ol dango cat on the pen layer!
+ Now what about triangles next?
+

+

Triangles!

+

+ The triangle block may look intimidating at first, due to it's length. But it is actually very simple!
+ The block itself only has 3 components each being the X and Y position of each point on the triangle!

+ +

+ Now if we where to set those coords and click the block our triangle would appear!

+ +

+ Hmm let's try adding a texture

+ +

+ Ooh what a thrilling scene! A giant dango cat in the background behind our dango cat!
+ But now that poses the question. Can we change what pixels it takes from the costume?
+ Yes we can! Though you will have to check out the Next Tutorial for that! +

\ 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 @@ +Tutorial : Shader Variables + +

Variables within Shaders

+

+ Did you know shaders could have variables in them? Let's go over creating a variable in our shader and setting it in scratch!

+ +

+ After re-opening our shader in the editor we want to go down to the variables category, then we click "Make a Variable"

+ +

+ Now a popup should appear letting us customize our variable! There are 3 Different components to a variable. It's name, type, and scope.
+ The types can be summed up like this. +

+ And scopes can be summed up like this + + Lets create a Uniform Float +

+ +

+ 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. +

+ + +

+ 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. +

+ + +

+ And that is it for now. Now go experiment! +

\ 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 @@ +Tutorial : UV Coordinates + +

UV coordinates

+

+ So we want to manipulate what pixels we render from a costume?
+ Well that is where UV coordinates come in!
+ Now one might naturally ask

What are UV coordinates?

to put it simply they are the image equivilent to X and Y, but way smaller!

+ +

+ As we can see the U coordinate goes horizontally, while the V coordinate goes vertically!

+ But how do we measure these? Well it's real simple! Each side goes from 0-1, each representing a corner in the image!

+ +

+ With that figured out we can apply this new knowledge!

+ +

Before

+ +

After

+ + +

+ And look at that. We changed what pixels it took from the costume!

+ In the Next Tutorial we will create a shader! +

\ No newline at end of file