Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Spirograph #4523

Merged
merged 7 commits into from
Jun 20, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 23 additions & 0 deletions Games/Spirograph/Readme.md
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!**

![Spirograph](https://github.com/GSSoC24/Contributor/assets/141642724/bf5e34a3-b8a8-4d7f-9732-894a20fbb7a9)
48 changes: 48 additions & 0 deletions Games/Spirograph/index.html
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>












111 changes: 111 additions & 0 deletions Games/Spirograph/main.js
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;
}





















56 changes: 56 additions & 0 deletions Games/Spirograph/style.css
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;
}
6 changes: 1 addition & 5 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down Expand Up @@ -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


|[Wheel_of_Fortunes](https://github.com/Saipradyumnagoud/GameZone/tree/main/Games/Wheel_of_Fortunes)|
Expand Down
Binary file added assets/images/Spirograph.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading