PImage body1;
int w = 400;    
int h = 200;

void setup() {    
  size(1000, 700, P3D);   
  body1 = loadImage("Basketball.png");    
}

void draw() {    
  background(200);   
  translate(width/2, height/2);   
  float x = map(mouseX, 0, width, -PI/2, PI/2);   
  rotateY(x);

  noFill();   
  box(w, h, w);

  pushMatrix();
  translate(-100, 15);
  scale(.25);    
  image(body1, 0, 0);    
  popMatrix();    
}

// Why does the rectangle have a green stroke color?

void setup() { size(480,420); background(220); }

void draw() { rect(100,200,100,100); // Expect this to have a black stroke color stroke(255,0,0); strokeWeight(3); stroke(0,0,255); ellipse(240,80, 115,115); stroke(0,255,0); line(5,5,400,310); }

Sorry for the huge block of code but I figure I would just include it all to provide full context. I'm currently trying to build a game that I found while browsing reddit's daily programming challenges (http://entibo.fr/lvlr/). I'm just laying down the ground work at the moment and I've hit a road block. This is my first time using the processing library (found it from the University of California, San Diego OOP in Java class) but this is not my first time using Java or Eclipse and so naturally that is the IDE that I am currently using. Also, this is my first time using ENUM classes...so if the one I'm using is useless I apologize in advance.

Anyway, my programming issue is that when I attempt to draw the border around a cell that is being moused over I instead draw borders around all the rectangles (cells) on screen. I have already put the logic in place for determining which rectangle needs the border drawn around it (I've tested this by my commented out println statement and it does print out the correct indexes of the moused over cell). I just need help figuring out how I should modify my cell class's display() method to accomplish this.

This image is an example of the program running and the mouse is not hovering over any of the cells.

Notice no borders are lit up? This is working as intended!

This image is an example of the program running and the mouse is touching one of the cells.

Notice how all the borders are lit up? This is not working as intended!

I only want 1 cell at any given time to become highlighted upon mouse roll over. For example if I mouse over the cell located in grid[1][2], then I would want the 3rd from the top "Orange" cell to be highlighted and nothing else.

Any help would be appreciated and again sorry for posting all my code, I just want to be as thorough as possible.

    function textClass(_x, _y) {
      colorMode(HSB,100);
      textAlign(CENTER);
      this.x = _x;
      this.y = _y;
      this.writeText = function(_content, _font, _size, _color) {
        this.content = _content;
        this.font = _font;
        this.size = _size;
        this.col = color(_color);
        textSize(this.size);
        fill (this.col);
        text (this.content, this.x, this.y);
      }
      this.writeTextBox = function(_content, _font, _size, _color, _x2, _y2) {
        this.content = _content;
        this.font = _font;
        this.size = _size;
        this.col = color(_color);
        this.x2 = _x2;
        this.y2 = _y2;
        textSize(this.size);
        fill (this.col);
        text (this.content, this.x, this.y, this.x2, this.y2);
      }
    }

And my objectClass with the stroke(255)-Problem.

function buttons(_bPosX, _bPosY, _bWidth2, _bHeight2, _bColor) {
  colorMode(HSB, 100);
  this.bPosX = _bPosX;
  this.bPosY = _bPosY;
  this.bWidth2 = _bWidth2;
  this.bHeight2 = _bHeight2;
  this.bColor = color(_bColor);
  //function to draw Rect Buttons
  this.drawButtonRect = function() {
    //bPosX = _bPosX;
    stroke(1);//HERE IS NO PROBLEM
    strokeWeight(1);
    fill(this.bColor);
    rect(this.bPosX, this.bPosY, this.bWidth2, this.bHeight2);
    noStroke();
  }

  //function to draw Ellipse Buttons
  this.drawButtonEllipse = function() {
    stroke(1);//HERE IS THE PROBLEM, JUST FOR ELLIPSE BUTTONS, if away no StrokeWeight to text, but also no stockeWeight to my ellipse...hmmm
    strokeWeight(1);
    fill(this.bColor);
    ellipseMode(CENTER);
    ellipse(this.bPosX, this.bPosY, this.bWidth2, this.bHeight2);
  }

  //function to update the Buttons
  this.updateButtonRect = function() {
    stroke(255); //DOES NOT MAKE ANY PROBLEM AT ALL
    strokeWeight(1);
    //colorMode(HSB, 100);
    this.bSelectColor = color('#9b8c8c');
    fill(this.bSelectColor);
    rect(this.bPosX, this.bPosY, this.bWidth2, this.bHeight2);
  }

  this.updateButtonEllipse = function() {
      stroke(255); //HERE IS THE PROBLEM, JUST FOR ELLIPSE BUTTONS
      strokeWeight(1);
      //colorMode(HSB, 100);
      this.bSelectColor = color('#939393');
      fill(this.bSelectColor);
      ellipseMode(CENTER);
      ellipse(this.bPosX, this.bPosY, this.bWidth2, this.bHeight2);
    }
    //
    //Checks if Mouse is Over Rectangular Button
  this.mouseOverRect = function() {
      if (touchX > this.bPosX && touchX < this.bPosX + this.bWidth2 && touchY > this.bPosY && touchY < this.bPosY + this.bHeight2) {
        return true;
      } else {
        return false;
      }
    }
    //Checks if Mouse is Over Rectangular Button
  this.mouseOverEllipse = function() {
    this.disX = this.bPosX - touchX;
    this.disY = this.bPosY - touchY;
    if (sqrt(sq(this.disX) + sq(this.disY)) < this.bWidth2 / 2) {
      return true;
    } else {
      return false;
    }
  }
}

Any Ideas where the Problem could lie?

//
/**
Rotor draws circle for random period of time, then moves
in a straight direction for a random period of time, beginning a 
new circle
*/
//

Rotor[] r;
float timer = 0;
int number = 0;
boolean freeze = true;

void setup() {
  //regular resolution
  //size(1280,720);
  //300 dpi
  size(5333,3000);

  noFill();
  frameRate(30);
  background(65,5,17);

  timeLimit();
  r = new Rotor[50];

  for(int i=0; i<r.length; i++){
    r[i] = new Rotor(random(width),random(height),random(200));
  }
}

void draw() {
  timer = timer + frameRate/1000;

  if(timer > timeLimit()){
    timer = 0;
    timeLimit();

    if(freeze == true){ 
      for(int i = 0; i < r.length; i++)
        r[i].drawNewRotor();
      freeze = false;
      //r.pointSpeed = r.pointSpeed * -1;
    }else{
      for(int i = 0; i < r.length; i++)
        r[i].calcTangent();

      freeze = true;
    }
  }

  if(!freeze){
    for(int i = 0; i < r.length; i++)
      r[i].drawRotor(); 
  }else{
    for(int i = 0; i < r.length; i++)
      r[i].holdSteady();
  }
}

float timeLimit(){
  float timeLimit = random(200); 
  return timeLimit;
}

void keyPressed(){
  if(key=='s') {
    String s = "screen_" + nf(number, 3) +".jpg";
    save(s);
    number++;
  } 
}



/*
assuming you are taking derivatives with respect to the theta: 
dx/d(theta)=-cos(theta) and dy/d(theta)= sin(theta)...
dx/d(theta) and dy/d(theta) 
just says "derivative of x (or y) with respect to (theta)" 
*/

class Rotor {

  color[] colors = new color[5];
  int thickness;
  float xPoint = random(width);
  float yPoint = random(height);
  float nXPoint;
  float nYPoint;
  float radius;
  float theta = 0;
  float centerX;
  float centerY;
  float yLine;
  float pointSpeed = 0.02;
  float deltaX;
  float deltaY;

  Rotor(float cX, float cY, float rad) {
    colors[0] = color(119,216,197);
    colors[1] = color(99,56,53);
    colors[2] = color(176,51,40);
    colors[3] = color(232,131,123);
    colors[4] = color(199,58,46);

    thickness = 2;

    noStroke();
    stroke(colors[int(random(colors.length))]);
    strokeWeight(thickness);

    centerX = cX;
    centerY = cY;
    radius = rad;
    theta = 0.0;
  } 

  void drawRotor() {
    theta = theta + pointSpeed;
    xPoint = centerX + cos(theta) * radius;
    yPoint = centerY + sin(theta) * radius;
    ellipse(xPoint, yPoint,thickness,thickness);
    //ellipse(centerX,centerY,5,5);//center point
  }

  void holdSteady() {
    xPoint = xPoint + deltaX/50;//speed /100
    yPoint = yPoint + deltaY/50;
    ellipse(xPoint,yPoint,thickness,thickness);
  }

  void calcTangent() {
    deltaX = radius * -sin(theta);
    deltaY = radius * cos(theta);
  }

  void drawNewRotor() {
    radius = random(200);

    centerX = xPoint + radius * cos(theta);
    centerY = yPoint + radius * sin(theta);

    theta = (theta + PI)%(2*PI);
  }
}

I figured I wanted to have a bitmap with an alpha of 50 per cent that brightens up when you go over it with your mouse. So I took the pointillism sketch and manipulated it a bit. But somehow I cannot get a color value using get() and all pixels turn out black. What am I missing here?

(I was using a picture of "Girl with a pearl earring" by Johannes Vermeer for this)

        PImage img;

        void setup()

        {

          img = loadImage("parel.jpg");

          size(182,262);

          tint (255,127);

          image (img,0,0);

        }


        void draw()

        { 

          color pix = img.get(mouseX, mouseY);

          fill(pix);

          point(mouseX, mouseY);

        }

I'm looking to draw the mesh of a sphere in p5js.

noFill() and stroke don't seem to work in WEBGL mode.. is that correct or am I missing something?

Seems we can only render solid meshes so far.

Thanks

Mike

playing around with lights and noticed lighting has no effect on stroke.

is there a way i can achieve it?

many thanks

void setup() {
  size(400, 400, P3D);
  smooth(8);
}

void draw() {
  background(0);
  fill(255);
  stroke(255, 255, 255, 255);
  pointLight(150, 102, 122, mouseX, 40, mouseY);
  translate(width/2, height/2, 0);
  sphere(100);
}

Any idea what I should be looking for in the code that might be causing this? I've tried removing blendMode but still nothing changes.

float timer;
void setup () {
  size (800, 600);
  frameRate(30);
}
void draw() {
  background(0);
  timer += 0.01;
  float a = map(sin(timer), -1, 1, 40, 360);

  float arc1 = map(sin(timer), -1, 1, 0, 360);
  float arc2 = map(cos(timer), -1, 1, 0, 360);
  strokeWeight(10);
  noFill();

  stroke(200, 0, 0, a);
  arc(width/2, height/2, 180, 180, radians(181), radians(arc1+180), OPEN);         ///// INNER RING /////
  stroke(0, 200, 0, a);
  arc(width/2, height/2, 300, 300, 0, radians(arc1), OPEN);                        ///// SECOND RING /////
  stroke(0, 0, 200, a);
  arc(width/2, height/2, 240, 240, radians(-arc1), 0, OPEN);                      //// MAIN RING //////
  stroke(200, 200, 0, a/2);
  arc(width/2, height/2, 360, 360, radians(-arc2+181), radians(180), OPEN);       //// OTHER RING /////
  stroke(0, 200, 200, a);
  fill(200, 0, 200, 60);
  arc(width/2, height/2, 360, 360, radians(-arc1+181), radians(180), PIE);      ///// OTHER RING //////
  fill(0);
  stroke(0);
  ellipse(width/2, height/2, 60, 60);        ////// INNERMOST CIRCLE /////
}

I'm creating a simple breakout game where in when a block is hit it moves out of the screen at a certain pace, and then disappears. I would like said block to be drawn on top of any block that is still stationary. It works only partially. For some reason the fill of the moving block is drawn on top of the fill of the stationary block, but the stroke of the stationary block shows through the moving block. Image here:

The moving blocks are drawn after the stationary blocks. The code for drawing a block looks like this:

    @ Override
    public void draw() {
        if (doomed) {
            x += velocity * cos(angle);
            y += velocity * sin(angle);
        }
        if (x < 0 || x > width || y < 0 || y > height) {
            dead = true;
        } else {
            strokeCap(SQUARE);
            fill(red, green, blue);
            stroke(0);
            rect(x, y, w, h);
            noStroke();
            fill(red + lowerColor, green + lowerColor, blue + lowerColor);
            triangle(x, y + blockHeight, x + blockWidth, y + blockHeight, x + blockWidth, y);
            fill(red + upperColor, green + upperColor, blue + upperColor);
            rect(x + bevel * cos(bevelAngle), y + bevel * sin(bevelAngle), blockWidth - 2 * bevel * cos(bevelAngle), blockHeight - 2 * bevel * sin(bevelAngle));
        }
    }

The main draw loop called by processing looks like this, where blockArray contain all the stationary blocks, and doomedBlockArray contains all the moving blocks:

@ Override
public void draw() {
    if (firstRun && frame != null) {                    // Lock frame size
        frame.setResizable(false);
        firstRun = false;
    }

    background(230);                                    // Clear frame

    if (blockArray.size() == 0) {
        levelUp();
    }

    blockIterator = blockArray.iterator();              // Draw stationary blocks
    while (blockIterator.hasNext()) {
        blockIterator.next().draw();
    }

    doomedBlockIterator = blockArrayOfDoom.iterator();  // Draw moving blocks
    while (doomedBlockIterator.hasNext()) {
        block = doomedBlockIterator.next();
        if (block.isDead()) {
            doomedBlockIterator.remove();               // Remove if block is outside screen
        } else {
            block.draw();
        }
    }

    drawableIterator = drawablesArray.iterator();       // Draw anything else
    while (drawableIterator.hasNext()) {
        drawableIterator.next().draw();
    }
}

As you can see, the "doomed" blocks are drawn after the regular blocks, and yet the stroke from the regular blocks overlap the doomed blocks. Is this normal, can it be avoided?

Any help much appreciated!

Edit:

Solved after changing from P3D to P2D renderer!

size(400, 400, P3D);
stroke(0, 255, 0);
rect(0, 0, 50, 50);

On most computers, this works just fine. But on some computers (my home computer, and a computer in a lab where I teach), the rectangle ends up with a blue border. Some specifics:

• On my home computer, it fails in Chrome, FireFox, and IE
• It works fine in Java mode
• It works fine if I use P2D rather than P3D, but I need to use P3D for what I want to write
• The 2 computers where this fails are running Windows 8.1, but it works fine on most Windows 8.1 computers I've tested

I actually discovered this issue in a larger program that was supposed to produce random pastel-colored butterflies. On my home computer, all butterflies are red.

How could such a simple program produce such unexpected results?