Develop Reference

Drag object around a half circle on mouse over - Adobe Animate HTML5 Canvas

I have the following code in Adobe Animate HTML5 Canvas using JavaScript/Easel.js/Create.js. The code enables an object to be dragged around a circle.
I now want to change this to function for a half circle, the top half. The object needs to be moved CW and CCW, and stop at the ends of the half circle (so backwards and forwards, but not right around a circle).
stage.enableMouseOver();
var knob_X = 454;
var knob_Y = 169;
var radius = 80;
var streakAngle;
root.streakRotatorKnob.addEventListener("mouseover", mouseOverKnob.bind(this));
root.streakRotatorKnob.x = knob_X + radius * Math.cos(0);
root.streakRotatorKnob.y = knob_Y + radius * Math.sin(0);
function mouseOverKnob(evt)
{
root.streakRotatorKnob.addEventListener("pressmove", moveF);
}
function moveF(evt) {
var rads = Math.atan2(stage.mouseY - knob_Y, stage.mouseX - knob_X);
var atan_knob = Math.atan2(evt.currentTarget.y, evt.currentTarget.x);
evt.currentTarget.x = knob_X + radius * Math.cos(rads);
evt.currentTarget.y = knob_Y + radius * Math.sin(rads);
stage.update();
console.log(atan_knob);
streakAngle = Math.round(((rads * 180 / Math.PI) * 100) / 100);
if (leye == true) {
root.streakMainLeft.rotation = streakAngle + 90;
} else if (reye == true) {
root.streakMainRight.rotation = streakAngle + 90;
}
root.streakAngle.text = streakAngle + "\u00B0";
}
The video link below in the first half of the video shows what I currently have working in this code.
The last half of the video shows what I want.
I would change the circle graphic to a half circle...
https://youtu.be/781GzUulX1c

I can't understand exactly what you want.
It would be better if you shared the source file directly.
I prepared an example, can you download and examine it?
we.tl/t-oflBkdma0o
I also convey that I cannot edit through your codes.
stage.enableMouseOver();
var root = this;
var knob_X = 454;
var knob_Y = 169;
var radius = 80;
var streakAngle;
var leye = true;
root.streakRotatorKnob.addEventListener("mouseover", mouseOverKnob.bind(this));
root.streakRotatorKnob.x = knob_X + radius * Math.cos(0);
root.streakRotatorKnob.y = knob_Y + radius * Math.sin(0);
function mouseOverKnob(evt)
{
root.streakRotatorKnob.addEventListener("pressmove", moveF);
}
function moveF(evt) {
var rads = Math.atan2(stage.mouseY/stage.scaleY - knob_Y, stage.mouseX/stage.scaleX - knob_X);
var atan_knob = Math.atan2(evt.currentTarget.y, evt.currentTarget.x);
streakAngle = Math.round(((rads * 180 / Math.PI) * 100) / 100);
if(streakAngle>=-90 && streakAngle<=90)
{
evt.currentTarget.x = knob_X + radius * Math.cos(rads);
evt.currentTarget.y = knob_Y + radius * Math.sin(rads);
}
stage.update();
//console.log("atan_knob: "+atan_knob);
/*
if (leye == true) {
root.streakMainLeft.rotation = streakAngle + 90;
} else if (reye == true) {
root.streakMainRight.rotation = streakAngle + 90;
}
*/
console.log("streakAngle: " +streakAngle);
//root.streakAngle.text = streakAngle + "\u00B0";
}

JavaScript - Show link based on spinner

