Hi there…
I did a sketch in processing and worked very well. Then i finally translate to p5js and uploaded to github.
In the very end, the sound do not come up in the browsers.
Here is the Processing code (now a bit better); and the p5js;
import processing.sound.*;
SoundFile soundfile;
PImage et;
PImage capa;
PImage img; //here
PImage txt;
PGraphics pg;
boolean overButton = false;
boolean backwards=false;
int timeLapse=400;
int timeTrack;
void setup() {
size(600, 600);
soundfile = new SoundFile(this, "fabX.mp3");
// Play the file in a loop
soundfile.loop();
/*
img = createImage(100, 100,0); // here
for (int i = 0; i < img.pixels.length; i++) { // here
float a = map(i, 0, img.pixels.length, 255, 0); //here
img.pixels[i] = color(0, 153, 204); //here
}
*/
pg = createGraphics(400, 400);
txt = loadImage("TextoTecFXpng.png");
et = loadImage("etFXpng.png"); // Load the image into the program
et.resize(258, 458);
//capa = loadImage("esfera1600.jpg");
}
void draw() {
background(0); // total canva black
// rect flahing/blinking
int m = millis();
fill(m % 200); // velocity of flashs ** not working good ** maybe my computer..
rect(25, 25, 555, 555, 30);
image(et, 130, 125 );
image(txt, 50, 40);
//image(capa,0, 0);
noFill();
stroke(255);
ellipse(mouseX, mouseY, 160, 160);
//pg.beginDraw();
//pg.background(0);
// pg.fill(255,255,255, 100);
// pg.noStroke();
pg.ellipse(mouseX-120, mouseY-160, 160, 160);
// pg.endDraw();
// Draw the offscreen buffer to the screen with image()
//image(pg, 220, 160);
// image(img, mouseX-img.width/2, mouseY-img.height/2); // here
//button link to web page
if (overButton == true) {
noStroke();
fill(74, 245, 243, 70);
} else {
noStroke();
noFill();
}
circle(260, 230, 30);
}
void mousePressed() {
if (overButton) {
link("https://www.youtube.com/playlist?list=PLLfjXK0h5ZJK01y34_ouFkU5wpFW5HyE7");
}
}
void mouseMoved() {
checkButtons();
}
void mouseDragged() {
checkButtons();
}
void checkButtons() {
if (mouseX > 200 && mouseX < 500 && mouseY > 200 && mouseY <300) {
overButton = true;
} else {
overButton = false;
}
}
here the p5js;
let et;
let img; //here
let txt;
let overButton = false;
let backwards=false;
var timeLapse=400;
let timeTrack;
let i;
let song;
let button;
function preload() {
txt = loadImage('TextoTecFXpng.png');
et = loadImage('etFXpng.png');
et.resize(258, 458);
song = loadSound("fabX.mp3");
}
function setup() {
createCanvas(windowWidth, windowHeight);
song.play();
song.loop();
// create the button
myButton = createButton("hit me");// create button, give it some text
x = width / 2 - myButton.width / 2;
y = height / 2 - myButton.height / 2;
// position the button
myButton.position(270, 230, 100);
// what is the callback for the button?
myButton.mousePressed(link);
//rect flash
img = createImage(200, 200); // here
for (int [i] = 0; i < img.pixels.length; i++) {
var a = map(i, 0, img.pixels.length, 255, 0); //here
img.pixels[i] = color(98, 204); //here
}
song.play();
song.loop();
song. setVolume(0.5)
//images
}
function draw() {
background(0); // total canva black
// rect flahing/blinking
let m = millis();
fill(m % 150);
rect(25, 25, 555, 555, 30);
image(et, 130, 125 );
image(txt, 50, 40);
image(img, mouseX-img.width/3, mouseY-img.height/3); // here
//button link to web page
circle(290, 230, 30)
}
function link() {
{
window.open('https://www.youtube.com/playlist?list=PLLfjXK0h5ZJK01y34_ouFkU5wpFW5HyE7');
}
}
function checkButtons() {
if (mouseX > 200 && mouseX < 300 && mouseY > 200 && mouseY <300) {
overButton = true;
} else {
overButton = false;
}
}
and this is the github adress;
https://vrtxart.github.io/9/