diff --git a/assignments/1_20.10.2019.txt b/assignments/1_20.10.2019.txt
new file mode 100644
index 0000000..47ee72b
--- /dev/null
+++ b/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!
diff --git a/misc/useful_links.txt b/misc/useful_links.txt
new file mode 100644
index 0000000..3246ef5
--- /dev/null
+++ b/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
diff --git a/src/assignment1.js b/src/assignment1.js
new file mode 100644
index 0000000..191a975
--- /dev/null
+++ b/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)
+ }
+};
diff --git a/src/index.html b/src/index.html
index 974d723..c9a28dc 100644
--- a/src/index.html
+++ b/src/index.html
@@ -3,11 +3,12 @@
JS
-
+
-
+
For chrome press F12 to open chrome developer tools and select console tab.
For other browsers google how to open console.
+