3D Particles Ball - actionscript-3

If I'd like to make a circle with particles, I'd define random coordinates for particles like this:
for(var i:int = 0; i != 100; i++)
{
var angle:Number = Math.random() * 360;
var r:Number = 600;
var nX:Number = r * Math.cos(angle / 180 * Math.PI);
var nY:Number = r * Math.sin(angle / 180 * Math.PI);
}
But I want to make a ball with particles on 3d space but I don't know how to define random coordinates for particles. Radius is fixed again but there should be a "nZ" value. Can you help me to define these coordinates?
for(var i:int = 0; i != 100; i++)
{
var angle:Number = Math.random() * 360;
var r:Number = 600;
var nX:Number = ???
var nY:Number = ???
var nZ:Number = ???
}
Thanks in advance...

Spherical coordinates are what you want.
You need two angles:
for(var i:int = 0; i != 100; i++)
{
var azimuthAngle:Number = Math.random() * 360;
var elevationAngle:Number = (Math.random() * 180) - 90;
var r:Number = 600;
var nX:Number =
r * Math.cos(azimuthAngle / 180 * Math.PI) * Math.sin(elevationAngle / 180 * Math.PI);
var nY:Number =
r * Math.sin(azimuthAngle / 180 * Math.PI) * Math.sin(elevationAngle / 180 * Math.PI);
var nZ:Number =
r * Math.cos(elevationAngle / 180 * Math.PI);
}

Related

Canvas stops drawing shapes after image clipping

I am working on the canvas showing levels according to users below is my code the issue is after clip the image on the first level the next drawing and animations stops working.
The canvas holds a json array which is used to draw the levels Class levels
holds the method to deay static shapes and functions starting with animate uses animation frames to animate line or circles.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Canvas</title>
</head>
<body>
<canvas id="levelchart" data-levels="[{"text":"Mark","dotcolor":"#28912e","linecolor":"#28912e","current":"0","completed":"1","image":"http:\/\/nessgoods.com\/timthumb.php?src=http:\/\/www.nessgoods.com\/upload\/users\/3\/pills_311869.jpg&q=100"},{"text":5,"dotcolor":"#28912e","linecolor":"#28912e","current":"0","pending":"0","completed":"1"},{"text":25,"dotcolor":"#28912e","linecolor":"#28912e","current":"0","pending":"0","completed":"1"},{"text":125,"dotcolor":"#28912e","linecolor":"#28912e","current":"0","pending":"0","completed":"1"},{"text":625,"dotcolor":"#28912e","linecolor":"#28912e","current":"0","pending":"0","completed":"1"},{"text":3125,"dotcolor":"#28912e","linecolor":"#28912e","current":"0","pending":"0","completed":"1"},{"text":15625,"dotcolor":"#3498db","linecolor":"#3498db","current":"1","completed":"1","pending":"3125"},{"text":78125,"dotcolor":"#3498db","linecolor":"#3498db","current":0,"pending":"0","completed":0},{"text":390625,"dotcolor":"#3498db","linecolor":"#3498db","current":0,"pending":"0","completed":0}]" width="1360" height="380"></canvas>
</body>
JS:
<script
src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
<script type="text/javascript">
class levels{
constructor(){
var x = 0;
var y = 0;
var height = 0;
var width = 0;
var canvas = 0;
var fill = 0;
var start = 0;
var end = 0;
var lineWidth = 0;
var color = 0;
var gradient = 0;
var lineCap = "square";
var to = 0;
var data = 0;
var counter = 0;
var circleanimate = 0;
var percent=0;
var completed = 0;
var imagee = "";
}
config(){
}
line(){
// console.log(this.end);
this.canvas.beginPath();
this.canvas.moveTo(this.start, this.y);
this.canvas.lineTo(this.end, this.y);
this.canvas.lineWidth = this.lineWidth;
this.canvas.strokeStyle = this.color;
this.canvas.lineCap = this.lineCap
this.canvas.stroke();
};
circle(){
this.canvas.beginPath();
this.canvas.moveTo(this.end, this.y);
this.canvas.arc(this.end, this.y, this.radius, 0, 2 * Math.PI);
this.canvas.fillStyle = this.color;
this.canvas.fill();
this.canvas.closePath();
}
baloon(){
var bheight = (10 - lv.counter + lv.counter * 8 / 100 * canvas.height);
var totheight = canvas.height - (60 + bheight);
var height = totheight + 80 / 100 * bheight;
this.canvas.beginPath();
//console.log("check "+bheight+" "+totheight+" "+height);
var last = (lv.end-30) + (15 / 100 * bheight);
var y = lv.y-50;
this.canvas.moveTo(last + (12 / 100 * bheight), height - (13 / 100 * bheight));
this.canvas.bezierCurveTo(last - (16 / 100 * bheight), y, last - (16 / 100 * bheight), y, last - (16 / 100 * bheight), y);
this.canvas.bezierCurveTo(last - (36 / 100 * bheight), height, last - (36 / 100 * bheight), height, last - (36 / 100 * bheight), height);
this.canvas.arc(last - (18 / 100 * bheight), totheight + (38 / 100 * bheight), (last + (14 / 100 * bheight)) - (last - (28 / 100 * bheight)), 0.75 * Math.PI, 0.25 * Math.PI);
this.canvas.strokeStyle = lv.color;
this.canvas.lineWidth=3;
this.canvas.stroke();
// count++;
console.log(lv.imagee+" as");
if (this.imagee != "") {
var img = new Image();
img.src = this.imagee;
var newcanvas = this.canvas;
img.onload = function (e)
{
newcanvas.beginPath();
newcanvas.moveTo(last - (18 / 100 * bheight), totheight + (38 / 100 * bheight));
newcanvas.arc(last - (18 / 100 * bheight), totheight + (38 / 100 * bheight), (last + (14 / 100 * bheight)) - (last - (28 / 100 * bheight)) - 1, 0, 2 * Math.PI);
newcanvas.strokeStyle = "#fff";
newcanvas.stroke();
newcanvas.clip();
newcanvas.drawImage(img,last - (18 / 100 * bheight)-(1.5/100*canvas.width),totheight + (38 / 100 * bheight)-(1.5/100*canvas.width));
lv.canvas.beginPath();
// lv.image="";
}
}
}
}
function animateCircle() {
if(lv.circleanimate<2.1){
requestAnimationFrame(animateCircle);
lv.canvas.beginPath();
lv.canvas.moveTo(lv.end, lv.y);
lv.canvas.arc(lv.end, lv.y, lv.radius, (lv.circleanimate-0.1) * Math.PI, lv.circleanimate * Math.PI);
lv.canvas.fillStyle = lv.color;
lv.strokeStyle = "none";
lv.canvas.fill();
lv.canvas.closePath();
lv.circleanimate=lv.circleanimate+0.1;
}else{
lv.circleanimate=0;
if (lv.end == 0) {
lv.start = 0;
lv.end = 0;
lv.to = 30;
lv.color = lv.data[0].linecolor;
lv.style = "normal";
if(lv.data[0].hasOwnProperty("image")){
lv.imagee = lv.data[0].image;
}
} else {
lv.style = "bold";
lv.start = lv.end + 10;
var index = lv.counter-1;
if(lv.counter>=8){
index = 8;
}
console.log(index+" c ");
lv.imagee = "";
if(lv.data[index].hasOwnProperty("image")){
var w = 3/100*canvas.width;
lv.imagee = lv.data[index].image+"&w="+w+"&h="+w;
}
lv.color = lv.data[index].linecolor;
lv.percent = (Number(lv.data[index].pending) / Number(lv.data[index].text) * 100);
lv.completed = lv.data[index].completed;
lv.end = lv.start;
var p = (lv.counter * 2)+2;
lv.to = lv.to + ((p / 100) * workarea);
}
animateElipse();
animateLineFill();
}
}
function animateElipse(){
if(lv.circleanimate<2.1){
requestAnimationFrame(animateElipse);
var bheight = (10 - lv.counter + lv.counter * 8 / 100 * canvas.height);
var totheight = canvas.height - (60 + bheight);
var height = totheight + 80 / 100 * bheight;
var last = lv.end-25;
var y = lv.y-48;
lv.canvas.beginPath();
lv.canvas.moveTo(last, y);
lv.canvas.ellipse(last, y, 8, 2, 0,0, lv.circleanimate * Math.PI);
lv.canvas.fillStyle = "#e4e5e7";
lv.canvas.fill();
lv.circleanimate=lv.circleanimate+0.1;
}else{
lv.baloon();
}
}
function animateLineFill(){
if(lv.end<lv.to){
requestAnimationFrame(animateLineFill);
}else if(lv.counter<lv.count){
lv.circleanimate=0;
if (lv.end == 0) {
lv.start = 0;
lv.end = 0;
lv.to = 30;
lv.color = lv.data[0].linecolor;
lv.style = "normal";
} else {
lv.style = "bold";
lv.start = lv.end + 8;
var index = lv.counter;
if(lv.counter>=8){
index = 8;
}
lv.imagee = "";
if(lv.data[index].hasOwnProperty("image")){
var w = 3/100*canvas.width;
lv.imagee = lv.data[index].image+"&w="+w+"&h="+w;
}
lv.color = lv.data[index].linecolor;
lv.end = lv.start;
// var p = (lv.counter+1.9 * 5);
// lv.to = lv.to + ((p / 100) * workarea);
}
animateCircle();
lv.counter++;
}
lv.line();
lv.end++;
}
var lv = new levels();
var canvas = document.querySelector("canvas#levelchart");
/*canvas.width = (98 / 100) * $("div.team_link").width();
canvas.height = (28 / 100) * canvas.width;*/
canvas.width = (98 / 100) * $(window).width();
canvas.height = (28 / 100) * canvas.width;
var c = canvas.getContext('2d');
var workarea = (canvas.width);
var points = workarea / 10;
var start = canvas.width - 10;
var last = 0;
var y = canvas.height - 10;
var cheight = canvas.height;
var data = document.getElementById("levelchart").getAttribute("data-levels");
data = JSON.parse(data);
var i = 0;
var style = "normal";
lv.start = start;
lv.end = last;
lv.canvas = c;
lv.color="#000000";
lv.y = y;
lv.start = 50;
lv.end = workarea-50;
lv.lineWidth = 4;
lv.color = "#eee";
lv.lineCap = "round";
lv.line();
lv.end = 0;
lv.radius = 5;
lv.count = data.length;
lv.data = data;
lv.counter = 0;
if (lv.end == 0) {
lv.start = 0;
lv.end = 0;
lv.to = 30;
lv.color = lv.data[0].linecolor;
lv.style = "normal";
}
animateLineFill();
</script>
In image.load function we have to call .save() on canvas and after clip() we have call the .restore() function as defined in below code.
img.onload = function (e)
{
newcanvas.save();
newcanvas.beginPath();
newcanvas.moveTo(last - (18 / 100 * bheight), totheight + (38 / 100 * bheight));
newcanvas.arc(last - (18 / 100 * bheight), totheight + (38 / 100 * bheight), (last + (14 / 100 * bheight)) - (last - (28 / 100 * bheight)) - 1, 0, 2 * Math.PI);
newcanvas.strokeStyle = "#fff";
newcanvas.stroke();
newcanvas.clip();
newcanvas.drawImage(img,last - (18 / 100 * bheight)-(1.5/100*canvas.width),totheight + (38 / 100 * bheight)-(1.5/100*canvas.width));
newcanvas.restore();
// lv.image="";
}

