I have a project for computer science where I have to make a slot machine using p5 Play and I keep on getting this error:
SecurityError: Failed to read a named property 'add' from 'Window': Blocked a frame with origin "https://preview.p5js.org" from accessing a cross-origin frame.
heres my code:
//Load all images and create all of the groups/sprites
function preload() {
a = loadImage("Images/Seven.jpg");
b = loadImage("Images/bell.jpg");
c = loadImage("Images/grape.jpg");
d = loadImage("Images/onebar.jpg");
e = loadImage("Images/threebar.jpg");
f = loadImage("Images/twobar.jpg");
top = new Group();
bottom = new Group();
middle = new Group();
machine = new Sprite(0, 450, "static");
machine1 = new Sprite(0, 50);
machine.layer = 3;
machine1.layer = 3;
machine.visible = false;
machine1.visible = false;
machine1.collider = "none";
}
//Generate random sprites for the middle row
function ifListMid() {
let randomize = Math.floor(random() * 6 + 1);
if (randomize == 1) {
bell = new Sprite();
middle.add(bell);
bell.addImage("normal", b);
bell.scale = 0.03;
bell.layer = 2;
}
if (randomize == 2) {
grape = new Sprite();
middle.add(grape);
grape.addImage("normal", c);
grape.scale = 0.03;
grape.layer = 2;
}
if (randomize == 3) {
seven = new Sprite();
middle.add(seven);
seven.addImage("normal", a);
seven.scale = 0.03;
seven.layer = 2;
}
if (randomize == 4) {
onebar = new Sprite();
middle.add(onebar);
onebar.addImage("normal", d);
onebar.scale = 0.04;
onebar.layer = 2;
}
if (randomize == 5) {
twobar = new Sprite();
middle.add(twobar);
twobar.addImage("normal", f);
twobar.scale = 0.034;
twobar.layer = 2;
}
if (randomize == 6) {
threebar = new Sprite();
middle.add(threebar);
threebar.addImage("normal", e);
threebar.scale = 0.03;
threebar.layer = 2;
}
}
//Generate random sprites for the top side
function ifListTop() {
let randomize = Math.floor(random() * 6 + 1);
if (randomize == 1) {
bell = new Sprite();
top.add(bell);
bell.addImage("normal", b);
bell.scale = 0.03;
bell.layer = 2;
}
if (randomize == 2) {
grape = new Sprite();
top.add(grape);
grape.addImage("normal", c);
grape.scale = 0.03;
grape.layer = 2;
}
if (randomize == 3) {
seven = new Sprite();
top.add(seven);
seven.addImage("normal", a);
seven.scale = 0.03;
seven.layer = 2;
}
if (randomize == 4) {
onebar = new Sprite();
top.add(onebar);
onebar.addImage("normal", d);
onebar.scale = 0.04;
onebar.layer = 2;
}
if (randomize == 5) {
twobar = new Sprite();
top.add(twobar);
twobar.addImage("normal", f);
twobar.scale = 0.034;
twobar.layer = 2;
}
if (randomize == 6) {
threebar = new Sprite();
top.add(threebar);
threebar.addImage("normal", e);
threebar.scale = 0.03;
threebar.layer = 2;
}
}
//Generate random sprites for the bottom row
function ifListBottom() {
let randomize = Math.floor(random() * 6 + 1);
if (randomize == 1) {
bell = new Sprite();
bottom.add(bell);
bell.addImage("normal", b);
bell.scale = 0.03;
bell.layer = 2;
}
if (randomize == 2) {
grape = new Sprite();
bottom.add(grape);
grape.addImage("normal", c);
grape.scale = 0.03;
grape.layer = 2;
}
if (randomize == 3) {
seven = new Sprite();
bottom.add(seven);
seven.addImage("normal", a);
seven.scale = 0.03;
seven.layer = 2;
}
if (randomize == 4) {
onebar = new Sprite();
bottom.add(onebar);
onebar.addImage("normal", d);
onebar.scale = 0.04;
onebar.layer = 2;
}
if (randomize == 5) {
twobar = new Sprite();
bottom.add(twobar);
twobar.addImage("normal", f);
twobar.scale = 0.034;
twobar.layer = 2;
}
if (randomize == 6) {
threebar = new Sprite();
bottom.add(threebar);
threebar.addImage("normal", e);
threebar.scale = 0.03;
threebar.layer = 2;
}
}
function setup() {
//Create the canvas
new Canvas(500, 500);
//Set background color
background(255, 255, 255);
//Set frame rate
setFrameRate = 60;
machine.width = 1000;
machine.height = 150;
machine.color = "black";
machine1.width = 1000;
machine1.height = 150;
machine1.color = "black";
//Call all the function
for (let i = 0; i < 3; i++) {
ifListMid();
ifListTop();
ifListBottom();
}
//Set position to the middle row sprites
middle[0].x = 125;
middle[0].y = 250;
middle[1].x = 250;
middle[1].y = 250;
middle[2].x = 375;
middle[2].y = 250;
//Set position to the top sprites
top[0].x = 125;
top[0].y = 160;
top[1].x = 250;
top[1].y = 160;
top[2].x = 375;
top[2].y = 160;
//Set position for the bottom sprites
bottom[0].x = 125;
bottom[0].y = 340;
bottom[1].x = 250;
bottom[1].y = 340;
bottom[2].x = 375;
bottom[2].y = 340;
}
I have been trying to work on this for over an hour and I cannot figure this out, can anybody help me?
I tried finding information about it online but there was almost no solution to my problem.
I'm able to reproduce your problem with just one line of code. Stripping the problem down to the essence is important for debugging so you can hone in on exactly what is causing the problem:
top.add;This snippet helps show that it's unrelated to p5 or p5play.
Notice, if we change top to some other name, like top_, the problem goes away. The issue is that window.top is a preexisting window (global) property that doesn't allow property access.
Other than renaming the variable, you can (and should) always declare your variables with let variableName;. This ensures no clashes with the global window object, which has many common names on it that can't be touched. Try a setup like this for p5 projects:
let top;
let bottom;
let whateverOtherVarsYouNeed;
function setup() {
top = foo();
bottom = bar();
whateverOtherVarsYouNeed = whatever();
}
function draw() {
// use variables
}
So, two takeaways: