Dargaud cartography, pure JavaScript isn’t so bad…

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 strong libraries (Pixi.js, Phaser, three.js) 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?

Dargaud’s cartography
cartographyDargaud is a famous publisher of Franco-Belgian comics series. In this greeting card project, they introduce their comic strip classified by themes simulating a constellation.

The project was made using Pixi.js, GreenSock’s TweenMax library and Signals. I felt right at home!

Now let’s dig into some JavaScript code.

OOP with JavaScript

// Define the Person constructor
function Person (firstName) {
 
  //public properties:
  this.firstName = firstName;
  this.myAge = 2;
};
 
// Add a couple of public methods to Person.prototype
Person.prototype.walk = function() {
  console.log("I am walking!");
};
 
Person.prototype.sayHello = function() {
  console.log("Hello, I'm " + this.firstName);
};
 
// getter & setter
Object.defineProperty(Person.prototype, 'age', {
 
	get: function() {
		return 12;
	},
	set: function(value) {
		this.myAge = value;
	}
});
 
 
// Define the Student constructor
function Student(firstName, subject) {
 
  // Call the parent constructor, making sure that "this" is set correctly during the call
  Person.call(this, firstName);
 
  // Initialize our Student-specific properties
  this.subject = subject;
};
 
// Create a Student.prototype object that inherits from Person.prototype.
Student.prototype = Object.create(Person.prototype);
 
// Set the "constructor" property to refer to Student
Student.prototype.constructor = Student;
 
// Replace the "sayHello" method
Student.prototype.sayHello = function() {
 
  // you may call the parent "super":
  Person.prototype.sayHello.call(this);
 
  console.log("Hello, I'm " + this.firstName + ". I'm studying " + this.subject + ".");
};
 
Student.prototype.sayGoodBye = function() {
  console.log("Goodbye!");
};
 
//static method
Student.goingToSchool = function() {
  console.log("student enjoy going to school.")
}
var student1 = new Student("Janet", "Applied Physics");
student1.sayHello();
student1.walk();
student1.sayGoodBye();
 
console.log(student1.age);
 
Student.goingToSchool();
 
console.log(student1 instanceof Person);
console.log(student1 instanceof Student);

In this small sample we can see that JavaScript has already everything needed on a daily basis.

Autocompletion you said? Well, with recent IDEs you shouldn’t have any issues. For this small project, I give a try to NetBeans, 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?
netbeans That’s crazy! The next time, I will stay with WebStorm.

You probably noticed the smooth object rotation on the ellipse. Here is the formula:

var centerX = 400;
var centerY = 200;
 
var radiusWidth = 400;
var radiusHeight = 150;
 
var ellipse = new PIXI.Graphics();
ellipse.lineStyle(1, 0xFFFFFF);
ellipse.drawEllipse(centerX, centerY, radiusWidth, radiusHeight);
stage.addChild(ellipse);
 
var planet = new PIXI.Graphics();
planet.beginFill(0x00FF00);
planet.drawCircle(0, 0, 50);
stage.addChild(planet);
 
var alpha = 0;
 
function animate() {
 
	requestAnimFrame(animate);
 
	planet.x = centerX + (radiusWidth * Math.cos(alpha));
	planet.y = centerY + (radiusHeight * Math.sin(alpha));
 
	alpha += 0.01;
 
	renderer.render(stage);
}

Note that it will also works for a simple circle!

This project was also an opportunity to give a try to the remote IE. Finally Microsoft gave us a simple way to test on IE and it works nicely!

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) 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 😉

Freedom
Making 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.

One thought on “Dargaud cartography, pure JavaScript isn’t so bad…

Leave a Reply

Your email address will not be published. Required fields are marked *