In createjs I'm trying to add elements to the stage but only when called by a function.
If I add this code into my onload init() function the code works:
function init()
{
background = new createjs.Shape();
background.graphics.beginLinearGradientFill(["blue", "darkgreen"], [0, 1], 0, 0, 100, 100).drawRect(0, 0, 70, 70);
background.x = 0;
background.y = 0;
stage.addChild(background);
}
However if I add it like
function init()
{
loadScreen();
}
function loadScreen()
{
background = new createjs.Shape();
background.graphics.beginLinearGradientFill(["blue", "darkgreen"], [0, 1], 0, 0, 100, 100).drawRect(0, 0, 70, 70);
background.x = 0;
background.y = 0;
stage.addChild(background);
}
I'm probably just doing something silly, any tips appreciated.
Thanks,
Remove the semicolon(;) after loadScreen() function defenition
function init()
{
loadScreen();
}
function loadScreen()
{
background = new createjs.Shape();
background.graphics.beginLinearGradientFill(["blue", "darkgreen"], [0, 1], 0, 0, 100, 100).drawRect(0, 0, 70, 70);
background.x = 0;
background.y = 0;
stage.addChild(background);
}
Make sure that your variables are declared.
E.g.
var stage; var background;
And make sure that they are global.
window.onload = function(){
var stage;
var background;
function init(){
// create reference to stage and add 'tick' listener.
}
function loadScreen(){
// draw something onto the stage.
}
};
Check out this website for an example: http://createjs.com/docs/easeljs/modules/EaselJS.html.
I can see that you removed this line ->
myGraphics.beginLinearGradientFill(["#000","#FFF"], [0, 1], 0, 20, 0, 120).drawRect(20, 20, 120, 120);
Have you tried instantiating background inside init() and then passing the object to the load function?
Related
I'm trying to center a circle in a given rectangle. One of the approaches to do the job could be graphics working with Phaser.Display.Align.In.Center and I'm having trouble doing that. Here is the code.
class BootScene extends Phaser.Scene {
constructor() {
super({
key: 'BootScene'
});
}
create() {
let btn = this.add.rectangle(800, 600, 200, 150, '#000').setOrigin(1);
let txt = this.add.text(0, 0, 'click');
Phaser.Display.Align.In.Center(txt, btn, );
let graphics = this.add.graphics({
x: 750,
y: 550
});
var shape = new Phaser.Geom.Circle(0, 0, 24);
graphics.fillStyle(0xff0000, 1);
graphics.fillCircleShape(shape);
//Phaser.Display.Align.In.Center(graphics, btn);
}
}
var config = {
width: 800,
height: 600,
backgroundColor: '#555',
scene: [BootScene]
}
var game = new Phaser.Game(config);
<script src="https://cdn.jsdelivr.net/npm/phaser#3.55.2/dist/phaser.js"></script>
There are 3 visual parts in the code above: the btn rectangle, the txt text and the graphics.
Phaser.Display.Align.In.Center works well with btn and txt.
graphics works well with btn using
this.add.graphics({
x: 750,
y: 550
});
However, if I uncomment the following line below out
Phaser.Display.Align.In.Center(graphics, btn);
the graphics is gone, not matter I set the config as { x: 750, y: 550 } or { x: 0, y: 0 }.
What am I missing?
I know I could use something like
let circle2 = this.add.circle(0, 0, 32, 0xf00000);
Phaser.Display.Align.In.Center(btn_circle, circle2);
I'd just like to know why it doesn't work when I combine graphics and Phaser.Display.Align.In.Center together.
Update: it seems to be a bug of phaser (or a mistake in the documentation), since after calling Phaser.Display.Align.In.Center on the graphics object, the x and y properties are set to NaN, and acording the documenation Align should accept a GameObject, which the Graphics object is.
Here is a possible solution:
You could simply generate a texture out of the graphics object, with the function generateTexture on the graphics object
Align the newly created image with the btn
I just added a setDepth call to the txt object, so it would be visible
class BootScene extends Phaser.Scene {
constructor() {
super({
key: 'BootScene'
});
}
create() {
let btn = this.add.rectangle(300, 175, 200, 150, '#000').setOrigin(1);
let txt = this.add.text(0, 0, 'click');
Phaser.Display.Align.In.Center(txt, btn );
let graphics = this.make.graphics({
x: 24,
y: 24,
});
var shape = new Phaser.Geom.Circle(24, 24, 24);
graphics.fillStyle(0xff0000, 1);
graphics.fillCircleShape(shape);
graphics.generateTexture('gCircle', 48, 48);
let image = this.add.image(200, 200, 'gCircle');
Phaser.Display.Align.In.Center(image, btn);
// only to make the Button visible
txt.setDepth(2);
}
}
var config = {
width: 400,
height: 200,
backgroundColor: '#555',
scene: [BootScene]
}
var game = new Phaser.Game(config);
<script src="https://cdn.jsdelivr.net/npm/phaser#3.55.2/dist/phaser.js"></script>
I am experienced in python but completely new to java. I am using p5 and want to set up a simple function that, depending on what number the user inputs, it draws that many circles. I'm not sure why it is not working.
var numProton;
function setup() {
numProton = createInput();
numProton.changed(nucleus);
createCanvas(600, 500);
background(255);
}
function draw() {
noStroke()
textSize(15);
fill(0, 0, 0);
text('^ # of Protons', 25, 30);
text('^ # of Neutrons', 150, 30);
text('^ # of Electrons', 275, 30);
}
function nucleus() {
var i = 0;
while(i <= numProton.value) {
ellipse(300, 250, 10);
i++;
}
}
Probably a very simple error but I appreciate the help none the less.
Why don't you use a for loop, it has the same exact purpose:
for (var i = 0; i <= numProton.value; i++) {
ellipse(300, 250, 10);
}
Is it possible that numProton.value() is supposed to be a function call with ()?
See here p5.js/changed
I'm trying to create an animated glitch effect using JavaScript and HTML Canvas. I have managed to draw my image onto a canvas and want to write a separate function that later splits this image into rows so they can be animated individually.
I call my function to create the canvas...
var logo_text = "logo_text.png";
drawOnCanvas(logo_text, mc_logo_text, 0, 0, 245, 60);
And here's what the function looks like...
function drawOnCanvas(image, divID, posX, posY, wid, hei) {
//////////// CREATE CANVAS /////////////
var canvas = document.createElement("CANVAS"),
ctx = canvas.getContext("2d");
canvas.width = wid;
canvas.height = hei;
canvas.id = divID.id+"_canvas";
divID.appendChild(canvas);
//////////// DRAW IMAGE /////////////
var img = new Image();
img.src = image;
img.onload = function () {
ctx.drawImage(img, posX, posY, wid, hei);
} }
This function works fine and draws the image where I need it. I just can't figure out the best way to split this into rows.
Try this!
You just need to edit the settings in each object of _config array.
drawOnCanvas() will do same times equal the object's number in _config.
By the way, the scripts need to import below the DIVs , so document.getElementById could find them.
<body>
<div id="mc_logo_text1"></div>
<div id="mc_logo_text2"></div>
<div id="mc_logo_text3"></div>
<script>
// Simply edit all settings here
var _config = [
{
src: 'logo_text.png',
domDiv: 'mc_logo_text1',
position: {x: 0, y: 0},
size: {w: 245, h: 60}
},
{
src: 'logo_text.png',
domDiv: 'mc_logo_text2',
position: {x: 0, y: 0},
size: {w: 245, h: 60}
},
{
src: 'logo_text.png',
domDiv: 'mc_logo_text3',
position: {x: 0, y: 0},
size: {w: 245, h: 60}
}
]
/////// No Need to modify ////////
var drawOnCanvas = function(config) {
var canvas = document.createElement("CANVAS");
var ctx = canvas.getContext("2d");
//Define which DIV to include new Canvas
var domTaget = document.getElementById(config.domDiv);
// Create Canvas & give new ID name
function _canvasInit() {
canvas.width = config.size.w;
canvas.height = config.size.h;
canvas.id = domTaget.id + "_canvas";
domTaget.appendChild(canvas);
}
// draw images into canvas
function _drawImgs() {
var img = new Image();
img.src = config.src;
img.onload = function() {
ctx.drawImage(img, config.position.x, config.position.y, canvas.width, canvas.height);
}
}
// Do all functions
_canvasInit();
_drawImgs();
}
// Each object in _config array do drawOnCanvas function,
for (var i = 0; i < _config.length; i = i + 1) {
drawOnCanvas(_config[i]);
}
/////// No Need to modify ////////
</script>
</body>
I'd like to have array slide_widths with widths of all .slide elements:
$( document ).ready(function() {
var $slider = $('.slider ul');
var slider_width = $slider.width();
var $slides = $('.slide');
var slide_widths = $.map($slides, function(slide) {
return slide.getBoundingClientRect().width;
});
console.log(slide_widths);
});
I get different results when I refresh my page:
1. [201.328125, 180, 214.28125, 180, 180, 180, 168.46875, 180, 145.078125, 144, 142.1875, 250.6875, 0, 0, 0, 0, 0, 0, 0, 0]
2. [201.328125, 180, 214.28125, 180, 180, 180, 168.46875, 180, 145.078125, 144, 142.1875, 250.6875, 155.515625, 180, 180, 176.03125, 0, 0, 0, 0]
I guess this map function is still working when console.log outoputs an array? How can I avoid it ?
It would seem that your function is grabbing the element widths before they're actually loaded, and so the not-yet-loaded elements are returning widths of 0.
Try using $(window).on("load", function() { instead of $(document).ready(function() {
$(window).on("load" will wait for all elements on the page to load, whereas $(document).ready will not.
I'm practicing some Javascript. I used a var to create an object (because before that I created a class) and now I'm trying to do the same, but instead of using a variable I want to use an array.
While this is working:
function start (){
var brick = new create_class_brick(10, 400, 10, 400, 0, 2.5, "brick");
window.setInterval(function(){brick.MOVE_BRICK();}, 25);
the MOVE_BRICK function doesn't work here:
function start (){
var i = 0;
vector_bricks[i++] = new create_class_brick(300, 500, 800, 600, 0, 2.5, "brick");
vector_bricks[i++] = new create_class_brick(200, 200, 600, 300, 0, 2.5, "brick");
for ( i = 0; i<vector_bricks.length; i++ ){
vector_bricks[i].create_brick();
vector_bricks[i].MOVE_BRICK();
}
}
Can anyone give me a hand?
Do you forget to call the function move_brick with window.setInterval? So it's not looping.
Simply change where you put the interval.
You get an error if you put it inside the for loop.
Meaning you should have this :
function start (){
var i = 0;
vector_bricks[i++] = new create_class_brick(300, 500, 800, 600, 0, 2.5, "brick");
vector_bricks[i++] = new create_class_brick(200, 200, 600, 300, 0, 2.5, "brick");
setInterval(function(){
for (var i = 0; i<vector_bricks.length; i++ ){
vector_bricks[i].create_brick(); // Not sure what this is for
vector_bricks[i].MOVE_BRICK();
}
}, 25);
}