› › ›

Can't seem to get a proscene 3D drawing inside a 2D canvas - python mode

thepizzaguithepizzagui
edited April 2016 in Python Mode

Hey guys,

I'm pretty inexperienced when it comes to python and it's probably the reason why I'm having trouble but, the Issue i'm having is placing a 3D renderer (proscene) into a 2D "Canvas". The idea is to have the 3D window running along side a 2D sketch. Here's the code from my main.py:

add_library('proscene')
from PlaneConstructor import ThreeDimensionalPlane
from PrismConstructor import RectangularPrism
from ReadFile import readFile

def setUpScene():
    scene.setGridVisualHint(False)
    scene.setAxesVisualHint(False)

    if scene.is3D():
        scene.setCameraType(Camera.Type.ORTHOGRAPHIC)

    scene.setRadius(150)
    scene.showAll()   

def setup():
    global scene, offset
    size(1200,1200,P3D)
    scene = Scene(this)

    listOfPlanes = readFile(fileName)    
    createSections(listOfPlanes)

    setUpScene()

    beamLength = calcBeamLength(listOfPlanes)
    offset = -1 * (float(beamLength) / 2)

def draw():
    background(140)
    drawSections(offset)

From what I've already read online, setup is where all the magic happens and I've tried implementing the solution from 3D window in 2D sketch, however when running the code with the changes, the 3D image stays as 2D and I can't draw anything outside the 3D window.

What are some other ways of implementing this?

Tagged:

Answers

  • GoToLoopGoToLoop
    edited April 2016

    That @codeanticode's example is too old, from November of 2013:
    https://forum.Processing.org/two/discussion/1297/3d-window-in-2d-sketch#Item_7

    So before going to Python Mode, let's 1st scrub the original Java Mode sketch: #:-S

    /**
 * ProScene Box Test (v2.1)
 * by  CodeAntiCode (2013-Nov)
 * forum.Processing.org/two/discussion/1297/3d-window-in-2d-sketch
 *
 * mod GoToLoop (2016-Apr-24)
 * forum.Processing.org/two/discussion/16220/
 * can-t-seem-to-get-a-proscene-3d-drawing-inside-a-2d-canvas-python-mode
 */

import remixlab.proscene.Scene;

Scene scene;
PGraphics canvas;
int w, h;

void setup() {
  size(640, 360, P2D);
  smooth(8);
  frameRate(60);
  imageMode(CORNER);

  w = width >> 1;
  h = height >> 1;

  canvas = createGraphics(w, h, P3D);
  canvas.smooth(4);
  canvas.beginDraw();

  canvas.fill(204, 102, 0);
  canvas.stroke(0);
  canvas.strokeWeight(1.5);

  canvas.endDraw();
  scene = new Scene(this, canvas);
}

void draw() {
  canvas.beginDraw();
  scene.beginDraw();

  canvas.background(0);
  canvas.box(20, 30, 50);

  scene.endDraw();
  canvas.endDraw();

  image(canvas, 0, 0);
  image(canvas, w, 0);
  image(canvas, 0, h);
  image(canvas, w, h);
}

    And w/o further ado, here's what I've come up w/ for the Python Mode version: :-bd

    '''
 ' ProScene Box Test (v2.1)
 ' by  CodeAntiCode (2013-Nov)
 ' forum.Processing.org/two/discussion/1297/3d-window-in-2d-sketch
 '
 ' mod GoToLoop (2016-Apr-24)
 ' forum.Processing.org/two/discussion/16220/
 ' can-t-seem-to-get-a-proscene-3d-drawing-inside-a-2d-canvas-python-mode
'''

add_library('proscene')

def setup():
    size(640, 360, P2D)
    smooth(8)
    frameRate(60)
    imageMode(CORNER)

    global canvas, scene, w, h
    w, h = width >> 1, height >> 1

    canvas = createGraphics(w, h, P3D)
    canvas.smooth(4)
    canvas.beginDraw()

    canvas.fill(204, 102, 0)
    canvas.stroke(0)
    canvas.strokeWeight(1.5)

    canvas.endDraw()
    scene = Scene(this, canvas)


def draw():
    canvas.beginDraw()
    scene.beginDraw()

    canvas.background(0)
    canvas.box(20, 30, 50)

    scene.endDraw()
    canvas.endDraw()

    image(canvas, 0, 0)
    image(canvas, w, 0)
    image(canvas, 0, h)
    image(canvas, w, h)
  • GoToLoopGoToLoop
    edited April 2016

    As a bonus, a variant w/ multicolor boxes using a Cube class: B-)

    '''
 ' ProScene MultiColor Box Test (v3.2)
 ' by CodeAntiCode (2013-Nov)
 ' forum.Processing.org/two/discussion/1297/3d-window-in-2d-sketch
 '
 ' mod GoToLoop (2016-Apr-24)
 ' forum.Processing.org/two/discussion/16220/
 ' can-t-seem-to-get-a-proscene-3d-drawing-inside-a-2d-canvas-python-mode
'''

add_library('proscene')

def setup():
    size(640, 360, P2D)
    smooth(8)
    frameRate(60)
    imageMode(CORNER)

    global canvas, scene, cubes
    w, h = width >> 1, height >> 1

    canvas = createGraphics(w, h, P3D)
    canvas.smooth(4)
    canvas.beginDraw()

    canvas.stroke(0)
    canvas.strokeWeight(1.5)

    canvas.endDraw()

    scene = Scene(this, canvas)
    scene.setCameraType(Camera.Type.ORTHOGRAPHIC)
    scene.setGridVisualHint(False)
    scene.setAxesVisualHint(False)
    scene.setRadius(100);
    scene.showAll();

    cubes = Cube(0, 0, color(255, 127, 0)),\
            Cube(w, 0, color(255, 0, 127)),\
            Cube(0, h, color(127, 255, 0)),\
            Cube(w, h, color(0, 127, 255))


