res56
February 5, 2022, 11:06am
1
Hi frens,
I use the draw function to display objects of the class Mover.
After the objects are displayed I want to rotate the result around the center.
function draw() {
if(frameCount < 600){
for (var i = 0; i < myMover1.length; i++) {
myMover1[i].update(count);
myMover1[i].distance(myMover1);
}
for (var i = 0; i < myMover2.length; i++) {
myMover2[i].update(count);
myMover2[i].distance(myMover2);
}
for (var z = 0; z < myMover3.length; z++) {
myMover3[z].update(count);
myMover3[z].distance(myMover3);
}
for (var z = 0; z < myMover4.length; z++) {
myMover4[z].update(count);
myMover4[z].distance(myMover4);
}
}
else{
//Rotate Canvas
}
}
Is it possible to rotate the whole canvas around its center?
Thanks in advance,
Theresa
Flolo
February 5, 2022, 2:21pm
2
Hey
first of all I think you mean p5js and not Processing.(so please change that )
These are the functions you need:
Translate
Rotate
I hope this can help you it is a little example:
Flolo
Click to see code
let cols = 20;
let cellSize;
function setup() {
createCanvas(600, 600);
cellSize = min(width, height) / cols;
}
function draw() {
background(0);
translate(width/2, height/2);
rotate(frameCount * 0.001);
drawGrid();
}
function drawGrid() {
stroke(255);
strokeWeight(2);
translate(-width/2, -height/2);
for (let i = 0; i < cols; i++) {
for (let j = 0; j < cols; j++) {
let x = i * cellSize;
let y = j * cellSize;
let filled = (i + j) % 2 == 0;
if (filled) {
fill(255);
} else {
noFill();
}
rect(x, y, cellSize, cellSize);
}
}
}
3 Likes
res56
February 6, 2022, 7:48pm
3
Hi Flolo,
thanks for the reply. The thing is that:
The object is generated in draw (out of many object lines). After the generation finished the result should be rotated around its center.
I used frameCount to stop the generation. But not the complete result is rotated but only single lines.
My idea was to save the canvas as image and re-load it…
Find the result of draw attached…
Thanks in advance
1 Like
Flolo
February 6, 2022, 9:46pm
4
Hi,
maybe there’s something to be gained by painting it on a Graphics and then rotating it.
I modified my previous example:
Click to see Code
let img;
let cols = 20;
let cellSize;
function setup() {
createCanvas(600, 600);
img = createGraphics(width, height);
cellSize = min(width, height) / cols;
}
function draw() {
background(0);
translate(width/2, height/2);
rotate(frameCount * 0.001);
image(img, -width/2, -height/2)
drawGrid();
}
function drawGrid() {
img.stroke(255);
img.strokeWeight(2);
for (let i = 0; i < cols; i++) {
for (let j = 0; j < cols; j++) {
let x = i * cellSize;
let y = j * cellSize;
let filled = (i + j) % 2 == 0;
if (filled) {
img.fill(255);
} else {
img.noFill();
}
img.rect(x, y, cellSize, cellSize);
}
}
}
Its the same outcome but with a Graphics
Flolo
1 Like
res56
February 12, 2022, 9:35am
5
Hi Flolo,
thanks for the hint, I’m closer but the rotating image is not the complete one. Its only a part of the origin.
Do you have an Idea?
Thanks in advance,
Theresa
res56
February 12, 2022, 10:29am
6
Okay, now I have the complete graphic in the image.
But this sktetch demonstrate my problem. If I have an Image and want to rotate it around the center it looks like the outer smaller rect.
If I use the rect-function and add rectMode(CENTER) it works. But imageMode(CENTER) does not work.
res56
February 12, 2022, 10:39am
7
let img;
var angle=0;
function setup() {
createCanvas(400, 400);
img = createGraphics(width, height);
angleMode(DEGREES);
imageMode(CENTER);
img.fill(255,255,255);
///img.line(v1.x, v1.y, v2.x,v2.y);
img.rect(0,0,200,200);
//rect(0,0,200,200);
}
function draw() {
background(0,255,0);
translate(width/2, height/2);
rotate(angle);
//rectMode(CENTER);
fill(255);
imageMode(CORNER);
image(img,-width/2, -height/2);
angle=angle+1;
}
res56
February 12, 2022, 3:04pm
8
The problem is, that I call the generate/drawStuff() Method before I translate and rotate…
But this is necassary bc I generate the graphic before…and if generation is finished it should be rotated…
1 Like
res56
February 12, 2022, 10:28pm
9
Okay…finally it works…
https://creatorbox.de/genart/apps/ayezooloop/
Thanks for your support!
1 Like