how to change position of the canvas in html code?

in...@kalwaltart.it

unread,

May 30, 2012, 7:52:34 AM5/30/12

to Processing.js

i started with an very simple example:

Pointillism.html:

<html>
<head>
<title>Hello Web - Processing.js Test</title>
<script src="processing-1.3.6.js"></script>
</head>
<body>
<h1>Processing.js Test</h1>
<p>This is my first Processing.js web-based sketch:</p>
<canvas data-processing-sources="Pointillism.pde"></canvas>
</body>
</html>

Pointillism.pde

// All Examples Written by Casey Reas and Ben Fry

// unless otherwise stated.

// @pjs preload must be used to preload the image so that it will be
available when used in the sketch

/* @pjs preload="data/eames.jpg"; */

PImage a;

void setup()

{

a = loadImage("data/eames.jpg");

size(200,200);

noStroke();

background(255);

smooth();

}

void draw()

{

float pointillize = map(mouseX, 0, width, 2, 18);

int x = int(random(a.width));

int y = int(random(a.height));

color pix = a.get(x, y);

fill(pix, 126);

ellipse(x, y, pointillize, pointillize);

}

i don't know so much html code better knowledge in c++ or c# ...
i would like for example to put the canvas in the middle of the
windows browser, putting a table and inside the canvas but ii display
nothing , the script doesn't run. what do suggest to do? and in
general how i can " move " by default the position of the canvas?
there is some reference info for this?
Thanks
Walter

Giles Orr

unread,

May 31, 2012, 9:19:50 AM5/31/12

to proces...@googlegroups.com

Centering stuff in HTML is much more problematic than you might think.
What it comes down to is that you can't do it in raw HTML - you'll
have to use at least CSS. At least if you want to do it up to current
HTML standards. And you may end up using JS, particularly if you want
to center vertically as well. Here's a long discussion on the
subject:

http://www.netmechanic.com/news/vol7/html_no10.htm

I've encountered this problem many times ... Sorry there's no simple answer.

--
Giles
http://www.gilesorr.com/
gile...@gmail.com

in...@kalwaltart.it

unread,

May 31, 2012, 2:59:32 PM5/31/12

to proces...@googlegroups.com

thanks for the answer! i understood as i imagined that is not so simple. I think i have a lot of things to digest now...

Walter

Lee Brunjes

unread,

Jun 9, 2012, 8:31:43 AM6/9/12

to proces...@googlegroups.com

Should have replied to this the first time. There are easy ways to horizontally align something in css.

you can set the parent to align to center and bam.

in your example:

body{ text-align:center; }

you then need to set a width on your canvas and tell it what to do.

canvas{ width:512px; height:512px; margin:0 auto; }

To be extra fancy and do it in percentages

canvas{ width:50%; height:50%; margin:25% auto 0 auto; }

I obviously don't have space to go into too much detail about how css works. However, I threw out a quick search and this site seems to have an okay intro up.

http://www.htmldog.com/guides/cssbeginner/

-Lee

On Sat, Jun 9, 2012 at 1:47 AM, Digi_D <dima...@gmail.com> wrote:

Was just hacking on some code that has recentering built in. It's superugly and needs some CSS to really center the canvas but hopefully gets the point across. I am pretty new as in just started today to this whole processing.js thing so apologies in advance if mixing jQuery and Processing is a bad idea. Kinda have three different syntaxes going on there = mess.

<!DOCTYPE html>
<html>
<head>
<title>kinda ugly but works and gets the idea across</title>

<meta charset="utf-8">

<script src="./processing-1.3.6.min.js"></script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script type="text/processing" data-processing-target="canvas_1">

$(window).resize(reCenter);

var myWidth=500;

var myHeight=500;

function reCenter()
{

size(window.innerWidth/2,window.innerHeight/2);
x_coord=(window.innerWidth-myWidth)/2;

y_coord=(window.innerHeight-myWidth)/2;

$("#canvas_1").css({'right' : x_coord, 'top' : y_coord});

}

void setup()
{
reCenter(); //postion and size the canvas at startup

}

void draw()

{
background(255,0,0);
}

</script>

</head>

<body>
<canvas id="canvas_1" style="position:fixed; padding:5px">


</canvas>
</body>

</html>

--
You received this message because you are subscribed to the Google Groups "Processing.js" group.
To view this discussion on the web visit https://groups.google.com/d/msg/processingjs/-/xjrqHD-E2LoJ.
To post to this group, send email to proces...@googlegroups.com.
To unsubscribe from this group, send email to processingjs...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/processingjs?hl=en.

Reply all

Reply to author

Forward