Is there a way to rotate the object and then calculate its x and y coordinates as if it was turned around some point without measurement accuracy?

Is there a way to rotate the object with the property rotation, and then calculate its x and y coordinates as if it was turned around some point
without measurement accuracy?
public static function pointRotate (object:DisplayObject, center:Point,angle:Number) : void
{
var r:Number = angle * Math.PI / 180;
var s:Number = Math.sin(r);
var c:Number = Math.cos(r);
var dX:Number = object.x - center.x;
var dY:Number = object.y - center.y;
object.rotation += angle;
object.x = center.x + dX * c - dY * s;
object.y = center.y + dX * s + dY * c;
}
package
{
import flash.geom.Point;
import flash.display.DisplayObject;
public function pointRotate(object:DisplayObject, center:Point, angle:Number) : void
{
// return to zero
angle += object.rotation;
var a0:Number = - object.rotation * Math.PI / 180;
var s0:Number = Math.sin(a0);
var c0:Number = Math.cos(a0);
var dX0:Number = object.x - center.x;
var dY0:Number = object.y - center.y;
object.rotation = 0;
object.x = Math.round(center.x + dX0 * c0 - dY0 * s0);
object.y = Math.round(center.y + dX0 * s0 + dY0 * c0);
// new rotation
var r:Number = angle * Math.PI / 180;
var s:Number = Math.sin(r);
var c:Number = Math.cos(r);
var dX:Number = object.x - center.x;
var dY:Number = object.y - center.y;
object.rotation += angle;
object.x = center.x + dX * c - dY * s;
object.y = center.y + dX * s + dY * c;
}
}

Html5 canvas bouncing balls speed

