{"id":1410,"date":"2015-01-21T10:34:11","date_gmt":"2015-01-21T09:34:11","guid":{"rendered":"http:\/\/www.aymericlamboley.fr\/blog\/?p=1410"},"modified":"2015-01-21T10:58:39","modified_gmt":"2015-01-21T09:58:39","slug":"dargaud-cartography-pure-javascript-isnt-so-bad","status":"publish","type":"post","link":"http:\/\/www.aymericlamboley.fr\/blog\/dargaud-cartography-pure-javascript-isnt-so-bad\/","title":{"rendered":"Dargaud cartography, pure JavaScript isn’t so bad…"},"content":{"rendered":"

New year comes with plenty new resolutions, one of them was to finally give a serious try to a small project into pure JavaScript. I used to swear on JavaScript every time it was mentionned. I made several projects using TypeScript<\/a> and Haxe<\/a>, and I’m very happy with those techs. But, if there is some strong libraries (Pixi.js<\/a>, Phaser<\/a>, three.js<\/a>) made in pure JavaScript, there are certainly some reasons !? And when you know that those guys are all ex-flashers, you think that they would use a compiled language. But not at all, they don’t want to depend on a company (since Adobe’s failure on Flash…), freedom feeling you said?<\/p>\n

<\/p>\n

Dargaud’s cartography<\/strong>
\n\"cartography\"<\/a>Dargaud<\/a> is a famous publisher of Franco-Belgian comics series. In this greeting card project<\/a>, they introduce their comic strip classified by themes simulating a constellation.<\/p>\n

The project was made using Pixi.js<\/a>, GreenSock’s TweenMax<\/a> library and Signals<\/a>. I felt right at home!<\/p>\n

Now let’s dig into some JavaScript code.<\/p>\n

OOP with JavaScript<\/strong><\/p>\n

\/\/ Define the Person constructor\r\nfunction Person (firstName) {\r\n\r\n  \/\/public properties:\r\n  this.firstName = firstName;\r\n  this.myAge = 2;\r\n};\r\n\r\n\/\/ Add a couple of public methods to Person.prototype\r\nPerson.prototype.walk = function() {\r\n  console.log(\"I am walking!\");\r\n};\r\n\r\nPerson.prototype.sayHello = function() {\r\n  console.log(\"Hello, I'm \" + this.firstName);\r\n};\r\n\r\n\/\/ getter & setter\r\nObject.defineProperty(Person.prototype, 'age', {\r\n\r\n\tget: function() {\r\n\t\treturn 12;\r\n\t},\r\n\tset: function(value) {\r\n\t\tthis.myAge = value;\r\n\t}\r\n});\r\n\r\n\r\n\/\/ Define the Student constructor\r\nfunction Student(firstName, subject) {\r\n\r\n  \/\/ Call the parent constructor, making sure that \"this\" is set correctly during the call\r\n  Person.call(this, firstName);\r\n\r\n  \/\/ Initialize our Student-specific properties\r\n  this.subject = subject;\r\n};\r\n\r\n\/\/ Create a Student.prototype object that inherits from Person.prototype.\r\nStudent.prototype = Object.create(Person.prototype);\r\n\r\n\/\/ Set the \"constructor\" property to refer to Student\r\nStudent.prototype.constructor = Student;\r\n\r\n\/\/ Replace the \"sayHello\" method\r\nStudent.prototype.sayHello = function() {\r\n\r\n  \/\/ you may call the parent \"super\":\r\n  Person.prototype.sayHello.call(this);\r\n\r\n  console.log(\"Hello, I'm \" + this.firstName + \". I'm studying \" + this.subject + \".\");\r\n};\r\n\r\nStudent.prototype.sayGoodBye = function() {\r\n  console.log(\"Goodbye!\");\r\n};\r\n\r\n\/\/static method\r\nStudent.goingToSchool = function() {\r\n  console.log(\"student enjoy going to school.\")\r\n}<\/pre>\n
var student1 = new Student(\"Janet\", \"Applied Physics\");\r\nstudent1.sayHello();\r\nstudent1.walk();\r\nstudent1.sayGoodBye();\r\n\r\nconsole.log(student1.age);\r\n\r\nStudent.goingToSchool();\r\n\r\nconsole.log(student1 instanceof Person);\r\nconsole.log(student1 instanceof Student);<\/pre>\n
In this small sample we can see that JavaScript has already everything needed on a daily basis.<\/p>\n
Autocompletion you said? Well, with recent IDEs you shouldn’t have any issues. For this small project, I give a try to NetBeans<\/a>, a free IDE. I was ok with its features, but how may a simple project with 5 files in html\/js eat so much memory?
\n\"netbeans\"<\/a> That’s crazy! The next time, I will stay with WebStorm<\/a>.<\/p>\n
You probably noticed the smooth object rotation on the ellipse. Here is the formula:<\/p>\n
var centerX = 400;\r\nvar centerY = 200;\r\n\r\nvar radiusWidth = 400;\r\nvar radiusHeight = 150;\r\n\r\nvar ellipse = new PIXI.Graphics();\r\nellipse.lineStyle(1, 0xFFFFFF);\r\nellipse.drawEllipse(centerX, centerY, radiusWidth, radiusHeight);\r\nstage.addChild(ellipse);\r\n\r\nvar planet = new PIXI.Graphics();\r\nplanet.beginFill(0x00FF00);\r\nplanet.drawCircle(0, 0, 50);\r\nstage.addChild(planet);\r\n\r\nvar alpha = 0;\r\n\r\nfunction animate() {\r\n\r\n\trequestAnimFrame(animate);\r\n\r\n\tplanet.x = centerX + (radiusWidth * Math.cos(alpha));\r\n\tplanet.y = centerY + (radiusHeight * Math.sin(alpha));\r\n\r\n\talpha += 0.01;\r\n\r\n\trenderer.render(stage);\r\n}<\/pre>\n
Note that it will also works for a simple circle!<\/p>\n
This project was also an opportunity to give a try to the remote IE<\/a>. Finally Microsoft gave us a simple way to test on IE and it works nicely!<\/p>\n
I didn’t have strong issues coding with JavaScript, excepted that one: function positions. It seems that you can’t define a public function in your class before you mentionned your OOP part (Object.create<\/em>) and the constructor. It drives me crazy during one hour, but other than that, no problem sir! Obviously a compiler would remove all those hand written mistakes \ud83d\ude09<\/p>\n
Freedom<\/strong>
\nMaking this project in pure JavaScript, I enjoyed the feeling of freedom. If in two years I’ve to push a simple update, I won’t have to update (upgrade?) my IDE, download the latest SDK, update to the latest language version (TypeScript you said?) and change other things. I’ll just need a text editor and make the change while the big browser guys work in the same direction to unify their JavaScript management. And that’s all what we wish.<\/p>\n","protected":false},"excerpt":{"rendered":"
New year comes with plenty new resolutions, one of them was to finally give a serious try to a small project into pure JavaScript. I used to swear on JavaScript every time it was mentionned. I made several projects using TypeScript and Haxe, and I’m very happy with those techs. But, if there is some … Continue reading Dargaud cartography, pure JavaScript isn’t so bad…<\/span> →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0},"categories":[180,84,168,6,181],"tags":[86,185],"_links":{"self":[{"href":"http:\/\/www.aymericlamboley.fr\/blog\/wp-json\/wp\/v2\/posts\/1410"}],"collection":[{"href":"http:\/\/www.aymericlamboley.fr\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.aymericlamboley.fr\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.aymericlamboley.fr\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.aymericlamboley.fr\/blog\/wp-json\/wp\/v2\/comments?post=1410"}],"version-history":[{"count":15,"href":"http:\/\/www.aymericlamboley.fr\/blog\/wp-json\/wp\/v2\/posts\/1410\/revisions"}],"predecessor-version":[{"id":1428,"href":"http:\/\/www.aymericlamboley.fr\/blog\/wp-json\/wp\/v2\/posts\/1410\/revisions\/1428"}],"wp:attachment":[{"href":"http:\/\/www.aymericlamboley.fr\/blog\/wp-json\/wp\/v2\/media?parent=1410"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.aymericlamboley.fr\/blog\/wp-json\/wp\/v2\/categories?post=1410"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.aymericlamboley.fr\/blog\/wp-json\/wp\/v2\/tags?post=1410"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}