How can i do?

import controlP5.*;

ControlP5 cp5;
import peasy.*;

ArrayList<Sphere>s;

PGraphics canvas;

PGraphics brightPass;
PGraphics horizontalBlurPass;
PGraphics verticalBlurPass;

PShader bloomFilter;
PShader blurFilter;
PeasyCam cam;
float angle = 0;

final int surfaceWidth = 250;
final int surfaceHeight = 250;

float luminanceFilter = 0.02;
float blurSize = 100;
float sigma = 200;

void setup()
{
  cam = new PeasyCam(this, 1400);
  size(1000, 1000, P3D);

  s = new ArrayList<Sphere>();

  canvas = createGraphics(width, height, P3D);

  brightPass = createGraphics(width, height, P2D);
  brightPass.noSmooth();

  horizontalBlurPass = createGraphics(width, height, P2D);
  horizontalBlurPass.noSmooth(); 

  verticalBlurPass = createGraphics(width, height, P2D);
  verticalBlurPass.noSmooth(); 

  bloomFilter = loadShader("bloomFrag.glsl");
  blurFilter = loadShader("blurFrag.glsl");
}

void draw()
{
  background(0);
  bloomFilter.set("brightPassThreshold", luminanceFilter);
  angle += 0.05;

  for(Sphere s: s){
  blurFilter.set("blurSize", s.p);
  }

  blurFilter.set("sigma", sigma); 

  canvas.beginDraw();
  render(canvas);
  canvas.endDraw();

  // bright pass
  brightPass.beginDraw();
  brightPass.shader(bloomFilter);
  brightPass.image(canvas, 0, 0);
  brightPass.endDraw();

  // blur horizontal pass
  horizontalBlurPass.beginDraw();
  blurFilter.set("horizontalPass", 1);
  horizontalBlurPass.shader(blurFilter);
  horizontalBlurPass.image(brightPass, 0, 0);
  horizontalBlurPass.endDraw();

  // blur vertical pass
  verticalBlurPass.beginDraw();
  blurFilter.set("horizontalPass", 0);
  verticalBlurPass.shader(blurFilter);
  verticalBlurPass.image(horizontalBlurPass, 0, 0);
  verticalBlurPass.endDraw();


  cam.beginHUD();
  blendMode(BLEND);
  blendMode(SCREEN);
  image(brightPass, 0, 0);
  image(verticalBlurPass, 0, 0);

  cam.endHUD();

println(frameRate);
}

void render(PGraphics pg)
{
  cam.getState().apply(pg);

  pg.background(0, 50);

  canvas.pushMatrix();
  canvas.translate(width/2, height/2);
  for(Sphere s: s){
  s.display();

  }
  canvas.popMatrix();


}

void mousePressed() {
  s.add(new Sphere(random(-width/2, width/2), random(-height/2, height/2), random(1000)));
}


class Sphere {

  float p;
  float w;
  float h;

  Sphere(float _w, float _h, float _p) {
  p = _p;
  w = _w;
  h = _h;
  }

  void display() {
    canvas.pushMatrix();
    canvas.translate(w, h);
    noFill();
    canvas.sphere(100);

    canvas.popMatrix();
  }
}

I'm trying to fake a Depth of Field effect in a 3D scene. More specifically, I would like to use a z-buffer (depth buffering) to adjust the level of blur of a an object based on its distance from the camera. While searching the forum I found the following vertex and fragment shaders provided by @Poersch (from this topic ).

vert.glsl

uniform mat4 transform;

attribute vec4 vertex;
attribute vec4 color;

varying vec4 vertColor;

void main() {
    gl_Position = transform * vertex;
    vertColor = color;
}

frag.glsl

#ifdef GL_ES
precision mediump float;
precision mediump int;
#endif

uniform vec4 nearColor = vec4(1.0, 1.0, 1.0, 1.0);
uniform vec4 farColor = vec4(0.0, 0.0, 0.0, 1.0);
uniform float near = 0.0;
uniform float far = 100.0;

varying vec4 vertColor;

void main() {
    gl_FragColor = mix(nearColor, farColor, smoothstep(near, far, gl_FragCoord.z / gl_FragCoord.w));
}

You can see the shaders in action with this sketch example:

sketch.pde

PShader depthShader;
float angle = 0.0;


void setup(){

    // Set screen size and renderer
    size(600, 480, P3D);
    noStroke();

    // Load shader
    depthShader = loadShader("frag.glsl", "vert.glsl");
    //depthShader.set("near", 40.0); // Standard: 0.0
    //depthShader.set("far", 60.0); // Standard: 100.0
    //depthShader.set("nearColor", 1.0, 0.0, 0.0, 1.0); // Standard: white
    //depthShader.set("farColor", 0.0, 0.0, 1.0, 1.0); // Standard: black

}


void draw(){

    // Fill background and set camera
    background(#000000);
    camera(0.0, 0.0, 50.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0);

    // Bind shader
    shader(depthShader);

    // Calculate angle
    angle += 0.01;

    // Render "sky"-cube
    pushMatrix();
    rotate(angle, 0.0, 1.0, 0.0);
    box(100.0);
    popMatrix();

    // Render cubes
    pushMatrix();
    translate(-30.0, 20.0, -50.0);
    rotate(angle, 1.0, 1.0, 1.0);
    box(25.0);
    popMatrix();
    pushMatrix();
    translate(30.0, -20.0, -50.0);
    rotate(angle, 1.0, 1.0, 1.0);
    box(25.0);
    popMatrix();

    // Render spheres
    pushMatrix();
    translate(-30.0, -20.0, -50.0);
    rotate(angle, 1.0, 1.0, 1.0);
    sphere(20.0);
    popMatrix();
    pushMatrix();
    translate(30.0, 20.0, -50.0);
    rotate(angle, 1.0, 1.0, 1.0);
    sphere(20.0);
    popMatrix();

}

Here, the z-buffer is used to change the color of an object: the closer the lighter, the farther, the darker.

QUESTION

• How can I use the same z-buffer to change the blur level of an object ?

Ideally I would like to use the Gaussian blur shader from the PostFX library:

#ifdef GL_ES
precision mediump float;
precision mediump int;
#endif


#define PROCESSING_TEXTURE_SHADER

uniform sampler2D texture;

// The inverse of the texture dimensions along X and Y
uniform vec2 texOffset;

varying vec4 vertColor;
varying vec4 vertTexCoord;


uniform int blurSize;       
uniform int horizontalPass; // 0 or 1 to indicate vertical or horizontal pass
uniform float sigma;        // The sigma value for the gaussian function: higher value means more blur
                            // A good value for 9x9 is around 3 to 5
                            // A good value for 7x7 is around 2.5 to 4
                            // A good value for 5x5 is around 2 to 3.5
                            // ... play around with this based on what you need <span class="Emoticon Emoticon1"><span>:)</span></span>

const float pi = 3.14159265;

void main() {  
  float numBlurPixelsPerSide = float(blurSize / 2); 

  vec2 blurMultiplyVec = 0 < horizontalPass ? vec2(1.0, 0.0) : vec2(0.0, 1.0);

  // Incremental Gaussian Coefficent Calculation (See GPU Gems 3 pp. 877 - 889)
  vec3 incrementalGaussian;
  incrementalGaussian.x = 1.0 / (sqrt(2.0 * pi) * sigma);
  incrementalGaussian.y = exp(-0.5 / (sigma * sigma));
  incrementalGaussian.z = incrementalGaussian.y * incrementalGaussian.y;

  vec4 avgValue = vec4(0.0, 0.0, 0.0, 0.0);
  float coefficientSum = 0.0;

  // Take the central sample first...
  avgValue += texture2D(texture, vertTexCoord.st) * incrementalGaussian.x;
  coefficientSum += incrementalGaussian.x;
  incrementalGaussian.xy *= incrementalGaussian.yz;

  // Go through the remaining 8 vertical samples (4 on each side of the center)
  for (float i = 1.0; i <= numBlurPixelsPerSide; i++) { 
    avgValue += texture2D(texture, vertTexCoord.st - i * texOffset * 
                          blurMultiplyVec) * incrementalGaussian.x;         
    avgValue += texture2D(texture, vertTexCoord.st + i * texOffset * 
                          blurMultiplyVec) * incrementalGaussian.x;         
    coefficientSum += 2.0 * incrementalGaussian.x;
    incrementalGaussian.xy *= incrementalGaussian.yz;
  }

  gl_FragColor = (avgValue / coefficientSum);
}

Unfortunately I can't figure out how to make the two (z-buffer and blur fragment shader) work together. Any hint would be greatly appreciated !

The next sketch makes this:

A 3D grid with spheres, to be rotated with the use of peasy.

I would, however, replace the spheres by ellipses, to make a better PDF output. But, of course, when I replace a sphere with an ellipse, the ellipse would rotate and loses the shape of a perfect circle.

What would it take to maintain the orientation of the ellipse while rotating the cube?

Thanks in advance for helping me out :-)

code:

import processing.pdf.*;
import peasy.*;
import peasy.org.apache.commons.math.*;
import peasy.org.apache.commons.math.geometry.*;

PeasyCam cam; 

int afstand = 70;

boolean record;

void setup() {
  size(600, 600, P3D);
  cam = new PeasyCam(this, 10000);
  noStroke();
  fill(0);
  ortho(-width, width, -height, height);
}

void draw() {
  background(#ffffff);

  if (record) {
    beginRaw(PDF, "cube.pdf");
  }

  for (int i=0; i<8; i++) {
    for (int j=0; j<8; j++) {
      for (int k=0; k<8; k++) {
        pushMatrix();
        translate((i-3)*afstand, (j-3)*afstand, (k-3)*afstand);
        sphere(10);
        popMatrix();
      }
    }
  }

  if (record) {
    endRaw();
    record = false;
  }
}

void keyPressed() {
  record = true;
}

int n; float[][] points; float lat, lon, r, t; PVector coord;

void setup() { size(640, 480, P3D); coord = new PVector();

n = 100; // number of points r = 200; // sphere's radius t = 0; // rotation accumulator

// populate globe w/ random GPS coordinates points = new float[n][2]; for (int i=0; i<points.length; i++) { points[i][0] = random(-90, 90); // latitude points[i][1] = random(-180, 180); // longitude } }

void draw() { background(0); translate(width/2, height/2); //this centers the sphere rotateY(12 * radians(t += (TWO_PI / 365))); //change this to change the speed of rotation

// earth fill(0,125,0); stroke(0,127,255); strokeWeight(1); sphere(r);

// points fill(255,0,0); stroke(255,0,0); strokeWeight(10);

for (int i=1; i<points.length; i++) { // wgs84 -> cartesian coordinate conversion lat = radians(points[i][0]); lon = radians(points[i][1]); coord.x = r * cos(lat) * cos(lon); coord.y = r * cos(lat) * sin(lon); coord.z = r * sin(lat); point(coord.x, coord.y, coord.z); } }

var backgroundie;
var suntext;
//var astertext;
var earthtext;
var data;
var ang;
var rad;
var zoom = 1;
var nea;
var asteroids= [];
function preload(){
    nea = loadStrings('nea.csv');
    backgroundie = loadImage('stars.jpg');
    suntext = loadImage('suntext.jpg');
    earthtext = loadImage('earth.jpg');
    //astertext = loadImage('aster.jpg');
}
function setup(data){
    cursor(CROSS);
    createCanvas(innerWidth,innerHeight, WEBGL);
    translate(width/2,height/2);
    //imageMode(CORNER);
    //image(backgroundie,((innerWidth/2)*-1),((innerHeight/2)*-1),innerWidth,innerHeight);
    for(var i = 0; i < nea.length; i++){
        var data = nea[i].split(',');
        var name = data[0];
        var type = data[1];
        var sma = data[2];
        var e = data[3];
        var value = data[4];
        var profit = data[5];
        var accel = data[6];
        var moid = data[7];
        var group = data[8];
        asteroids.push(new Asteroid(name,type,sma,e,value,profit,accel,moid,group));
        console.log("for loop");
    }
}
function draw(){
    background(12);
    push();
    texture(suntext);
    rotateZ(frameCount * 0.01);
    sphere(30);
    texture(earthtext);
    translate(0,300,0);
    sphere(10);
    translate(0,-300,0);
    field();
    console.log("done");
    pop();
}
function field(){
    for(var i=1; i<500; i++){
        asteroids[i].display(); 
    }
}
function Asteroid(name,type,sma,e,value,profit,accel,moid,group){
    this.name=name;
    this.type=type;
    this.sma=sma;
    this.e=e;
    this.value=value;
    this.profit=profit;
    this.accel=accel;
    this.moid=moid;
    this.group=group;
    this.display=function(){
        push();
        ambientMaterial(41,41,41,100);
        //console.log("Function Processed");
        translate((random(30,250)),(random(30,250)),0);
        sphere(1);
        //console.log("Sphere Created");
        pop();   
    }
}

TLDR: When the sphere is drawn, it has black bordered white triangles. How can I make it 100% of my color?

 PImage background;
 PImage globe;

void setup() {
  size (1025,576,P3D);
  background = loadImage("luarangkasa.jpg");
  globe = loadImage("bumi.jpg");
}

void draw()  {
  background(background);
  pushMatrix();
  translate(500,300);
  lights();
  rotateY(radians(HALF_PI* frameCount));
  sphere(150);
  texture(globe);
  popMatrix();
}

I am trying to be able to click on a sphere in a 3D sketch with the mouse to select a sphere.

Since I use rotate and translate when placing the sphere, I wanted to use modelX,modelY to get the model position. But to have a match with the mouse I need ScreenX,ScreenY. Or so I am guessing.

Not sure how to handle this though:

this is part of class that in turn is stored in ArrayList to hold all the spheres:

    pushMatrix(); 
      translate(x, y, z); 

      fill(col); 
      noStroke(); 

      if (showBox||true) {     
        //box(55);
        //ellipse(0, 0, 7, 7);
        sphere(7);

        // the sphere / box was drawn at (0, 0, 0), store that location
        float x1 = modelX(0, 0, 0); // this takes care of translate and rotate 
        float y1 = modelY(0, 0, 0);
        float z1 = modelZ(0, 0, 0);

        scX = screenX(x1, y1, z1); // this takes care of the projection into 2D space for the mouse
        scY = screenX(x1, y1, z1);
      }
      popMatrix(); 

I now want to match scX and scY with mouseX and mouseY:

void mousePressed() {

  PVectorInt result = new PVectorInt(0, 0, 0);

  for (int i = 0; i < boxes.length; i++) {
    for (int j = 0; j < boxes[i].length; j++) {
      for (int k = 0; k < boxes[i][j].length; k++) {

        if (dist(mouseX, mouseY, boxes[i][j][k].scX, boxes[i][j][k].scY) < 40) {
          result = new PVectorInt( i, j, k); 
          listShape.add ( new  PVectorInt( i, j, k)); 
          println(listShape.size());
          return;
        }
      }
    }
  }
}

but it doesn't work....

please tell me how I handle modelX and screenX

thank you...!

Chrisir

1. Start with flexible three-dimensional sphere (sphere 0).

2. This sphere has the property that it forms a layer (layer 1) of non-overlapping flexible spheres to cover its surface. These spheres are of the same size as sphere 0. You can fit 12 non-overlapping spheres around a central sphere of the same size, but there's not quite enough room to fit a 13th sphere. So, at this point, the 13th sphere will be fit in, it and its immediate neighbors will be compressed against each other.

3. After the layer 1 spheres form, two things happen:

   A. Because the compressed spheres are trying to assume their natural spherical shape, the 13th sphere and its neighbors will push out against each other and cause these spheres to move away from each other and as they move interact with other spheres.

   B. The surfaces of the layer 1 spheres that aren't already covered by other spheres will then cause a new layer (layer 2) of non-overlapping flexible spheres to cover those surfaces. This process continues ad infinitum forming ever more layers of flexible spheres. Any compressed spheres in layer 2 and in the succeeding layers will also push out against each other and cause the spheres to move away.

4. As the spheres from step 3A move away from each other, their surfaces become uncovered. As soon as this happens, those surfaces of the moving spheres create new flexible spheres to cover their surfaces.

5. Steps 3 and 4 continue ad infinitum.

   I'd like to simulate this process and see how the spheres move and interact. I've been trying to learn Houdini to model this but I'm not sure if it will be able to handle this problem. Can the Processing language handle this simulation? Or, would sticking with Houdini be better? Approximately how long might it take for a novice to learn Processing to make this simulation? I've got a small amount of experience with Houdini and Python. Is it possible to hire people to make custom simulations like this one?

   Any advice you might be able to provide would be greatly appreciated. Thank you in advance! Roger

void setup() {
  size(480, 480, P3D);
  colorMode(HSB, 6.0, 1.0, 1.0, 1.0);
  noFill();
}

void draw()
{ // For tweaking
  translate(width/2, height/2);  
  background(0);
  stroke(0.0, 0.4, 1.0, 0.5);
  rotateX(-0.1);
  rotateY(0.01*millis()/100);
  strokeWeight(5);
  sphereDetail(4);sphere(100);
}

Here's what i've got so far:

Ball[] balls;
int numBalls = 0;
Ball b;
boolean isPressed = false;

void setup() {
  size (800, 800, P3D);
  smooth();
  //camera(width/2.0, height/2.0, (height/2.0) / tan(PI*30.0 / 180.0), width/2.0, height/2.0, 0, 0, 1, 0);
  background (0);
  balls = new Ball[300];
}

void draw (){
  noStroke();
  fill (0);
  rect(0, 0, width, height);
  if (mousePressed){

    //println(isPressed, numBalls);
    if(isPressed == false && numBalls < 300){
      println("cria bola");
      b = new Ball(mouseX, mouseY, 200.0);
      balls[numBalls] = b;
      numBalls++;
      isPressed = true;
    }

  }else{
   isPressed = false; 
  }
  println("NUMBALLS:", numBalls);
  for( int i = 0; i<numBalls; i++){
    //println(">", i,  balls[i]);
     balls[i].update();
  }

 for( int i = 0; i<numBalls; i++){
     balls[i].draw();
  }


}


public class Ball {

  PVector location;
  PVector velocity;
  PVector acceleration;
  PVector gravity;
  PVector lance;
  float friction ;
  int depth;


  Ball(float x, float y, float z) {

    location = new PVector (x, y, z);
    lance = new PVector (0, -20, -15);
    velocity = new PVector(0, 0, 0);
    //println("created:", location.x, location.y);
  }
  void update(){
    //println(location.x,location.y,location.z, this);
    velocity.add(lance);
    lance = new PVector(0, 0, 0);

    if ((location.z < 10)) {
    friction = 0.76;
    gravity = new PVector(0, 0, 0);
    } else {
    friction = 1.0;
    gravity = new PVector(0, 0.98, 0);
    }


    depth = 800;
    smooth();
    //gravity = new PVector(0, 0.98, 0);
    //location = new PVector(width/2, height/2, -3000);
    //velocity = new PVector(0, 10, -20);
    //lance = new PVector(0, 0, 0);
    //friction = 1.0; //0.98;  

    velocity.add(gravity);
    velocity.mult(friction);
    location.add(velocity);

  }
  void draw(){
    pushMatrix();
    //println("draw", this);
    noStroke();
    fill(255);
    lights();
    translate(location.x, location.y, location.z);
    sphere(35);
    popMatrix();
  }
}

(I' want to make something like this picture, by making random forces in the lances. )

Thank you so much

thanks

class Ball {

PVector location;
PVector velocity;
PVector acceleration;
PVector gravity;
PVector lance;
float friction ;
int depth;

  Ball(){
  depth = 3000;
  smooth();
  gravity = new PVector(0, 0.98, 0);
  location = new PVector(width/2, height/2, -4000);
  velocity = new PVector(0, 10, -30);
  lance = new PVector(0, 0, 0);
  friction = 1.0; //0.98;
  }


  void update(){

  velocity.add(lance);
  lance = new PVector(0, 0, 0);
  velocity.add(gravity);
  velocity.mult(friction);
  location.add(velocity);
  }

  void display(){

  noStroke();
  fill(255);
  lights();
  translate(location.x, location.y, location.z);
  sphere(35);



   if ((location.z < 40)) {
    friction = 0.76;
    gravity = new PVector(0, 0, 0);
  } else {
    friction = 1.0;
    gravity = new PVector(0, 0.98, 0);
  }

}
}



Ball b;


void setup(){

  size(800, 800, P3D);
  b = new Ball();

}


void draw(){
  background(0);
  noStroke();
  fill(0);
  rect(0, 0, width, height);

 if (mousePressed) {
    location = new PVector(mouseX, mouseY, 300);
    lance = new PVector (0, -20, -17);
    velocity = new PVector(0, 0, 0);
  }

}

PVector location;
PVector velocity;
PVector acceleration;
PVector gravity;
PVector lance;
float friction ;
int depth;

void setup() {
  size(800, 800, P3D);
  depth = 800;
  smooth();
  background(0);
  camera(width/2.0, height/2.0, (height/2.0) / tan(PI*30.0 / 180.0), width/2.0, height/2.0, 0, 0, 1, 0);
  gravity = new PVector(0, 0.98, 0);
  location = new PVector(width/2, height/2, -3000);
  velocity = new PVector(0, 20, -20);
  lance = new PVector(0, 0, 0);
  friction = 1.0; //0.98;
}


void draw() { 
  noStroke();
  fill(0);
  rect(0, 0, width, height);

  if (mousePressed) {
  location = new PVector(mouseX, mouseY, 200);
  lance = new PVector (0, -20, -9);
  velocity = new PVector(0, 0, 0);
}

  velocity.add(lance);
  lance = new PVector(0, 0, 0);

  if ((location.z < 30)) {
  friction = 0.76;
  gravity = new PVector(0, 0, 0);
  } else {
  friction = 1.0;
  gravity = new PVector(0, 0.98, 0);
  }
  velocity.add(gravity);
  velocity.mult(friction);
  location.add(velocity);

  println(location.z);

  noStroke();
  fill(255);
  lights();
  translate(location.x, location.y, location.z);
  sphere(35);
}

The idea is to have something like this:

Thanks in advanced

I'm getting foiled by P3D and translating/rotating and how they work with camera(), but I'm learning a bit about how they work. So far I've learned that calling camera() with the specified values AFTER using translate/rotate earlier in the program causes undesirable results, I'm guessing because once compiled it is run first as actual translate/rotate. This can get messy when trying to take snapshots of a 3D scene. I've since started looking into beginCamera() and endCamera(), and boy are those interesting. One thing that I've learned about the camera using beginCamera() and endCamera() is that changes to the camera (matrix?) are ADDED instead of set. This is fine, but I'm still finding that the changes to the camera aren't happening when the changes are called. I've created this little sketch to try and showcase my headache, comment in and out each box(150) to see different results:

void setup(){
  size(500,500,P3D);
}
void draw(){
  background(0);
  stroke(150);
  noFill();

  sphere(60);
  line(0,0,0,0,-100,0);

  //box(150);          //Enable/disable these one by one

  beginCamera();
  camera();
  translate(width/2,height/2);
  endCamera();

  box(150);          //Enable/disable these one by one

  beginCamera();
  rotateX(radians(mouseX));
  rotateY(radians(45));
  endCamera();

  //box(150);          //Enable/disable these one by one
  box(20);
  line(0,0,0,0,-100,0);
}

I'm wondering if anyone has a better explanation (through code examples preferably) regarding rotating and translating within a 3D space, and how the camera function alters the prior translates and rotates. I have some experience with using push/popMatrix() and translate/rotate in 2D land, but I'm not sure how push/popMatrix() affect the camera matrix, and finally how this all plays with the main window pixels.

Finally, I will talk briefly about what I'm actually trying to do. I'm using processing to create a 3D robot simulation environment (for line following algorithm testing) and I would like this sketch to output a 2D image of the robot's perspective. The problem I am running into is when I call translate/rotate to move about the scene and place the robot/floor etc, I still have to call camera() with the appropriate values given to me by the position of the robot to look at the world from the perspective of the robot. I was having lots of trouble doing it this way when I realized that camera() stuff must be done first before moving about and drawing. The way that I was trying to grab the 2D image was by reorienting the camera to the desired position, grabbing the window pixels and giving them to a PImage, then reorienting the camera to a top-down perspective. The problem with this was the the Image only showed the final position of the camera, not any of the intermediary steps. Here's the actual sketch that I'm working on, comment in/out the image at the end of main to see what the current image output would be (use arrow keys to drive around)(I attached TestCourseLine.png I think):

//  Simulation environment for testing line following

int windowWidth = 1000;
int windowHeight = 700;

PImage course;
PImage robotCam;
PImage roomCam;
int robotCamWidth = 600;
int robotCamHeight = 400;
int window[][];
int robotCamArray[][];

//Camera (independent of translations)
float cameraX = 500;
float cameraY = 350;
float cameraZ = 606;
float cameraCenterX = 500;
float cameraCenterY = 350;
float cameraCenterZ = 0;
float targetDistance = 0;

int robotStep = 5;
float robotTurn = .1;

//Robot Position/orientation relative to center origin
float robotX = -170;
float robotY = 290;
float robotZ = 25;
float robotRotZ = 4.7;

//RobotCam position/orientation relative to robot
int robotCamX = 20;
int robotCamY = 0;
int robotCamZ = 30;
float robotCamRotX = 0;
float robotCamRotZ = 0;
float robotCamRotY = 0.4;

boolean adjustRobotCam = false;
boolean moveRobot = true;
boolean adjustWindowCam = false;

boolean chaseCam = false;

void setup(){

  size(windowWidth,windowHeight,P3D);

  frameRate(10);

  window = new int[windowWidth][windowHeight];
  robotCamArray = new int[robotCamWidth][robotCamHeight];

  course = loadImage("TestCourseLine.png");

  robotCam = createImage(robotCamWidth,robotCamHeight, RGB);

}
void draw(){

  pushMatrix();
 //Move the window camera to the robot's camera (Must be done before other translations/rotates)
  cameraX = cos(robotCamRotZ+robotRotZ)*0+(robotX+width/2);
  cameraY = sin(robotCamRotZ+robotRotZ)*0+(robotY+height/2);
  cameraZ = robotCamZ+robotZ;
  targetDistance = (robotZ+robotCamZ)/sin(robotCamRotY);
  cameraCenterX = cos(robotCamRotZ+robotRotZ)*targetDistance+(robotX+width/2);
  cameraCenterY = sin(robotCamRotZ+robotRotZ)*targetDistance+(robotY+height/2);
  camera(cameraX, cameraY, cameraZ, cameraCenterX, cameraCenterY, cameraCenterZ, 0,0,-1);



  background(0);

  fill(100);
  stroke(200);
  noFill();

  pushMatrix();
  //Center origin to scene
  translate(width/2,height/2);

  box(500);

  //Create Floor
  beginShape();
  texture(course);
  vertex(-250,-250,0,0,0);
  vertex(250,-250,0,500,0);
  vertex(250,250,0,500,500);
  vertex(-250,250,0,0,500);
  endShape(CLOSE);

  //Draw Robot and camera
  pushMatrix();
  translate(robotX, robotY, robotZ);
  rotateZ(robotRotZ);
  box(50);
  //line(0,0,0,100,0,0);
  translate(robotCamX,robotCamY,robotCamZ);
  rotateX(robotCamRotX);
  rotateZ(robotCamRotZ);
  rotateY(robotCamRotY);
  fill(100);
  box(20);
  line(0,0,0,30,0,0);
  popMatrix();

  //Load the pixels of the last camera perspective and the new image
  loadPixels();
  robotCam.loadPixels();

  //Load the window pixels into an array for easy access
  for (int i = 0; i < pixels.length; i++){
    window[i-((i/windowWidth)*windowWidth)][i/windowWidth] = int(brightness(pixels[i]));
  }

  //Give the new image the pixel data from the last camera perspective
  for (int y = 0; y < robotCamHeight; y++){
    for (int x = 0; x < robotCamWidth; x++){
      robotCamArray[x][y] = window[x+(windowWidth-robotCamWidth)/2][y+(windowHeight-robotCamHeight)];
    }
  }

  //Load the robotCamArray data into robotCam pixels
  for (int i = 0; i < robotCam.pixels.length; i++){
    robotCam.pixels[i] = color(robotCamArray[i-((i/robotCamWidth)*robotCamWidth)][i/robotCamWidth]);
  }
  updatePixels();
  robotCam.updatePixels();
  popMatrix();
  //popMatrix();



  popMatrix();

  //background(0);

  translate(width/2,height/2,100);

  //image(robotCam,-robotCamWidth/2,-robotCamHeight/2,robotCamWidth,robotCamHeight);


}

void keyPressed(){

  if (key == 'm'){
    moveRobot = true;
    adjustRobotCam = false;
    adjustWindowCam = false;
  } else if (key == 'c'){
    moveRobot = false;
    adjustRobotCam = true;
    adjustWindowCam = false;
  } else if (key == 'w'){
    adjustWindowCam = true;
    moveRobot = false;
    adjustRobotCam = false;
  }

  if (moveRobot == true){
    if (key == CODED){
      switch(keyCode){
        case UP:
          robotX += cos(robotRotZ)*robotStep;
          robotY += sin(robotRotZ)*robotStep;
          break;
        case DOWN:
          robotX += cos(robotRotZ)*-robotStep;
          robotY += sin(robotRotZ)*-robotStep;
          break;
        case LEFT:
          robotRotZ -= robotTurn;
          break;
        case RIGHT:
          robotRotZ += robotTurn;
          break;
      }
    }
  } else if (adjustRobotCam == true){
    if (key == CODED){
      switch(keyCode){
        case UP:
          robotCamRotY -= robotTurn;
          break;
        case DOWN:
          robotCamRotY += robotTurn;
          break;
        case LEFT:
          robotCamRotZ -= robotTurn;
          break;
        case RIGHT:
          robotCamRotZ += robotTurn;
          break;
      }
    }
  } else if (adjustWindowCam == true){
    if (key == CODED){
      switch(keyCode){
        case UP:
          //camera -= robotTurn;
          break;
        case DOWN:
          robotCamRotY += robotTurn;
          break;
        case LEFT:
          robotCamRotZ -= robotTurn;
          break;
        case RIGHT:
          robotCamRotZ += robotTurn;
          break;
      }
    }
  }
}

I have found the example of how to add texture which is:

PImage img;
PShape globe;

void setup() {
  img = loadImage("earth.jpg");
  globe = createShape(SPHERE, 50);
  globe.setTexture(img);
}

Mine is certainly longer. Although I know some of it isn't relevant to the question, I'll post my whole code. The texture I'd like to use (for the sake of this) is scales. It's in the data folder and the sketch runs without errors - just a wireframe sphere though - no texture.

From what I've read and understand - the texture() must be between beginShape and endShape() and "before any calls to vertices".

Where you're using a sphere(); without explicit vertices, how can texture() be implemented?

Rather than posting separately, I have a couple more questions regarding the same code.

1. how can I slow down the movement of the camera vs mouse movement?
2. I am using the .jpg "scales" at the moment but would like to use a patchy texture with the light shining through - imagine a mosaic with every other tile removed. Is this going to be difficult to implement for an obvious beginner like me?

Many thanks in advance

   // interactive sphere
PImage img;

int rotateX = 0, rotateY = 0;
int previousX, previousY;
float distanceX = 0.0, distanceY = 0.0;


void setup(){
size(1000, 1000, P3D);
img = loadImage("scales.jpg");
}

void draw(){
// background in draw not setup so drawn on loop and new sphere replaces old  
background(0);
//lights();
// converts mouse x movement into rotation around the object - over-ridden by mouse pressed/dragged functions
camera(mouseX, height/2, (height/2) / tan(PI/3), mouseX, height/2, 0, 0, 1, 0);
// set centre of screen fro drawing sphere
translate(width/2, height/2, 0);
rotateX(rotateX + distanceY);
rotateY(rotateY + distanceX);

noFill();
stroke(255);
texture(img);
sphere (100);

}

void mousePressed()
{
previousX = mouseX;
previousY = mouseY;
}
void mouseDragged()
{
distanceX = radians(mouseX - previousX);
distanceY = radians(previousY - mouseY);
}
void mouseReleased()
{
rotateX += distanceY;
rotateY += distanceX;
distanceX = distanceY = 0.0;
}

import peasy.*;
import controlP5.*;
import processing.video.*;

PeasyCam cam;

Capture usbcam;
ControlP5 cp5;

int pointx, pointy;
PShape s;
int cubeWidthSwitch = 0;
int distanceFactor = 1;
float c1 = 0;
float pixelBrightness = 0;

void setup() {
  size (1280, 720, P3D);
  frame.setResizable(true);
  cp5 = new ControlP5(this);

  usbcam = new Capture(this, 1280, 720, "USB Webcam");
  usbcam.start();
  frameRate(30);
  s = loadShape("spike.obj");
  s.scale(0.2);

  cam = new PeasyCam(this, 500);
  cam.setMinimumDistance(500);
  cam.setMaximumDistance(500);
}

void draw () {

  c1+=5;
  c1%=255;
  colorMode(HSB);
  background(0);

  for ( int gridX = -480 ; gridX <240 ; gridX = gridX +90 ) {
    for (int gridY = -480 ; gridY < 240 ; gridY = gridY +90) {
      for (int gridZ = -480 ; gridZ < 240 ; gridZ = gridZ+90) {
        pushMatrix ();

        translate (gridX*distanceFactor*2, gridY*distanceFactor*2, gridZ*distanceFactor*2);
        translate(360, 400, 350);
        fill (c1, 255, 255);
        sphere(1.5);
        noStroke();

        popMatrix();
      }
    }
  }


  s.setFill(color(255));
  shape(s);

  cam.beginHUD();
  gui();
  cam.endHUD();
}

void gui(){
  camera();
  if(usbcam.available()) {
    usbcam.read();
    usbcam.loadPixels();

    int brightest = 0;
    for(int i=0; i<usbcam.pixels.length; i++) {
      if(brightness(usbcam.pixels[i]) < 70) {
        pixelBrightness = brightness(usbcam.pixels[i]);
        brightest = i;
      }
    }
    pointx = brightest % usbcam.width;
    pointy = brightest / usbcam.width;
//    image(usbcam, 0, 0);
//    ellipse(pointx, pointy, 200, 200);

  }
}

all the examples for texture spere are convuleted and old

what is the fastest way for a texture sphere in 3D please?

best, Chrisir ;-)

On the picture you can see what it looks like using a spotlight in the center of the sun.

Hope you can help me. I really didn't find anything on the web. Thanks in advance!

Thanks

the code i used

import processing.opengl.*;
import toxi.geom.*;
import java.util.Iterator;
import java.util.*;
import peasy.*;
import wblut.math.*;
import wblut.processing.*;
import wblut.core.*;
import wblut.hemesh.*;
import wblut.geom.*;

ArrayList Slope = new ArrayList();
HE_Mesh mesh;
WB_KDTree vertexTree;
WB_Render render;
WB_Coord mnorm;
PeasyCam cam;

int speedx =1;
int speedy =1;


void setup() {

  size(700, 700, P3D);

  frameRate(30);
  smooth();

  cam = new PeasyCam(this, 1200);

  mesh = new HEC_FromOBJFile(sketchPath("meshtoimport2.obj")).create();
  vertexTree = mesh.getVertexTree();

  int novert = mesh.getNumberOfVertices();

  for (int i=0; i< novert; i++) {
    mnorm = mesh.getVertexNormal(i);

    float xnPos = (Float)  mnorm.xf();
    float ynPos = (Float)  mnorm.yf();
    float znPos = (Float)  mnorm.zf();

    Vec3D mnormv = new Vec3D(xnPos, ynPos, znPos);
    Vec3D mvert = new Vec3D(0, 0, 1);

    float slope = mnormv.angleBetween(mvert);
    slope = degrees(slope);

    Slope.add(slope);
  }

  render = new WB_Render( this );
}

void draw() {
  background(0);
  lights();
  noStroke();
  render.drawFaces(mesh);

  stroke(255, 0, 255);
  strokeWeight(.5);
  render.drawFaceNormals(2, mesh);

  speedx = speedx+1;
  speedy = speedy+1;
  WB_Point tpos = new WB_Point(speedx, speedy, 0);
  WB_Coord ptonmesh = mesh.getClosestPoint(tpos, vertexTree);
  HE_Vertex meshPt = mesh.getClosestVertex(tpos, vertexTree);

  float xPos = (Float) ptonmesh.xf();
  float yPos = (Float)  ptonmesh.yf();
  float zPos = (Float)  ptonmesh.zf();

  fill(60, 60, 200, 200);
  translate(xPos, yPos, zPos);
  sphere(15);
}

I'm trying to complete this exercise which involves controlling an avatar through a forest using matrix transformation. However when I press the Space button to move the view back to the camera (as opposed to FPV) I can't get it to follow the avatar.

Could someone please point me in the right direction?

Many thanks, Charles

//Avatar eye height
int viewHeight = 100;

//matrix to capture position and orientation of match
PMatrix3D eye = new PMatrix3D();

Boolean record = false;
Boolean view = true;

int treeCount = 400;
float[] treeX = new float[treeCount];
float[] treeY = new float[treeCount];
float [] treeH = new float[treeCount];

void setup()
{
  //3D rendering
  size(700, 500, P3D);
  //white fill
  fill(255);
  strokeWeight(0.5);

  //translate eye matrix
  eye.translate(100, 100, viewHeight);
  eye.rotate(PI/6);

  //initialize tree position and height
  for (int i = 0; i < treeCount; i++) {
    treeX[i] = random(width*-5, width*5);
    treeY[i] = random(width*-5, width*5);
    treeH[i] = random(200, 1000);
  }
}

void draw()
{  
  background(255);
  camera(500, 0, 200, 0, 0, 125, 0, 0, -1);

  /*
        Create a new matrix to transform the ****whole scene****
   except the match, which we're not drawing
   because we're in the head of the match!
   */
  PMatrix3D camera = new PMatrix3D();

  //(when we apply this, it will) drag the origin up to the camera
  camera.translate(500, 0, 200);

  /*
        Invert the match transformation; or, move the whole scene
   so the origin is at the avatar and it's
   */
  PMatrix3D inv =  new PMatrix3D(eye);
  inv.invert();
  camera.apply(inv);

  if (view) { // FPV state
    applyMatrix(camera);
    for (int i = 0; i < treeCount; i++) {
      drawTree(treeX[i], treeY[i], treeH[i]);
    }
    drawGrid();
  } else { // camera state
    for (int i = 0; i < treeCount; i++) {
      drawTree(treeX[i], treeY[i], treeH[i]);
    }

    drawGrid();
    applyMatrix(eye);
    avatar();
  }

  recordFrames();
  movements();
}

void drawGrid() {
  //how far should the lines go?
  int horizon = width*5;
  //line separation
  int sep = 100;

  stroke(100);
  for (int i=-horizon; i<horizon; i += sep)
  {
    //lines in x-direction
    line(horizon, i, -horizon, i);
    //lines in y-direction
    line(i, -horizon, i, horizon);
  }
}

//create a simple avatar
void avatar() {

  noStroke();
  fill(200);
  pushMatrix();
  sphere(20);
  //start at the top - translate down half the height of the match
  translate(0, 0, -viewHeight/2);
  //draw the stick
  fill(150);
  box(20, 20, viewHeight);
  popMatrix();
}

void keyPressed() {

  if (key=='f') saveFrame("images/image.png");
  if (key=='r') record = !record;
  if (key==' ') view = !view;
}

void movements() {
  if (keyPressed && keyCode==LEFT) eye.rotateZ(-0.05);
  if (keyPressed && keyCode==RIGHT) eye.rotateZ(0.05);
  if (keyPressed && keyCode==UP) eye.translate(-10, 0, 0);
  if (keyPressed && keyCode==DOWN) eye.translate(10, 0, 0);
}

void recordFrames() {
  if (record) saveFrame("frame_#####.png");
}

void drawTree(float x, float y, float h) {

  noStroke();
  fill(#715448);
  pushMatrix();
  translate(x, y, h/2);
  box(h*0.06, h*0.03, h);
  popMatrix();
  pushMatrix();
  translate(x, y, h);
  fill(#7EFF8C);
  sphere(h*0.3);
  popMatrix();
}

It seems that in 0.4.18 drawing with any radius for a sphere <= 100 produces nothing: sphere(100);

sphere(101); // produces a very simplified sphere, 102 only slightly better, etc.

in p5js v 0.4.17 you can draw a sphere as small as sphere(1);

Broken?

Thanks

i'm rotating ellipses around a circle, but each ellipse seems to face the same direction...

but i want them all to face uniformly around the sphere...

i've tried a bunch of stuff... nothing seems to work without throwing things into chaos.

i imagine its something like... divide the amount of objects by their angle around the sphere, rotating each by that much... but i just can't get it...

i've commented out the rotation line where I think i should, but uncomment and you'll see what i mean... the ellipse kind've rotate in a non-uniform fashion...

what i'm trying to do is have every ellipse angle at the right angle to the centre of the sphere... if that makes sense... like rays of sunshine or something... or if i had a piece of string going out to each ellipse, the ellipse rotates on the angle of that piece of string...

hope someone can help...

int radius = 150;
float d = 0.0;
void setup() {
  size(1000, 1000, P3D);
  noStroke();
}

void draw() { 
  background(0);
  translate(width/2, height/2);
  lights();
  sphereDetail(50);
  stroke(100, 100, 255);
  rotate(radians(d*5));
  sphere(100);
 d = d + radians(1);
  for (int deg = 0; deg < 360; deg += 10) {
    float angle = radians(deg); 
    float x = (cos(angle) * radius);
    float z = (sin(angle) * radius);
    pushMatrix();
    translate(x, z, 0);
    fill(50, 200, 255);
    pushMatrix();
    //rotateY(90);
    ellipse(0, 0, 20, 20);
    popMatrix();
    popMatrix();
  }
}

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);
}

I tried with the map function, but I feel the same. */

float p=0; // angle 1 float d=180; // ange 2 float w=180; // angle 3 float topRadius=10; float bottomRadius=10; float tall=100; float sides=100; float cpx, cpy,angle = 0,angle1,angle2; int e; float rx = 0; float ry =0; int gridSize=40; float angulo=0; void setup() { size(1080, 660, P3D); } void draw() { background(0); fill(255, 255, 255);

lights(); translate(width / 2, height / 2,0);

fill(255,0,0); sphere(15);

 noStroke();

fill(255, 255, 255); translate(0, 0, 0); angle = radians(p) ; beginShape(QUAD_STRIP); for (int i = 0; i < sides + 1; ++i) { vertex(topRadiuscos(angle), 0, topRadiussin(angle)); vertex(bottomRadiuscos(angle), tall0.8,bottomRadiussin(angle)); angle += TWO_PI / sides; rotateX(angle); } endShape(); translate(0,tall0.8,0); fill(255,0,0); sphere(15); fill(255, 255, 255); angle1 = radians(d); beginShape(QUAD_STRIP); for (int i = 0; i < sides + 1; ++i) {
vertex(topRadiuscos(angle1), 0, topRadiussin(angle1)); vertex(bottomRadiuscos(angle1), tall0.6,bottomRadius*sin(angle1)); angle1 += TWO_PI / sides; rotateX(angle1); } endShape();

translate(0,tall0.6,0); fill(255,0,0); sphere(13); fill(255, 255, 255); angle2 = radians(w); beginShape(QUAD_STRIP); for (int i = 0; i < sides + 1; ++i) {
vertex(topRadiuscos(angle2), 0, topRadiussin(angle2)); vertex(bottomRadiuscos(angle2), tall0.5,bottomRadiussin(angle2)); angle2 += TWO_PI / sides; rotateX(angle2); } endShape(); translate(0,tall*0.5,0); fill(255,0,0); sphere(10); println(angle, angle1, angle2); }

I want to position a sphere on the edge of the window. However when I do that the drawn Sphere looks more like a ellipse than a sphere. Here is the code use to try. The commented out lines are things I tested with no different result. Only if I put the Sphere in the Middle of the window the drawn Sphere looks like a Sphere. Is this normal ?

`void setup () { //size(800, 600, OPENGL); size(800, 600, P3D); background(0); }

void draw() { pushMatrix(); { colorMode(HSB); // translate(width, -100, -1200); // translate(width/2, height/2, -1200); translate(0, 0, -900); stroke(255); noFill(); stroke(255); sphereDetail(10); sphere(400); }popMatrix(); }`