Skip to content

Commit

Permalink
more work on instructions
Browse files Browse the repository at this point in the history
  • Loading branch information
@kfahn22
kfahn22 committed Oct 18, 2024
1 parent 348f462 commit 695b273
Show file tree
Hide file tree
Showing 2 changed files with 29 additions and 18 deletions.
22 changes: 16 additions & 6 deletions docs/instructions.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,8 @@
</head>

<body>
<header id="instructions">
<h1>Instructions</h1>
<header >
<h1 id="instructions">Instructions</h1>
</header>
<div>
<h2>1. Choose the Number of L-systems to Render</h2>
Expand Down Expand Up @@ -70,7 +70,7 @@ <h2>2. Choose a Ruleset</h2>
</div>
<br>
<div>
<h2>Translation and Scale in p5.js</h2>
<h2>Translations</h2>
<p>As explained in the <a href="https://p5js.org/reference/p5/translate/">documentation,</a> by default the origin of the
coordinate system in p5.js is the top-left corner of the canvas. While some of the the rule-sets start in the top-left corner, the majority do not. (You can see the starting points for the rulesets <a href="https://github.com/kfahn22/L-System-Pattern-Generator/blob/main/docs/RULE-SETS/rule-sets.md">here</a>, where the start is marked by a red circle.) For example, the ruleset we have been looking at--ADH231a--starts in the middle of the left boundary of the canvas. Therefore, if the ruleset is changed, the origin of the canvas needs to be adjusted using the "Translate x" and "Translate y" sliders. Behind the scenes, the code is using translate() function (turtle.js, line 168). The translation is a percentage of the canvas width and height so that the code doesn't break for different canvas sizes.</p>
<br>
Expand All @@ -83,7 +83,14 @@ <h2>Translation and Scale in p5.js</h2>
<p>Looking at the image, it looks like the ruleset begins roughly half-way across the width of the canvas and almost at the bottom. If we change the "Translate x" slider to 0.49 and the "Translate y" slider to 0.9, the L-system is now properly centered.</p>
<p align="center"><img src="./assets/switch-ruleset2.jpg" width="500px"></p>
<br>
<p>If you are unfamiliar with translations and would like to learn more, I recommmend watching Daniel Shiffman's tutorial on the subject.</p>
<h2>Shape Size</h2>
<p>The shape size r will have a huge impact on what the pattern looks like. I have adjusted the size of the flower. (While I call it scale, I am not using the scale() function.) It is defined in the shape_ui.js file as a percentage of the grid length. (See the selectShape() function.) In the following two images, I have adjusted the size of the flower using the "Shape Scale" slider.</p>
<br>
<p align="center"><img src="./assets/increase-flower-scale.jpg" width="500px"></p>
<br>
<p align="center"><img src="./assets/decrease-flower-scale.jpg" width="500px"></p>
<br>
<p>If you are unfamiliar with transformations and would like to learn more, I recommmend watching Daniel Shiffman's tutorial on the subject.</p>
</div>
<p align="center">
<iframe width="60%" height="600px"
Expand All @@ -100,15 +107,18 @@ <h2>3. Decide Whether to Keep the L-system Global Variables the Same</h2>
<br>
<p>In the following image, "Translate x" is not synchronized. </p>
<p align="center"><img src="./assets/different-x-translation.jpg" alt="different-x-translatation" width="500px"></p>
</div>

<div>
<h2>4. Decide What Shape or Polar Curve to Use</h2>
<h2>5. Decide What Shape or Polar Curve to Use</h2>
<p>There are a large number of polar curves or shapes to choose from, including the gear, supershape, and heart curves and various spirals. You can learn more about the polar curves <a href="https://github.com/kfahn22/L-System-Pattern-Generator/blob/main/docs/POLAR-SHAPES/polar-shapes.md">here.</a> The code for the shapes can be found in the <a href="https://github.com/kfahn22/L-System-Pattern-Generator/blob/main/code/L-system-playground/shapes.js">shapes.js</a>file.</p>
<br>
<p align="center"><img src="./assets/shape-dropdown.jpg" alt="shape-dropdown" width="500px"></p>
</div>

<br>
<div>
<h2>5. Choose the Background, Stroke, and Fill Color, Alpha and StrokeWeight</h2>
<h2>6. Choose the Background, Stroke, and Fill Color, Alpha and StrokeWeight</h2>
<p>Because the shapes are layering over top of each other, I have found it generally best to keep the alpha on the lower side (150 is good).</p>

</div>
Expand Down
25 changes: 13 additions & 12 deletions docs/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,10 @@ header {
/* background-color: #def0ed; */
background-repeat: repeat-x;
background-size: cover;
height: 25vh;
margin-bottom: 5%;
height: 20vh;
margin-bottom: 1%;
color: #000;
font-size: 100%;
/* font-size: 100%; */
}

/* header #index {
Expand Down Expand Up @@ -74,13 +74,18 @@ li {
h1 {
font-family: Arial, Helvetica, sans-serif;
padding: 2%;
font-size: 275%;
font-size: 300%;
text-align: center;
text-transform: uppercase;
text-shadow: 2px 2px #0d1a44;
color: #ffa91f;
}

#instructions {
margin: auto;
font-size: 400%;
}

h2 {
font-family: Arial, Helvetica, sans-serif;
padding-bottom: 1%;
Expand Down Expand Up @@ -110,7 +115,7 @@ canvas {
padding: 1vw;
background-color: white;
color: black;
width: 60%
width: 60%;
/* max-width: 500px; */
}

Expand All @@ -136,8 +141,6 @@ img {
list-style: none;
width: 100%; /* Make the ul take full width */
max-width: 1500px; /* Optional: max width for larger screens */


}

.nav-list li {
Expand All @@ -161,8 +164,6 @@ img {
background-color: #545352;
}



#demo {
margin-left: 2%;
margin-right: 2%;
Expand All @@ -176,8 +177,8 @@ img {
/* } */

/* .flex-container > div { */
/* background-color: #fff; */
/* margin: 10px;
/* background-color: #fff; */
/* margin: 10px;
padding: 10px 15px;
font-size: 30px;
} */
Expand All @@ -186,4 +187,4 @@ img {
display: flex;
flex-direction: row;
justify-content: space-between;
} */
} */

0 comments on commit 695b273

Please sign in to comment.