How to run this code in browser

cadavara

I probably need to use processing.js, but I couldn't get done. And I don't know wether I sucked or if it is just isn't the right way/not possible.

So let me know how to do this.

PImage img;
PImage newimg;

int radius = 300;
float alpha = 0;
float r = 0.5;
float seed = -0.6;
float segments = 24;
float part = segments/2;
float x, y;
float angle_steps;
float angle_deg;
int image = 0;

float scale;

void setup() {
  size(800, 600, P3D);
  smooth(6);
  textureMode(NORMAL);
  noFill();
  stroke(0); 
  //noStroke(); 

  img = loadImage("image1.jpg");
  radius = height/2;
}

void draw() {
  background(255);
  ellipse(width/2, height/2, 300, 300);
  hexShape(radius);
}

void hexShape(int _radius) {
  pushMatrix();
  translate(width/2, height/2);
  beginShape(TRIANGLE_FAN);  
  rotate(-PI/2);
  texture(img);
  vertex(0, 0, 0.5, 0.5); // center
  for (int i=0; i<segments+1; i++) {
    angle_steps = 360/segments;
    angle_deg = angle_steps * i;

    x = cos(radians(angle_deg)) * _radius;
    y = sin(radians(angle_deg)) * _radius;

    if (i%2 == 0) {
      vertex(x, y, .5 + r * cos(alpha + PI / part) + scale, .5 + r * sin(alpha + PI / part) + scale);
    } else {
      vertex(x, y, .5 + r * cos(alpha) + scale, .5 + r * sin(alpha) + scale);
    }
  }
  endShape();  
  popMatrix();

  alpha = 1.9*sin(seed);
  seed += 0.003;
}

void scaleTexture() {
  scale = map(mouseX, 0, width, 0, 1);
}

void mouseWheel(MouseEvent event) {
  int e = event.getCount(); //returns UP:-1 DOWN:1
  segments += (e*2)*-1;
  part = segments/2;
}

void mouseClicked() {
  if (mouseButton == LEFT) {
    image++;
    if (image > 2) image = 0;
  }
  if(mouseButton == RIGHT){
    image--;
    if(image < 0) image = 2;
  }
  switch(image) {
  case 0:
    img = loadImage("image1.jpg");
    break;

  case 1:
    img = loadImage("image2.jpg");
    break;

  case 2:
    img = loadImage("image3.jpg");
    break;
  }
}

GoToLoop

In order for a Java Mode sketch to be successfully transpiled to Pjs we need to stick to its API:
http://ProcessingJS.org/reference/

And there's no separate domain for variables, functions & classes in JS.
For example, you're overriding both image & alpha in your sketch above.
Therefore the functions assigned to those variables have simply vanished! :-SS

Another tip: avoiding loading any resources after setup() had finished.
Grab them once and store them in global variables. L-)

cadavara

Something like this? I don't know what to to with alpha. If I don't set it in a function, it will not animate.

PImage img, img1, img2, img3;

int radius = 300;
float seed = -0.6;
float alpha = 1.9*sin(seed);
float r = 0.5;
float segments = 24;
float part = segments/2;
float x, y;
float angle_steps;
float angle_deg;
int image = 0;

float scale;
int count = 6287;

void setup() {
  size(1980, 1080, P3D);
  //fullScreen(P3D);
  smooth(6);
  textureMode(NORMAL);
  noFill();
  stroke(0); 
  noStroke(); 

  img1 = loadImage("img1.jpg");
  img2 = loadImage("img2.jpg");
  img3 = loadImage("img3.jpg");

  img = img1;
  radius = height/2;
}

void draw() {
  background(255);
  hexShape(radius);
  createFrames();
  //println(segments);
}

void hexShape(int _radius) {
  pushMatrix();
  translate(width/2, height/2);
  beginShape(TRIANGLE_FAN);  
  rotate(-PI/2);
  texture(img);
  vertex(0, 0, 0.5, 0.5); // center
  for (int i=0; i<segments+1; i++) {
    angle_steps = 360/segments;
    angle_deg = angle_steps * i;

    x = cos(radians(angle_deg)) * _radius;
    y = sin(radians(angle_deg)) * _radius;

    if (i%2 == 0) {
      vertex(x, y, .5 + r * cos(alpha + PI / part) + scale, .5 + r * sin(alpha + PI / part) + scale);
    } else {
      vertex(x, y, .5 + r * cos(alpha) + scale, .5 + r * sin(alpha) + scale);
    }
  }
  endShape();  
  popMatrix();

  seed += 0.003;
}

void scaleTexture() {
  scale = map(mouseX, 0, width, 0, 1);
}

void mouseWheel(MouseEvent event) {
  int e = event.getCount(); //returns UP:-1 DOWN:1
  segments += (e*2)*-1;
  part = segments/2;
}

void mouseClicked() {
  if (mouseButton == LEFT) {
    image++;
    if (image > 2) image = 0;
  }
  if(mouseButton == RIGHT){
    image--;
    if(image < 0) image = 2;
  }
  switch(image) {
  case 0:
    img = img1;
    break;

  case 1:
    img = img2;
    break;

  case 2:
    img = img3;
    break;
  }
}

void createFrames() {
  if (frameCount<count) {
    if (frameCount%2 == 0) {
      saveFrame("img_frames/####.png");
      println(frameCount);
    }
  } else {
    exit();
  }
}

GoToLoop

float alpha = 1.9*sin(seed); & int image = 0;

Can't you realize you're replacing the original values of both alpha & image?
Variables alpha & image belong to Processing's API. 8-|

cadavara

oooho. No, sorry, I didn't.