I have spheres bouncing off each other and the canvas walls, however im struggling on the speed. How would I control the speed? so maybe connected to the beginpath function? so they kind of explode and then bounce everywhere
<script type="text/javascript">
$(function () {
var canvas = $("#target");
var context = canvas.get(0).getContext("2d");
var canvasWidth = canvas.width();
var canvasHeight = canvas.height();
$(window).resize(resizeCanvas);
function resizeCanvas() {
canvas.attr("width", $(window).get(0).innerWidth);
canvas.attr("height", $(window).get(0).innerHeight);
canvasWidth = canvas.width();
canvasHeight = canvas.height();
};
var Sphere = function (x, y, radius, mass, vX, vY) {
this.x = x;
this.y = y;
this.radius = radius;
this.mass = mass;
this.vX = vX;
this.vY = vY;
this.updatePosition = function () {
this.x += this.vX;
this.y += this.vY;
};
this.checkBoundaryCollision = function () {
if (this.x - this.radius < 0) {
this.x = this.radius;
this.vX *= -1;
} else if (this.x + this.radius > canvasWidth) {
this.x = canvasWidth - this.radius;
this.vX *= -1;
}
if (this.y - this.radius < 0) {
this.y = this.radius;
this.vY *= -1;
} else if (this.y + this.radius > canvasHeight) {
this.y = canvasHeight - this.radius;
this.vY *= -1;
}
}
}
resizeCanvas();
var spheresLength = 20;
var spheres = new Array();
function loadContent() {
for (var i = 0; i < spheresLength; i++) {
var x = 20 + (Math.random() * (canvasWidth - 40));
var y = 20 + (Math.random() * (canvasHeight - 40));
var radius = 5 + Math.random() * 10;
var mass = radius / 2;
var vX = Math.random() * 4 - 2;
var vY = Math.random() * 4 - 2;
spheres.push(new Sphere(x, y, radius, mass, vX, vY));
};
animate();
}
loadContent();
function animate() {
update();
draw();
setTimeout(animate, 33);
}
function update() {
for (var i = 0; i < spheresLength; i++) {
var sphere1 = spheres[i];
for (var j = i + 1; j < spheresLength; j++) {
var sphere2 = spheres[j];
var dX = sphere2.x - sphere1.x;
var dY = sphere2.y - sphere1.y;
var distance = Math.sqrt((dX * dX) + (dY * dY));
if (distance < sphere1.radius + sphere2.radius) {
var angle = Math.atan2(dY, dX);
var sine = Math.sin(angle);
var cosine = Math.cos(angle);
var x = 0;
var y = 0;
var xB = dX * cosine + dY * sine;
var yB = dY * cosine - dX * sine;
var vX = sphere1.vX * cosine + sphere1.vY * sine;
var vY = sphere1.vY * cosine - sphere1.vX * sine;
var vXb = sphere2.vX * cosine + sphere2.vY * sine;
var vYb = sphere2.vY * cosine - sphere2.vX * sine;
var vTotal = vX - vXb;
vX = (
(sphere1.mass - sphere2.mass) * vX + 2 * sphere2.mass * vXb
)
/ (sphere1.mass + sphere2.mass);
vXb = vTotal + vX;
xB = x + (sphere1.radius + sphere2.radius);
sphere1.x = sphere1.x + (x * cosine - y * sine);
sphere1.y = sphere1.y + (y * cosine + x * sine);
sphere2.x = sphere1.x + (xB * cosine - yB * sine);
sphere2.y = sphere1.y + (yB * cosine + xB * sine);
sphere1.vX = vX * cosine - vY * sine;
sphere1.vY = vY * cosine + vX * sine;
sphere2.vX = vXb * cosine - vYb * sine;
sphere2.vY = vYb * cosine + vXb * sine;
}
}
sphere1.updatePosition();
sphere1.checkBoundaryCollision();
}
}
function draw() {
context.clearRect(0, 0, canvasWidth, canvasHeight);
context.fillStyle = "rgb(255, 255, 255)";
for (var i = 0; i < spheresLength; i++) {
var sphere = spheres[i];
context.beginPath();
context.arc(sphere.x, sphere.y, sphere.radius, 0, Math.PI * 2);
context.closePath();
context.fill();
}
}
});
</script>
The "speed" of the balls is a function of the distance they travel per frame. This code runs about 3 frames per second, and it looks like the distance is a function of the "mass." You can increase the speed by increasing the factor that determines the distance traveled in each frame (in the update() function.)
Incidentally, I wasn't able to get this code to work. In future, try prototyping on jsFiddle.net or Codepen.io.
UPDATE:
Here's the line that controls the velocity of the balls:
vX = ((sphere1.mass - sphere2.mass) * vX + 2 * sphere2.mass * vXb)
/ (sphere1.mass + sphere2.mass);
That value, 2, is the overall velocity modifier. Small increases to that value correlate to large increases in velocity. Kick it up to 2.25 and watch them fly.