I found this js spinner and I like how it has the counter at the end. It counts down from 15 seconds. I was wondering if it would be possible to make it so that if you land on geography for example it counts down 5 seconds and then redirects you to a separate website. And history would bring you to a different link and so on. Thanks
JavaScript
var colors = ["#ffff00" , "#1be11b", "#0000ff", "#7e7e7e", "#8a2be2", "#006400", "#2980B9", "#E74C3C"];
// NEED to pre load this data prior
var prize_descriptions = ["GENERAL", "GEOGRAPHY", "HISTORY", "ARTS", "SCIENCE", "SPORTS", "RELIGION", "MEDIA"];
var current_user_status = {};
var startAngle = 0;
var arc = Math.PI / 4;
var spinTimeout = null;
var spinArcStart = 10;
var spinTime = 0;
var spinTimeTotal = 0;
var current_user_status = null;
var spin_results = null;
var wheel;
var counter, tt;
function drawSpinnerWheel() {
var canvas = document.getElementById("canvas");
if (canvas.getContext) {
var outsideRadius = 200;
var textRadius = 160;
var insideRadius = 125;
wheel = canvas.getContext("2d");
wheel.clearRect(0, 0, 500, 500);
wheel.strokeStyle = "#ecf0f1";
wheel.lineWidth = 5;
wheel.font = '12px Helvetica, Arial';
for (var i = 0; i < 8; i++) {
var angle = startAngle + i * arc;
wheel.fillStyle = colors[i];
wheel.beginPath();
wheel.arc(250, 250, outsideRadius, angle, angle + arc, false);
wheel.arc(250, 250, insideRadius, angle + arc, angle, true);
wheel.stroke();
wheel.fill();
wheel.save();
wheel.shadowOffsetX = -1;
wheel.shadowOffsetY = -1;
wheel.shadowBlur = 0;
wheel.shadowColor = "rgb(220,220,220)";
wheel.fillStyle = "#ecf0f1";
wheel.translate(250 + Math.cos(angle + arc / 2) * textRadius, 250 + Math.sin(angle + arc / 2) * textRadius);
wheel.rotate(angle + arc / 2 + Math.PI / 2);
var text = prize_descriptions[i];
if (text === undefined) text = "Not this time!";
wheel.fillText(text, -wheel.measureText(text).width / 2, 0);
wheel.restore();
}
//Arrow
wheel.fillStyle = "#ecf0f1";
wheel.beginPath();
wheel.moveTo(250 - 4, 250 - (outsideRadius + 5));
wheel.lineTo(250 + 4, 250 - (outsideRadius + 5));
wheel.lineTo(250 + 4, 250 - (outsideRadius - 5));
wheel.lineTo(250 + 9, 250 - (outsideRadius - 5));
wheel.lineTo(250 + 0, 250 - (outsideRadius - 13));
wheel.lineTo(250 - 9, 250 - (outsideRadius - 5));
wheel.lineTo(250 - 4, 250 - (outsideRadius - 5));
wheel.lineTo(250 - 4, 250 - (outsideRadius + 5));
wheel.fill();
}
}
function spin() {
$("#spin").unbind('click');
$("#spin").attr("id", "nospin");
document.getElementById('timer').innerHTML = " ";
document.getElementById('category').innerHTML = " ";
spinMovement = Math.floor(Math.random() * 20) + prize_descriptions.length * 2;
spinAngleStart = 1 * 10 + spinMovement;
spinTime = 0;
spinTimeTotal = Math.floor(Math.random() * 4) * Math.floor(Math.random() * 6) + Math.floor(Math.random() * 8) * Math.floor(Math.random() * 2000) + 2000;
console.log(spinMovement + " - " + spinTimeTotal);
rotateWheel();
}
function rotateWheel() {
spinTime += 30;
if (spinTime >= spinTimeTotal) {
stopRotateWheel();
return;
}
var spinAngle = spinAngleStart - easeOut(spinTime, 0, spinAngleStart, spinTimeTotal);
startAngle += (spinAngle * Math.PI / 180);
drawSpinnerWheel();
spinTimeout = setTimeout('rotateWheel()', 30);
}
function stopRotateWheel() {
clearTimeout(spinTimeout);
var degrees = startAngle * 180 / Math.PI + 90;
var arcd = arc * 180 / Math.PI;
var index = Math.floor((360 - degrees % 360) / arcd);
wheel.save();
wheel.font = '30px "Homestead-Inline", Helvetica, Arial';
var text = prize_descriptions[index];
//wheel.fillText(text, 250 - wheel.measureText(text).width / 2, 250 + 10);
wheel.restore();
document.getElementById('timer').innerHTML = "15";
document.getElementById('category').innerHTML = "Your Category is: " + text;
counter = 15;
tt=setInterval(function(){startTime()},1000);
}
function easeOut(t, b, c, d) {
var ts = (t /= d) * t;
var tc = ts * t;
return b + c * (tc + -3 * ts + 3 * t);
}
drawSpinnerWheel();
function startTime() {
if(counter == 0) {
clearInterval(tt);
$("#nospin").attr("id", "spin");
$("#spin").bind('click', function(e) {
e.preventDefault();
spin();
});
} else {
counter--;
}
document.getElementById('timer').innerHTML = counter;
}
$("#spin").bind('click', function(e) {
e.preventDefault();
spin();
});
To see it in action click here

