-
Notifications
You must be signed in to change notification settings - Fork 838
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #4523 from muskan42/Spirograph
Spirograph
- Loading branch information
Showing
6 changed files
with
239 additions
and
5 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| ## Spirograph Simulator | ||
|
|
||
| This code simulates a Spirograph, a fun tool for drawing intricate curves. | ||
|
|
||
| **How to Play:** | ||
|
|
||
| 1. **Open the HTML file:** Double-click the `index.html` file in your web browser. | ||
| 2. **Adjust settings:** | ||
| - Change gear sizes (r1, r2, r3) and frequency values (f1, f2, f3) to modify the curve's shape (sliders or input boxes). | ||
| 3. **Start drawing:** Click the "Play" button. The spirograph will come alive! | ||
| 4. **Pause/Resume:** Click "Pause" to stop the animation and "Play" to resume. | ||
| 5. **Reset:** Click "Reset" to clear the drawing and start fresh with the current settings. | ||
| 6. **Save your artwork:** Click "Save" to download the current drawing as a PNG image. | ||
|
|
||
|
|
||
| **Getting Started:** | ||
|
|
||
| 1. Clone or download the repository. | ||
| 2. Open `index.html` in your browser. | ||
|
|
||
| **Enjoy the world of spirograph curves!** | ||
|
|
||
|  |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>Document</title> | ||
| <link rel="stylesheet" href="style.css"> | ||
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/p5.js"></script> | ||
|
|
||
| </head> | ||
| <body> | ||
| <div id="canvasContainer"></div> | ||
| <div id="inputContainer"> | ||
| <div> | ||
| <label for="f1Input">f1:</label><input id="f1Input" type="number"/> | ||
| <label for="f2Input">f2:</label><input id="f2Input" type="number"/> | ||
| <label for="f3Input">f3:</label><input id="f3Input" type="number"/> | ||
| </div> | ||
| <div> | ||
| <label for="r1Input">r1:</label><input id="r1Input" type="number"/> | ||
| <label for="r2Input">r2:</label><input id="r2Input" type="number"/> | ||
| <label for="r3Input">r3:</label><input id="r3Input" type="number"/> | ||
| </div> | ||
| <div> | ||
| <button id="pausePlayButton">Play</button> | ||
| <button id="resetButton">Reset</button> | ||
| <button id="saveButton">Save</button> | ||
| <label for="speedInput">Speed:</label><input id="speedInput" type="number"/> | ||
| <label for="radial">Radial:</label><input id="radial" type="checkbox"/> | ||
| </div> | ||
| </div> | ||
|
|
||
|
|
||
| <script src="main.js"></script> | ||
| </body> | ||
| </html> | ||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,111 @@ | ||
| let t=0; | ||
| let play = false; | ||
| let r1 =50; | ||
| let r2 =50; | ||
| let r3 =50; | ||
| let f1 =13; | ||
| let f2 =-7; | ||
| let f3 =-3; | ||
| let xprev =0; | ||
| let yprev =0; | ||
| let isRadial = false; | ||
| let speed = 1; | ||
| let myCanvas; | ||
|
|
||
| function setup() { | ||
| myCanvas = createCanvas(600,400); | ||
| myCanvas.parent(canvasContainer); | ||
| background(255); | ||
| colorMode("HSB"); | ||
| } | ||
|
|
||
| pausePlayButton.addEventListener("click",()=>{ | ||
| f1 = f1Input.value =="" ? f1:f1Input.value; | ||
| f2 = f2Input.value =="" ? f2:f2Input.value; | ||
| f3 = f3Input.value =="" ? f3:f3Input.value; | ||
| r1 = r1Input.value =="" ? r1:r1Input.value; | ||
| r2 = r2Input.value =="" ? r2:r2Input.value; | ||
| r3 = r3Input.value =="" ? r3:r3Input.value; | ||
| speed = speedInput.value =="" ? speed:parseFloat(speedInput.value); | ||
| f1Input.disabled =true; | ||
| f2Input.disabled =true; | ||
| f3Input.disabled =true; | ||
| r1Input.disabled =true; | ||
| r2Input.disabled =true; | ||
| r3Input.disabled =true; | ||
| speedInput.disabled =true; | ||
| radial.disabled =true; | ||
| isRadial = radial.checked; | ||
| play = !play; | ||
| pausePlayButton.textContent = play ? "Pause" : "Play"; | ||
| }); | ||
|
|
||
| resetButton.addEventListener("click",()=>{ | ||
| play = false; | ||
| f1Input.disabled = false; | ||
| f2Input.disabled = false; | ||
| f3Input.disabled = false; | ||
| r1Input.disabled = false; | ||
| r2Input.disabled = false; | ||
| r3Input.disabled = false; | ||
| speedInput.disabled = false; | ||
| radial.disabled = false; | ||
| pausePlayButton.textContent = "play"; | ||
| myCanvas.clear(); | ||
| background(255); | ||
| xprev = 0; | ||
| yprev =0; | ||
| t=0; | ||
| }); | ||
|
|
||
| saveButton.addEventListener("click",()=>{ | ||
| saveCanvas("myCanvas","png"); | ||
| }); | ||
|
|
||
| function draw() { | ||
| if(!play) | ||
| return; | ||
|
|
||
| translate(width/2,height/2); | ||
| let x=0; | ||
| let y=0; | ||
| let a = [r1,r2,r3]; | ||
| let c_n = [f1/100,f2/100,f3/100]; | ||
| let c_s= [0,0,0]; | ||
|
|
||
| for (let i=0; i<3; i++) { | ||
| x+= a[i] * cos(c_n[i]*t+c_s[i]); | ||
| y+= a[i] * sin(c_n[i]*t+c_s[i]); | ||
| } | ||
|
|
||
| if(!isRadial && (xprev !=0 || yprev !=0)) | ||
| line(xprev,yprev,x,y); | ||
| xprev = x; | ||
| yprev =y; | ||
| if(isRadial) | ||
| line(0,0,x,y); | ||
|
|
||
| stroke(1*t%255,2*t%255,4*t%255); | ||
| t+= speed; | ||
| } | ||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,56 @@ | ||
| body{ | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: center; | ||
| align-items: center; | ||
| background-color: black; | ||
| font-family: Arial, Helvetica, sans-serif; | ||
| } | ||
|
|
||
| #inputContainer { | ||
| display: flex; | ||
| flex-direction: column; | ||
| background-color: whitesmoke; | ||
| border-radius: 5px; | ||
| margin: 5px; | ||
| padding: 10px; | ||
| } | ||
|
|
||
| #inputContainer > div:not(:last-child) { | ||
| display: flex; | ||
| justify-content: space-around; | ||
| align-items: center; | ||
| margin: 10px; | ||
| } | ||
|
|
||
| #inputContainer > div:last-child { | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| } | ||
|
|
||
| input[type="number"] { | ||
| width: 120px; | ||
| height: 20px; | ||
| padding: 5px; | ||
| outline: none; | ||
| border-radius: 5px; | ||
| margin: 5px; | ||
| } | ||
|
|
||
| button { | ||
| border: none; | ||
| background-color: green; | ||
| color: whitesmoke; | ||
| width: 80px; | ||
| height: 40px; | ||
| border-radius: 5px; | ||
| cursor: pointer; | ||
| font-weight: bold; | ||
| margin: 10px; | ||
| } | ||
|
|
||
| label { | ||
| font-weight: bold; | ||
| margin: 5px; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.