Vardan assignment 1

assignments/1_20.10.2019.txt

@@ -0,0 +1,57 @@
+First of all!
+You will find some strange code in assignment1.js file.
+All your code should be added after line: const context = canvas.getContext('2d');
+Don't ask why or what is that for now, just add code in that strange function, I will talk about it next week.
+
+Assignment!
+
+A string encoded shape descriptors list will be given to app.
+There are only 3 valid shapes: circle, rectangle (rect) and triangle.
+Each of them have their own properties.
+Some properties (like color) are common, some properties are not.
+
+Example:
+const descriptors = 'shape:circle/center:120,310/radius:52/velocity:4,2/color:#729|shape:rect/center:256,128/width:78/height:154/velocity:2,3/color:#abb|shape:triangle/center:340,389/length:64/velocity:7,1/color:#926';
+
+As you can see, shape descriptors are separated by bitwise OR symbol ( | ), so here you can find 3 shape descriptors:
+
+shape:circle/center:120,310/radius:52/velocity:4,2/color:#729
+shape:rect/center:256,128/width:78/height:154/velocity:2,3/color:#abb
+shape:triangle/center:340,389/length:64/velocity:7,1/color:#926
+
+Descriptor properties are separated by slashes ( / )
+'shape' and 'center' properties are mandatory for descriptors, while the other are not and have default values.
+Default value for color is black, default value for all sizes is 10 and for velocity is 2, 2.
+
+Here in examples, shape is the first property and color is the last property, but this is not fixed.
+In fact, properties may appear in any order.
+For example this one is a valid analog of the circle above:
+center:120,310 /shape : circle   / color: #729/radius  :52/velocity:2 ,3
+As you can see, spaces are also allowed.
+
+!!! Achtung, there may be invalid shapes !!!
+For example shape can be an invalid value or not defined at all or center may be missed.
+shape:yoyoyo/center:120,310/radius:52/color:#729/velocity:2,3
+or
+shape:circle/radius:52/color:#729/velocity:2,3
+So!
+
+The task is to take this kind of string, parse it to objects and draw them on canvas in  with given color, sizes.
+Invalid descriptors should be ignored.
+
+Velocity!
+Velocity property is the initial velocity of the shape, for example velocity:2,3 means the shape should move with vx = 2 and vy = y horizontal and vertical velocities.
+In this case that's SSE (south-south-east) direction.
+When shapes reach canvas edges, they should bounce and change direction.
+This is a very nice example of this kind of animation:
+https://thumbs.gfycat.com/JointShadyCapybara-max-1mb.gif
+
+Read about setInterval function here:
+https://www.w3schools.com/jsref/met_win_setinterval.asp
+
+Animation should have 60fps (1000 / 60 as the second argument of setInterval).
+
+For this time we have only 3 kinds of shapes, but try to write generic code, so adding new shapes (like square or oval) in future will be easy.
+You can find HTML5 canvas tutorials, documentation and other useful stuff in misc/useful_links.txt file.
+
+May the Force be with you!

misc/useful_links.txt

@@ -0,0 +1,32 @@
+W3Schools. Light JS lessons
+https://www.w3schools.com/js/default.asp
+
+You don'w know JS books: deep JS lessons
+https://github.com/getify/You-Dont-Know-JS/tree/1st-ed
+
+Online JS editor
+https://jsfiddle.net/
+
+Git official documentation (Book)
+https://git-scm.com/book/en/v2
+
+Homework repository
+https://github.com/githuboftigran/jsrnhomework
+
+Webstorm
+https://www.jetbrains.com/webstorm/
+
+VSCode
+https://code.visualstudio.com/
+
+Array functions
+https://www.w3schools.com/js/js_array_methods.asp
+
+String functions
+https://www.w3schools.com/jsref/jsref_obj_string.asp
+
+HTML5 canvas documentation:
+https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API
+
+HTML5 canvas tutorial:
+https://www.tutorialspoint.com/html5/html5_canvas.htm

src/assignment1.js

