I have a drawing canvas using EaselJS, the problem is that when I am drawing lines is working properly only the first one. Since second line is getting with some corners not with curved line as the first line, and it looks more like a polygon than a curved line. What is the best way to fix this?
I think here should to be something to correct
//containers
this.backgroundContainer = new createjs.Container();
this.stage.addChild(this.backgroundContainer);
var ss = new createjs.Shape();
ss.graphics.beginFill("#000000").drawRect(0, 0, 960, window.innerHeight);
this.stageArea = new createjs.Container();
this.stageArea.snapToPixel = true;
this.stageArea.hitArea = ss;
this.backgroundContainer.addChild(this.stageArea);
this.container = new createjs.Container();
this.stage.addChild(this.container);
this.stageArea.addEventListener("mousedown", this.handleMouseDown);
this.stage.addEventListener("stagemousemove" , this.handleMouseMove);
tick:function(){
if(app.mouseDOWN){
app.midPt = new createjs.Point(app.oldPt.x + app.stage.mouseX - app.stage.canvas.width/2>>1, app.oldPt.y+app.stage.mouseY - app.stage.canvas.height/2>>1);
app.lineArray[app.NUM_LINES].graphics
.beginStroke('#ffffff')
.moveTo(app.midPt.x, app.midPt.y)
.curveTo(app.oldPt.x, app.oldPt.y, app.oldMidPt.x, app.oldMidPt.y);
app.lineArray2[app.NUM_LINES].graphics
.beginStroke('#ffffff')
.moveTo(app.midPt.x, app.midPt.y)
.curveTo(app.oldPt.x, app.oldPt.y, app.oldMidPt.x, app.oldMidPt.y);
app.lineArray3[app.NUM_LINES].graphics
.beginStroke('#ffffff')
.moveTo(app.midPt.x, app.midPt.y)
.curveTo(app.oldPt.x, app.oldPt.y, app.oldMidPt.x, app.oldMidPt.y);
app.oldPt.x = app.stage.mouseX;
app.oldPt.y = app.stage.mouseY;
app.oldMidPt.x = app.midPt.x;
app.oldMidPt.y = app.midPt.y;
app.stage.update();
}
}
Related
So I want my output something like this.
var circlePath = new Path.Circle(new Point(0, 0), 25);
circlePath.strokeColor = 'black';
var copy = [];
for(var i=0;i<=10;i++){
var j=100;
copy[i]= circlePath.clone();
copy[i].strokeColor = 'red';
copy[i].position = new Point(j, 0);
j=j+100;
}
Hence, I just used a variable to shift the copy to a new point. But it doesn't work and just displays a single circle.
I want to animate/transform one Path into another (the black shape into the red SVG shape - both will be black in final):
var circlePath = new paper.Path.Circle(centerPoint, 90);
circlePath.fillColor = 'red';
circlePath.fullySelected = true;
var winkData = 'M-184.4,393.4c0,0-0.5-0.5-1.4-1.4c-0.9-0.9-2.2-2.1-4-3.3c-1.8-1.3-4.1-2.4-6.8-3.4c-1.4-0.4-2.8-0.9-4.3-1
c-1.5-0.3-3-0.3-4.6-0.4c-1.5,0-3.1,0.2-4.5,0.4c-1.5,0.3-2.9,0.6-4.2,1.1c-1.3,0.4-2.6,1-3.7,1.6c-1.2,0.5-2.1,1.2-3,1.8
c-0.9,0.6-1.7,1.2-2.4,1.8c-0.8,0.5-1.2,1-1.6,1.4c-0.8,0.8-1.3,1.3-1.3,1.3c-0.8,0.9-1.1,2.1-0.6,3.3c0.6,1.6,2.5,2.4,4.1,1.7
c0,0,0.6-0.2,1.7-0.7c0.5-0.2,1.2-0.6,1.8-0.8c0.7-0.2,1.4-0.6,2.2-0.9c3.3-1.3,7.6-2.5,11.8-2.5c1.1,0,2.1,0,3.2,0.2
c1,0.1,2.1,0.3,3.1,0.5c1,0.3,2,0.5,2.9,0.8c0.9,0.3,1.8,0.6,2.6,0.9c1.6,0.6,3,1.2,4,1.7c1,0.4,1.5,0.7,1.5,0.7l0.3,0.
c1.1,0.4,2.3,0.2,3.2-0.6C-183.4,396.6-183.3,394.7-184.4,393.4z'
var winkPath = new paper.Path(winkData);
winkPath.fillColor = 'black';
winkPath.scale(4);
winkPath.simplify(2)
winkPath.fullySelected = true;
winkPath.position = centerPoint
paper.view.draw();
Does anyone have advice on how to go about doing this?
I made a scene in Blender that I exported into a .babylon, and now I am importing it into the game. The map is 351KB, and I am loading it into the game like this:
var BABYLON;
var canvas = document.getElementById('gamecanvas');
var engine = new BABYLON.Engine(canvas, true);
var scene = new BABYLON.Scene(engine);
var light = new BABYLON.PointLight('light', new BABYLON.Vector3(0,0,10), scene);
var player = new BABYLON.FreeCamera('player', new BABYLON.Vector3(1,1,1), scene); //IMPORTANT LINE
var player_height = 2;
var player_speed = 1;
var player_inertia = 0.9;
var mouse_position = new BABYLON.Vector2(mouse_position.x, mouse_position.y);
function INIT_GAME(){
engine.runRenderLoop(function(){ //IMPORTANT LINE
scene.render();
});
canvas.height = window.innerHeight;
canvas.width = window.innerWidth;
canvas.requestPointerLock = canvas.requestPointerLock || canvas.mozRequestPointerLock;
canvas.requestPointerLock();
scene.enablePhysics(); //IMPORTANT LINE
scene.setGravity(new BABYLON.Vector3(0, -10, 0)); //IMPORTANT LINE
player.attachControl(canvas, true); //IMPORTANT LINE
player.ellipsoid = new BABYLON.Vector3(1, player_height, 1);
player.checkCollisions = true;
player.applyGravity = true;
player.keysUp = [87];
player.keysDown = [83];
player.keysLeft = [65];
player.keysRight = [68];
player.inertia = player_inertia;
player.speed = player_speed;
window.addEventListener('resize', function(){
engine.resize();
});
BABYLON.SceneLoader.Load('Scenes', 'zombie_map.babylon', engine); //IMPORTANT LINE
}
I've attempted to narrow everything down to what you should need to look at, but I left it all there just in case there was something I missed. (INIT_GAME is loaded on page load). My problem is, I think the scene is loading, but it just gives me a strange loading icon, which I presume is just Babylon trying to load in the scene I passed it. My questions are:
Am I loading everything in properly?
What is the proper format to import a .babylon scene?
Is the size of the map too big for the browser, and if so, how can I compress it?
I can provide a link to the site if you need to see the results head-on. Let me know, thanks!
I think the solution is very simple.
Add a slash after your rootURL.
So replace
BABYLON.SceneLoader.Load('Scenes', 'zombie_map.babylon', engine); //IMPORTANT LINE
with
BABYLON.SceneLoader.Load('Scenes/', 'zombie_map.babylon', engine); //IMPORTANT LINE
Try this and let me know how it goes.
Using Three.js, if I create a mesh by drawing a shape and extruding, how can I animate the underlying shape to alter the resulting mesh?
A simple example:
drawShape: function(){
var shape = new THREE.Shape();
shape.moveTo(0, 0);
shape.arc(0,0,30,0,(Math.PI*1.9),true);
return shape;
},
var shapeGeom = new THREE.ExtrudeGeometry(this.drawShape(), options);
I would like to alter the geometry by changing the shape path/arc etc.
In the end I used morph targets to achieve this. I made a function to create the frames in advance and then animated through them. Using the above function to draw, something like this:
createMorphTargets: function(geom,initVal,targetVal){
var numFrames = 60;
var fraqStep = (1/numFrames);
var diff = targetVal-initVal;
var stepVal = (targetVal-initVal)/numFrames;
for(var i=1;i<60;i++){
var delta = TWEEN.Easing.Quintic.InOut(fraqStep*i);
var lerpVal = initVal+(diff*(delta));
var mesh = new THREE.ExtrudeGeometry(this.drawShape(lerpVal), this.bevelOptions);
geom.morphTargets.push({
name:'target-'+i,vertices:mesh.vertices
});
}
},
How to draw circular segment using paper.js
I want to draw the circular segments as shown in the image. Each segment is independent and will later be used for interactive purposes.
I tried something like
//Temporary background circle
var keys = new Path.Circle(view.center, 130);
keys.fillColor = '#F1F1F1';
var home = new Path.Circle(view.center, 50);
home.fillColor = '#ee2a33';
var start = new Point(view.center.x, view.center.y-130);
var through = new Point(view.center.x-125, view.center.y-40);
var to = new Point(view.center.x-130, view.center.y);
var path = new Path.Arc(start, through, to);
path.strokeColor = 'black';
path.fillColor = 'green';
And it renders something like below
After several attempts, I came up with this. If anyone needs the same thing for whatever reason, maybe this will help.
//Creating keys
var arcOne = createSegment('#f1f1f1');
var arcTwo = createSegment('#666666');
var arcThree = createSegment('#333333');
var arcFour = createSegment('#666666');
var arcFive = createSegment('#999999');
var arcSix = createSegment('#000000');
arcTwo.rotate(-60, view.center);
arcThree.rotate(-120, view.center);
arcFour.rotate(60, view.center);
arcFive.rotate(120, view.center);
arcSix.rotate(180, view.center);
//center white
var center = new Path.Circle(view.center, 50);
center.fillColor = '#F1F1F1';
//Create Each segment
function createSegment(fillcolor){
//Segment One
var start = new Point(view.center.x, view.center.y-130);
var through = new Point(view.center.x-90, view.center.y-94);
var to = new Point(view.center.x-113, view.center.y-64);
var name = Path.Arc(start, through, to);
name.add(new Point(view.center.x, view.center.y));
name.add(new Point(view.center.x, view.center.y-130));
name.fillColor = fillcolor;
return name;
}