The second day in a row I can not solve the problem with scroll area in Starling. Here is my code:
protected function onTouch(event:TouchEvent):void
{
var touches:Vector.<Touch> = event.getTouches(this, TouchPhase.MOVED);
if (touches.length == 1)
{
// one finger touching -> move
var delta:Point = touches[0].getMovement(parent);
x += delta.x;
y += delta.y;
}
else if (touches.length == 2)
{
// two fingers touching -> rotate and scale
var touchA:Touch = touches[0];
var touchB:Touch = touches[1];
var currentPosA:Point = touchA.getLocation(parent);
var previousPosA:Point = touchA.getPreviousLocation(parent);
var currentPosB:Point = touchB.getLocation(parent);
var previousPosB:Point = touchB.getPreviousLocation(parent);
var currentVector:Point = currentPosA.subtract(currentPosB);
var previousVector:Point = previousPosA.subtract(previousPosB);
if (_enableRotation)
{
var currentAngle:Number = Math.atan2(currentVector.y, currentVector.x);
var previousAngle:Number = Math.atan2(previousVector.y, previousVector.x);
var deltaAngle:Number = currentAngle - previousAngle;
}
// update pivot point based on previous center
var previousLocalA:Point = touchA.getPreviousLocation(this);
var previousLocalB:Point = touchB.getPreviousLocation(this);
pivotX = (previousLocalA.x + previousLocalB.x) * 0.5;
pivotY = (previousLocalA.y + previousLocalB.y) * 0.5;
// update location based on the current center
x = (currentPosA.x + currentPosB.x) * 0.5;
y = (currentPosA.y + currentPosB.y) * 0.5;
if (_enableRotation)
{
// rotate
rotation += deltaAngle;
}
// scale
var sizeDiff:Number = currentVector.length / previousVector.length;
var diffSize:Number = scaleX * sizeDiff;
if(( diffSize>= _minScale) && (diffSize <= _maxScale))
{
scaleX *= sizeDiff;
scaleY *= sizeDiff;
}
}
var touch:Touch = event.getTouch(this, TouchPhase.ENDED);
if (touch)
{
//here is my problem!
}
}
In last if I wanna check where is my child object (image), and if this object is out of screen, I wanna move scroll area (sprite) in center of screen. But I don't know how I can do this.
You can use ContainerLayout from Gazman SDK to do this job. It works with every starling displayObject.
Some this like this:
var layout = new ContainerLayout();
layout.horizontalCenter = 0;
layout.applyLayoutOn(myScroller);
Related
I'm trying to make a circle move between two body keypoints – i.e between left and right shoulder. I started with this code to make an object following some position:
var rectLocation;
var x = 50;
var y = 50;
function setup() {
createCanvas(640,400);
rectLocation = createVector(width/2,height/2);
}
function draw() {
background(255);
var target = createVector(x,y);
var distance = target.dist(rectLocation);
var mappedDistance = map(distance, 100, 0, 1.5, 0.5);
target.sub(rectLocation);
target.normalize();
target.mult(mappedDistance);
rectLocation.add(target);
text('hello',rectLocation.x, rectLocation.y);
x = x + 1 ;
if (x > width) {
x = 50;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.js"></script>
So with poseNet I converted x and y values of each keypoint into p5 Vectors and made one location follow another, but it doesn't seem to move and I can't get why. Sketch: https://editor.p5js.org/sebyakin/sketches/LQ7gqwGZH and my code here:
let video;
let poseNet;
let noseX = 0;
let noseY = 0;
let eyelX = 0;
let eyelY = 0;
let shoulderX = 0;
let shoulderY = 0;
let firstLocation;
let target;
function setup() {
createCanvas(640, 480);
video = createCapture(VIDEO);
video.hide();
poseNet = ml5.poseNet(video, modelReady);
poseNet.on('pose', gotPoses);
// creating empty vectors
firstLocation = createVector(0,0);
target = createVector(0,0);
}
function gotPoses(poses) {
if (poses.length > 0) {
let nX = poses[0].pose.keypoints[0].position.x;
let nY = poses[0].pose.keypoints[0].position.y;
let eX = poses[0].pose.keypoints[1].position.x;
let eY = poses[0].pose.keypoints[1].position.y;
let sX = poses[0].pose.keypoints[5].position.x;
let sY = poses[0].pose.keypoints[5].position.y;
noseX = nX;
noseY = nY;
eyelX = eX;
eyelY = eY;
shoulderX = sX;
shoulderY = sY;
}
}
function modelReady() {
console.log('model ready');
}
function draw() {
image(video, 0, 0);
fill(0,0,255);
// set vectors to keypoints values
firstLocation.set(noseX, noseY);
target.set(shoulderX, shoulderY)
// make a circle follow target loaction
let distance = target.dist(firstLocation);
let mappedDistance = map(distance, 100, 0, 1.5, 0.5);
target.sub(firstLocation);
// target.normalize();
// target.mult(mappedDistance);
firstLocation.add(target);
ellipse(firstLocation.x, firstLocation.y, 50);
console.log(target.x);
}
Where did I go wrong?
async void CreateScene()
{
Input.SubscribeToTouchEnd(OnTouched);
//want add image view in UrhoSharp Surface for rotatable and 3D image
var imageview = new Xamarin.Forms.Image { Source = "icon.", HeightRequest = 150, WidthRequest = 150 };
scene = new Scene();
octree = scene.CreateComponent<Octree>();
plotNode = scene.CreateChild();
var baseNode = plotNode.CreateChild().CreateChild();
var plane = baseNode.CreateComponent<StaticModel>();
plane.Model = CoreAssets.Models.Plane;
var cameraNode = scene.CreateChild();
camera = cameraNode.CreateComponent<Camera>();
cameraNode.Position = new Vector3(10, 15, 10) / 1.75f;
cameraNode.Rotation = new Quaternion(-0.121f, 0.878f, -0.305f, -0.35f);
Node lightNode = cameraNode.CreateChild();
var light = lightNode.CreateComponent<Light>();
light.LightType = LightType.Point;
light.Range = 100;
light.Brightness = 1.3f;
int size = 3;
baseNode.Scale = new Vector3(size * 1.5f, 1, size * 1.5f);
bars = new List<Bar>(size * size);
for (var i = 0f; i < size * 1.5f; i += 1.5f)
{
for (var j = 0f; j < size * 1.5f; j += 1.5f)
{
var boxNode = plotNode.CreateChild();
boxNode.Position = new Vector3(size / 2f - i, 0, size / 2f - j);
var box = new Bar(new Color(RandomHelper.NextRandom(), RandomHelper.NextRandom(), RandomHelper.NextRandom(), 0.9f));
boxNode.AddComponent(box);
box.SetValueWithAnimation((Math.Abs(i) + Math.Abs(j) + 1) / 2f);
bars.Add(box);
}
}
SelectedBar = bars.First();
SelectedBar.Select();
try
{
await plotNode.RunActionsAsync(new EaseBackOut(new RotateBy(2f, 0, 360, 0)));
}
catch (OperationCanceledException) { }
movementsEnabled = true;
}
Is there a way to generate a video frame's content by code?
For example :
I want to make a program that takes some string variable as input and then gives an output video of same text but now with special effects on the text itself.
It came to my mind the idea after seeing some projects that Facebook has done in their website. They have a database of pictures, comments, friends, events, likes and so on, that are related to a User. With all this information they do videos like for example Friend's day, a video that is completely related to the user that wants to post it.
How does these things work?
Is there some sort of software I can use? Can someone give me a place to start with?
I want to make a program that takes some string variable as input and then gives an output video of same text but now with special effects on the text itself.
You can render the text using canvas and record the result using the new Media Recorder API.
The effects can be made various ways of course, and the text content itself can be used against a database, or in conjunction with machine learning to structure/obtain some data relative to the text. This has a wide scope though, wider than what fits in here.
In any case, the generation of the video itself is shown below. It is a simple example where you can enter some text, it gets animated and recorded as video. When you click stop the actual video will show instead (which you can allow user to download). You can extend with other effects, storyboard features so you can record scenes and develop it to make an entire movie.
Do notice that all animation happens on the canvas in real-time. Typical video is recorded at 30 frames per second and not 60 frames per second, which is the typical frame rate for canvas. This is also something to consider in regard to smoothness. However, you can use this to your advantage by targeting 30 FPS to give your code a little more time to process. The API is suppose to support step-recording by not giving a frame rate as argument, but I have not been able to make this work as of yet.
There are currently limits with support of the API as not all browsers supports it yet.
Example
// un-refined code for demo use only
// set up globals, get key elements
var div = document.querySelector("div");
var btn = document.querySelector("button");
var txt = document.querySelector("input");
var c = document.querySelector("canvas");
// make 2d context without alpha channel
var ctx = c.getContext("2d", {alpha: false});
var isRecording = false;
// stream vars
var rec, stream, tref;
// if clicked, lets go
btn.onclick = setup;
function setup() {
// toggle button text/status for demo
if (isRecording) {
this.disabled = true;
this.innerHTML = "Making video...";
stop();
return
}
else {
isRecording = true;
this.innerHTML = "Click to stop & show video";
}
// Setup canvas for text rendering
var ct1 = document.createElement("canvas");
var ct2 = document.createElement("canvas");
var ctxText1 = ct1.getContext("2d");
var ctxText2 = ct2.getContext("2d");
var w, h;
w = ct1.width = ct2.width = c.width;
h = ct1.height = ct2.height = c.height;
setupCtx(ctxText1, "#333", "#FF9F05");
setupCtx(ctxText2, "#FF9F05", "#000");
function setupCtx(ctxText, bg, fg) {
ctxText.textAlign = "center";
ctxText.textBaseline = "middle";
ctxText.font = "92px sans-serif";
ctxText.fillStyle = bg;
ctxText.fillRect(0, 0, w, h);
ctxText.fillStyle = fg;
ctxText.translate(w/2, h/2);
ctxText.rotate(-0.5);
ctxText.fillText(txt.value.toUpperCase(), 0, 0);
}
// populate grid (see Square object below which handles the tiles)
var cols = 18,rows = 11,
cellWidth = (c.width / cols)|0,
cellHeight = (c.height / rows)|0,
grid = [],
len = cols * rows, y = 0, x,
index, hasActive = true;
for (; y < rows; y++) {
for (x = 0; x < cols; x++) {
grid.push(new Square(ctx, x * cellWidth, y * cellHeight, cellWidth, cellHeight, ct1, ct2, 0.01));
}
}
x = 0;
// start recording canvas to video
record();
//animation loop (refactor at will)
function loop() {
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.globalAlpha = 1;
ctx.clearRect(0, 0, w, h);
// trigger cells
for (y = 0; y < rows; y++) {
var gx = (x | 0) - y;
if (gx >= 0 && gx < cols) {
index = y * cols + gx;
grid[index].trigger();
}
}
x += 0.25;
// update all
for (var i = 0; i < grid.length; i++) grid[i].update();
tref = requestAnimationFrame(loop);
}
// setup media recorder to record canvas # 30 FPS (note: canvas = 60 FPS by def.)
function record() {
stream = c.captureStream(30);
rec = new MediaRecorder(stream);
rec.addEventListener('dataavailable', done);
rec.start();
requestAnimationFrame(loop);
}
}
// stop recorder and trigger dataavailable event
function stop() {
rec.stop();
cancelAnimationFrame(tref); // stop loop as well
}
// finish up, show new shiny video instead of canvas
function done(e) {
var blob = new Blob([e.data], {"type": "video/webm"});
var video = document.createElement("video");
document.body.removeChild(c);
document.body.appendChild(video);
// play, Don
video.autoplay = video.loop = video.controls = true;
video.src = URL.createObjectURL(blob);
video.onplay = function() {
div.innerHTML = "Playing resulting video below:";
};
}
// stolen from a previous example I made (CC3.0-attr btw as always)
// this is included for the sole purpose of some animation.
function Square(ctx, x, y, w, h, image, image2, speed) {
this.ctx = ctx;
this.x = x;
this.y = y;
this.height = h;
this.width = w;
this.image = image;
this.image2 = image2;
this.first = true;
this.alpha = 0; // current alpha for this instance
this.speed = speed; // increment for alpha per frame
this.triggered = false; // is running
this.done = false; // has finished
}
Square.prototype = {
trigger: function () { // start this rectangle
this.triggered = true
},
update: function () {
if (this.triggered && !this.done) { // only if active
this.alpha += this.speed; // update alpha
if (this.alpha <= 0 || this.alpha >= 1)
this.speed = -this.speed;
}
var t = Math.sin(Math.PI * this.alpha);
if (t <= 0) this.first = !this.first;
this.ctx.fillStyle = this.color; // render this instance
this.ctx.globalAlpha = Math.max(0, Math.min(1, t));
var cx = this.x + this.width * 0.5, // center position
cy = this.y + this.width * 0.5;
this.ctx.setTransform(t*0.5+0.5, 0, 0, t*0.5+0.5, cx, cy); // scale and translate
this.ctx.rotate(-Math.PI * (1 - t)); // rotate, 90° <- alpha
this.ctx.translate(-cx, -cy); // translate back
this.ctx.drawImage(this.first ? this.image : this.image2, this.x, this.y, this.width, this.height, this.x, this.y, this.width, this.height);
}
};
body {background: #555;color:#ddd;font:16px sans-serif}
<div>
<label>Enter text to animate: <input value="U R AWESOME"></label>
<button>Click to start animation + recording</button>
</div>
<canvas width=640 height=400></canvas>
I need these images rendered in html5 canvas to be centered, rotated and resized depending on the size of the bounding box. I managed to rotate and resize the images but they are not centered anymore.
Can someone help me to fit these images in bounds and keep them in the center of the boxes? (fiddle updated)
http://jsfiddle.net/owtwv1a5/6/
var renderSprite = function(img, x, y, width,height, degree, scale){
var rads = degree * Math.PI/180;
var heightRatio = height/img.height;
var widthRatio = width/img.width;
var isRotated = (degree==90 || degree==270);
if (isRotated) {
var scale_ratio = height/img.width;
} else {
var scale_ratio = heightRatio;
}
var scaledImgHeight = img.height*scale_ratio;
var scaledImgWidth = img.width*scale_ratio;
var offsetX = width - scaledImgWidth;
if ((scaledImgHeight) < height) {
y += parseInt((height-scaledImgHeight)/2);
if (isRotated) {
x -= (scaledImgWidth - scaledImgHeight) / 2;
}
}
if ((scaledImgWidth) < width) {
x += parseInt((width-scaledImgWidth)/2);
if (isRotated) {
x -= (scaledImgWidth - scaledImgHeight) / 2;
}
}
ctx.save();
var centerX = x + scaledImgWidth * 0.5;
var centerY = y + scaledImgHeight * 0.5;
ctx.translate(centerX, centerY);
ctx.rotate(rads);
//ctx.scale(scale,scale);
ctx.translate(-centerX, -centerY);
ctx.drawImage(img, x,y, scaledImgWidth ,scaledImgHeight);
ctx.restore();
};
I'm trying to drag an image around a canvas element. Although I've had dragging working, it's not working as I'd quite like.
Basically, the image is always bigger than the canvas element, but the left side of the image within the canvas is not able to further right than the left side of the canvas, likewise the right side is not allowed to go "more right" than the right side of the canvas. Basically, the image is constrained to not show any blank canvas space.
The problem with the dragging is that whenever I start to drag the image "pops" back to act as if 0,0 is from the mouse location, whereas I actually want to move the image from the current position.
document.onmousemove = function(e) {
if(mouseIsDown) {
var mouseCoords = getMouseCoords(e);
offset_x += ((mouseCoords.x - canvas.offsetLeft) - myNewX);
offset_y += ((mouseCoords.y - canvas.offsetTop) - myNewY);
draw(offset_x, offset_y);
// offset_x = ((mouseCoords.x - canvas.offsetLeft) - myNewX);
// offset_y = ((mouseCoords.y - canvas.offsetTop) - myNewY);
// offset_x = (mouseCoords.x - canvas.offsetLeft) - myNewX;
// offset_y = (mouseCoords.y - canvas.offsetTop) - myNewY;
offset_x = prevX;
offset_y = prevY;
}
/*if(mouseIsDown) {
var mouseCoords = getMouseCoords(e);
var tX = (mouseCoords.x - canvas.offsetLeft);
var tY = (mouseCoords.y - canvas.offsetTop);
var deltaX = tX - prevX;
var deltaY = tY - prevY;
x += deltaX;
y += deltaY;
prevX = x;
prevY = y;
draw(x, y);
}*/
};
Is what I have now, where I kind of get a parallelex effect.
You will have to record the current offset of the image as it is moved and use that (in addition to the offset from the top left of the canvas) with each mousedown to determine your initial offset.
var dragging = false,
imageOffset = {
x: 0,
y: 0
},
mousePosition;
function dragImage(coords) {
imageOffset.x += mousePosition.x - coords.x;
imageOffset.y += mousePosition.y - coords.y;
// constrain coordinates to keep the image visible in the canvas
imageOffset.x = Math.min(0, Math.max(imageOffset.x, canvas.width - imageWidth));
imageOffset.y = Math.min(0, Math.max(imageOffset.y, canvas.height - imageHeight));
mousePosition = coords;
}
function drawImage() {
// draw at the position recorded in imageOffset
// don't forget to clear the canvas before drawing
}
function getMouseCoords(e) {
// return the position of the mouse relative to the top left of the canvas
}
canvas.onmousedown = function(e) {
dragging = true;
mousePosition = getMouseCoords(e);
};
document.onmouseup = function() {
dragging = false;
};
document.onmousemove = function(e) {
if(dragging) dragImage(getMouseCoords(e));
};
You should probably treat this as pseudocode as I haven't tested it in any way... ;-)