├── .gitattributes
├── Screenshots
    ├── ss1.png
    ├── ss2.png
    ├── ss3.png
    └── ss4.png
├── README.md
├── style.css
├── index.html
└── main.js


/.gitattributes:
--------------------------------------------------------------------------------
1 | # Auto detect text files and perform LF normalization
2 | * text=auto
3 | 


--------------------------------------------------------------------------------
/Screenshots/ss1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/snturk/Pattern-Creator/HEAD/Screenshots/ss1.png


--------------------------------------------------------------------------------
/Screenshots/ss2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/snturk/Pattern-Creator/HEAD/Screenshots/ss2.png


--------------------------------------------------------------------------------
/Screenshots/ss3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/snturk/Pattern-Creator/HEAD/Screenshots/ss3.png


--------------------------------------------------------------------------------
/Screenshots/ss4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/snturk/Pattern-Creator/HEAD/Screenshots/ss4.png


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Pattern Creator 
 2 | 
 3 | How to use
 4 | ------------------
 5 | 
 6 | It's pure Javascript, HTML and CSS. All you have to do is open index.html.
 7 | 
 8 | Before you use, give a value to _VelocityX_ and _VelocityY_.
 9 | 
10 | After, just click "Run" button to start drawing.
11 | 
12 | When process is going, you can stop it by "Pause" button or you can clear the canvas by "Clear".
13 | 
14 | Also you can change values of _Process Speed_, _BallX_, _BallY_ and _Color_.
15 | 
16 | **BallX and BallY**: It's values of the coordinates of our ball.
17 | 
18 | **Ball Radius**: It changes radius of our ball.
19 | 
20 | **Process Speed**: It effects the speed of our ball.
21 | 
22 | **Color**: It changes color of the ball (Helps for better and sightly results.). 
23 | 
24 | Screenshots
25 | ------------------
26 | 
27 | ![Screenshot](Screenshots/ss1.png)
28 | 
29 | ![Screenshot](Screenshots/ss2.png)
30 | 
31 | ![Screenshot](Screenshots/ss3.png)
32 | 
33 | ![Screenshot](Screenshots/ss4.png)
34 | 


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
 1 | body{
 2 |     background-color: rgba(19, 47, 100, 0.329);
 3 |     font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
 4 |     transition-duration: 400ms;
 5 | }
 6 | #title{
 7 |     font-size: 59px;
 8 |     font-weight: 200;
 9 |     margin: 1%;
10 |     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
11 |     font-style: italic;
12 | }
13 | #howToHeader{
14 |     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
15 | }
16 | #howTo{
17 |     background-color: white;
18 |     float: left;
19 |     border: 1.5px solid black;
20 |     border-radius: 7px;
21 |     width: fit-content;
22 |     max-width: 22%;
23 |     height: fit-content;
24 |     padding: 10px;
25 |     margin: 1.5%;
26 |     transition-duration: 400ms;
27 | }
28 | #panelHeader{
29 |     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
30 |     font-weight: 600;
31 | }
32 | #controlPanel{
33 |     background-color: white;
34 |     float: left;
35 |     border: 1.5px black solid;
36 |     border-radius: 7px;
37 |     height: fit-content;
38 |     width: fit-content;
39 |     max-width: 20%;
40 |     padding: 10px;
41 |     margin: 1.5%;
42 |     text-align: center;
43 |     transition-duration: 400ms;
44 | }
45 | button{
46 |     cursor: pointer;
47 | }
48 | .variables{
49 |     font-size: 20px;
50 |     font-weight: 500;
51 |     margin: 2px;
52 | }
53 | #darkMode{
54 |     padding: 8px;
55 |     margin: 5px;
56 |     font-size: 14px;
57 |     border-radius: 10px;
58 |     color: white;
59 |     font-weight: 200;
60 |     background-color: rgb(63, 63, 63);
61 |     transition-duration: 400ms;
62 | }
63 | #myCanvas{
64 |     background-color: white;
65 |     border-radius: 5px;
66 |     float: left;
67 |     margin: 2%;
68 |     transition-duration: 400ms;
69 | }
70 | #alert{
71 |     font-size: 22px;
72 |     font-weight: 900;
73 |     margin: 15px;
74 | }
75 | #runButton, #pauseButton, #clearButton{
76 |     padding: 10px;
77 |     border-radius: 10px;
78 |     background-color: black;
79 |     color: white;
80 |     margin: 10px;
81 |     font-size: 14px;
82 | }
83 | #repo{
84 |     font-weight: 100;
85 |     color: black;
86 |     transition-duration: 400ms;
87 | }
88 | #repo:hover{
89 |     color: rgb(49, 93, 151);
90 | }
91 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <meta charset="utf-8" />
 5 |     <title>Pattern Creator</title>
 6 |     <link rel="stylesheet" href="style.css">
 7 |     <!-- Global site tag (gtag.js) - Google Analytics -->
 8 | <script async src="https://www.googletagmanager.com/gtag/js?id=UA-135016888-2"></script>
 9 | <script>
