We Keep Coding

How can I make my FBX model rotate using animate function?

I want to make my FBX model rotate continuously using three.js.
So I tried
make my object into variable
call my object in animate function to rotate. (girl1)
but I got an error:
Cannot read property 'rotation' of undefined.
My code is like this:
function init() {
...
// zombie girl
let loader_girl = new FBXLoader();
loader_girl.load("ZombiePunching.fbx", (object) => {
// animation mixer
mixer = new THREE.AnimationMixer(object);
const action = mixer.clipAction(object.animations[0]);
action.play();
// make materials opaque
object.traverse((child) => {
if (child.isMesh) {
child.material.transparent = false;
}
});
object.scale.set(0.05, 0.05, 0.05);
object.rotation.x = Math.PI;
scene.add(object);
girl1 = object;
});
...
let loader = new THREE.TextureLoader();
loader.load("smoke.png", function (texture) {
let cloudGeo = new THREE.PlaneBufferGeometry(500, 500);
let cloudMaterial = new THREE.MeshLambertMaterial({
map: texture,
transparent: true,
});
for (let p = 0; p < 25; p++) {
let cloud = new THREE.Mesh(cloudGeo, cloudMaterial);
cloud.position.set(
Math.random() * 800 - 400,
500,
Math.random() * 500 - 450
);
cloud.rotation.x = 1.16;
cloud.rotation.y = -0.12;
cloud.rotation.z = Math.random() * 360;
cloud.material.opacity = 0.6;
cloudParticles.push(cloud);
scene.add(cloud);
}
});
}
function animate() {
cloudParticles.forEach((p) => {
p.rotation.z -= 0.002;
});
rainGeo.vertices.forEach((p) => {
p.velocity -= 0.1 + Math.random() * 0.1;
p.y += p.velocity;
if (p.y < -200) {
p.y = 200;
p.velocity = 0;
}
});
rainGeo.verticesNeedUpdate = true;
rain.rotation.y += 0.002;
girl1.rotation.y += 0.001;
if (Math.random() > 0.93 || flash.power > 100) {
if (flash.power < 100)
flash.position.set(Math.random() * 400, 300 + Math.random() * 200, 100);
flash.power = 50 + Math.random() * 500;
}
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
init();
animate();

Instead of doing this:
girl1.rotation.y += 0.001;
try it with:
if ( girl1 ) girl1.rotation.y += 0.001;
Since you start the animation loop before the FBX is actually loaded, girl1 will be undefined for a certain amount of time.

Two scenes with three js: CubeGeometry and PointsGeometry - only one appears

The code below is supposed to generate a cube and some dots (belonging to a torus). I can see the cube only. I have searched the dots for a couple of hours, but nothing.
// just a cube
cube = new THREE.Mesh(
new THREE.CubeGeometry(50, 50, 50),
new THREE.MeshNormalMaterial({ wireframe: true }));
// a mesh of the torus
function TorusMesh(R, r, nx, ny) {
var vertices = new Array(nx);
var normals = new Array(nx);
for (var i = 0; i < nx; i++) {
vertices[i] = new Array(ny);
normals[i] = new Array(ny);
var u = i / nx * 2 * Math.PI;
var cos_u = Math.cos(u);
var sin_u = Math.sin(u);
var cx = R * cos_u;
var cy = R * sin_u;
for (var j = 0; j < ny; j++) {
var v = j / ny * 2 * Math.PI;
var rcos_v = r * Math.cos(v);
var rsin_v = r * Math.sin(v);
vertices[i][j] = new THREE.Vector3(
cx + rcos_v * cos_u,
cy + rcos_v * sin_u,
rsin_v
);
normals[i][j] = new THREE.Vector3(
rcos_v * cos_u,
rcos_v * sin_u,
rsin_v
);
}
}
var faces = Array(4);
faces[0] = Array(2 * nx * ny);
faces[1] = Array(2 * nx * ny);
for (var i = 0; i < nx; i++) {
var ip1 = (i == nx - 1 ? 0 : i + 1);
for (var j = 0; j < ny; j++) {
var jp1 = (j == ny - 1 ? 0 : j + 1);
faces[0] = [
ip1 * ny + j,
i * ny + j,
i * ny + jp1,
[normals[ip1][j], normals[i][j], normals[i][jp1]]
];
faces[1] = [
ip1 * ny + j,
i * ny + jp1,
ip1 * ny + jp1,
[normals[ip1][j], normals[i][jp1], normals[ip1][jp1]]
];
var Pair = [faces[0], faces[1]];
}
}
return {
vertices: vertices,
normals: normals
//faces: TODO
}
}
// the vertices as a cloud of dots
var dotGeometry = new THREE.Geometry();
var vertices = TorusMesh(10, 3, 16, 8).vertices;
for (var j = 0; j < 8; j++) {
for (var i = 0; i < 15; i++) {
dotGeometry[j * 15 + i] = vertices[i][j]
}
}
var dotMaterial =
new THREE.PointsMaterial({
size: 5,
sizeAttenuation: false,
color: 0x000000
});
cloud = new THREE.Points(dotGeometry, dotMaterial);
console.log(cloud);
// three js scene
var aspect = window.innerWidth / window.innerHeight;
var camera = new THREE.PerspectiveCamera(150, aspect, 1, 10000);
var scene = new THREE.Scene();
camera.position.set(0, 0, 20);
scene.add(camera);
// dat.gui controls -------------------------------------------------
var dgcontrols = new function () {
this.rotationSpeed = 0.001;
this.zoom = 20;
}
var gui = new dat.GUI({ autoplace: false, width: 350 });
gui.add(dgcontrols, 'rotationSpeed').min(0).max(0.005).name("Rotation speed");
var controller_zoom = gui.add(dgcontrols, 'zoom').min(1).max(3000);
controller_zoom.onFinishChange(function (value) {
camera.position.z = value;
});
// the render() function
var renderer = new THREE.WebGLRenderer();
function render() {
renderer.render(scene, camera);
object.rotation.x += dgcontrols.rotationSpeed;
object.rotation.y += dgcontrols.rotationSpeed;
requestAnimFrame(render);
}
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
window.requestAnimFrame = (function () {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function (callback) {
window.setTimeout(callback, 1000 / 60);
};
})();
// add objects to the scene
var object = new THREE.Object3D();
scene.add(cloud);
scene.add(cube);
render()
requestAnimFrame(render);
canvas {
width: 100%;
height: 100%
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://threejs.org/build/three.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.3/dat.gui.js"></script>

The problem was that you have assigned vertices directly to the geometry object instead of dotGeometry.vertices. If you then change the color of the points to white, you should see the points correctly rendered.
Here is a fiddle with your updated code: https://jsfiddle.net/f2Lommf5/15833/
// just a cube
cube = new THREE.Mesh(
new THREE.CubeGeometry(50, 50, 50),
new THREE.MeshNormalMaterial({ wireframe: true }));
// a mesh of the torus
function TorusMesh(R, r, nx, ny) {
var vertices = new Array(nx);
var normals = new Array(nx);
for (var i = 0; i < nx; i++) {
vertices[i] = new Array(ny);
normals[i] = new Array(ny);
var u = i / nx * 2 * Math.PI;
var cos_u = Math.cos(u);
var sin_u = Math.sin(u);
var cx = R * cos_u;
var cy = R * sin_u;
for (var j = 0; j < ny; j++) {
var v = j / ny * 2 * Math.PI;
var rcos_v = r * Math.cos(v);
var rsin_v = r * Math.sin(v);
vertices[i][j] = new THREE.Vector3(
cx + rcos_v * cos_u,
cy + rcos_v * sin_u,
rsin_v
);
normals[i][j] = new THREE.Vector3(
rcos_v * cos_u,
rcos_v * sin_u,
rsin_v
);
}
}
var faces = Array(4);
faces[0] = Array(2 * nx * ny);
faces[1] = Array(2 * nx * ny);
for (var i = 0; i < nx; i++) {
var ip1 = (i == nx - 1 ? 0 : i + 1);
for (var j = 0; j < ny; j++) {
var jp1 = (j == ny - 1 ? 0 : j + 1);
faces[0] = [
ip1 * ny + j,
i * ny + j,
i * ny + jp1,
[normals[ip1][j], normals[i][j], normals[i][jp1]]
];
faces[1] = [
ip1 * ny + j,
i * ny + jp1,
ip1 * ny + jp1,
[normals[ip1][j], normals[i][jp1], normals[ip1][jp1]]
];
var Pair = [faces[0], faces[1]];
}
}
return {
vertices: vertices,
normals: normals
//faces: TODO
}
}
// the vertices as a cloud of dots
var dotGeometry = new THREE.Geometry();
var vertices = TorusMesh(10, 3, 16, 8).vertices;
for (var j = 0; j < 8; j++) {
for (var i = 0; i < 15; i++) {
dotGeometry.vertices[j * 15 + i] = vertices[i][j]
}
}
var dotMaterial =
new THREE.PointsMaterial({
size: 5,
sizeAttenuation: false,
color: 0xffffff
});
cloud = new THREE.Points(dotGeometry, dotMaterial);
// three js scene
var aspect = window.innerWidth / window.innerHeight;
var camera = new THREE.PerspectiveCamera(150, aspect, 1, 10000);
var scene = new THREE.Scene();
camera.position.set(0, 0, 20);
scene.add(camera);
// dat.gui controls -------------------------------------------------
var dgcontrols = new function () {
this.rotationSpeed = 0.001;
this.zoom = 20;
}
var gui = new dat.GUI({ autoplace: false, width: 350 });
gui.add(dgcontrols, 'rotationSpeed').min(0).max(0.005).name("Rotation speed");
var controller_zoom = gui.add(dgcontrols, 'zoom').min(1).max(3000);
controller_zoom.onFinishChange(function (value) {
camera.position.z = value;
});
// the render() function
var renderer = new THREE.WebGLRenderer();
function render() {
renderer.render(scene, camera);
object.rotation.x += dgcontrols.rotationSpeed;
object.rotation.y += dgcontrols.rotationSpeed;
requestAnimFrame(render);
}
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
window.requestAnimFrame = (function () {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function (callback) {
window.setTimeout(callback, 1000 / 60);
};
})();
// add objects to the scene
var object = new THREE.Object3D();
scene.add(cloud);
scene.add(cube);
render()
requestAnimFrame(render);
canvas {
width: 100%;
height: 100%
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://threejs.org/build/three.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.3/dat.gui.js"></script>

Setting bounds on particle movement

I am creating particles and positioning them randomly with three.js:
for( var i = 0; i < particleCount; i++ ){
var pX = Math.random() * 100-50;
var pY =Math.random() * 100-50;
var pZ = Math.random() * 100-50;
particle = new THREE.Vector3(pX,pY,pZ);
particle.velocity = new THREE.Vector3(Math.random(), Math.random(), pZ);
particles.vertices.push(particle);
}
Then on my requestAnimationFrame update function I am moving the particles:
for (var i = 0; i < particleCount; i++) {
var particle = particles.vertices[i];
particle.y += particle.velocity.y*speed;
particle.x += particle.velocity.x*speed;
}
How can I introduce some limits to the movement ? i.e when the particle reaches the edge of the screen I want to "bounce" them back.

It's better to have direction and velocity for each particle. Direction is always a normalized THREE.Vector3().
Then the code for your particles will be like this:
var particles = [];
var particleCount = 100;
var sizeX = 300;
var sizeY = 200;
var sizeZ = 100;
for (var i = 0; i < particleCount; i++) {
var pX = Math.random() * sizeX - sizeX / 2;
var pY = Math.random() * sizeY - sizeY / 2;
var pZ = Math.random() * sizeZ - sizeZ / 2;
particle = new THREE.Vector3(pX, pY, pZ);
particle.direction = new THREE.Vector3(Math.random() - .5, Math.random() - .5, 0).normalize(); // a normalized vector with random values for x,y
particle.velocity = Math.random() * 50; // speed is 50 units per second
particles.push(particle);
}
Supposing, you use THREE.Points():
var geometry = new THREE.Geometry();
geometry.vertices = particles;
var points = new THREE.Points(geometry, new THREE.PointsMaterial({
size: 5,
color: "red"
}));
scene.add(points);
To set the proper speed (our 50 units per second) we'll need THREE.Clock() and its .getDelta() method:
var clock = new THREE.Clock();
var shift = new THREE.Vector3(); //we will re-use it in the animation loop
var delta = 0; // we will re-use it in the animation loop
And in the animation loop we will do this:
delta = clock.getDelta(); // get period between frames (in seconds)
particles.forEach(function(p) {
if (p.x > sizeX / 2 || p.x < -sizeX / 2) { // it's also can be like if (Math.abs(p.x > sizeX / 2))
p.direction.x = -p.direction.x;
}
if (p.y > sizeY / 2 || p.y < -sizeY / 2) {
p.direction.y = -p.direction.y;
}
if (p.z > sizeZ / 2 || p.z < -sizeZ / 2) {
p.direction.z = -p.direction.z;
}
p.add(shift.copy(p.direction).multiplyScalar(p.velocity * delta)); // here we re-use the `shift` vector
})
points.geometry.verticesNeedUpdate = true; // important, if you won't set it to true you won't get your particles moving
So that's it.
jsfiddle example
PS If you want to use BufferGeometry, then you can refer to this very good SO answer

three.js n-body simulation

I am trying to do like this http://mbostock.github.io/protovis/ex/nbody.html and same project. But my system doesn't work. Can you help me This is my http://mendow.github.io/projects/n-body/index.html
I gues i am doing wrong in place calculating attration each part to each
Problem is particles has one mass center and spin around it instead has mass center which change it position
<!DOCTYPE html>
<html>
<head>
<title>n-body</title>
<script src="http://mendow.github.io/projects/n-body/libs/three.js"></script>
<script src="http://mendow.github.io/projects/n-body/libs/OrbitControls.js"></script>
<script src="http://mendow.github.io/projects/n-body/libs/OBJLoader.js"></script>
<style>
body {
margin: 0;
overflow: hidden;
}
</style>
</head>
<script>
//define global variable
{
var renderer;
var scene;
var camera;
var orbit;
var ps;
var G = 9.81;
var dt = 0.0001;
var count = 1000;
var cam = 30;
}
function init() {
{
// create a scene, that will hold all our elements such as objects, cameras and lights.
scene = new THREE.Scene();
// create a camera, which defines where we're looking at.
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
// create a render, sets the background color and the size
renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0x000000, 1.0);
renderer.setSize(window.innerWidth, window.innerHeight);
// position and point the camera to the center of the scene
camera.position.x = cam;
camera.position.y = cam;
camera.position.z = cam;
camera.lookAt(scene.position);
orbit = new THREE.OrbitControls(camera);
}
setupParticleSystem(count);
// add the output of the renderer to the html element
document.body.appendChild(renderer.domElement);
// call the render function
render();
}
function setupParticleSystem(y) {
var geometry = new THREE.Geometry();
for (var j = 0; j < y; j++) {
var v = new THREE.Vector3();
var ran = 30;
v.x = intRand(ran, -ran);
v.y = intRand(ran, -ran);
v.z = intRand(ran, -ran);
v.vel = new THREE.Vector3(intRand(1, -1), intRand(1, -1), intRand(1, -1));
v.acc =new THREE.Vector3(intRand(1, -1), intRand(1, -1), intRand(1, -1));
v.mass = intRand(5, 0);
geometry.vertices.push(v);
}
console.log(geometry.vertices);
// use a material for some styling
var psMat = new THREE.PointCloudMaterial();
psMat.color = new THREE.Color(0x55ff55);
psMat.transparent = true;
psMat.size = 1;
psMat.blending = THREE.AdditiveBlending;
// Create a new particle system based on the provided geometry
ps = new THREE.PointCloud(geometry, psMat);
ps.sizeAttenuation = true;
ps.sortParticles = true;
ps.position.y = 100 / cam;
ps.position.x = 100 / cam;
ps.position.z = 100 / cam;
// add the particle system to the scene
scene.add(ps);
}
var step = 0;
function render() {
renderer.render(scene, camera);
requestAnimationFrame(render);
var r,
mult;
var geometry = ps.geometry;
var temp = ps.geometry;
for (var i = 0; i < geometry.vertices.length; i++) {
for (var j = 0; j < geometry.vertices.length; j++) {
if (i != j) {
var particle = geometry.vertices[i];
var cntr = geometry.vertices[j];
r = particle.length(cntr);
mult = (-1) * G * (cntr.mass * particle.mass) / Math.pow(r, 3);
particle.acc.x = mult * particle.x;
particle.vel.x += particle.acc.x * dt;
particle.x += particle.vel.x * dt;
particle.acc.y = mult * particle.y;
particle.vel.y += particle.acc.y * dt;
particle.y += particle.vel.y * dt;
particle.acc.z = mult * particle.z;
particle.vel.z += particle.acc.z * dt;
particle.z += particle.vel.z * dt;
}
}
}
geometry.verticesNeedUpdate = true;
geometry.colorsNeedUpdate = true;
orbit.update();
}
// calls the init function when the window is done loading.
window.onload = init;
function mrand() {
return Math.random();
}
function intRand(min, max) {
return Math.random() * (max - min) + min;
}
</script>
<body>
</body>
</html>

When you examine your browser javascript console (F12) you will see this error :
Uncaught SecurityError: Failed to execute 'texImage2D' on 'WebGLRenderingContext': The cross-origin image at http://mendow.github.io/projects/n-body/assets/textures/ps_smoke.png may not be loaded.
One solution (see alternative solution below) is to simply put your asset files on same host as your HTML. That is local to your host computer. Here are the steps (linux cmds, amend for windows) :
cd into same dir as your html
mkdir -p assets/textures # create dir to park your ps_smoke.png
cd assets/textures # get into this new dir
# copy that remote file to your local dir
wget http://mendow.github.io/projects/n-body/assets/textures/ps_smoke.png
and then finally update your html
comment out :
psMat.map = THREE.ImageUtils.loadTexture("http://mendow.github.io/projects/n-body/assets/textures/ps_smoke.png");
good new location :
psMat.map = THREE.ImageUtils.loadTexture("assets/textures/ps_smoke.png");
Once I did this your code executes just fine.
Alternative to above solution is to just override this security check by adding following code just prior to the loadTexture call you are making :
THREE.ImageUtils.crossOrigin = '';

Matvey, you need to calculate the changes to all particle locations and velocities with the old values before adding them to get new values. Otherwise you're calculating some of the changes based on altered positions and velocities which is inaccurate.
I've edited your render loop:
<!DOCTYPE html>
<html>
<head>
<title>n-body</title>
<script src="http://mendow.github.io/projects/n-body/libs/three.js"></script>
<script src="http://mendow.github.io/projects/n-body/libs/OrbitControls.js"></script>
<script src="http://mendow.github.io/projects/n-body/libs/OBJLoader.js"></script>
<style>
body {
margin: 0;
overflow: hidden;
}
</style>
</head>
<script>
//define global variable
{
var renderer;
var scene;
var camera;
var orbit;
var ps;
var G = 9.81;
var dt = 0.0001;
var count = 1000;
var cam = 30;
}
function init() {
{
// create a scene, that will hold all our elements such as objects, cameras and lights.
scene = new THREE.Scene();
// create a camera, which defines where we're looking at.
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
// create a render, sets the background color and the size
renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0x000000, 1.0);
renderer.setSize(window.innerWidth, window.innerHeight);
// position and point the camera to the center of the scene
camera.position.x = cam;
camera.position.y = cam;
camera.position.z = cam;
camera.lookAt(scene.position);
orbit = new THREE.OrbitControls(camera);
}
setupParticleSystem(count);
// add the output of the renderer to the html element
document.body.appendChild(renderer.domElement);
// call the render function
render();
}
function setupParticleSystem(y) {
var geometry = new THREE.Geometry();
for (var j = 0; j < y; j++) {
var v = new THREE.Vector3();
var ran = 30;
v.x = intRand(ran, -ran);
v.y = intRand(ran, -ran);
v.z = intRand(ran, -ran);
v.vel = new THREE.Vector3(intRand(1, -1), intRand(1, -1), intRand(1, -1));
v.acc =new THREE.Vector3(intRand(1, -1), intRand(1, -1), intRand(1, -1));
v.mass = intRand(5, 0);
geometry.vertices.push(v);
}
console.log(geometry.vertices);
// use a material for some styling
var psMat = new THREE.PointCloudMaterial();
psMat.color = new THREE.Color(0x55ff55);
psMat.transparent = true;
psMat.size = 1;
psMat.blending = THREE.AdditiveBlending;
// Create a new particle system based on the provided geometry
ps = new THREE.PointCloud(geometry, psMat);
ps.sizeAttenuation = true;
ps.sortParticles = true;
ps.position.y = 100 / cam;
ps.position.x = 100 / cam;
ps.position.z = 100 / cam;
// add the particle system to the scene
scene.add(ps);
}
var step = 0;
function render() {
renderer.render(scene, camera);
requestAnimationFrame(render);
var r, mult;
var geometry = ps.geometry;
var temp = ps.geometry;
var dx = [];
var dv = [];
for (var i = 0; i < geometry.vertices.length; i++) {
var v = geometry.vertices[i].vel;
dx.push( new THREE.Vector3( v.x * dt, v.y * dt, v.z * dt ) );
var dvx = 0;
var dvy = 0;
var dvz = 0;
for (var j = 0; j < geometry.vertices.length; j++) {
if (i != j) {
mult = (-1) * G * geometry.vertices[i].mass * geometry.vertices[j].mass;
var vi = geometry.vertices[i];
var vj = geometry.vertices[j];
// http://www.scholarpedia.org/article/N-body_simulations_%28gravitational%29
epsilon = .1;
var r = Math.sqrt( ( vi.x - vj.x ) * ( vi.x - vj.x )
+ ( vi.y - vj.y ) * ( vi.y - vj.y )
+ ( vi.z - vj.z ) * ( vi.z - vj.z ) + epsilon )
dvx += mult * ( vi.x - vj.x ) / Math.pow( r, 3 );
dvy += mult * ( vi.y - vj.y ) / Math.pow( r, 3 );
dvz += mult * ( vi.z - vj.z ) / Math.pow( r, 3 );
}
}
dv.push( new THREE.Vector3( dvx * dt, dvy * dt, dvz * dt ) );
}
for ( var i=0 ; i < geometry.vertices.length ; i++ ) {
geometry.vertices[i].add( dx[i] );
geometry.vertices[i].vel.add( dv[i] );
}
geometry.verticesNeedUpdate = true;
geometry.colorsNeedUpdate = true;
orbit.update();
}
// calls the init function when the window is done loading.
window.onload = init;
function mrand() {
return Math.random();
}
function intRand(min, max) {
return Math.random() * (max - min) + min;
}
</script>
<body>
</body>
</html>
The modification to the denominator of the forces helps to keep energy relatively constant during close encounters of particles as per http://www.scholarpedia.org/article/N-body_simulations_(gravitational)

Looping an Image

i am having trouble on how i should loop an image of mine like 50 times, but appear on different times.
This is my Code:
//Uploading car
var car1 = new Image();
car1.src = "http://images.clipartpanda.com/car-top-view-clipart-red-racing-car-top-view-fe3a.png";
//Setting properties of car
var x1 = 450;
var y1 = 50;
var speed1 = 10;
var angle1 = -990;
var mod1 = 0.2;
//Interval for animation
var moveInterval = setInterval(function () {
drawCar();
}, 30);
//Drawing the car turning and changing speed
function drawCar() {
x1 += (speed1 * mod1) * Math.cos(Math.PI / 180 * angle1);
y1 += (speed1 * mod1) * Math.sin(Math.PI / 180 * angle1);
context.save();
context.translate(x1, y1);
context.rotate(Math.PI / 180 * angle1);
context.drawImage(car1, -(car1.width / 2), -(car1.height / 2));
context.restore();
draw_multiple();
}
function draw_multiple() {
var i;
var obstacles = []; // How to put array so this code will work with array?
for(i = 0; i < 10 ; i++) {
drawCar ((i*70)+100,100, 30);
}
}
In this code is where i have drawn my image but the last function is the for loop function. Thanks in advance

Something like this
function draw_multiple()
{
var obstacles = {
"item1": (5x3) + 2, // obstacles[0] returns 17
"item2": (2/2) * 5, // obstacles[1] returns 5
"anotherItem": "This is a string" // obstacles[2] returns "This is a string"
};
for(var i=0; i<10 ; i++) {
drawCar ((i*70)+100,100, 30);
}
for(var i=0; i<obstacles.length ; i++) {
drawObstacles( obstacles[i] );
}
}
You need to create the function drawObstacles().