I am trying to spin a circle on a canvas, i think i got most of the code but i don't know whats wrong with the code, the circle is not spinning. Do i need to create another function in order to spin the circle?
any suggestions
http://jsfiddle.net/qY85C/1/
var angle = 0;
function convertToRadians(degree) {
return degree*(Math.PI/180);
}
function incrementAngle() {
angle++;
if(angle > 360) {
angle = 0;
}
}
var myColor = ["#ECD078","#D95B43"];
var myData = [50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,50];
function getTotal(){
var myTotal = 0;
for (var j = 0; j < myData.length; j++) {
myTotal += myData[j];
}
return myTotal;
}
function drawColoredCircle() {
var lastend = 0;
var myTotal = getTotal();//160
for (var i = 0; i < myData.length; i++) {
ctxBg.fillStyle = myColor[i%2];
ctxBg.translate(canvasBg.width/2, canvasBg.width/2);
ctxBg.rotate(convertToRadians(angle));
ctxBg.translate(-canvasBg.width/2, -canvasBg.width/2);
ctxBg.beginPath();
ctxBg.moveTo(canvasBg.width/2,canvasBg.width/2);
ctxBg.arc(canvasBg.width/2,canvasBg.height/2,500,lastend,lastend+(Math.PI*2*(myData[i]/myTotal)),false);
ctxBg.lineTo(canvasBg.width/2,canvasBg.height/2);
ctxBg.fill();
lastend += Math.PI*2*(myData[i]/myTotal);
}
}
function loop(){
drawColoredCircle();
requestAnimFrame(loop);
}
You need to change the angle inside your loop
function loop(){
angle+=Math.PI/18000;
drawColoredCircle();
requestAnimFrame(loop);
}
Also, do you want to clear the canvas before drawing the circle?
function loop(){
ctxBg.clearRect(0,0,canvasBg.width,canvasBg.height);
angle+=Math.PI/18000;
drawColoredCircle();
requestAnimFrame(loop);
}
Related
I'm having trouble scale x and y co-ordinates that are being loaded in from a .txt files to my canvas size so the circles and lines I've drawn don't extend beyond the canvas, any suggestions?
let dots = [];
let dotsData;
let orderData;
function preload() {
dotsData = loadStrings('./dots.txt');
orderData = loadStrings('./orderFile.txt');
}
function setup() {
createCanvas(750, 750);
createDots(dotsData);
}
function draw() {
background(220);
fill(255, 100, 200);
for (let i = 0; i < dots.length; i++) {
circle(dots[i].x, dots[i].y, 20);
let goalDot = dots.find(e => e.id == orderData[i]);
if (goalDot) {
line(dots[i].x, dots[i].y, goalDot.x, goalDot.y);
}
}
}
function createDots(filename) {
const probData = new Array(filename.length);
for (let i = 0; i < probData.length; i++) {
dotsData[i] = splitTokens(filename[i]);
dots.push({
id: dotsData[i][0],
x: dotsData[i][1],
y: dotsData[i][2]
})
}
}
The dotsData file looks like
1 565.0 575.0
2 25.0 185.0
3 345.0 750.0
4 945.0 685.0
5 845.0 655.0
The orderData file looks like this
5
1
4
3
2
Compute the maximum coordinates of the geometry (points), after reading from file:
let max_x = 0;
let max_y = 0;
function createDots(filename) {
const probData = new Array(filename.length);
for (let i = 0; i < probData.length; i++) {
dotsData[i] = splitTokens(filename[i]);
dots.push({
id: dotsData[i][0],
x: dotsData[i][1],
y: dotsData[i][2]
})
max_x = max(max_x, dotsData[i][1]);
max_y = max(max_y, dotsData[i][2]);
}
}
Before drawing, set a scale() depending on the width and the height of the canvas:
function draw() {
background(220);
fill(255, 100, 200);
scale(width / (max_x * 1.1), height / (max_y * 1.1));
for (let i = 0; i < dots.length; i++) {
circle(dots[i].x, dots[i].y, 20);
let goalDot = dots.find(e => e.id == orderData[i]);
if (goalDot) {
line(dots[i].x, dots[i].y, goalDot.x, goalDot.y);
}
}
}
I'm cloning the tetris game. And I defined an arrow function. To define the shape movement.when I run it. it told me that shape is not defined. what did I do wrong?
I'm trying to make drop movement inside the shape function. would that be doable?
let Piece = new shapes(pieces[0][0], pieces[0][1]);
//import shapes from shapes.js
shapes = (shape, color) => {
piece = shape;
color = color;
orientation = 0; //initial the shape from position 0;
activePiece = piece[orientation];
//position of the shape
x = 3;
y = 1;
draw = () => {
for (row = 0; row < activePiece.length; row++) {
for (col = 0; col < activePiece.length; col++) {
if (activePiece[row][col] == 1) {
drawSquare(x + col, y + row, color)
}
}
}
}
moveDown = () => {
y++;
draw();
}
// let drop = () => {
// moveDown();
// requestAnimationFrame(drop);
// }
}
Piece.draw();
Piece.moveDown();
I'm trying to change image position using JavaScript using my code but for some reason it doesn't work. Can someone explain the reason.
var walk, isWaveSpawned = true;
var walkers = [];
function start()
{
walk = document.getElementById("walk");
draw(); //Animation function
}
function draw()
{
if(isWaveSpawned) //Generate a wave of 5 "walkers"
{
isWaveSpawned = false;
for(var i = 0; i < 5; i++
walkers.push(new createWalker());
}
for(var o = 0; o < walkers.length; o++) //Add 1px to x position after each frame
{
walkers[o].x += walkers[o].speed;
walkers[o].image.style.left = walkers[o].x;
walkers[o].image.style.top = walkers[o].y;
}
requestAnimationFrame(draw);
}
function createWalker()
{
this.x = 0;
this.y = 100;
this.speed = 1;
this.image = walk.cloneNode(false); //Possible cause of issue
}
<!DOCTYPE html>
<html>
<body onload="start()">
<img id="walk" src="https://i.imgur.com/ArYIIjU.gif">
</body>
</html>
My GIF image is visible in top left corner but doesn't move.
P.S. Added a HTML/JS snippet but it outputs some errors while in my end these errors are not seen.
First let's modify the way you're cloning the gif - get rid of this line:
this.image = walk.cloneNode(false);
and insert this:
this.image = document.createElement("img");
This will create a fresh empty HTML image element.
Now assign it's .src property the source of your gif:
this.image.src=document.getElementById("walk").src;
and set the CSS position property to absolute:
this.image.style="position:absolute;";
finally add this new image element to the body using:
document.body.appendChild(this.image);
If you hit run you will still not see any movement because there's still a little fix to do!
Find this line:
walkers[o].image.style.left = walkers[o].x;
and change it to this:
walkers[o].image.style.left = walkers[o].x + "px";
var walk, isWaveSpawned = true;
var walkers = [];
function start() {
walk = document.getElementById("walk");
draw(); //Animation function
}
function draw() {
if (isWaveSpawned) //Generate a wave of 5 "walkers"
{
isWaveSpawned = false;
for (var i = 0; i < 5; i++)
walkers.push(new createWalker());
}
for (var o = 0; o < walkers.length; o++) //Add 1px to x position after each frame
{
walkers[o].x += walkers[o].speed;
walkers[o].image.style.left = walkers[o].x + "px";
walkers[o].image.style.top = walkers[o].y + "px";
}
requestAnimationFrame(draw);
}
function createWalker() {
this.x = 0;
this.y = 100;
this.speed = 1;
this.image = document.createElement("img");
this.image.src = document.getElementById("walk").src;
this.image.style = "position:absolute;";
document.body.appendChild(this.image);
}
start();
<body>
<img id="walk" src="https://i.imgur.com/ArYIIjU.gif">
</body>
In p5.js I'm trying to create an animation where the bottom point of the lines smoothly (5px per frame) move to the bottom left corner of the canvas when the mouse is pressed. I can get them to the point they need to get to with lines.align but they instantly move there instead of animating.
let lines = []
function setup() {
createCanvas(600, 400);
for(let i = 0; i < 150; i++) {
lines[i] = new Line(random(600), 0, random(600), 400, random(149,212), random(89, 146), 1);
}
}
function draw() {
background(32, 44, 57);
for(let i = 0; i < lines.length; i++){
lines[i].show();
}
}
function mousePressed() {
for(let i = 0; i < lines.length; i++){
lines[i].align();
}
}
class Line {
constructor(xStart, yStart, xFinish, yFinish, g, b, w) {
this.xStart = xStart;
this.yStart = yStart;
this.xFinish = xFinish;
this.yFinish = yFinish;
this.g = g;
this.b = b;
this.w = w;
}
show() {
stroke(242, this.g, this.b);
strokeWeight(this.w);
line(this.xStart, this.yStart, this.xFinish, this.yFinish);
}
align() {
while (this.xFinish > 0) {
this.xFinish = this.xFinish - 5;
}
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.js"></script>
You're using a blocking while loop which is why visually you see a jump from the lines' start to end positions.
One option is to use a condition and increment the value in draw():
let lines = []
function setup() {
createCanvas(600, 400);
for(let i = 0; i < 150; i++) {
lines[i] = new Line(random(600), 0, random(600), 400, random(149,212), random(89, 146), 1);
}
}
function draw() {
background(32, 44, 57);
for(let i = 0; i < lines.length; i++){
lines[i].align();
lines[i].show();
}
}
class Line {
constructor(xStart, yStart, xFinish, yFinish, g, b, w) {
this.xStart = xStart;
this.yStart = yStart;
this.xFinish = xFinish;
this.yFinish = yFinish;
this.g = g;
this.b = b;
this.w = w;
}
show() {
stroke(242, this.g, this.b);
strokeWeight(this.w);
line(this.xStart, this.yStart, this.xFinish, this.yFinish);
}
align() {
if (this.xFinish > 0) {
this.xFinish = this.xFinish - 5;
}
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.min.js"></script>
You might want to also check out lerp() to interpolation between start and end positions.
Additionally, if you need more control over timing/easing/etc you can use something like TweenLite to do the interpolation for you.
(It is a good exercise though to get a hang of incrementing values/interpolating/tweening manually first through)
I need to move an image vertically by user input however, when I press the defined key nothing happens. I don't know if the command I am using to draw a new image going vertically is wrong or my function is?
Script.js
var map = document.getElementById("map");
var ctx = map.getContext("2d");
var baseImage = new Image();
baseImage.src = "assets/base.png";
baseImage.addEventListener("load", drawImage);
var speedyImage = new Image();
speedyImage.src = "assets/speedy.png";
speedyImage.addEventListener("load", drawImage);
var bubbleImage = new Image();
bubbleImage.src = "assets/bubble.png";
bubbleImage.addEventListener("load", drawImage);
document.addEventListener('keydown', function(event){ handleKeyPress(event);});
var dt = 1000/30.0;
function intersectRect(r1, r2) { // detects collision
return !(r2.left > r1.right ||
r2.right < r1.left ||
r2.top > r1.bottom ||
r2.bottom < r1.top);
}
function drawImage(){
setInterval(update, 1000/30.0);
}
var x = 0;
var y = 0;
var speed = 0.05;
var direction = 1;
document.getElementById("score").innerHTML = 0;
function update(){
ctx.clearRect(0, 0, map.width, map.height);
for(var i = 0; i < 1; i++){
ctx.drawImage(bubbleImage,x, map.height - baseImage.height - 50);
function handleKeyPress(event){
if(event.keyCode == 32){ // if space
// trouble here... would I just use the draw image function again?
}
}
}
for(var i = 0; i < 3; i++){
ctx.drawImage(speedyImage,x,0);
ctx.drawImage(speedyImage,x,70);
ctx.drawImage(speedyImage,x,150);
if(intersectRect(bubbleImage,speedyImage) == false)
score+= score+100;
}
ctx.drawImage(baseImage, x, map.height - baseImage.height );
y += speed*direction*dt;
x += speed * direction * dt;
if (x > map.width - baseImage.width || x < 0)
direction = -direction;
}
You have not declared handlekeyPress(event) function.
for(var i = 0; i < 1; i++){
ctx.drawImage(bubbleImage,x, map.height - baseImage.height - 50);
function handleKeyPress(event){
if(event.keyCode == 32){ // if space
// trouble here... would I just use the draw image function again?
}
}
}
As it is shown you are specifying function code inside another function .So this function cannot be called outside the function.