I have a problem. I'm using HTML5 and Javascript to draw a box onto a canvas. This box is supposed to move up and down, but after it gets rendered for the first time, it doesn't want to re-render at the new position. This is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sl" lang="sl">
<head>
<title>Spletna stran Portfolio - Domaca stran</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
<script>
var isMoving = true;
var gradienty = 0;
var gradientheight = 100;
var gradientyVel = 1;
var gradientImage = new Image();
gradientImage.src = "grafika/gradient.gif";
function main() {
var c = document.getElementById("menuCanvas");
var ctx = c.getContext("2d");
ctx.drawImage(gradientImage, 0, gradienty);
if(isMoving == true) {
gradienty += gradientyVel;
if((gradienty+gradientheight)==c,height || gradienty<=0) {
gradientyVel *= -1;
}
}
}
function mainLoop() {
setInterval(main(), 10);
}
</script>
</head>
<body onload="mainLoop()">
<canvas id="menuCanvas" width="195" height="400"></canvas>
</body>
</html>
I have no clue why the box isn't moving. It's like after I draw it for the first time it won't draw again the next time. Also, I use mainLoop() function as my main loop. Every 10 miliseconds I basically call the main() function, which does the drawing and the logic.
Any help would be much appreciated. :)
A few coding problems:
You need to give your image time to load, then start the animation
var gradientImage = new Image();
gradientImage.onload=function(){
setInterval(main, 20);
}
gradientImage.src = "house16x16.png";
setInterval takes in a function pointer (no parentheses):
setInterval will fire only as fast as 16ms, so your 10ms value is too small
setInterval(main, 20);
Here's revised code and a Demo: http://jsfiddle.net/m1erickson/U6K9j/
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
canvas{border:1px solid red;}
</style>
<script>
$(function(){
var c=document.getElementById("menuCanvas");
var ctx=c.getContext("2d");
var isMoving = true;
var gradienty = 0;
var gradientheight = 100;
var gradientyVel = 1;
var gradientImage = new Image();
gradientImage.onload=function(){
setInterval(main, 20);
}
gradientImage.src = "house16x16.png";
function main() {
ctx.clearRect(0,0,c.width,c.height);
ctx.drawImage(gradientImage, 0, gradienty);
if(isMoving == true) {
gradienty += gradientyVel;
if((gradienty+gradientheight)==c.height || gradienty<=0) {
gradientyVel *= -1;
}
}
}
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="menuCanvas" width=300 height=300></canvas>
</body>
</html>
You're calling main and then passing the RESULT to setInterval. Just change
function mainLoop() {
setInterval(main(), 10);
}
to
function mainLoop() {
setInterval(main, 10);
}
That'll get you started, but you'll also need to clear the canvas in between draws. (As you'll notice if you run this)
Related
I am Japanese and I apologize for my unnatural English, but I would appreciate it if you could read it.
I learned how to convert paperscript to javascript from the official documentation.
Its means are as follows
Change the type attribute of the script tag to text/paperscript. <script type="text/paperscript" src="./main.js"></script>
Enable Paperscope for global use. 　paper.install(window)
Specify the target of the canvas. paper.setup(document.getElementById("myCanvas"))
Write the main code in the onload window.onload = function(){ /* add main code */ }
Finally, add paper.view.draw()
The onFrame and onResize transforms as follows. view.onFrame = function(event) {}
onMouseDown, onMouseUp, onMouseDrag, onMouseMove, etc. are converted as follows. var customTool = new Tool(); customTool.onMouseDown = function(event) {};
I have tried these methods, but applying these to the Examples on the paper.js official site does not work correctly.
The following code is the result of trying these.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="https://unpkg.com/paper"></script>
<script type="text/javascript" src="./main.js"></script>
<title>Document</title>
</head>
<body>
<canvas id="myCanvas"></canvas>
</body>
</html>
paper.install(window);
console.log("run test")
var myCanvas = document.getElementById("myCanvas")
var customTool = new Tool();
window.onload = function(){
paper.setup(myCanvas)
var points = 25;
// The distance between the points:
var length = 35;
var path = new Path({
strokeColor: '#E4141B',
strokeWidth: 20,
strokeCap: 'round'
});
var start = view.center / [10, 1];
for (var i = 0; i < points; i++)
path.add(start + new Point(i * length, 0));
customTool.onMouseMove=function(event) {
path.firstSegment.point = event.point;
for (var i = 0; i < points - 1; i++) {
var segment = path.segments[i];
var nextSegment = segment.next;
var vector = segment.point - nextSegment.point;
vector.length = length;
nextSegment.point = segment.point - vector;
}
path.smooth({ type: 'continuous' });
}
customTool.onMouseDown=function(event) {
path.fullySelected = true;
path.strokeColor = '#e08285';
}
customTool.onMouseUp=function(event) {
path.fullySelected = false;
path.strokeColor = '#e4141b';
}
view.draw();
}
The original paperscript can be found here.
What is the problem with this code?
Thank you for reading to the end!
The var vector in the for loop is not getting the correct values in your code. Change the math operators and it will work like the paperjs demo.
Math operators (+ - * /) for vector only works in paperscript. In Javascript, use .add() .subtract() .multiply() .divide(). see http://paperjs.org/reference/point/#subtract-point
// paperscript
segment.point - nextSegment.point
// javascript
segment.point.subtract(nextSegment.point)
Here's a working demo of your example
paper.install(window);
console.log("run test")
var myCanvas = document.getElementById("myCanvas")
var customTool = new Tool();
window.onload = function() {
paper.setup(myCanvas)
var points = 15; //25
// The distance between the points:
var length = 20; //35
var path = new Path({
strokeColor: '#E4141B',
strokeWidth: 20,
strokeCap: 'round'
});
var start = view.center / [10, 1];
for (var i = 0; i < points; i++) {
path.add(start + new Point(i * length, 0));
}
customTool.onMouseMove = function(event) {
path.firstSegment.point = event.point;
for (var i = 0; i < points - 1; i++) {
var segment = path.segments[i];
var nextSegment = segment.next;
//var vector = segment.point - nextSegment.point;
var vector = segment.point.subtract(nextSegment.point);
vector.length = length;
//nextSegment.point = segment.point - vector;
nextSegment.point = segment.point.subtract(vector);
}
path.smooth({
type: 'continuous'
});
}
customTool.onMouseDown = function(event) {
path.fullySelected = true;
path.strokeColor = '#e08285';
}
customTool.onMouseUp = function(event) {
path.fullySelected = false;
path.strokeColor = '#e4141b';
}
view.draw();
}
html,
body {
margin: 0
}
canvas {
border: 1px solid red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="https://unpkg.com/paper"></script>
<!-- you can add this back in -->
<!-- <script type="text/javascript" src="./main.js"></script> -->
<title>Document</title>
</head>
<body>
<!-- set any size you want, or use CSS/JS to make this resizable -->
<canvas id="myCanvas" width="600" height="150"></canvas>
</body>
</html>
Essentially I would like for all these disparate lines to be connected in one single path.
I am using vector.add() because I would like a cumulative result. Maybe that's the issue?
Or perhaps it's how I'm accessing the previous element of the array?
Please take a look at this snippet:
let lifespan = 200;
let genes = [];
let previous;
let prevpos;
function setup(){
createCanvas(window.innerWidth, window.innerHeight);
background(255);
genes[0] = createVector(50,50);
stroke(0);
strokeWeight(1);
beginShape(LINES)
vertex(genes[0].x, genes[0].y);
for (let i = 1; i < lifespan; i++) {
previous = genes[i-1];
genes[i] = previous.add(createVector(random(-10,10),random(-10,10)));
// vertex(previous.x, previous.y);
vertex(genes[i].x, genes[i].y);
}
endShape()
}
function draw(){
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id='sketch'> </div>
<script language="javascript" type="text/javascript" src="https://cdn.jsdelivr.net/npm/p5#1.4.0/lib/p5.min.js"></script>
<script src="sketch.js"></script>
<script>
</script>
</body>
</html>
I thought I had tried this already but I just needed to uncomment a line.
beginShape(LINES)
vertex(genes[0].x, genes[0].y);
for (let i = 1; i < lifespan; i++) {
previous = genes[i-1];
genes[i] = previous.add(createVector(random(-10,10),random(-10,10)));
vertex(previous.x, previous.y); //<-- uncomment this
vertex(genes[i].x, genes[i].y);
}
endShape()
So what I am trying to do is make a clicker game, yet when I use the standard:
let Coins = 0;
function setup() {
createCanvas(400, 400)
}
//draws the circle
function draw() {
background(100)
circle(200, 200, 50)
//creates the text to show the amount of coins
text(Coins, 200 - (textWidth(Coins) / 2), 150)
}
//detects when the mouse is pressed
function mouseClicked() {
//changes the number of coins
Coins = Coins + 1
}
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/addons/p5.sound.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8" />
</head>
<body>
<script src="sketch.js"></script>
</body>
</html>
I can click anywhere and it will count up the Coins, but I want it so that if the mouse is On the shape/element it will then count.
I don't want to use the "If (mouseX => width / 2)" but just know when the mouse is over/hovering over the element.
In p5js you need to implement "hit testing" yourself. In this case you can do so by checking if the distance between the mouse and the center of the coin is less than the radius of the coin.
let Coins = 0;
function setup() {
createCanvas(400, 400)
}
let coinPosition = new p5.Vector(200, 200);
let coinRadius = 25;
//draws the circle
function draw() {
background(100)
push()
if (dist(mouseX, mouseY, coinPosition.x, coinPosition.y) <= coinRadius) {
fill('gold')
}
circle(coinPosition.x, coinPosition.y, coinRadius * 2)
// restore the previous fill value
pop()
//creates the text to show the amount of coins
text(Coins, 200 - (textWidth(Coins) / 2), 150)
}
//detects when the mouse is pressed
function mouseClicked() {
if (dist(mouseX, mouseY, coinPosition.x, coinPosition.y) <= coinRadius) {
//changes the number of coins
Coins = Coins + 1
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/addons/p5.sound.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8" />
</head>
<body>
<script src="sketch.js"></script>
</body>
</html>
I'm trying to create a timer within an object - however when trying to increment the counter by the time that's passed I'm getting a NaN error. The error stops if I replace the deltaTime argument with a constant, but then the jump time would vary depending upon the end users machine and work load.
class Actor {
constructor() {
this.jumpCounter = 0
this.jumpTimer = function (deltaTime) {
console.log(this.jumpCounter);
this.jumpCounter += deltaTime;
console.log(deltaTime)
}
}
}
let canvas = document.getElementById('gameScreen');
let ctx = canvas.getContext("2d");
var lastTime = 0;
const GAME_WIDTH = 600;
const GAME_HEIGHT = 600;
actor = new Actor;
function gameLoop(timestamp) {
let deltaTime = timestamp - lastTime;
lastTime = timestamp;
ctx.fillStyle = 'rgba(155, 200, 155, 0.3)'
ctx.fillRect(0, 0, GAME_WIDTH, GAME_HEIGHT);
actor.jumpTimer(deltaTime)
requestAnimationFrame(gameLoop);
}
gameLoop();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Game Sandbox</title>
<style>
#gameScreen {
border: 1px solid;
}
</style>
</head>
<body>
<canvas id="gameScreen" width="600" height="600"></canvas>
<script></script>
</body>
</html>
As the error resulted from there being on timestamp on the first run through of the code this fixed the issue:
this.jumpTimer = function (deltaTime) {
if (!deltaTime) return;
console.log(this.jumpCounter);
this.jumpCounter += deltaTime;
console.log(deltaTime)
}
I'm trying to make a game with paper.js but something is not working so i've simplified things and.. not working again.
I've tried to make with paper.js with already-made namespace paperscript but it was too hard to debug so i've tried to use javascript directly.
Even with super simple code moving a ball around the browser.. it is not working.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Bouncing ball</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../lib/paper.js"></script>
<script type="text/javascript">
var ball;
function game(_view) {
console.log("game!");
ball = new Ball();
this.view = _view;
console.log(ball);
}
paper.install(window);
window.onload = function() {
var canvas = document.getElementById('canvas');
paper.setup(canvas);
view.onFrame = onFrame;
game(view);
}
var Ball = Base.extend({
initialize: function() {
this.position = new Point(100, 100);
this.velocity = new Point(3, 0);
this.path = new Path.Circle(location, 25);
this.path.strokeColor = 'black';
this.path.fillColor = 'black';
},
iterate: function() {
this.position += this.velocity;
this.path.position = this.position;
return this;
}
});
function onFrame(event) {
ball.iterate();
//console.log(ball);
};
</script>
</head>
<body>
<canvas id="canvas" resize></canvas>
</body>
</html>
I'm keeping on getting this error:
Uncaught TypeError: Cannot call method 'iterate' of undefined
When you assign the onFrame handler, a setter function setOnFrame is called, which immediately invokes the frame handler. Since ball is not initialized at this point, the function call fails.
setOnFrame: function(onFrame) {
this._onFrame = onFrame;
if (!onFrame) {
delete this._onFrameCallback;
return;
}
var that = this,
requested = false,
before,
time = 0,
count = 0;
this._onFrameCallback = function(param, dontRequest) {
requested = false;
if (!that._onFrame)
return;
paper = that._scope;
requested = true;
if (!dontRequest) {
DomEvent.requestAnimationFrame(that._onFrameCallback,
that._canvas);
}
var now = Date.now() / 1000,
delta = before ? now - before : 0;
that._onFrame(Base.merge({
delta: delta,
time: time += delta,
count: count++
}));
before = now;
that.draw(true);
};
if (!requested)
this._onFrameCallback(); //here your onFrame function is called
},
If you look at this jsFiddle, and make sure you set break on exceptions in your dev tools, you can see the stack. The solution would then be to initialize ball before assigning the handler.
There is only one possible reason, ballis not yet defined when onFrame is called. Either assign onFrameafter the creation of ball, or check ball inside onFrame.
I've created a library folio.js for taking care of exactly this. It also handles animations. Here is your example using folio.js.
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--><html class="no-js"> <!--<![endif]-->
<head>
<!-- META -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="description" content="">
<title>Ball</title>
<script type="text/javascript" src="paper-core.js"></script>
<script type="text/javascript" src="paper.folio.js"></script>
<script type="text/javascript">
// ------------------------------------------------------------------------
// Properties
// ------------------------------------------------------------------------
// the core folio namespace
var f = folio;
// define ball variable
var ball;
// ------------------------------------------------------------------------
// Setup
// ------------------------------------------------------------------------
function Setup() {
ball = new Ball();
};
// ------------------------------------------------------------------------
// Update
// ------------------------------------------------------------------------
/*
* Update() is called every frame
*/
function Update(event) {
ball.iterate();
};
// ------------------------------------------------------------------------
// Draw
// ------------------------------------------------------------------------
function Draw() {
};
// ------------------------------------------------------------------------
// Classes
// ------------------------------------------------------------------------
var Ball = Base.extend({
initialize: function() {
this.position = new Point(100, 100);
this.velocity = new Point(3, 0);
this.path = new Path.Circle(this.position, 25);
this.path.strokeColor = 'black';
this.path.fillColor = 'black';
},
iterate: function() {
this.path.position.x += this.velocity.x;
this.path.position.y += this.velocity.y;
return this;
}
});
</script>
<meta http-equiv="x-dns-prefetch-control" content="off"/>
</head>
<body>
<canvas resize="true" id="canvas"></canvas>
</body>
</html>