From 160f39463f7b025b5132cfbdaa6db53141f1d5ee Mon Sep 17 00:00:00 2001 From: Tigran Sahakyan Date: Sun, 20 Oct 2019 13:41:34 +0400 Subject: [PATCH 1/6] * Useful links added --- assignments/useful_links | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) create mode 100644 assignments/useful_links diff --git a/assignments/useful_links b/assignments/useful_links new file mode 100644 index 0000000..442515c --- /dev/null +++ b/assignments/useful_links @@ -0,0 +1,20 @@ +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/ From 0dead60635de55ead0e6a3a77fa27620468f940b Mon Sep 17 00:00:00 2001 From: Tigran Sahakyan Date: Sun, 20 Oct 2019 14:00:42 +0400 Subject: [PATCH 2/6] * Useful links file moved * Canvas added to html * File for second assignment added --- assignments/1_20.10.2019.txt | 0 {assignments => misc}/useful_links | 0 src/assignment1.js | 5 +++++ src/index.html | 5 +++-- 4 files changed, 8 insertions(+), 2 deletions(-) create mode 100644 assignments/1_20.10.2019.txt rename {assignments => misc}/useful_links (100%) create mode 100644 src/assignment1.js diff --git a/assignments/1_20.10.2019.txt b/assignments/1_20.10.2019.txt new file mode 100644 index 0000000..e69de29 diff --git a/assignments/useful_links b/misc/useful_links similarity index 100% rename from assignments/useful_links rename to misc/useful_links diff --git a/src/assignment1.js b/src/assignment1.js new file mode 100644 index 0000000..ed97e86 --- /dev/null +++ b/src/assignment1.js @@ -0,0 +1,5 @@ +window.onload = () => { + const canvas = document.getElementById('mainDrawingCanvas'); + const context = canvas.getContext('2d'); + +} 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. + From 621843189960aa1ff4bcaaf04680d9b138c632fd Mon Sep 17 00:00:00 2001 From: Tigran Sahakyan Date: Sun, 20 Oct 2019 17:42:14 +0400 Subject: [PATCH 3/6] * Array and String functions links added --- misc/useful_links | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/misc/useful_links b/misc/useful_links index 442515c..4be62ff 100644 --- a/misc/useful_links +++ b/misc/useful_links @@ -18,3 +18,10 @@ 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 From 83c564fd6f312dedd12fc1bc688d8f5f8a287951 Mon Sep 17 00:00:00 2001 From: Tigran Sahakyan Date: Sun, 20 Oct 2019 22:09:06 +0400 Subject: [PATCH 4/6] * useful_links extension added * Assignment 1 added --- assignments/1_20.10.2019.txt | 57 +++++++++++++++++++++++++ misc/{useful_links => useful_links.txt} | 7 ++- src/assignment1.js | 4 +- 3 files changed, 65 insertions(+), 3 deletions(-) rename misc/{useful_links => useful_links.txt} (77%) diff --git a/assignments/1_20.10.2019.txt b/assignments/1_20.10.2019.txt index e69de29..47ee72b 100644 --- a/assignments/1_20.10.2019.txt +++ 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 b/misc/useful_links.txt similarity index 77% rename from misc/useful_links rename to misc/useful_links.txt index 4be62ff..3246ef5 100644 --- a/misc/useful_links +++ b/misc/useful_links.txt @@ -19,9 +19,14 @@ 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 index ed97e86..f8ef0da 100644 --- a/src/assignment1.js +++ b/src/assignment1.js @@ -1,5 +1,5 @@ -window.onload = () => { +window.onload = function() { const canvas = document.getElementById('mainDrawingCanvas'); const context = canvas.getContext('2d'); -} +}; From 5326af261c3b0bf11656571ddd237004e69a6c58 Mon Sep 17 00:00:00 2001 From: vardan98 Date: Fri, 25 Oct 2019 11:59:33 +0400 Subject: [PATCH 5/6] * parse string and create shapes --- src/assignment1.js | 36 ++++++++++++++++++++++++++++++++++++ 1 file changed, 36 insertions(+) diff --git a/src/assignment1.js b/src/assignment1.js index f8ef0da..cdd864c 100644 --- a/src/assignment1.js +++ b/src/assignment1.js @@ -2,4 +2,40 @@ 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 (...) and array to object + if (obj.shape === 'rect') { + context.beginPath(); + context.fillStyle = obj.color; + context.fillRect(obj.center.split(',')[0], obj.center.split(',')[1], obj.width, obj.height); + } + 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(); + } + else if (obj.shape === 'triangle'){ + 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 ); // i know that is wrong )) + context.lineTo(10,(obj.center.split(',')[1] - obj.length)/2); // its too + context.fill(); + } + else { + context.font = "30px Arial"; + context.strokeText("Yesiminch", 10, 50); + } + }); }; From db5309a5f99c02e7b004d7e60e52afd088a8c8eb Mon Sep 17 00:00:00 2001 From: vardan98 Date: Fri, 1 Nov 2019 10:38:28 +0400 Subject: [PATCH 6/6] * finished homework without triangle's move --- src/assignment1.js | 58 +++++++++++++++++++++++++++++++++++++--------- 1 file changed, 47 insertions(+), 11 deletions(-) diff --git a/src/assignment1.js b/src/assignment1.js index cdd864c..191a975 100644 --- a/src/assignment1.js +++ b/src/assignment1.js @@ -1,41 +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 + 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 + 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 (...) and array to object + 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'){ + 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 ); // i know that is wrong )) - context.lineTo(10,(obj.center.split(',')[1] - obj.length)/2); // its too + context.lineTo(10, obj.center.split(',')[1] - obj.length ); + context.lineTo(10,(obj.center.split(',')[1] - obj.length)/2); context.fill(); } - else { - context.font = "30px Arial"; - context.strokeText("Yesiminch", 10, 50); - } }); + + + 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) + } };