It seems that all your changes should be made in the function stopRotateWheel() and startTime()
When the function is called, a variable called text holds the result ("Geography" or "Science", etc.).
From that, we can perform conditions based on the value of text and determine the total time of countdown, plus the link when the countdown expires.
Something like this:
function stopRotateWheel() {
clearTimeout(spinTimeout);
var degrees = startAngle * 180 / Math.PI + 90;
var arcd = arc * 180 / Math.PI;
var index = Math.floor((360 - degrees % 360) / arcd);
wheel.save();
wheel.font = '30px "Homestead-Inline", Helvetica, Arial';
var text = prize_descriptions[index];
//wheel.fillText(text, 250 - wheel.measureText(text).width / 2, 250 + 10);
wheel.restore();
document.getElementById('timer').innerHTML = "15";
document.getElementById('category').innerHTML = "Your Category is: " + text;
/*do an if else*/
if(text=="Geography")
{
counter = 5;
tt=setInterval(function(){startTime("www.geography.com")},1000);
/*countdown, and when timer expires... go to another link*/
}
else if (text=="Science")
{
//do the same as above :)
}
}
notice the code startTime("www.geography.com")? that's because we also modify function startTime to accept a parameter (in this case, the website) so that when the countdown is finished the webpage goes to that link :)
function startTime(gotoLink) {
if(counter == 0) {
/*go to that link */
window.location.replace(gotoLink)
} else {
counter--;
}
document.getElementById('timer').innerHTML = counter;
}
try it out!

Javascript animation easing

I have a function which moves my canvas using an ease in aspect. The problem how ever is the canvas animation doesn't work. It just scrolls too far and what appears to be too fast as well.
This is my function which moves the camera to the location the user clicked on the canvas:
function moveCamera(e,parent){
clearInterval(parent.scroll);
var mouseData = mousePos(evt,parent); //get x:y relative to element
var initial = {'x':el.width/2,'y':el.height/2},
target = {'x':mouseData.x,'y':mouseData.y},
deltaX = target.x-initial.x,
deltaY = target.y-initial.y,
timeStart = Date.now(),
timeLength = 800,
x,y,deltaTime;
function update(){
function fraction(t){
x = (target.x - initial.x) - (t*deltaX),
y = (target.y - initial.y) - (t*deltaY);
camera.x -= x;
camera.y -= y;
}
function easing(x) {
return 0.5 + 0.5 * Math.sin((x - 0.5) * Math.PI);
}
deltaTime = (Date.now() - timeStart) / timeLength;
if (deltaTime > 1) {
fraction(1);
} else {
fraction(easing(deltaTime));
}
}
parent.scroll = setInterval(update, 10);
}
I have attatched a JSFiddle of the issue demonstrated: http://jsfiddle.net/p5xjmLay/ simply click on the canvas to scroll to that position, and you will see it goes a bit crazy.
I am wondering how to solve this so the camera offset changes correctly each time?

I changed a little bit your version and it seems that it is working, please try this:
var el = document.getElementById('canvas'),
initial = {'x':el.width/2,'y':el.height/2},
ctx = el.getContext('2d'),
camera = {'x':el.width/2,'y':el.height/2},
box = {'x':0,'y':0};
var x,y,deltaTime;
el.addEventListener('mousedown',function(e){moveCamera(e,this);},false);
function moveCamera(e,parent){
clearInterval(parent.scroll);
var mouseData = mousePos(e,parent);
target = {'x':mouseData.x,'y':mouseData.y},
deltaX = target.x-initial.x,
deltaY = target.y-initial.y,
timeStart = Date.now(),
timeLength = 800;
function update(){
function fraction(t){
x = target.x - (initial.x + (t*deltaX)),
y = target.y - (initial.y + (t*deltaY));
if (Math.abs(camera.x + x - target.x) > Math.abs(camera.x - target.x)) {
camera.x = target.x;
initial.x = target.x;
} else {
camera.x += x;
}
if (Math.abs(camera.y + y - target.y) > Math.abs(camera.y - target.y)) {
camera.y = target.y;
initial.y = target.y;
} else {
camera.y += y;
}
}
function easing(x) {
return 0.5 + 0.5 * Math.sin((x - 0.5) * Math.PI);
}
deltaTime = (Date.now() - timeStart) / timeLength;
if (deltaTime > 1) {
fraction(1);
} else {
fraction(easing(deltaTime));
}
draw();
}
parent.scroll = setInterval(update, 200);
}
function mousePos(evt,el){
var offsetX = 0,
offsetY = 0;
do{
offsetX += el.offsetLeft - el.scrollLeft;
offsetY += el.offsetTop - el.scrollTop;
}while(el = el.offsetParent){
return {'x':evt.pageX - offsetX, 'y':evt.pageY - offsetY}
}
}
function draw(){
ctx.clearRect(0,0,el.width,el.height);
ctx.save();
ctx.translate(camera.x,camera.y);
ctx.beginPath();
ctx.rect(box.x-25, box.y-25,50,50);
ctx.fillStyle = 'red';
ctx.fill();
ctx.restore();
}
draw();

