Make older processing code compatible with processing 3

p5.js Coding Questions
1

var colors;
var type;

function setup() {
createCanvas(windowWidth, windowHeight);

colors = [
color(255, 0, 0),
color(0, 255, 0),
color(0, 0, 255)
];

type = 0;
}

function draw() {
blendMode(BLEND);

if(type == 0) {
background(255);
blendMode(EXCLUSION);
} else {
background(0);
blendMode(SCREEN);
}
noFill();
strokeWeight(20);
for(var i = 0; i < 3; i++) {
stroke(colors[i]);
beginShape();
for(var w = -20; w < width + 20; w += 5) {
var h = height / 2;
h += 200 * sin(w * 0.03 + frameCount * 0.07 + i * TWO_PI / 3) * pow(abs(sin(w * 0.001 + frameCount * 0.02)), 5);
curveVertex(w, h);
}
endShape();
}

}

function mousePressed() {
if(type == 0) {
type = 1;
} else {
type = 0;
}
}

2

So I know that things like “function” need to be switched to void and etc. I was able to change everything except the colors to be compatible with Processing 3. If someone knows how to keep the colors alternating, I’d appreciate the help

3 

//color colors;
color[] colors = {
  color(255, 0, 0), 
  color(0, 255, 0), 
  color(0, 0, 255)
};

int type;

void setup() {
  size(600, 600);
  type = 0;
}

void draw() {
  blendMode(BLEND);

  if (type == 0) {
    background(255);
    blendMode(EXCLUSION);
  } else {
    background(0);
    blendMode(SCREEN);
  }
  noFill();
  strokeWeight(20);
  for (int i = 0; i < 3; i++) {
    stroke(colors[i]);
    beginShape();
    for (int w = -20; w < width + 20; w += 5) {
      int h = height / 2;
      h += 200 * sin(w * 0.03 + frameCount * 0.07 + i * TWO_PI / 3) * pow(abs(sin(w * 0.001 + frameCount * 0.02)), 5);
      curveVertex(w, h);
    }
    endShape();
  }
}

void mousePressed() {
  if (type == 0) {
    type = 1;
  } else {
    type = 0;
  }
}
1 Like
4

Thank you so much! It works perfectly:3

1 Like
5

Hello,

Links to:
Processing transition

:)