In the processing language I am trying to create a translation similar to the image below:
Output Goal
In my code, the image is moving but it isn't showing the original picture in addition to the translation and it isn't being shown across the screen as i'd like.
I have included the code I have so far below:
PImage img;
int reps=10;
void setup()
{
size(600,120);
triangle(30,5,50,30,15,20);
save("image.png");
img=loadImage("image.png");
}
void draw()
{
for (int i=0; i<reps; i++);
{
pushMatrix();
image(img,0,0);
translate(img.height,0);
scale(-1,1);
image(img,0,0);
popMatrix();
}
}
This is what it produces so far:
current_output
Im happy it's translating, I am just trying to figure out how to see the original in addition to the translation and have it shown multiple times.
Thanks in advance!!
The images have to be translated differently depending on the index. The 2nd image has to be translated more than the 1st one and the 3rd more than the 2nd:
translate(img.height * i, 0);
function draw:
void draw()
{
for (int i=0; i<reps; i++);
{
pushMatrix();
translate(img.height * i, 0);
scale(-1,1);
image(img,0,0);
popMatrix();
}
}
Related
I want to create points and then store them in an array. I'm doing this to put a linear regression through my data points afterwards. So I need to be able to cycle through all my points.
I could not find anything like that on the web for processing and as I was not really able to do it, I need your help. Here is my approach, but it doesn't seem to work:
ArrayList<dataPoint> dataPoints = new ArrayList<dataPoint>();
void setup(){
size(1000, 1000);
background(255);
}
void draw(){
for (int i = 1; i == dataPoints.size(); i++) {
// An ArrayList doesn't know what it is storing so we have to cast the object coming out
dataPoint Point = dataPoints.get(i);
Point.display();
}
}
void mousePressed() {
dataPoints.add(new dataPoint(mouseX, mouseY));
}
class dataPoint {
float x;
float y;
dataPoint(int tempX, int tempY) {
x = tempX;
y = tempY;
}
void display() {
strokeWeight(10);
stroke(255,0,0);
point(x,y);
}
}
I would like to have a program to create points and store them in an array (or something similar, that you can cycle through).
Most of your code makes sense, there are only two gotchas I could spot that may prevent you from cycling through all your points and visualising them:
your condition is will go to an array index out of bounds: try for (int i = 0; i < dataPoints.size(); i++)
remember to clear the frame, otherwise you're drawing on top of the same dots over and over again
Remember array indices start at 0 in Processing/Java (and likewise the last index will not be the size() of your array, but the 1 less, hence the < in the for condition)
Here is your code with the above tweaks:
ArrayList<dataPoint> dataPoints = new ArrayList<dataPoint>();
void setup(){
size(1000, 1000);
}
void draw(){
background(255);
for (int i = 0; i < dataPoints.size(); i++) {
// An ArrayList doesn't know what it is storing so we have to cast the object coming out
dataPoint Point = dataPoints.get(i);
Point.display();
}
}
void mousePressed() {
dataPoints.add(new dataPoint(mouseX, mouseY));
}
class dataPoint {
float x;
float y;
dataPoint(int tempX, int tempY) {
x = tempX;
y = tempY;
}
void display() {
strokeWeight(10);
stroke(255,0,0);
point(x,y);
}
}
Note that Processing has a handy PVector class (which has x,y properties) so you could do something like this:
ArrayList<PVector> dataPoints = new ArrayList<PVector>();
void setup(){
size(1000, 1000);
strokeWeight(10);
stroke(255,0,0);
noFill();
}
void draw(){
background(255);
beginShape();
for (int i = 0; i < dataPoints.size(); i++) {
PVector point = dataPoints.get(i);
vertex(point.x,point.y);
}
endShape();
}
void mousePressed() {
dataPoints.add(new PVector(mouseX, mouseY));
}
This a bit of a detail, but I recommend to following Java Naming Convention to keep the code consistent. (For example: renaming the dataPoint class to DataPoint and renaming the Point instance to point)
Context: Processing v3; Windows 10
I have an 853x2048 pixel image that I want to display fullsize on the screen. A large part of it will disappear off the bottom. I want to use Processing to navigate around inside the image, motion-path like, pause at certain points and also zoom in and out.
The code below is adapted from a demo of the Robot class as I thought that would be the go for moving around inside the image.
This code works but I can't as yet figure out how to move the viewport. And then there's the issue of zooming (which I am yet to address.)
How does one move the mouse so that the image moves or how does one move the image with respect to the viewport?
//
// how to use java.awt.Robot class in processing ...
//
import java.awt.*;
import java.awt.event.*;
Robot robot;
PFont pfont;
Point save_p;
PImage img;
void setup() {
try {
robot = new Robot();
robot.setAutoDelay(0);
}
catch (Exception e) {
e.printStackTrace();
}
surface.setResizable(true);
fullScreen();
img = loadImage("bigpic.jpg");
pfont = createFont("Impact", 32);
}
void draw() {
background(#ffffff);
fill(#000000);
imageMode(CORNERS);
image(img, 0, 0, 640*3, 480*8);
Point p = getGlobalMouseLocation();
textFont(pfont);
text("now x=" + (int)p.getX() + ", y=" + (int)p.getY(), 10, 32);
if (save_p != null) {
text("save x=" + (int)save_p.getX() + ", y=" + (int)save_p.getY(), 10, 64);
}
}
void keyPressed() {
switch(key) {
case 's':
save_p = getGlobalMouseLocation();
break;
case 'm':
if (save_p != null) {
mouseMove((int)save_p.getX(), (int)save_p.getY());
}
break;
case 'c':
break;
case 't':
translate(2000, 0);
break;
case ' ':
if (save_p != null) {
mouseMoveAndClick((int)save_p.getX(), (int)save_p.getY());
}
break;
}
}
Point getGlobalMouseLocation() {
// java.awt.MouseInfo
PointerInfo pointerInfo = MouseInfo.getPointerInfo();
Point p = pointerInfo.getLocation();
return p;
}
void mouseMove(int x, int y) {
robot.mouseMove(x, y);
}
void mouseMoveAndClick(int x, int y) {
robot.mouseMove(x, y);
robot.mousePress(InputEvent.BUTTON1_DOWN_MASK);
robot.mouseRelease(InputEvent.BUTTON1_DOWN_MASK);
robot.waitForIdle();
}
I'm a little confused by what you're doing with the Robot class.
But in any case, basically what you want to do is draw the image so its Y value is lower, which will cause the image to rise so you can see more of it. Here's a small example:
PImage img;
float imageY = 0;
void setup() {
img = loadImage("bigpic.jpg");
}
void draw() {
image(img, 0, imageY);
imageY--;
}
You can do something similar with resizing, just by passing in more parameters to the image() function.
But it sounds like what you're really looking for are the transformation functions. See the transform section of the Processing reference for more info, but basically you would call the translate() function to move the origin. You could also call the scale() function to "zoom" in and out.
Here's a little example that moves around a rectangle instead of an image:
void setup(){
size(500, 500);
}
void draw(){
background(64);
translate(-mouseX, -mouseY);
rect(0, 0, width, height);
}
Don't forget that Processing comes with a ton of examples. In the Processing editor, go to File > Examples.
I'm making a simple Processing program that creates a certain amount of points that randomly move and then when the mouse is clicked the points move to the mouse's location.
I made the points as ellipses so they'd be easier to see.
//number of points
int ptnum=2;
//list of points
Point[] points=new Point[ptnum];
//class to create points
class Point
{
float xpos;
float ypos;
//constructor
Point(float x, float y){
xpos=x;
ypos=y;
}
//return x-coordinate
float ptx(){
return xpos;
}
//return y-coordinate
float pty(){
return ypos;
}
//points randomly moving
void randMove(){
xpos+=random(-2,2);
ypos+=random(-2,2);
}
//display points
void display(){
fill(0);
ellipse(xpos,ypos,2,2);
}
//move points to mouse
void move(){
if(xpos>mouseX){
xpos-=1;
}
if(ypos>mouseY){
ypos-=1;
}
if(ypos<mouseY){
ypos+=1;
}
if(xpos<mouseX){
xpos+=1;
}
}
}
void setup(){
size(640,360);
//create ptnum of points
for(int i=0; i<ptnum; i++){
points[i]=new Point(random(1,width-1),random(1,height-1));
}
}
//each point to random move
void randomMovement(){
for(int i=0; i<ptnum; i++){
points[i].randMove();
}
}
//each point to display
void ptDisplay(){
for(int i=0; i<ptnum; i++){
points[i].display();
}
}
//each point to move
void ptMove(){
for(int i=0; i<ptnum; i++){
points[i].move();
}
}
void draw(){
//start
background(255,255,255);
noFill();
ptDisplay();
//==========
//if mouse clicked, move points to mouse XandY, if not-randommove
if(mousePressed){
ptMove();
}
else{
randomMovement();
}
}
I'm trying to make it so that the points can also interact with each other, for instance, they can't touch each other. Could someone help me figure this out? I'm having a bit a brain fart on this one. And if anyone has suggestions for the code, I'd be happy to hear them.
Thanks so much for the help, its appreciated.
Just calculate each point's location inside draw function.
Then, run a for loop to see if you have any collisions.
Since draw function is running many times per second, the result will be good enough.
When you have a collision, you can change each point's direction by 180 degrees.
Processing code as below:
int maxCircle = 200;
float minDistance=2;
float distance;
Circle [] circles= new Circle[maxCircle];
void setup(){
size(800,800);
smooth();
for(int i=0;i<maxCircle;i++){
circles[i] = new Circle(random(width),random(height),random(2,20));
}
}
void draw(){
background(255,255);
for(int i=0;i<maxCircle;i++){
circles[i].update(width,height);
for(int j=0;j<maxCircle;j++){
distance = dist(circles[i].x,circles[i].y,circles[j].x,circles[j].y);
if(distance<minDistance){
stroke(0,50);
noFill();
line(circles[i].x,circles[i].y,circles[j].x,circles[j].y);}}
circles[i].display();
}
}
void mouseMoved(){
for(int i = 0; i<maxCircle;i++){
circles[i].x+=(mouseX-circles[i].x)*.2;
circles[i].y+=(mouseX-circles[i].y)*.2;}}
class Circle{
float x,y,vx,vy,r,speed;
Circle(float tempx, float tempy, float tempr){
x=tempx;
y=tempy;
vx=random(-1,1);
vy=random(-1,1);
r=tempr;
}
void update(int w,int h){
x+=vx;
y+=vy;
if(x<r || x>w-r){
vx*=-1;};
if(y<r || y>h-r){
vy*=-1;};
}
void display(){
fill(0,50);
noStroke();
ellipse(x,y,r,r);
}
}
Two questions:
Why doesn't the line function work?
How can i make circles move smoothly(respectively) following my mouse instead of squeezing into one point abruptly?
Looks like Casey's work -- are you at UCLA?
Anyway -- the line() function does work. Try increasing your minDistance to something more like 20, and you'll see lines.
Re: mouse following, you're telling every circle to move 20% of the distance to the mouse, every frame. I'm not sure exactly what you want here; do you want only circles near the mouse to move with the mouse? If so, apply a distance check to the mouse for each circle and only move the circle toward the mouse if it's within that distance. Something like:
void mouseMoved() {
float distance;
for(int i = 0; i<maxCircle;i++){
float mouseDist = dist(circles[i].x,circles[i].y,mouseX,mouseY);
// move toward mouse only if < 100px from mouse
if (mouseDist < 100) {
circles[i].x+=(mouseX-circles[i].x)*.05;
circles[i].y+=(mouseY-circles[i].y)*.05;
}
}
}
I would like to load and draw multiple/all images from a directory in Processing.
I cant find a way to extend the one image example:
PImage a;
void setup() {
size(800,800);
background(127);
a = loadImage("a/1.jpg");
noLoop();
}
void draw(){
image(a,random(300),random(300),a.width/2, a.height/2);
}
to multiple images.
Is there a simple way to achieve this?
Thank you very much.
I'm sure there are more elegant ways to do it, but wouldn't something as simple as this work?
PImage a;
Pimage b;
void setup() {
size(800,800);
background(127);
a = loadImage("a/1.jpg");
b = loadImage("b/1.jpg");
noLoop();
}
void draw(){
image(a,random(300),random(300),a.width/2, a.height/2);
image(b,random(300),random(300),b.width/2, b.height/2);
}
You can find an example of listing a directories here: http://processing.org/learning/topics/directorylist.html. The reference section for loops is here: http://processing.org/reference/loop_.html.
Imagine u have a known number of images (n) called 0.jpg, 1.jpg, 2.jpg..., then u can do sth like this:
PImage[] fragment;
int n=3;
void setup() {
size(400, 400);
fragment=new PImage[n];
for(int i=0;i<fragment.length;i++){
fragment[i]=loadImage(str(i) + ".jpg");
}
}
void draw(){
for(int i=0;i<fragment.length;i++){
image(fragment[i],20*i,20*i);
}
}