10 |   window.dataLayer = window.dataLayer || [];
11 |   function gtag(){dataLayer.push(arguments);}
12 |   gtag('js', new Date());
13 | 
14 |   gtag('config', 'UA-135016888-2');
15 | </script>
16 | 
17 | </head>
18 | <body>
19 |     <div id="title" align="center">
20 |         <span style="color: black"><</span>
21 |         <span style="color: crimson">P</span>
22 |         <span style="color:darkblue">a</span>
23 |         <span style="color:forestgreen">t</span>
24 |         <span style="color:gold">t</span>
25 |         <span style="color:indigo">e</span>
26 |         <span style="color: slateblue">r</span>
27 |         <span style="color: lightcoral">n</span>
28 |         <span style="color:"> </span>
29 |         <span style="color: orangered">C</span>
30 |         <span style="color: salmon">r</span>
31 |         <span style="color: slateblue">e</span>
32 |         <span style="color: springgreen">a</span>
33 |         <span style="color: violet">t</span>
34 |         <span style="color: wheat">o</span>
35 |         <span style="color: teal">r</span>
36 |         <span style="color: black">></span>
37 |     </div id="title">    
38 |     <canvas id='myCanvas' height='600' width='600' style='border: 2.5px black solid'></canvas>
39 | 
40 |     <div id="controlPanel">
41 |             <h2 id="panelHeader">Control Panel</h2>
42 |             <span class="variables">Velocity X:</span> 
43 |             <input type='number' id='velocityX' value="0"><br>
44 |             <span class="variables">Velocity Y:</span> 
45 |             <input type="number" id="velocityY" value="0"><br>
46 |             <span class="variables">Ball X:</span>
47 |             <input type="number" id="ballX" value="300"><br>
48 |             <span class="variables">Ball Y:</span>
49 |             <input type="number" id="ballY" value="300"><br>
50 |             <span class="variables">Ball Radius:</span>
51 |             <input type="number" id="ballRadius" value="4"><br>
52 |             <span class="variables">Progress Speed:</span>
53 |             <input type="range" id="progSpeed" value="1" min="1" max="100"><br>
54 |            <div align="center"> <span class="variables">Color:</span>
55 |             <input type="color" name="myColor" id="ballColor" value="#ff0000"><br>
56 |             <button id="darkMode" onclick="modeChange()">Dark Mode</button>
57 |         </div>
58 |             <div>
59 |                 <button id="runButton" onclick="run()" style="width: 65px">Run</button>
60 |                 <button id="pauseButton" onclick="pause()" style="width: 65px">Pause</button>
61 |                 <button id="clearButton" onclick="clearCanvas()" style="width: 65px;">Clear</button>
62 |             
63 |         </div>
64 |         </div>
65 | 
66 |     <div id="howTo">
67 |      <h2 id="howToHeader" align="center">How to Use</h2>
68 |         <p id="howToUse">
69 |             <ul>
70 |                 <li>This is a program that allows you to create <b><i>unique</i></b> and <b><i>colorful</i></b> patterns.</li>
71 |                 <li>Before start, you must assign a value to <b><i>Velocity X</i></b> and <b><i>Velocity Y</i></b>.</li>
72 |                 <li><a href="https://github.com/MuratcanSenturk/Pattern-Creator" target="_blank" id="repo" style="text-decoration: none;">Click here for Repository</a></li>
73 |             </ul>
74 |         
75 |         </p>
76 | 
77 |     </div>
78 | 
79 | 
80 |     <script src="main.js"></script>
81 | 
82 | 
83 | </body>
84 | </html>
85 | 


