In the following code, I would like to use
function startGame() {
myGamePiece = new component(30, 30, "smiley.gif", 10, 120, "image");
myGameArea.start();
}
any unicode font, for example 🐇, so how do I attribute? "font" instead of "image" is not working. Any help or pointer would be appreciated.
function component(width, height, color, x, y, type) {
this.type = type;
if (type == "image") {
this.image = new Image();
this.image.src = color;
}
this.width = width;
this.height = height;
this.speedX = 0;
this.speedY = 0;
this.x = x;
this.y = y;
this.update = function() {
ctx = myGameArea.context;
if (type == "image") {
ctx.drawImage(this.image,
this.x,
this.y,
this.width, this.height);
} else {
ctx.fillStyle = color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
}
this.newPos = function() {
this.x += this.speedX;
this.y += this.speedY;
}
}
Related
I would like to change the fill colour of an object over time. Is there a way to change the fill colour of an object after X frames?
I am learning about constructors, and I am thinking that in the code's updateParticle function, after this.age counts to 'X', the fill colour of the ellipse could change.
'''
function Particle(x, y, xSpeed, ySpeed, size, colour) {
this.x = x;
this.y = y;
this.xSpeed = xSpeed;
this.ySpeed = ySpeed;
this.size = size;
this.colour = colour;
this.age = 0;
this.drawParticle = function() {
fill(this.colour);
noStroke();
ellipse(this.x, this.y, this.size);
}
this.updateParticle = function() {
this.x += this.xSpeed;
this.y += this.ySpeed;
this.age++;
}
}
function Emitter(x, y, xSpeed, ySpeed, size, colour) {
this.x = x;
this.y = y;
this.xSpeed = xSpeed;
this.ySpeed = ySpeed;
this.size = size;
this.colour = colour;
this.particles = [];
this.startParticles = [];
this.lifetime = 0;
this.addParticle = function() {
var p = new Particle(random(this.x - 10, this.x + 10),
random(this.y - 10, this.y + 10),
random(this.xSpeed - 0.4, this.xSpeed + 0.4),
random(this.ySpeed - 5, this.ySpeed - 1),
random(this.size - 4, this.size + 40),
this.colour);
return p;
}
this.startEmitter = function(startParticles, lifetime) {
this.startParticles = startParticles;
this.lifetime = lifetime;
for (var i = 0; i < startParticles; i++) {
this.particles.push(this.addParticle());
}
}
this.updateParticles = function() {
var deadParticles = 0
for (var i = this.particles.length - 1; i >= 0; i--) {
this.particles[i].drawParticle();
this.particles[i].updateParticle();
if (this.particles[i].age > random(0, this.lifetime)) {
this.particles.splice(i, 1);
deadParticles++;
}
}
if (deadParticles > 0) {
for (var i = 0; i < deadParticles; i++) {
this.particles.push(this.addParticle());
}
}
}
}
var emit;
function setup() {
createCanvas(800, 600);
emit = new Emitter(width / 2, height - 100, 0, -1, 10, color(200, 0, 200, 50));
emit.startEmitter(600, 4000);
}
function draw() {
background(200);
emit.updateParticles();
}
'''
Well you could just:
if(frameCount % 30 == 0){ // % 30 is the remainder of num / 30, so 4 % 3 = 1, since 3 / 3 = 0 And 4 / 3 = 3.33
fill("lime") // these are just preset colors in p5.js AND css lime == rgb(0,255,0)
} else {
fill('darkred')
}
or you could also do it with for example a switch statement: using background for no reason
switch(MY_frameCount){
case 1:
background('blue')
break
case 2:
background("darkgreen")
break
case 376:
background(crimson)
// break
}
MY_frameCount ++
or:
if(Math.random() < 0.1){
fill(Math.random() * 255, Math.random() * 255, Math.random() * 255)
} // this should on average fill with random color every 10 frames
is it possible to change the particle color to any color in mind?
Because i only get one color and i want to change it to make it more suitable for spring is there a way to configure the colors based on your taste following is my functions code:
function Particle() {
this.pos = createVector(random(width), random(height));
this.vel = createVector(0, 0);
this.acc = createVector(0, 0);
this.maxspeed = 4;
this.h = 100;
this.prevPos = this.pos.copy();
this.update = function() {
this.vel.add(this.acc);
this.vel.limit(this.maxspeed);
this.pos.add(this.vel);
this.acc.mult(0);
}
this.follow = function(vectors) {
var x = floor(this.pos.x / scl);
var y = floor(this.pos.y / scl);
var index = x + y * cols;
var force = vectors[index];
this.applyForce(force);
}
this.applyForce = function(force) {
this.acc.add(force);
}
this.show = function() {
strokeWeight(6);
stroke(255, this.h, 10);
this.h = this.h + 1;
if (this.h > 255) {
this.h = 100;
}
strokeWeight(8);
line(this.pos.x, this.pos.y, this.prevPos.x, this.prevPos.y);
this.updatePrev();
}
this.updatePrev = function() {
this.prevPos.x = this.pos.x;
this.prevPos.y = this.pos.y;
}
this.edges = function() {
if (this.pos.x > width) {
this.pos.x = 0;
this.updatePrev();
}
if (this.pos.x < 0) {
this.pos.x = width;
this.updatePrev();
}
if (this.pos.y > height) {
this.pos.y = 0;
this.updatePrev();
}
if (this.pos.y < 0) {
this.pos.y = height;
this.updatePrev();
}
}
}
The call to stroke(255, this.h, 10) in the show function is what is determining the color of the line drawn by the Particle class in this case. It looks like it is cycling from red to yellow. The stroke function is well documented. You can certainly use it to make the line drawn in this example any color you want. You can learn more about color in p5js on p5js.org.
I'm working on a p5 project and I have an issue. When I'm trying to use my class name in my prototype I've an error ',' expected but I don't have any place where I can place one.
Here are the files.
-----FIRST FILE-----
class Pipe {
constructor() {
this.width = 50;
this.height = floor(random(canvas.height - 100));
this.x = canvas.width + this.width;
this.topY = canvas.height - this.height;
}
show() {
fill(0, 204, 0);
rect(this.x, canvas.height - this.height, this.x + width, canvas.height);
}
update() {
this.x -= panSpeed;
}
### IT'S THIS "p" which causing the problem ###
colided(Player p) {
if (p.x + p.size > this.x && p.x - p.size < this.x + this.width) {
if (p.y + p.size > this.topY) {
return true;
}
}
return false;
}
}
-----SECOND FILE-----
class Player {
constructor(x, y) {
this.x = x;
this.y = y;
this.velY = 0;
this.velX = panSpeed;
this.size = 20;
}
show() {
noStroke();
fill(255, 255, 0);
ellipse(this.x, this.y, this.size);
}
update() {
this.velY += gravity;
this.velY = constrain(this.velY, -1000, 25);
this.y += this.velY;
if (pipe.colided(this)) {
this.y = 0;
}
}
flap() {
this.velY -= 50;
}
}
-----THIRD FILE-----
var panSpeed = 5;
var gravity = 3;
var player;
var pipe;
function setup() {
window.canvas = createCanvas(800, 800);
player = new Player(100, canvas.height / 2);
pipe = new Pipe();
}
function draw() {
background(135, 206, 250);
pipe.update();
pipe.show();
player.update();
player.show();
}
function keyPressed() {
switch (key) {
case ' ':
player.flap();
break;
}
}
-----THE HTML-----
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>p5.js example</title>
<style> body {padding: 0; margin: 0;} </style>
<script src="lib/p5.js"></script>
<script src="lib/p5.sound.js"></script>
<script src="js/sketch.js"></script>
<script src="js/toto.js"></script>
<script src="js/pipe.js"></script>
</head>
<body>
</body>
</html>
First off, remove ### IT'S THIS "p" which causing the problem ###
Second off your issue is
colided(Player p) {
...
}
You're trying to give it a type of Player, which is not valid JavaScript. If you remove player and just have
colided(p) {
...
}
That'll sort your issue. FYI if you were to use Typescript as an example for optional static typing, the syntax would be colided(p : Player)
class Pipe {
constructor() {
this.width = 50;
this.height = floor(random(canvas.height - 100));
this.x = canvas.width + this.width;
this.topY = canvas.height - this.height;
}
show() {
fill(0, 204, 0);
rect(this.x, canvas.height - this.height, this.x + width, canvas.height);
}
update() {
this.x -= panSpeed;
}
colided(p) {
if (p.x + p.size > this.x && p.x - p.size < this.x + this.width) {
if (p.y + p.size > this.topY) {
return true;
}
}
return false;
}
}
class Player {
constructor(x, y) {
this.x = x;
this.y = y;
this.velY = 0;
this.velX = panSpeed;
this.size = 20;
}
show() {
noStroke();
fill(255, 255, 0);
ellipse(this.x, this.y, this.size);
}
update() {
this.velY += gravity;
this.velY = constrain(this.velY, -1000, 25);
this.y += this.velY;
if (pipe.colided(this)) {
this.y = 0;
}
}
flap() {
this.velY -= 50;
}
}
var panSpeed = 5;
var gravity = 3;
var player;
var pipe;
function setup() {
window.canvas = createCanvas(800, 800);
player = new Player(100, canvas.height / 2);
pipe = new Pipe();
}
function draw() {
background(135, 206, 250);
pipe.update();
pipe.show();
player.update();
player.show();
}
function keyPressed() {
switch (key) {
case ' ':
player.flap();
break;
}
}
<script src="https://cdn.jsdelivr.net/npm/p5#0.10.2/lib/p5.js"></script>
I made Barcode generator using ZXing Library but when barcode generate then it wont display text below barcode like
try {
Map<EncodeHintType, Object> hints = null;
hints = new EnumMap<EncodeHintType, Object>(EncodeHintType.class);
hints.put(EncodeHintType.CHARACTER_SET, "ABC-abc-1234");
BitMatrix bitMatrix = new Code128Writer().encode("ABC-abc-1234", BarcodeFormat.CODE_128, 350, 150, hints);
int width = bitMatrix.getWidth();
int height = bitMatrix.getHeight();
int[] pixels = new int[width * height];
// All are 0, or black, by default
for (int y = 0; y < height; y++) {
int offset = y * width;
for (int x = 0; x < width; x++) {
pixels[offset + x] = bitMatrix.get(x, y) ? Color.BLACK : Color.WHITE;
}
}
Bitmap bitmap = Bitmap.createBitmap(width, height,
Bitmap.Config.ARGB_8888);
bitmap.setPixels(pixels, 0, width, 0, 0, width, height);
mImageView.setImageBitmap(bitmap);
} catch (Exception e) {
// TODO: handle exception
}
Maybe it's late to help you but I went through the same problem and was able to solve the following in a C#
var barcodeWriter = new BarcodeWriter
{
Format = BarcodeFormat.CODE_128,
Options = new EncodingOptions
{
Height = 160,
Width = 300,
Margin = 0,
PureBarcode = false
},
Renderer = new BitmapRenderer()
{
TextFont = new Font(FontFamily.GenericSerif, 15)
}
};
var bitmap = barcodeWriter.Write("your content");
bitmap.Save(#"C:\\FULL\PATH\FILE.JPG");
So I'm trying to have the down arrow make the background of my canvas change. I'm having trouble just getting the button press to work itself.
Also I was told that I would have to have a function redraw all the shapes that are already there at the beginning as well, which I am also stuck on what to change.
Here is a JSFiddle of what I have going so far, any suggestions are appreciated!
https://jsfiddle.net/u8avnky2/
var mainCanvas = document.getElementById("canvas");
var mainContext = mainCanvas.getContext('2d');
//rotate canvas
function buttonClick() {
mainContext.rotate(20*Math.PI/180);
}
//key down event
window.addEventListener('keydown', function(event) {
if (event.keyCode === 40) {
fillBackgroundColor();
}
});
function fillBackgroundColor() {
var colors = ["red", "green", "blue", "orange", "purple", "yellow"];
var color = colors[Math.floor(Math.random()*colors.length)];
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
mainContext.fillStyle = color;
mainContext.fillRect(0, 0, canvas.width, canvas.height);
}
function check() {
mainContext.clearRect(square.x,square.y,square.w,square.h);
}
var circles = new Array();
var requestAnimationFrame = window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame;
function Circle(radius, speed, width, xPos, yPos) {
this.radius = radius;
this.speed = speed;
this.width = width;
this.xPos = xPos;
this.yPos = yPos;
this.opacity = .1 + Math.random() * .5;
this.counter = 0;
var signHelper = Math.floor(Math.random() * 2);
if (signHelper == 1) {
this.sign = -1;
} else {
this.sign = 1;
}
}
//drawing circle
Circle.prototype.update = function () {
this.counter += this.sign * this.speed;
mainContext.beginPath();
mainContext.arc(this.xPos + Math.cos(this.counter / 100) * this.radius,
this.yPos + Math.sin(this.counter / 100) * this.radius,
this.width,
0,
Math.PI * 2,
false);
mainContext.closePath();
mainContext.fillStyle = 'rgba(255, 255, 51,' + this.opacity + ')';
mainContext.fill();
};
function setupCircles() {
for (var i = 0; i < 25; i++) {
var randomX = Math.round(-200 + Math.random() * 700);
var randomY = Math.round(-200 + Math.random() * 700);
var speed = .2 + Math.random() * 3;
var size = 5 + Math.random() * 100;
var radius = 5 + Math.random() * 100;
var circle = new Circle(radius, speed, size, randomX, randomY);
circles.push(circle);
}
drawAndUpdate();
}
setupCircles();
function drawAndUpdate() {
mainContext.clearRect(0, 0, 1000, 1000);
for (var i = 0; i < circles.length; i++) {
var myCircle = circles[i];
myCircle.update();
}
requestAnimationFrame(drawAndUpdate);
}
jsFiddle : https://jsfiddle.net/CanvasCode/u8avnky2/1/
I added a variable known as color globally, so the fillBackgroundColor can access that instead.
var color = "white";
Then in your drawAndUpdate function we just do a fillRect with the color variable using the canvas width and height and it works.
function drawAndUpdate() {
mainContext.fillStyle = color;
mainContext.fillRect(0, 0, mainCanvas.width, mainCanvas.height);
for (var i = 0; i < circles.length; i++) {
var myCircle = circles[i];
myCircle.update();
}
requestAnimationFrame(drawAndUpdate);
}