Skip to content

Commit

Permalink
upd
Browse files Browse the repository at this point in the history
  • Loading branch information
mikima committed Jan 20, 2024
1 parent d514af6 commit 01fbbd9
Show file tree
Hide file tree
Showing 2 changed files with 63 additions and 58 deletions.
2 changes: 1 addition & 1 deletion firebase-setup.js
Original file line number Diff line number Diff line change
Expand Up @@ -50,4 +50,4 @@ async function firebaseSetup() {
};
}

firebaseSetup();
firebaseSetup();
119 changes: 62 additions & 57 deletions sketch.js
Original file line number Diff line number Diff line change
@@ -1,69 +1,74 @@
function setup() {
createCanvas(windowWidth, windowHeight);
}
const description = `Demonstration of Firebase Realtime Database\nin the context of a P5 sketch.\nClick and drag to make "pallozzi"!\n`;
function draw() {
background(220);
let nameInput;
let submitButton;
let button;
let score;
// firebase global variables
let db;
let database;

// circles is a JSON dictionary
if (circles) {
// you can iterate through properties of the dictionary
// for instance "-MpMVl3JPWaplJmTwxcx" is a property (or 'key')
for (key in circles) {
const c = circles[key];
push();
noStroke();
fill(color(c.fill.r, c.fill.g, c.fill.b));
ellipse(c.x, c.y, c.size);
pop();
}
// you can transform the dictionary into an array
// and interate through it, this is more convenient
const circlesArray = Object.values(circles);
push();
textAlign(CENTER);
text(circlesArray.length + " nice circles", width/2, height/2 + 50);
pop();
}
async function preload() {
// load firebase app module
const fb_app = "https://www.gstatic.com/firebasejs/9.14.0/firebase-app.js";
const { initializeApp } = await import(fb_app);

if (tempCircle) {
push();
noStroke();
fill(color(tempCircle.fill.r, tempCircle.fill.g, tempCircle.fill.b));
ellipse(tempCircle.x, tempCircle.y, tempCircle.size);
pop();
}
// loading firebase database module
const fb_database =
"https://www.gstatic.com/firebasejs/9.14.0/firebase-database.js";
db = await import(fb_database);

push();
textAlign(CENTER);
text(description, width / 2, height / 2);
pop();
// Your web app's Firebase configuration
// You can get this information from the firebase console
const firebaseConfig = {
apiKey: "AIzaSyAwsN7oQEiDugs-Lob4fhr7Uq68oJ0ZdTw",
authDomain: "p5-firebase-2022-01.firebaseapp.com",
databaseURL:
"https://p5-firebase-2022-01-default-rtdb.europe-west1.firebasedatabase.app",
projectId: "p5-firebase-2022-01",
storageBucket: "p5-firebase-2022-01.appspot.com",
messagingSenderId: "424585230807",
appId: "1:424585230807:web:85db369eb5c308cd2f7392",
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
// Initialize Database
database = db.getDatabase(app);
}

let tempCircle = null;
function mousePressed() {
tempCircle = {
x: mouseX,
y: mouseY,
size: 10,
fill: { r: random(255), g: random(255), b: random(255) },
};
// prevent default
return false;
function setup() {
createCanvas(400, 400);
score = 0;
createP("Click the button to get points");
button = createButton("click");
button.mousePressed(increaseScore);
nameInput = createInput("name");
submitButton = createButton("submit");
submitButton.mousePressed(submitScore);
}

function mouseDragged() {
const _distance = dist(tempCircle.x, tempCircle.y, mouseX, mouseY) * 2;
tempCircle.size = min(max(5, _distance), 75);
function draw() {
background(200);
textSize(100);
textAlign(CENTER);
text(score, width / 2, height / 2);
}

function mouseReleased() {
addCircle(tempCircle);
tempCircle = null;
// prevent default
return false;
function increaseScore() {
score++;
}

function windowResized() {
resizeCanvas(windowWidth, windowHeight);
function submitScore() {
let data = {
name: nameInput.value(),
score: score,
};

// link to node
const scoreRef = db.ref(database, "scores");
// create a new entry
const newScore = db.push(scoreRef);
// add the data to it
db.set(newScore, data);
// initialize score variable
score = 0;
}

0 comments on commit 01fbbd9

Please sign in to comment.