xxxxxxxxxx
let handpose;
let video;
let predictions = [];
let circles = [];
let gifImg;
let bgvideo;
let test;
let transparency = 200;
let sun;
let stars = [];
let text;
let hand;
function preload() {
// Load the GIF image
gifImg = loadImage('jelly.gif');
//bgvideo = createVideo('o.mp4')
test = loadImage('q.png')
sun = loadImage('sun.png');
text = loadImage('text.gif');
hand = loadImage('goodbye.png')
}
function setup() {
createCanvas(2120, 1180); // Change canvas size to 1920x1080
video = createCapture(VIDEO);
video.size(width, height);
//bgvideo.loop();
//bgvideo.hide();
for (let i = 0; i < 10; i++) {
stars.push(new Star());
}
handpose = ml5.handpose(video, modelReady);
handpose.on('predict', gotPredictions);
video.hide();
// Initialize a certain number of free-moving circles
for (let i = 0; i < 15; i++) {
circles.push(new MovingCircle());
}
}
function modelReady() {
console.log('Model is ready!');
}
function gotPredictions(results) {
predictions = results;
}
function mousePressed() {
if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {
let fs = fullscreen();
fullscreen(!fs);
}
}
function draw() {
// Move background and display video outside the hand detection loop
frameRate(25);
background(220);
translate(width, 0);
scale(-1, 1);
tint(255,255);
image(test,0, 0, width, height);
tint(255,200);
image(text,550, 700, 1000, 500);//text image
tint(255,120);
image(hand,50,50,100,100);
// Update positions of all free-moving jellies
for (let j = 0; j < circles.length; j++) {
// If hand is detected, adjust movement to follow the hand
if (predictions.length > 0) {
let hand = predictions[0].landmarks;
let indexFingerX = hand[8][0] * (width / 640); // Adjust x-coordinate for new canvas size
let indexFingerY = hand[8][1] * (height / 480); // Adjust y-coordinate for new canvas size
circles[j].update(indexFingerX-450, indexFingerY-300);
} else {
// If hand is not detected, move randomly
circles[j].update();
}
circles[j].display();
}
// Draw a sun circle at the index finger's position if hand is detected
if (predictions.length > 0) {
let hand = predictions[0].landmarks;
let indexFingerX = hand[8][0] * (width / 640); // Adjust x-coordinate for new canvas size
let indexFingerY = hand[8][1] * (height / 480); // Adjust y-coordinate for new canvas size
image(sun,indexFingerX-450, indexFingerY-300, 700, 700);
}
for (let star of stars) {
star.update();
star.display();
}
}
class MovingCircle {
constructor() {
this.x = random(width);
this.y = random(height);
this.speedX = random(-2, 2);
this.speedY = random(-2, 2);
this.size = random(250,550)
}
update(targetX, targetY) {
// Move towards the target position (hand's position) if present
if (targetX !== undefined && targetY !== undefined) {
let directionX = targetX - this.x;
let directionY = targetY - this.y;
let distance = dist(this.x, this.y, targetX, targetY);
if (distance > 1) {
this.x += (directionX / distance) * 2;
this.y += (directionY / distance) * 2;
}
} else {
// Move randomly if hand is not present
this.x += this.speedX;
this.y += this.speedY;
// Bounce off the edges of the canvas
if (this.x < 0 || this.x > width) {
this.speedX *= -1;
}
if (this.y < 0 || this.y > height) {
this.speedY *= -1;
}
}
}
display() {
// Draw the GIF image instead of the blue circle
tint(255,transparency);
image(gifImg, this.x, this.y, this.size,this.size);
}
}
class Star {
constructor() {
this.x = random(width);
this.y = random(height);
this.size = random(1, 5);
this.speedX = random(-5, 5); // Horizontal speed
this.speedY = random(-5, 5); // Vertical speed
this.opacity = random(0, 255);
this.twinkleSpeed = random(0.03, 0.08); // Twinkle speed
}
update() {
// Move the star smoothly
this.x += this.speedX;
this.y += this.speedY;
// Wrap around the canvas if the star goes out of bounds
this.x = (this.x + width) % width;
this.y = (this.y + height) % height;
// Twinkle effect
this.opacity = map(sin(frameCount * this.twinkleSpeed), -1, 1, 20, 100);
}
display() {
// Draw the blurred star
noStroke();
for (let i = 5; i > 0; i--) {
let blurOpacity = map(i, 0, 5, 0, this.opacity);
fill(173, 215, 230, blurOpacity);
ellipse(this.x, this.y, (this.size + i * 3), (this.size + i * 3));
}
// Draw the central bright part of the star
fill(255, 255, 255, this.opacity);
ellipse(this.x, this.y, this.size * 2, this.size * 2);
}
}