Emil_Shanaty/Stupid_Doodle_Drawer.github.io
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial Commit

Browse Source
This commit is contained in:
emil
2024-10-13 10:13:33 +03:00
commit bbbbf55d6d
3 changed files with 50 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/styles.css
+15
View File
@@ -0,0 +1,15 @@
.body {
background-color: cornflowerblue;
}
.canvas {
display: block;
width: 100%;
height: 100%;
background-color: cadetblue;
border: 1px solid cyan;
}
.canvas-title {
text-align: center;
margin: auto;
}
index.html
+18
View File
@@ -0,0 +1,18 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Canvas Test</title>
<link rel="stylesheet" href="css/styles.css" />
</head>
<body class="body">
<h1 class="canvas-title">Doodle drawer</h1>
<canvas class="canvas" id="myCanvas" width="500" height="500"></canvas>
<input type="text" id="arg1" placeholder="argument1" />
<input type="text" id="arg2" placeholder="argument2" />
<input type="text" id="freq" placeholder="deforming frequency" />
<input type="text" id="size" placeholder="size" />
<script src="js/main.js"></script>
</body>
</html>
js/main.js
+17
View File
@@ -0,0 +1,17 @@
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var count = 0;
setInterval(function () {
var arg1 = document.getElementById("arg1").value;
var arg2 = document.getElementById("arg2").value;
var freq = document.getElementById("freq").value;
var size = document.getElementById("size").value;
count++;
ctx.fillRect(
250 + 100 * Math.sin(count) + Math.cos(count * arg1) * 100,
250 + 100 * Math.cos(count) + Math.cos(count * arg2) * 100,
size * Math.sin(count ** freq),
size * Math.sin(count ** freq)
);
}, 1);