--------------------------------------------------------------------------------
/main.js:
--------------------------------------------------------------------------------
  1 | var canvas = document.getElementById('myCanvas');
  2 | var draw = canvas.getContext('2d');
  3 | 
  4 | var ballX;
  5 | var ballY;
  6 | var ballRadius;
  7 | var velocityX;
  8 | var velocityY;
  9 | var ballColor;
 10 | var progSpeed;
 11 | var refreshInterval;
 12 | var panels = ["myCanvas", "controlPanel", "howTo"];
 13 | var isDarkModeActive = false;
 14 | var isCleared;
 15 | 
 16 | function run(){
 17 |         document.getElementById("runButton").style.opacity = 0.4;
 18 |         document.getElementById("runButton").disabled = true;
 19 |         velocityX = parseFloat(document.getElementById("velocityX").value);
 20 |         velocityY = parseFloat(document.getElementById("velocityY").value);
 21 |         ballX = parseFloat(document.getElementById("ballX").value);
 22 |         ballY = parseFloat(document.getElementById("ballY").value);
 23 |         ballRadius = parseFloat(document.getElementById("ballRadius").value);
 24 |         ballColor = document.getElementById("ballColor").value;
 25 |         progSpeed = parseFloat(document.getElementById("progSpeed").value);
 26 | 
 27 |         if(Math.abs(velocityX) < 10 && Math.abs(velocityY) < 10){
 28 |             refreshInterval = setInterval(drawBall, 1000/progSpeed);
 29 |         }else{
 30 |             refreshInterval = setInterval(drawBall, 200/progSpeed);
 31 |         }
 32 |         console.log("Progress Speed: " + progSpeed);
 33 |         
 34 |     }
 35 |     function pause() {
 36 |         velocityX = 0;
 37 |         velocityY = 0;
 38 |         document.getElementById("runButton").disabled = false;
 39 |         document.getElementById("runButton").style.opacity = 1;
 40 |         clearInterval(refreshInterval);
 41 |     }
 42 |     function clearCanvas(){
 43 |         velocityX = 0;
 44 |         velocityY = 0;
 45 |         ballX =parseFloat(document.getElementById("ballX").value);
 46 |         ballY =parseFloat(document.getElementById("ballY").value);
 47 |         document.getElementById("runButton").disabled = false;
 48 |         document.getElementById("runButton").style.opacity = 1;
 49 |         draw.clearRect(0, 0, canvas.width, canvas.height);
 50 |         clearInterval(refreshInterval);
 51 |     }
 52 |      
 53 |     function modeChange(){
 54 | 
 55 |         if(!isDarkModeActive){
 56 |             isDarkModeActive = true;
 57 |             document.getElementById("darkMode").innerHTML = "Light Mode";
 58 |             document.body.style.backgroundColor = "#333333";
 59 |             document.getElementById("myCanvas").style.backgroundColor = "#282828";
 60 | 
 61 |             panels.forEach(function(element){
 62 |                 document.getElementById(element).style.backgroundColor = "#282828";
 63 |                 document.getElementById(element).style.color = "white";
 64 |             });
 65 | 
 66 |             document.getElementById("repo").style.color = "white";
 67 |             document.getElementById("darkMode").style.color = "black";
 68 |             document.getElementById("darkMode").style.backgroundColor = "white";
 69 |         }
 70 |         else{
 71 | 
 72 |             isDarkModeActive = false;
 73 |             document.getElementById("darkMode").innerHTML = "Dark Mode";
 74 |             document.body.style.backgroundColor = "rgba(19, 47, 100, 0.329)";
 75 |             document.getElementById("myCanvas").style.backgroundColor = "white";
 76 |         
 77 |             panels.forEach(function(element){
 78 |                 document.getElementById(element).style.backgroundColor = "white";
 79 |                 document.getElementById(element).style.color = "black";
 80 |             });
 81 | 
 82 |             document.getElementById("repo").style.color = "black";
 83 |             document.getElementById("darkMode").style.color = "white";
 84 |             document.getElementById("darkMode").style.backgroundColor = "black";
 85 |         }
 86 |        
 87 |     }
 88 |     function drawBall(){
 89 |     
 90 |     document.getElementById("ballX").value = parseInt(ballX);
 91 |     document.getElementById("ballY").value = parseInt(ballY);
 92 |     
 93 |     draw.beginPath();
 94 |     draw.fillStyle = ballColor;
 95 |     draw.arc(ballX, ballY, ballRadius, 0, Math.PI*2);
 96 |     draw.closePath();
 97 | 
 98 |     if(Math.abs(velocityX) < 10 && Math.abs(velocityY) < 10){
 99 |         ballX += velocityX;
100 |         ballY += velocityY;
101 |     }else{
102 |         ballX += velocityX/20;
103 |         ballY += velocityY/20;
104 |     }
105 |     
106 |     draw.fill();
107 | 
108 |     if (ballX > canvas.height - ballRadius || ballX < ballRadius){
109 |         velocityX *=-1;
110 |         document.getElementById("velocityX").value = velocityX;
111 |     }
112 | 
113 |     if(ballY > canvas.width - ballRadius || ballY < ballRadius){
114 |         velocityY *= -1;
115 |         document.getElementById("velocityY").value = velocityY;
116 |     }
117 | 
118 | }
119 | 


--------------------------------------------------------------------------------