Positioning mesh in three.js

I m trying to understand how i can positioning my cubes in the canvas.
But i don't understand how positioning work.
I m looking a way to detect if my mesh meet the limit of the canvas. But what is the unit of position.x or position.y ?
And what is the relation between the canvas width , height and meshs on in the canvas?
Thanks.
var geometry = new Array(),material = new Array(),cube = new Array();
var i = 0;
for(i=0; i < 10;i++){
geometry[i] = new THREE.BoxGeometry(1,1,1);
material[i] = new THREE.MeshBasicMaterial({ color: 0x33FF99 });
cube[i] = new THREE.Mesh(geometry[i], material[i]);
scene.add(cube[i]);
}
camera.position.z = 5;
var render = function () {
requestAnimationFrame(render);
var xRandom = 0;
var yRandom = 0;
var zRandom = 0;
var sens = 1;
for (i = 0; i < cube.length ; i++) {
document.getElementById('widthHeight').innerHTML = " " + window.innerHeight + " " + window.innerWidth + "<br> x:" + cube[i].position.x + " <br> y:" + cube[i].position.y + " <br> z:" + cube[i].position.z;
xRandom = (Math.random() * 0.010 + 0.001) * sens;
yRandom = (Math.random() * 0.010 + 0.001) * sens;
zRandom = (Math.random() * 0.010 + 0.001) * sens;
cube[i].position.setX(xRandom + cube[i].position.x);
cube[i].position.setY(yRandom + cube[i].position.y);
cube[i].position.setZ(zRandom + cube[i].position.z);
cube[i].rotation.x += 0.0191;
cube[i].rotation.y += 0.0198;
}
renderer.render(scene, camera);
};
render();
i added a PlaneGeometry and some tests to detect if cubes reach limit x or y of the new PlaneGeometry.
var geometry = new Array(),material = new Array(),cube = new Array();
var i = 0;
var planeMap = new THREE.PlaneGeometry(100, 100);
var materialMap = new THREE.MeshBasicMaterial({ color: 0xCE0F0F });
var map = new THREE.Mesh(planeMap,materialMap);
scene.add(map);
for(i=0; i < 5; i++){
geometry[i] = new THREE.BoxGeometry(3,3,3);
material[i] = new THREE.MeshBasicMaterial({ color: 0x336699 });
cube[i] = new THREE.Mesh(geometry[i], material[i]);
scene.add(cube[i]);
}
camera.position.z = 100;
var render = function () {
requestAnimationFrame(render);
var xRandom = 0,yRandom = 0,zRandom = 0,x=0,y=0,z=0;
var sensX = 1, sensY = 1, sensZ = 1;
var widthHeight = document.getElementById('widthHeight');
for (i = 0; i < cube.length ; i++) {
if (cube[i].geometry.type == "BoxGeometry") {
widthHeight.innerHTML = " " + window.innerHeight + " " + window.innerWidth + "<br> x:" + cube[i].position.x + " <br> y:" + cube[i].position.y + " <br> z:" + cube[i].position.z;
var currentCube = cube[i].position;
var widthCube = cube[i].geometry.parameters.width;
var heightCube = cube[i].geometry.parameters.height;
x = currentCube.x;
y = currentCube.y;
z = currentCube.z;
if (x >= ((map.geometry.parameters.width / 2) - widthCube)) {
sensX = -1;
}
if (x <= ((map.geometry.parameters.width / 2) - widthCube)*-1) {
sensX = 1;
}
if (y >= ((map.geometry.parameters.height / 2) - heightCube)) {
sensY = -1;
}
if (y <= ((map.geometry.parameters.height / 2) - heightCube)*-1) {
sensY = 1;
}
xRandom = (Math.random() * 0.650 + 0.001) * sensX * (i + 1);
yRandom = (Math.random() * 0.850 + 0.001) * sensY * (i + 1);
//zRandom = (Math.random() * 0.450 + 0.001) * sensZ * (i + 1);
cube[i].position.setX(xRandom + x);
cube[i].position.setY(yRandom + y);
cube[i].position.setZ(zRandom + z);
cube[i].rotation.x += 0.01;
cube[i].rotation.y += 0.01;
}
}

In three.js you are working with a 3D space, the scene. The x,y,z coordinates are in that space. Similar to the real world, you can think of it as a room with some objects in it.
What gets shown on the canvas in 2D is how your camera sees a particular view to that scene. You can observe this by modifying the z coordinate of the camera position which you have in your code. This is again similar to taking a photo with a real camera of a room with some objects.
So the relation of the 3D object position and where they show in the canvas depend on the camera view. Three.js can tell you where some 3D position is projected in the 2D view -- for details and an example, see the answer there: Converting 3D position to 2d screen position [r69!]

A relative rotation in an animation

I have a problem with Raphael.js. I want to rotate the "compassScale" - set in the following code - in a relative manner.
This works for the paths, but all the texts "animate" to the absolute rotation of 30 degree. I want them to rotate to the 30 degrees relative from their actual positions.
var compassScale = paper.set();
var centerX = 200;
var centerY = 200;
var radius = 195;
var compasCircle = paper.circle(centerX, centerY, radius);
for(var i = 0; i < 360; i++) {
var winkelRad = i * (Math.PI/180)
var xStart = centerX + Math.sin(winkelRad) * radius;
var yStart = centerY + Math.cos(winkelRad) * radius;
var diff = 6;
if(i % 10 === 0){
compassScale.push(paper.text(centerX, centerY - radius + 18, i).rotate(i, centerX, centerY, true));
diff = 12;
} else if(i % 5 === 0) {
diff = 8;
}
var xEnd = centerX + Math.sin(winkelRad) * (radius - diff);
var yEnd = centerY + Math.cos(winkelRad) * (radius - diff);
compassScale.push(paper.path("M" + xStart + " " + yStart + " L" + xEnd + " " + yEnd));
}
compassScale.animate({rotation:"30 " + centerX + " " + centerY}, 5000);

Like you said, the problem is that you're animating all elements to 30 degrees, not their current rotation + 30 degrees. It's actually quite simple once you think of it that way. Here is your revised code that works:
var compassScale = paper.set();
var texts = []; // array to hold the text elements
var centerX = 200;
var centerY = 200;
var radius = 195;
var compasCircle = paper.circle(centerX, centerY, radius);
for(var i = 0; i < 360; i++) {
var winkelRad = i * (Math.PI/180)
var xStart = centerX + Math.sin(winkelRad) * radius;
var yStart = centerY + Math.cos(winkelRad) * radius;
var diff = 6;
if(i % 10 === 0){
texts.push(paper.text(centerX, centerY - radius + 18, i).rotate(i, centerX, centerY, true));
diff = 12;
} else if(i % 5 === 0) {
diff = 8;
}
var xEnd = centerX + Math.sin(winkelRad) * (radius - diff);
var yEnd = centerY + Math.cos(winkelRad) * (radius - diff);
compassScale.push(paper.path("M" + xStart + " " + yStart + " L" + xEnd + " " + yEnd));
}
compassScale.animate({rotation:"30 " + centerX + " " + centerY}, 5000);
// loop through the text elements, adjusting their rotation by adding 30 to their individual rotation
for (var i = 0, l = texts.length; i < l; i += 1) {
// node.attr("rotation") returns something like 50 200 200, so we have to split the string and grab the first number with shift
texts[i].animate({rotation: (30 + +texts[i].attr("rotation").split(" ").shift()) + " " + centerX + " " + centerY}, 5000);
}

Just a quick observation:
Looks like "Rotation" isn't part of the Atrr anymore since ver 2, so you can't use it in "animate", but you can replace that with "transform: "r" + (some degree)"..
eg:
element.animate( {transform: "r" + (-90)}, 2000, 'bounce');