def draw():
    for cube in cubes: cube.render()


class Cube:
    W, H, D = 20, 30, 50

    def __init__(_, x, y, ink): _.x, _.y, _.ink = x, y, ink

    def render(_):
        canvas.beginDraw()
        scene.beginDraw()

        canvas.background(0)
        canvas.fill(_.ink)
        canvas.box(Cube.W, Cube.H, Cube.D)

        scene.endDraw()
        canvas.endDraw()

        image(canvas, _.x, _.y)
  • thepizzaguithepizzagui
    edited April 2016

    I understand how your code works, Thanks! however now I'm getting my proScene window as a 2D image. I feel like I'm not putting something crucial in draw, however it could also mean that I'm drawing the window on top of the scene. Here are the changes that I've made:

    add_library('proscene')
from PlaneConstructor import ThreeDimensionalPlane
from PrismConstructor import RectangularPrism
from ReadFile import readFile

listOfSections = {}
downScaleResolution = 5
prismThickness = 25
fileName = "file1.csv"

def calcBeamLength(lstPlanes):
    beamLength = 0
    for item in lstPlanes:
        for plVertex in item:
            if plVertex.x > beamLength:
                beamLength = plVertex.x

    return beamLength  

def createSections(listOfPlanes):
    counter = 0
    for item in listOfPlanes:
        #listOfSections[str(counter)] = ThreeDimensionalPlane(item[0]/downScaleResolution, item[1]/downScaleResolution, item[2]/downScaleResolution, item[3]/downScaleResolution, [255,0,0]).getPlane()
        listOfSections[str(counter)] = RectangularPrism(item[0]/downScaleResolution, item[1]/downScaleResolution, item[2]/downScaleResolution, item[3]/downScaleResolution, prismThickness/downScaleResolution, [255,0,0]).getPrism()
        counter += 1

def drawSections(offset):
    for key in listOfSections:
        shape(listOfSections[key], offset/downScaleResolution, 0)

def setUpScene():
    scene.setGridVisualHint(False)
    scene.setAxesVisualHint(False)

    if scene.is3D():
        scene.setCameraType(Camera.Type.ORTHOGRAPHIC)

    scene.setRadius(150)
    scene.showAll()   

def setup():

    size(500,500,P2D)
    smooth(8)
    frameRate(60)
    imageMode(CORNER)

    global canvas, scene, offset

    canvas = createGraphics(200,200, P3D)
    canvas.smooth(4)
    canvas.beginDraw()

    canvas.stroke(0)
    canvas.strokeWeight(1.5)

    canvas.endDraw()

    scene = Scene(this, canvas)
    listOfPlanes = readFile(fileName)    
    createSections(listOfPlanes)
    setUpScene()

    beamLength = calcBeamLength(listOfPlanes)
    offset = -1 * (float(beamLength) / 2)

def draw():
    canvas.beginDraw()
    scene.beginDraw()

    canvas.background(140)
    drawSections(offset)

    scene.endDraw()
    canvas.endDraw()
    image(canvas, 100, 100)

    This is what is looks like:

  • GoToLoopGoToLoop
    edited April 2016

    I understand how your code works, thanks!

    Does that mean it's run successfully for ya too? :-/

    Unfortunately I can't run your own version b/c you import libraries I dunno about! :|
    Only 1 I've heard about was proscene. Yet this was the 1st time I've ever used it! 8-|
    And my huge ignorance about the Python language and its ecosystem doesn't help either! X_X

    My advice is that you'd favor "javaism" over "pythonic" ways.
    That is, before relying on some exclusive Python feature, take a look 1st whether Processing's API or Java's API already offer that:

    1. http://py.Processing.org/reference/
    2. https://Processing.org/reference/
    3. http://docs.Oracle.com/javase/8/docs/api/index.html

    Some possible examples:

    You're using readFile in order to load some "'csv" file: "file1.csv".
    Yet Processing got loadTable(): https://Processing.org/reference/loadTable_.html

    Some cross Java/Python Mode examples:

    1. listOfPlanes = loadTable("file1.csv")
    2. csv = loadTable("http://" + "WebRates.TrueFX.com/" + "rates/connect.html" + "?f=csv", "csv")

    Dunno what is a ThreeDimensionalPlane. Perhaps it's kinda PVector: :-??
    http://py.Processing.org/reference/PVector.html

    No idea about RectangularPrism either. Maybe some Java's Rectangle:
    http://docs.Oracle.com/javase/8/docs/api/java/awt/Rectangle.html

    Following this path's gonna enable more of us to help ya out.
    Given that most of us are more knowledgeable about Java Mode. ~O)

  • thepizzaguithepizzagui

    I'm mainly a java programmer too and this project is lead by someone who persists on using python... I think I'll try writing it in java and going from there :-??

    Thanks for the help though! You've shown be that I've got a bit more work to do B-)

  • GoToLoopGoToLoop

    @thepizzagui, as I've shown, 1st have a working Java Mode version.
    Then you can decide to re-write it in Python Mode in order to please your leader. ;))

  • GoToLoopGoToLoop

    More forum threads where the original Java Mode was converted to Python Mode too: :ar!

    1. https://forum.Processing.org/two/discussion/14709/simple-p3-sketch-to-p5-js#Item_7
    2. https://forum.Processing.org/two/discussion/14071/converting-java-code-to-python-for-dataviz#Item_11
    3. https://forum.Processing.org/two/discussion/14071/converting-java-code-to-python-for-dataviz#Item_14
  • nakednousnakednous

    Did you check this example where a 2D canvas is created on top of a 3D one?

Sign In or Register to comment.