diff --git a/Games/Spirograph/Readme.md b/Games/Spirograph/Readme.md new file mode 100644 index 0000000000..e336157d4d --- /dev/null +++ b/Games/Spirograph/Readme.md @@ -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!** + +![Spirograph](https://github.com/GSSoC24/Contributor/assets/141642724/bf5e34a3-b8a8-4d7f-9732-894a20fbb7a9) \ No newline at end of file diff --git a/Games/Spirograph/index.html b/Games/Spirograph/index.html new file mode 100644 index 0000000000..83183785d4 --- /dev/null +++ b/Games/Spirograph/index.html @@ -0,0 +1,48 @@ + + + + + + Document + + + + + +
+
+
+ + + +
+
+ + + +
+
+ + + + + +
+
+ + + + + + + + + + + + + + + + + diff --git a/Games/Spirograph/main.js b/Games/Spirograph/main.js new file mode 100644 index 0000000000..507ef01cd8 --- /dev/null +++ b/Games/Spirograph/main.js @@ -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; +} + + + + + + + + + + + + + + + + + + + + + diff --git a/Games/Spirograph/style.css b/Games/Spirograph/style.css new file mode 100644 index 0000000000..e83b7eeb62 --- /dev/null +++ b/Games/Spirograph/style.css @@ -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; +} \ No newline at end of file diff --git a/README.md b/README.md index b7e9430917..bf8891692d 100644 --- a/README.md +++ b/README.md @@ -602,7 +602,7 @@ This repository also provides one such platforms where contributers come over an | [Emoji_Intruder](https://github.com/kunjgit/GameZone/tree/main/Games/Emoji_Intruder) | [Guess The Weapon](https://github.com/kunjgit/GameZone/tree/main/Games/Guess_The_Weapon) | [Guess Who](https://github.com/kunjgit/GameZone/tree/main/Games/Guess_Who) | [Pop My Balloon](https://github.com/kunjgit/GameZone/tree/main/Games/Pop_My_Balloon) | [Color_Blast](https://github.com/kunjgit/GameZone/tree/main/Games/Color_Blast) | | [Wordling](https://github.com/kunjgit/GameZone/tree/main/Games/Wordling) | [HTML5_Controller_Tester](https://github.com/kunjgit/GameZone/tree/main/Games/HTML5_Controller_Tester) -| [Maze_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Maze_Game) | [Coloron](https://github.com/kunjgit/GameZone/tree/main/Games/Coloron). | +| [Maze_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Maze_Game) | [Coloron](https://github.com/kunjgit/GameZone/tree/main/Games/Coloron). | [Spirograph](https://github.com/kunjgit/GameZone/tree/main/Games/Spirograph) | | [Black_jackk](https://github.com/kunjgit/GameZone/tree/main/Games/Black_jackk) | [Audio_Wordle](https://github.com/kunjgit/GameZone/tree/main/Games/Audio_Wordle) | [Earth_Guardian](https://github.com/kunjgit/GameZone/tree/main/Games/Earth_Guardian) | | [escaperoom](https://github.com/kunjgit/GameZone/tree/main/Games/escaperoom) @@ -785,16 +785,12 @@ This repository also provides one such platforms where contributers come over an | [Bunny is Lost](https://github.com/kunjgit/GameZone/tree/main/Games/Bunny_is_Lost)| |[Steam_Punk](https://github.com/kunjgit/GameZone/tree/main/Games/Steam_Punk)| |[Tower Defence Game](https://github.com/Will2Jacks/GameZoneForked/tree/Task/Games/Tower_Defence_Game)| -<<<<<<< HEAD - -======= |[Ghost Busting Game](https://github.com/kunjgit/GameZone/tree/main/Games/Ghost_busting_game)| |[Wheel_of_fortune](https://github.com/Will2Jacks/GameZoneForked/tree/Task/Games/Wheel_of_fortune)| |[Dot_Box_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Dot_Box_Game)| | [Cosmic_Blast](https://github.com/kunjgit/GameZone/tree/main/Games/Cosmic_Blast) | |[Mole](https://github.com/taneeshaa15/GameZone/tree/main/Games/Mole)| |[Pottery-Game](https://github.com/kunjgit/GameZone/tree/main/Games/Pottery-Game)| ->>>>>>> c24ab932e1702441882a65b80d713ea232e18c46 | [Ganesh QR Maker](https://github.com/kunjgit/GameZone/tree/main/Games/Ganesh_QR_Maker) | diff --git a/assets/images/Spirograph.png b/assets/images/Spirograph.png new file mode 100644 index 0000000000..3bb8ff547b Binary files /dev/null and b/assets/images/Spirograph.png differ