Hello everyone,
A few tear back I made the mistake of writing my website in Flash Actionscript. Many of you are aware that Apple hasn’t supported it in years and soon FlashPlayer will be gone and no longer supported by windows.
I’m not selling anything. I’m a visual artist. This is my website while it last: cosmicgoo.com only viewable with adobeFlashPlayer.
I’ve found nothing to convert actionscript to javascript. So I’m new to P5.js and even newer to WEBGL, It’s a carousel website needing x,y,z axis. I’ll provide the code below, of where I’ve gotten but I’m stuck. It’s a simplified version of my website, but with no images. I’ll try to format it right as I’m not sure what"</>" means.
There are multiple image/thumbnails textured to a pane on a carousel. The goal is to make the carousel rotate on it’s y axis through the x movement of the mouse(done/or close enough to get my point across). Stuck here: Make each thumbnail clickable and respond to rollover mouse events at any point in the carousel. In actionscript you can define an object as a button.
I can provide the original actionscript if anyone is interested
</let rots;
let carousel;
let turn;
let vertPos;
let carouselRad;
let telemetry;
function setup() {
//createCanvas((displayWidth/2), (displayHeight/2), WEBGL);
createCanvas(windowWidth, windowHeight, WEBGL);
rots =0;
carouselRad = ((120 * 9) / PI)/2; //carousel size
carousel = new Carousel(width/2, height/2, 0 * -1, carouselRad, 9);
turn = 0.0;
vertPos = -25;
telemetry = createGraphics(200,200);
telemetry.background(50);
telemetry.textAlign(CENTER,CENTER);
telemetry.fill(255);
telemetry.textSize(25);
}
function draw() {
background(0);
translate(-width/2, -height/2, -width/2);
push();
translate(0,0);
noStroke();
telemetry.background(50);
telemetry.text(mouseX + ’ ’ + mouseY + ’ ’ +width + ’ ’ + height,100,100);
texture(telemetry);
plane(400,100);
pop();
carousel.show();
if (mouseY > carousel.pos.y-38 && mouseY < carousel.pos.y + 38) {
if (mouseX >= carousel.pos.x - carouselRad && mouseX <= carousel.pos.x-20) {
rots= rots - 2;
if (rots < 0) {
rots = 360;
}
}
if (mouseX <= carousel.pos.x + carouselRad && mouseX >= carousel.pos.x+20) {
rots=rots + 2;
if (rots >360) {
rots = 0;
}
}
}
}
function loadThumbs() {
for (let i = 0; i < imgsLink.length; i++) {
imgs[i]=loadImage(imgsLink[i]);
//imgs[i].size(100,100);
}
print(“THUMBS UP!”);
}
function windowResized() {
resizeCanvas(windowWidth, windowHeight);
}
class Carousel {
constructor(_cpX, _cpY, _cpZ, _rad, _num) {
this.pos = createVector(_cpX, _cpY, cpZ);
this.thumbnails = [];
this.dAngle = 0.0;
for (let i = 0; i < num; i++) {
this.dAngle += TWO_PI / num;
this.thumbnails[i]=new ThumbNails(this.dAngle, rad);
}
}
show() {
for (let i = 0; i < this.thumbnails.length; i++) {
this.thumbnails[i].show(i);
}
}
}class ThumbNails {
constructor (a, range) {
this.angle = a;
this.range = range;
}
show(tI) {
this.rads = this.angle + turn ;
this.yy = this.range * sin(this.rads);
this.xx = this.range * cos(this.rads);
this.loc = createVector(this.xx, this.yy);
push();
translate(carousel.pos.x, carousel.pos.y, carousel.pos.z);
rotateY(radians(rots));
stroke(4);
translate(this.loc.x, vertPos, this.loc.y);
push();
rotateY(-this.rads+HALF_PI);
fill(150);
plane(110,76);
pop();
pop();
}
}
//index.html