@@ -0,0 +1,77 @@
+let edge = [600, 600]; //canvas edge
+let startPos = [0, 0];
+let deltaX = -3;            // move step
+let deltaY = -3;
+window.onload = function() {
+  const canvas = document.getElementById('mainDrawingCanvas');
+  const context = canvas.getContext('2d');
+  const descriptors = 'shape:circle  / center:120,310/radius:52/velocity:4,2/color:#729|shape:rect/center:256,128/width:78/height:154/velocity:2,3/color:#abb|shape:triangle/center:340,389/length:64/velocity:7,1/color:#926';
+
+  let tempArray =  descriptors.split('|');
+  let arrayDescriptors = tempArray.map(function(item) {                 // splitting array to single shapes
+    return item.split('/');
+  });
+
+  arrayDescriptors.forEach(function(element, index) {
+   let newArray =  arrayDescriptors[index].map(function(item) {           // splitting shapes properties
+      return item.split(':')
+    });
+    let obj = Object.assign(...newArray.map(([key, val]) => ({[key.trim()]: val.trim()}))); // convert array to Associative Array (...), convert array to object and clear spaces
+    if (obj.shape === 'rect') {
+      context.beginPath();
+      context.fillStyle = obj.color;
+      context.fillRect(obj.center.split(',')[0], obj.center.split(',')[1], obj.width, obj.height);
+      drawRect(obj.center.split(',')[0],obj.center.split(',')[1],obj.width, obj.height, obj.color );
+    }
+     else if(obj.shape === 'circle'){
+      context.beginPath();
+      context.fillStyle = obj.color;
+      context.arc(obj.center.split(',')[0], obj.center.split(',')[1], obj.radius, 0, 2 * Math.PI);
+      context.fill();
+      drawArc(obj.center.split(',')[0], obj.center.split(',')[1], obj.radius, obj.color);
+
+    }
+     else if (obj.shape === 'triangle'){ //TODO
+      context.beginPath();
+      context.fillStyle = obj.color;
+      context.moveTo(obj.center.split(',')[0], obj.center.split(',')[1]);
+      context.lineTo(10, obj.center.split(',')[1] - obj.length );
+      context.lineTo(10,(obj.center.split(',')[1] - obj.length)/2);
+      context.fill();
+    }
+  });
+
+
+   function drawRect(startPos1, startPos2, rectWidth, rectHeight, color) {
+       let x = parseInt(startPos1);
+       let y = parseInt(startPos2);
+       x += deltaX;
+       y += deltaY;
+       context.fillStyle = color;
+       context.fillRect(x, y, rectWidth, rectHeight);
+       if (x < startPos[0] ||  x > edge[0])  deltaX = -deltaX;
+       if (y < startPos[1] ||  y > edge[1])  deltaY = -deltaY;
+       setTimeout(function() {
+           drawRect(x, y, rectWidth, rectHeight, color);
+       }, 60)
+
+   }
+   function drawArc(startPos1, startPos2, radius, arcColor) {
+       context.save();
+       let x = parseInt(startPos1);
+       let y = parseInt(startPos2);
+       context.beginPath();
+       x += deltaX;
+       y += deltaY;
+       context.clearRect(0,0, 600, 600); // clear previous positions
+       context.arc(x, y, radius, 0, 2 * Math.PI);
+       context.fillStyle = arcColor;
+       context.fill();
+       context.restore();
+       if (x < startPos[0] ||  x > edge[0])  deltaX = -deltaX;
+       if (y < startPos[1] ||  y > edge[1])  deltaY = -deltaY;
+       setTimeout(function() {
+           drawArc(x, y, radius, arcColor);
+       }, 60)
+   }
+};

src/index.html

@@ -3,11 +3,12 @@
 <head>
     <meta charset="UTF-8">
     <title>JS</title>
-    <script type="text/javascript" src="./assignment0.js"></script>
+    <script type="text/javascript" src="./assignment1.js"></script>
 </head>
-<body>
+<body style="background-color: #ccc">
     For chrome press F12 to open chrome developer tools and select console tab.
     <br/>
     For other browsers google how to open console.
+    <canvas id="mainDrawingCanvas" width="600" height="600" style="background-color: #fff"></canvas>
 </body>
 </html>