Advanced coordinate rotation

package {
import flash.display.Sprite;
import flash.geom.Point;
import flash.events.Event;
public class Game2 extends Sprite {
var balls:Array;
var radius:Number = 50;
var centerX:Number = stage.stageWidth / 2;
var centerY:Number = stage.stageHeight / 2;
var i:int = 0;
var angle:Number = 0.1;
var sin:Number = Math.sin(angle);
var cos:Number = Math.cos(angle);
public function Game2() {
init();
}
function init():void
{
balls = new Array();
for(i = 0; i < 8; i++)
{
var ball:Ball = new Ball(10, 0x00FF00);
var xposition = centerX + Math.cos(i / 8 * Math.PI * 2) * radius;
var yposition = centerY + Math.sin(i / 8 * Math.PI * 2) * radius;
ball.x = xposition;
ball.y = yposition;
addChild(ball);
balls.push(ball);
}
addEventListener(Event.ENTER_FRAME, onEnterFrame);
}
function onEnterFrame(e:Event):void
{
for(i = 0; i < balls.length; i++)
{
var ball:Ball = balls[i];
var x1:Number = ball.x - stage.stageWidth / 2;
var y1:Number = ball.y - stage.stageHeight / 2;
var x2:Number = cos * x1 - sin * y1;
var y2:Number = cos * y1 + sin * x1;
ball.x = stage.stageWidth / 2 + x2;
ball.y = stage.stageHeight / 2 + y2;
}
}
}
}
Can someone explain the work of this formula?:
var x2:Number = cos * x1 - sin * y1;
var y2:Number = cos * y1 + sin * x1;
i just can't figure it out, if we edit it like this:
var x2:Number = x1 - y1;
var y2:Number = x1 + y1;
all the balls are moving so fast and get out of screen bounds, and also why if we change it like this:
var x2:Number = cos * x1 - sin * y1;
var y2:Number = cos * y1 + sin * x1;
or
var x2:Number = cos * x1 - sin * y1;
var y2:Number = cos * y1 + sin * x1;
it will work equal, as far as i understanded is that here happens some kind of simetry, if we are on the left or right sides the velocity x == 0 and y is at the maximum velocity of its position the y slows down each time he get closer to the top or bottom, if we are on the top or bottom the velocity y == 0 and x is at maximum speed of his position then also slows down each time he gets closer to the right or left sides, i traced it, but i can't understand why we have to multiply it by cos and sin, i've traced this moments but still can't figure it out, can anyone explain this moment?
The two formulas represent a rotation matrix multiplied with a vector.

using action script how to draw a semi circle

using action script how to draw a semi circle...i need to add tha semicircle in another circle the circle looks like this
![alt text][1]
how to draw a semi circle inside that circle
Use the following function to draw the required arc.
function drawArc(centerX, centerY, radius, startAngle, arcAngle, steps){
startAngle -= .25;
var twoPI = 2 * Math.PI;
var angleStep = arcAngle/steps;
var xx = centerX + Math.cos(startAngle * twoPI) * radius;
var yy = centerY + Math.sin(startAngle * twoPI) * radius;
moveTo(xx, yy);
for(var i=1; i<=steps; i++){
var angle = startAngle + i * angleStep;
xx = centerX + Math.cos(angle * twoPI) * radius;
yy = centerY + Math.sin(angle * twoPI) * radius;
lineTo(xx, yy);
}
}
lineStyle(0, 0xFF0000);
drawArc(250, 250, 200, 45/360, -90/360, 20);
Semicircle? Well its joining the end points isn't it. Use lineto.
Thank you so much loxxy.. I have made a few alteration and got dashed line too.
function drawArc(centerX, centerY, radius, startAngle, arcAngle, steps){
centerY=centerY+radius
startAngle -= .25;
var twoPI = 2 * Math.PI;
var angleStep = arcAngle/steps;
trace(angleStep)
var xx = centerX + Math.cos(startAngle * twoPI) * radius;
var yy = centerY + Math.sin(startAngle * twoPI) * radius;
mc.graphics.moveTo(xx, yy);
for(var i=1; i<=steps; i++){
var angle = startAngle + i * angleStep;
xx = centerX + Math.cos(angle * twoPI) * radius;
yy = centerY + Math.sin(angle * twoPI) * radius;
if(i%2==0){
mc.graphics.moveTo(xx, yy);
}else{
mc.graphics.lineTo(xx, yy);
}
}
}