Hello guys i am newbie to pixi.js, any help will be appriciated.
Here i am trying to get numbers from back-end and then assign them to the pre defined dictionary.
Problem is that function is returning reels where different amount of symbols are missing at different outcome.
When i am checking, indexes of the reel [0,1,2],[0,1,2]... every reel has it's symbols assigned but some of them are not visible.
...some code here...
const numbers = data.rng;
console.log(numbers);
// create reels
for (let i = 0; i < reelsContainer.children.length; i++) {
const reel = reelsContainer.children[i];
// console log indexes of **strong text**the reels
console.log("INDEX OF THE REEL :", i);
reel.removeChildren();
let xPosition = 0;
let yPosition = -190;
for (let j = 0; j < 3; j++) {
// map all 14 indexes from numbers and assign them to the symbolNumberMap
const symbol = symbolNumberMap[numbers[i * 3 + j]];
// console.log("Index Generated by RNG :", numbers[i * 3]);
console.log("Index of the Row in the Reel :", j)
console.log("symbolNumberMap - Mapped Symbol(Image):", numbers[i * 3 + j])
console.log("Image Path: ", symbol.texture.baseTexture.imageUrl);
// console.log("Symbol: ", symbol);
// console.log(symbol.texture.baseTexture.imageUrl);
// console.log(symbol.texture.baseTexture.imageUrl)
symbol.x = xPosition;
symbol.y = yPosition;
// add every symbol to the every reel index
// console.log(`Symbol+ ${symbol.texture.baseTexture.imageUrl} x: ${symbol.x} y: ${symbol.y}`);
// console.log("VISIBLE", symbol.visible)
reel.addChild(symbol);
// not every symbol
yPosition += symbolHeight + 120;
}
reel.y -= reelHeight * 3;
new TWEEN.Tween(reel)
.to({ y: (app.renderer.height - reelHeight - 100) / 2}, reelSpeed * 1000)
.delay(i * 250)
.onComplete(() => {
reel.y = (app.renderer.height - reelHeight) / 2;
})
.start();
}
});
app.ticker.add(() => {
TWEEN.update();
});
Related
Hello I don't really understand javascript well because I only use python typically. and I'm doing this javascript project and I want to make it where the input is not dragging and instead it is left and right. So like when you move the lock all your have to do is press the arrow keys. Any help would greatly be very very nice. Here is the codepen I'm using this from https://codepen.io/MSFTserver/pen/aJGBXp
// make dial draggable
Draggable.create(".dial", {
type:"rotation",
throwProps:true
});
// values 40 or above will be set to 0
const combo = [20, 5, 30],
findCombo = function(comboArr){
let dial = $(".dial"),
dialTrans = dial.css("transform"),
ticks = 40,
tickAngle = 360 / ticks,
numOffset = 0.5, // how far red arrow can be from number
// break down matrix value of dial transform and get angle
matrixVal = dialTrans.split('(')[1].split(')')[0].split(','),
cos1 = matrixVal[0],
sin = matrixVal[1],
negSin = matrixVal[2],
cos2 = matrixVal[3],
angle = Math.round(Math.atan2(sin, cos1) * (180 / Math.PI)) * -1;
// convert negative angles to positive
if (angle < 0) {
angle += 360;
}
// check numbers found, stop loop if at first number not found
for (let i = 0; i < comboArr.length; ++i) {
if (!$(".num" + (i + 1)).hasClass("found")) {
if (angle > (comboArr[i] - numOffset) * tickAngle &&
angle < (comboArr[i] + numOffset) * tickAngle) {
// make numbers green when found
$(".num" + (i + 1)).addClass("found");
// on unlock
if (i == comboArr.length - 1) {
$(".shackle").addClass("unlocked");
$(".top").addClass("pivot1");
$(".inner").addClass("pivot2");
$(".left").addClass("moveRight");
$(".dentL, .dentR").addClass("moveLeft");
// then lock again
setTimeout(function() {
$(".shackle").removeClass("unlocked");
$(".top").removeClass("pivot1");
$(".inner").removeClass("pivot2");
$(".left").removeClass("moveRight");
$(".dentL, .dentR").removeClass("moveLeft");
$("body").attr("style","background: black;");
$(".sitelocker").attr("style","display:none;");
$(".mainsitebody").removeAttr("style");
for (let j = 0; j < combo.length; ++j) {
$(".num" + (j + 1)).removeClass("found");
}
}, 2400);
}
}
break;
}
}
};
// dial interaction (mouse)
$(".dial").on("click",function(){
findCombo(combo);
});
// dial interaction (touch)
$(".dial").on("touchend",function(){
findCombo(combo);
});
I'm using PanoJS to create a platform that can view and modify huge images.
What i need to do is render image tiles on multiple canvas items, and change brightness, contrast, opacity when user drag the range selector.
But the problem is, when I run this updateTiles function, tiles are not updated one by one, they wait until all the tiles were updated and render together, AND, this loading function is not working as expected neither, this opacity change with loading element renders after all the tiles were updated too, that's not what I'm expecting..
Here are the codes I wrote about this senario, any idea how am I supposed to do to get what I want?
Thanks a lot!
...
PanoJS.prototype.updateTiles = function () {
const handleCanvasUpdate = (element) => {
const ctx = element.getContext('2d')
const imgData = new ImageData(new Uint8ClampedArray(JSON.parse(element._imgData.data)), element._imgData.height, element._imgData.width)
const changedImgData = this.changeImgData(imgData) // -1 ~ 1
ctx.putImageData(changedImgData, 0, 0);
}
const tag = this.showLoading('updateTiles')
for (let i = 0; i < this.well.children.length; i++) {
const element = this.well.children[i];
if (element.tagName.toUpperCase() === 'CANVAS') {
handleCanvasUpdate(element)
}
}
this.hideLoading(tag)
}
PanoJS.prototype.changeImgData = function (imgdata) {
// this imgdata can be very large
const data = imgdata.data;
for (let i = 0; i < data.length; i += 4) {
// brightness
const hsv = this.rgb2hsv([data[i], data[i + 1], data[i + 2]]);
hsv[2] *= 1 + this.luminance;
const rgb = this.hsv2rgb([...hsv]);
data[i] = rgb[0];
data[i + 1] = rgb[1];
data[i + 2] = rgb[2];
// contrast
const _contrast = (this.contrast / 100) + 1; //convert to decimal & shift range: [0..2]
const intercept = 128 * (1 - _contrast);
data[i] = data[i] * _contrast + intercept;
data[i + 1] = data[i + 1] * _contrast + intercept;
data[i + 2] = data[i + 2] * _contrast + intercept;
// opacity
data[i + 3] = data[i + 3] * this.opacity;
}
return imgdata;
}
PanoJS.prototype.showLoading = function (name) {
counter++
const tag = `${counter}${name}`
console.time(tag)
this.loadingMask.style.opacity = 1
this.loadingCount++
return tag
}
PanoJS.prototype.hideLoading = function (tag) {
// requestAnimationFrame(() => {
if (this.loadingCount) {
this.loadingCount--
}
// console.log(this.loadingMask.style.opacity);
if (this.loadingCount === 0) {
this.loadingMask.style.opacity = 0
}
console.timeEnd(tag)
// console.log(this.loadingCount);
// })
}
...
edit: I think I've fixed the 2d array bit... I forgot brackets()
edit number 2: the if didn't work because I used a single = sign setting j to 0 every loop (: using == fixed the issue. oh the joys of coding!
first post.
I'm trying to code a fretboard which I will modify and add to over time but I'm having problems.
I can render the frets, strings and circles fine, even the notes on the circles, but getting the base note to show is a pain.
I have commented out the problem lines, near the bottom of the code. The if function causes p5.js to freeze, the 2d array doesn't seem to get defined even though I push an array into the empty array.
help?
let stringNumber = 6;
let fretNumber = 22;
let notes = ["a", "a#", "b", "c", "c#", "d", "d#", "e", "f", "f#", "g", "g#"]
let baseNotes = [7, 0, 5, 10, 2, 7];
let fretboardWidth = 0;
let fretboardHeight = 0;
function setup() {
createCanvas(600, 800);
}
function draw() {
background(0,100,100);
fretboardWidth = width - 100;
fretboardHeight = height -100
renderFrets();
renderStrings();
renderCircles();
createNotes();
}
function renderFrets() {
for(i=1; i <= fretNumber; i++){
line(0, fretboardHeight / (fretNumber + 1) * i, fretboardWidth, fretboardHeight / (fretNumber + 1) * i);
}
}
function renderStrings() {
for(i=1; i <= stringNumber; i++){
line(fretboardWidth / (stringNumber +1) * i, 0, fretboardWidth / (stringNumber +1) * i, fretboardHeight);
}
}
function renderCircles() {
for(i = 1; i <= stringNumber; i++){
for(j = 1; j <= fretNumber; j++){
circle(fretboardWidth / (stringNumber+1) * i, fretboardHeight / (fretNumber+1) * j, 20);
}
}
}
function createNotes() {
let strings = [];
let gstring = [];
for(i=0; i < stringNumber; i++){
for(j=0; j <= fretNumber; j++) {
gstring.push(notes[(baseNotes[i] + j) % 12]);
// if(j=0){
// text(gstring[j], fretboardWidth / 7 * (i+1) - 4, fretboardHeight / (fretNumber+1) * j + 3);
// }
// else{
text(gstring[j], fretboardWidth / 7 * (i+1) - 4, fretboardHeight / (fretNumber+1) * j + 3);
// }
}
strings.push[gstring];
gstring = [];
}
text(strings[0][0], fretboardWidth / 7 * (i+1) - 4, 10);
}
Fixed this!
needed double = sign in the if function to check values are equal rather than setting the value to create an infinite loop
forgot normal brackets when adding to an array.
can someone tell why this does not work?
the code does print "generating fish" but than not printing enything...
function fish(x, y, degree, genes, Snumber) {
this.x = x;
this.y = y;
this.dgree = degree;
this.energy = 50;
this.genes = genes;
this.Snumber = Snumber;
}
fishs = new Array(10);
Snumber = 0;
document.writeln("generating fish");
for (i = 0; i < 10; i++) {
x = Math.round(Math.random * 600);
y = Math.round(Math.random * 600);
degree = Math.round(Math.random * 360);
genes + new Array(12);
for (j = 0; j < 12; j++) {
genes[j] = Math.random * 2 - 1;
}
fishs[i] = new fish(x, y, degree, genes, Snumber);
Snumber++;
document.writeln("genarating fish num" + i);
}
You have couple of errors and warnings in your code:
1.) You don't user the var keyword, so you automatically put the variables on the global scope.
2.) You use a + operator instead of an = in the line:
genes + new Array(12);
3.) You use Math.random (wich returns the random function, not a random number) instead of the function in 3 places.
4.) You use document.write(ln), which is deprecated. Use console.log instead (which prints to the console, hit F12 to see it)
I'm currently learning more about the inner workings of javascript objects and came across an example where multiple variables were returned from the object:
var squareGrid = function(width, n, z) {
width = width || 1;
n = n || 4;
var z = z || width / 2.0;
var edges = [],
pts = [];
var step = width / n;
for (var u = 0; u < n; u++) {
var u_added = u * n * 4;
for (var v = 0; v < n; v++) {
var delta = u_added + 4 * v;
var t_v = step * (v - n / 2);
var t_u = step * (u - n / 2);
pts.push([t_v, t_u, z]); // top left
pts.push([t_v, t_u + step, z]); // top right
pts.push([t_v + step, t_u + step, z]); // bottom right
pts.push([t_v + step, t_u, z]); // bottom left
edges.push([delta + 0, delta + 1]);
edges.push([delta + 1, delta + 2]);
edges.push([delta + 2, delta + 3]);
edges.push([delta + 3, delta + 0]);
}
}
return {
edges: edges,
pts: pts
};
}
In this case, in order to return both edges and points, it looks like there are key-value pairs being returned where the keys and values are the same thing. Is this method necessary or can the following just be done?
return{ edges, pts}};
You would be returning an object where the keys would be edges and the values would be the return value of edges.
x = squareGrid(400, 2, 5)
x.edges
// edges
x.pts
//pts
You could do something like: data = callfunction() -> return [edges, points]
data[0]
// edges
data[1]
//points
** Correction **
when keys are stored in a js hash it serializes the key before attempting to store the value
what would get stored is the serialized version of the array as the key, with the value being the array