Initial Commit

2024-10-13 10:13:33 +03:00
commit bbbbf55d6d
3 changed files with 50 additions and 0 deletions
@@ -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;
+}
@@ -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>
@@ -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);