Create a gist now

Instantly share code, notes, and snippets.

@sys1yagi /index.html
Last active Dec 10, 2015

What would you like to do?
Implementation of shape drawer based on bridge pattern in the Typescript
//Bridge Pattern
/** Implementor */
interface Shape{
draw(context:CanvasRenderingContext2D, x:number, y:number): void;
}
class Circle implements Shape{
color:string;
constructor(private r:number){
this.color = "#"+Math.floor(Math.random() * 0xFFFFFF).toString(16);
}
draw(context:CanvasRenderingContext2D, x:number, y:number): void{
context.fillStyle = this.color;
context.beginPath();
context.arc(x, y, this.r, 0, Math.PI*2, false);
context.fill();
}
}
class Rect implements Shape{
color:string;
constructor(private width:number, private height:number){
this.color = "#"+Math.floor(Math.random() * 0xFFFFFF).toString(16);
}
draw(context:CanvasRenderingContext2D, x:number, y:number): void{
context.fillStyle = this.color;
context.fillRect(x, y, this.width, this.height);
}
}
/** Abstraction */
class Pattern{
shapes:Shape[];
constructor(){
this.shapes = new Array();
}
add(shape:Shape){
this.shapes.push(shape);
}
next(canvas:HTMLCanvasElement){
var self = this;
setTimeout(function(){
var context = canvas.getContext("2d");
context.fillStyle="#eeeeee";
context.fillRect(0, 0, canvas.width, canvas.height);
self.draw(canvas);
self.next(canvas);
}, 100);
}
draw(canvas:HTMLCanvasElement){
throw new Error("not yet implemented.");
}
}
class FlowPattern extends Pattern{
movables: Bound[];
constructor(){
super();
this.movables = new Array();
}
add(shape:Shape){
super.add(shape);
this.movables.push(new Bound(
new Point(Math.random()*200,Math.random()*300),
new Vector(1+Math.random()*10,0)
));
}
draw(canvas:HTMLCanvasElement){
var context = canvas.getContext("2d");
for(var i = 0; i < this.movables.length; i++){
//move
this.movables[i].move(canvas.width,canvas.height);
this.shapes[i].draw(context, this.movables[i].point.x, this.movables[i].point.y);
}
}
}
class RandomPattern extends Pattern{
movables: Bound[];
constructor(){
super();
this.movables = new Array();
}
add(shape:Shape){
super.add(shape);
this.movables.push(new Bound(
new Point(Math.random()*200,Math.random()*300),
new Vector(1+Math.random()*10,1+Math.random()*10)
));
}
draw(canvas:HTMLCanvasElement){
var context = canvas.getContext("2d");
for(var i = 0; i < this.movables.length; i++){
//move
this.movables[i].move(canvas.width,canvas.height);
this.shapes[i].draw(context, this.movables[i].point.x, this.movables[i].point.y);
}
}
}
/** utils */
class Vector{
constructor(public x:number, public y:number){}
}
class Point{
constructor(public x:number, public y:number){}
}
class Bound{
constructor(public point:Point, public vector:Vector){}
move(width:number, height:number){
this.point.x += this.vector.x;
if(this.vector.x > 0){
if(this.point.x >= width){
this.vector.x = -this.vector.x;
}
}
else{
if(this.point.x <= 0){
this.vector.x = -this.vector.x;
}
}
this.point.y += this.vector.y;
if(this.vector.y > 0){
if(this.point.y >= height){
this.vector.y = -this.vector.y;
}
}
else{
if(this.point.y <= 0){
this.vector.y = -this.vector.y;
}
}
}
}
<html>
<head>
<script type="text/javascript" src="bridge_pattern.js"></script>
<script type="text/javascript">
window.onload = function(){
var flow1 = new FlowPattern();
for(var i = 0; i < 10; i++){
flow1.add(new Circle(10));
}
flow1.next(document.getElementById("area1"));
var flow2 = new FlowPattern();
for(var i = 0; i < 10; i++){
flow2.add(new Rect(20, 20));
}
flow2.next(document.getElementById("area2"));
var random1 = new RandomPattern();
for(var i = 0; i < 10; i++){
random1.add(new Circle(10));
}
random1.next(document.getElementById("area3"));
var random2 = new RandomPattern();
for(var i = 0; i < 10; i++){
random2.add(new Rect(20, 20));
}
random2.next(document.getElementById("area4"));
}
</script>
</head>
<h1>Bridge Pattern</h1>
<body>
<canvas id="area1" height="300px" width="200px"></canvas>
<canvas id="area2" height="300px" width="200px"></canvas>
<canvas id="area3" height="300px" width="200px"></canvas>
<canvas id="area4" height="300px" width="200px"></canvas>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment