Giter VIP home page Giter VIP logo

p5.easycam's Introduction

MultiView

p5.EasyCam

Simple 3D camera control for p5js and the WEBGL/P3D renderer.

This library is a derivative of the original PeasyCam Library by Jonathan Feinberg and combines new useful features with the great look and feel of the original version.

Processing/Java version of this project: https://github.com/diwi/peasycam/tree/PeasyCam3

Releases

Examples

EasyCam.js - Advanced Shader/Lighting

EasyCam.js - Basic

dwgl.js - WebGL1/WebGL2 wrapper

Usage

var easycam;

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

  easycam = createEasyCam();
  // easycam = new Dw.EasyCam(this._renderer);
  // easycam = new Dw.EasyCam(this._renderer, {distance:300, center:[0,0,0]});
  // easycam = new Dw.EasyCam(this._renderer, {distance:300, center:[0,0,0], rotation:[1,0,0,0]});
} 

function draw(){
  background(64);
  fill(255);
  box(200);
}

something to play: jsfiddle

Reference

##
## QUICKREF
##


## CAMERA SETUP

// constructor
new Dw.EasyCam(p5.RendererGL, state);
new Dw.EasyCam(p5.RendererGL, {
      distance : z,                 // scalar (optional)
      center   : [x, y, z],         // vector (optional)
      rotation : [q0, q1, q2, q3],  // quaternion (optional)
      viewport : [x, y, w, h],      // array (optional)
    }

// examples
createEasyCam(); // uses the primary WEBGL renderer and default settings
 ...
createEasyCam(p5.RendererGL);
createEasyCam(p5.RendererGL, {distance:z});
createEasyCam(p5.RendererGL, {distance:z, center:[x,y,z]});
  ... 
new Dw.EasyCam(p5.RendererGL);
new Dw.EasyCam(p5.RendererGL, {distance:z});
new Dw.EasyCam(p5.RendererGL, {distance:z, center:[x,y,z]});
  ... 

## CAMERA STATE

state = {
  distance : z,                 // scalar
  center   : [x, y, z],         // vector
  rotation : [q0, q1, q2, q3],  // quaternion
}


## CAMERA METHODS

// CAMERA, MISC
setCanvas(renderer) // webgl-renderer
getCanvas()
setViewport(viewport) // viewport as bounding screen-rectangle [x,y,w,h]
getViewport()
update() // update camera state
apply(renderer) // apply camera state to webgl-renderer
dispose()
setAutoUpdate(status)
getAutoUpdate()
attachMouseListeners(renderer) // input handler
removeMouseListeners()

// INPUT BEHAVIOUR/SCALE/SPEED
setZoomScale(scale_zoom)
getZoomScale()
setPanScale(scale_pan)
getPanScale()
setRotationScale(scale_rotation)
getRotationScale()
setWheelScale(wheelScale)
getWheelScale()
setDefaultInterpolationTime(duration)
setDamping(damping)
setRotationConstraint(yaw, pitch, roll)

// GET ZOOM/PAN/ROTATE/POSITION/UP
getCenter()
getDistance()
getRotation()
getUpVector(dst)
getPosition(dst)

// SET ZOOM/PAN/ROTATE
setDistanceMin(distance_min)
setDistanceMax(distance_max)
setDistance(distance, duration)
setCenter(center, duration)
setRotation(rotation, duration)
setInterpolatedCenter(valA, valB, t)
setInterpolatedDistance(valA, valB, t)
setInterpolatedRotation(valA, valB, t)

// MODIFY ZOOM/PAN/ROTATE
zoom(dz)
panX(dx)
panY(dy)
pan(dx, dy)
rotateX(rx)
rotateY(ry)
rotateZ(rz)
rotate(axis, angle)

// CAMERA STATES
setState(other, duration)
getState()
pushState()
popState(duration)
pushResetState()
reset(duration)

// HEAD_UP_DISPLAY
beginHUD(renderer, w, h)
endHUD(renderer)

Screenshots

RandomBoxes

MultiView

PerPixelPhong

CameraStates

ReactionDiffusion

p5.easycam's People

Contributors

diwi avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

p5.easycam's Issues

EasyCam not working for p5.js 0.9.0!

I have tried to use EasyCam but the canvas doesn't show when I use easycam

Here is my code:

var easycam;

function setup() {
  createCanvas(400, 400, WEBGL);
  easycam = createEasyCam();
}
function draw() {
  background(0);
  lights();
  box(100);
}

Here is screenshot:

image

Codesandbox "n.camera is not a function"

Hi, I have the "Camera is not a function error" issue similar to

#11
#5

in codesandbox.

p5.easycam.min.js:1 Uncaught TypeError: n.camera is not a function

The fix from #5 solves it but may be you can look into this. Thanks C.

what is mouseDragPan()?

hi everybody... does anyone know what is mouseDragPan()? i don't understand this: "implemented pan-cb for mousedrag/touch handler." as a description for this function...
anyway i want to set some constraints on mousewheel zoom, such that disable zooming in or out more than a defined value. i thought mouseDragPan might be related to it... thanks people....

Camera is not a function error

I am getting the following error, the fix in [https://github.com//issues/5] does not resolve.

p5.easycam.min.js:1
Uncaught TypeError: n.camera is not a function
at f.apply (p5.easycam.min.js:1)
at f.update (p5.easycam.min.js:1)
at p5. (p5.easycam.min.js:1)
at callMethod (p5.js:14109)
at Array.forEach ()
at p5.redraw (p5.js:14112)
at p5. (p5.js:9147)
at p5. (p5.js:9043)
at new p5 (p5.js:9323)
at _globalInit (p5.js:5602)

Limiting rotation angles

HI again everybody :-)
how can i limit the rotation angles? i mean for example no less than 5 degrees around x axis?
thank you in advance
@diwi please help!

written for node_modules

I'm currently using webpack imports and exports loader to get this to work.
Can this be written with es6 exports ?
Maybe as a node_module as well?

Getting 3D world position of mouseX and mouseY on specific plane

hi everybody, i'm badly stuck here trying to solve the title of this issue... i tried so many different algorithms but i can't get it right... i don't know what do to this about this one... can anyone please help?
and i guess it might be a good additional function for this library... it would really appreciate any kind of help...
@diwi and anyone who can help!
thanks again

Mouse scroll zooming is not working on safari

Hi,

Thank you for this great work. I used to use three.js. But with this i could not be happier to code everything with p5.

I noticed on my rMBP 2015 on Safari 11.0.3 when using gesture of mouse scrolling on my trackpad (equivalent to mouse wheel) zooming is not working. Work fine on Chrome v.64.0.3282.167 on the same machine.

is full screen available only?

Hi,

I am trying to use the code, but I need to use as not in full screen. ( I need to save some space to another DOM elements. like file drop....)
I have changed the (windowWidth, windowHeight,) into the Quickstart example, but nothing had happened.
Even is it possible to fix the canvas size?
If it is not can I request this option into the future.
(I am beginner and I apologize for simple question)

HighDPI handling

hi there, it seems there is a problem with high DPI displays. i don't know if it's related to easycam or p5.js or even webgl itself. any suggestion? any idea?
@diwi thanks in advance...

Rotations around world axes

Hey there,

Thanks a lot for this plugin, it's really helping out!

I'm using p5 for a visualization for a project, but I'm having trouble making an orbiting camera that stays upright. By that I mean having no roll and and making yaw rotation around the world coordinates instead of the camera coordinates, like you would see in any video game where you see the world from above or even when you look around in Blender. I have tried many approaches but haven't managed so far, do you have any idea?

Thanks a bunch!

NPM release?

Is there a release for p5.EasyCam on npm or is this project built specifically for the global window namespace?

BUG FOUND AND FIXED: dwgl.js bug in uniformT

In dwgl.js the uniformT function does not work when you try to pass more than 1 texture as uniforms to a fragment shader. I have discovered the fix. You need to make the texture active BEFORE you bind it. The fixed function is below. The two lines that need to be switched are the gl.activeTexture and gl.bindTexture lines, which currently are lines 630 and 631 in dwgl.js.

FIXED FUNCTION:

  uniformT(name, val){
    var gl = this.gl;
    var loc = this.uniformLoc(name);
    if(loc){
      gl.activeTexture(gl.TEXTURE0 + this.tex_loc);  // these are the two lines
      gl.bindTexture(gl.TEXTURE_2D, val);            // that needed to be switched 
      gl.uniform1i(loc, this.tex_loc);
      this.tex_loc++;
    } 
  }

PeasyCam Broken with p5.js v0.7.2 September 02, 2018

Peasy cam doesn't load with the simple example provided in the readme - any ideas?

Uncaught TypeError: renderer.camera is not a function
    at EasyCam.apply (p5.easycam.js:608)
    at EasyCam.update (p5.easycam.js:591)
    at p5.easycam.js:429
    at callMethod (p5.js:55140)
    at Array.forEach (<anonymous>)
    at p5.redraw (p5.js:55148)
    at p5.<anonymous> (p5.js:48840)
    at p5.<anonymous> (p5.js:48742)
    at new p5 (p5.js:49029)
    at _globalInit (p5.js:48414)

HUD usage

hi every body... i was trying to use HUD option with beginHUD and endHUD... there was no error, but nothing was shown... this is my code:

mainCam.beginHUD(RENDERER,500,500);
mainCam.endHUD(RENDERER);

i found the below error in p5.js:
Uncaught (in promise) TypeError: Cannot read property 'mat4' of undefined
at p5.Shader._setMatrixUniforms (p5.js:81305)
at p5.Shader.bindShader (p5.js:81248)
at p5.RendererGL.drawBuffers (p5.js:79721)
at p5.RendererGL.rect (p5.js:74662)
at p5.rect (p5.js:53387)

thanks in advance
@diwi

Adjust camera movement

First of all I must tell you that this is fantastic, congratulations for such a nice work.

I have an issue that I'm not sure if can be corrected via configurarion. This is the scenario:

See this demo and this one, On both examples drag the mouse following this pattern

patetrn

What you should see is that with three.js the object moves slowly following more accurate the mouse, whereas with EasyCam the object moves faster and rotating in other axis.

For example, if I move the mouse only horizontally, in three.js the object moves in that plane, but if I perform the same movement with EasyCam the object kind of start wobbling

Dw.EasyCam is not defined p5.js & Vue.js Integration

Hello,
I`m using p5.js with Vuejs framework. It works fine but when I try to add easyCam library, it show that Dw.EasyCam is not defined. I do import 'p5/lib/p5.easycam'; library as needed in Vue.js.
p.setup =_=> {
this.canvas = p.createCanvas(innerWidth, innerHeight, p.WEBGL)
this.easycam = new Dw.EasyCam(this._renderer, {distance : this.lunarDistance*1.3})
this.canvas.parent(this.$refs.canvas)
}
Please help me with this issue.

Thanks in advance!
image

New release of p5.EasyCam available

This repo appears to be abandoned. The currently supported version of p5.EasyCam is now available as a community library on the p5.js website! The new release works correctly with p5.js v0.9+ and includes a fix for HUD. Also, in the readme of the new repo, there is a link to a new tutorial series on how to work with EasyCam in OpenProcessing. Any new issues should be posted in the repo here: https://github.com/freshfork/p5.EasyCam

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.