animation done

akramhelil · Jul 5, 2019 · 3047775 · 3047775
1 parent f490497
commit 3047775
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 4 deletions.
diff --git a/Circles.html b/Circles.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<!-- saved from url=(0066)file:///Users/akramhelil/Development/code/patatapClone/cicles.html -->
+<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> 
+    <title>Circles</title>
+    <script src="file:///Users/akramhelil/Development/code/patatapClone/paper-full.js"></script>
+    <link rel="stylesheet" href="file:///Users/akramhelil/Development/code/patatapClone/circle.css">
+    <script type="text/paperscript" canvas="myCanvas" data-paper-ignore="true">
+        function onKeyDown(event) {
+           var  maxPoint = new Point(view.size.width, view.size.height)
+           var randomPoint = Point.random();
+           var point = randomPoint * maxPoint;
+            new Path.Circle(point, 10).fillColor = 'yellow';
+        }
+
+        var animateCircle = new Path.Circle(new Point(300, 300), 200)
+        animateCircle.fillColor = 'red'
+        function onFrame(event) {
+            animateCircle.fillColor.hue += 1
+            animateCircle.scale(.9)
+        }
+    </script>
+</head>
+<body>
+    <canvas id="myCanvas" resize="" width="2560" height="1278" data-paper-scope="1" style="-webkit-user-drag: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></canvas>
+
+</body></html>
diff --git a/cicles.html b/cicles.html
@@ -5,9 +5,21 @@
     <script src="paper-full.js"></script>
     <link rel="stylesheet" href="circle.css">
     <script type="text/paperscript" canvas="myCanvas">
-        for (var x = 0; x < 1000; x+= 100) {
-            for (var y = 0; y < 1000; y+= 100) {
-                new Path.Circle(new Point(x, y), 10).fillColor = 'yellow';
+        var circles  = []
+
+        function onKeyDown(event) {
+           var  maxPoint = new Point(view.size.width, view.size.height)
+           var randomPoint = Point.random();
+           var point = randomPoint * maxPoint;
+           var newCircle = new Path.Circle(point, 500)
+           newCircle.fillColor = 'orange'
+            circles.push(newCircle);
+        }
+
+        function onFrame(event) {
+            for (var i = 0; i < circles.length; i++) {
+                circles[i].fillColor.hue += 1
+                circles[i].scale(.9)
             }
         }
     </script>

diff --git a/circle.css b/circle.css
@@ -1,7 +1,7 @@
 canvas {
     width: 100%;
     height: 100%;
-    background: green;
+    background: black;
 }
 
 html, body  {