I'm new to processing, and trying to do this task. Maybe you know how to do it, or know where I could read about it.
I need something like this:
Thanks in advance for your help.
The image is a 4x3 grid with zero spacing between the columns(vg) and rows(hg):
final int _numRows = 3;
final int _numCols = 4;
void rectGrid(int l, int t, int w, int h, int hg, int vg) {
int left;
int top;
for (int k = 0; k < _numRows; k++) {
for (int j = 0; j < _numCols; j++) {
left = l + j*(w+vg);
top = t + k*(h+hg);
stroke(0);
strokeWeight(2);
fill(255);
rect( left, top, w, h);
}
}
}
void setup() {
size(640, 340);
background(209);
rectGrid(20, 20, 150, 100, 0, 0);
}
Related
How do I write the code (below) in an alternative (beginner) way? I don't wish to use createShape, setFill and addChild. Instead, any other way to perform the same thing?
grid = createShape(GROUP)
for i in range(C*R):
self.cell = createShape(RECT, (i%C)*S, (i//C)*S, S, S)
self.cell.setFill(colors[i] if i in filled else 210)
grid.addChild(self.cell)
Assuming that you're try to create a rectangle grid:
final int _numRows = 5;
final int _numCols = 7;
int l = 20;
int t = 20;
int w = 90;
int h = 60;
int hg = 10;
int vg = 10;
int left;
int top;
void rectGrid() {
for(int k = 0; k < _numRows; k++) {
for(int j = 0; j < _numCols; j++){
left = l + j*(w+vg);
top = t + k*(h+hg);
stroke(255);
strokeWeight(2);
fill(118);
rect( left, top, w, h);
}
}
}
void setup() {
size(800,500);
background(0,0,245);
rectGrid();
}
void draw() {
}
Adds a color array:
/*
Adds color array to rectangle grid.
*/
final int _numRows = 5;
final int _numCols = 7;
int l = 20;
int t = 20;
int w = 90;
int h = 60;
int hg = 10;
int vg = 10;
int left;
int top;
int count = 0;
color[] c;
void colorArray(){
for(int x=0; x< _numRows*_numCols; x++){
c[x] = color(random(255),random(255),random(255))
}
}
void rectGrid() {
for(int k = 0; k < _numRows; k++) {
for(int j = 0; j < _numCols; j++){
left = l + j*(w+vg);
top = t + k*(h+hg);
stroke(255);
strokeWeight(2);
fill(c[count]);
rect( left, top, w, h);
count++;
}
}
}
void setup() {
size(800,500);
background(0,0,245);
c = new color[_numCols*_numRows];
colorArray();
// Make sure the color array is filled first
rectGrid();
}
void draw() {
}
I want to make a Voronoi tiling which fits itself to some text in Processing 3.5.3. I've got the algorithm for standard Voronoi tiling implemented, but I initialise all points to just be randomly distributed across the window.
I've got a list of points which make up some letters, generated by the geomerative package. They're all in the standard (x, y) format.
I'm looking for a function which would take the text points and the window size into account and give me back a sort of distribution, or, better yet, a list of points already following that distribution.
My code:
import geomerative.*;
public class Point {
public RPoint p = new RPoint(0, 0);;
public color c;
public boolean isTextPt;
public Point(int _w, int _h, float[][] distribution) {
this.p.x = random(_w);
this.p.y = random(_h);
//this.c = color(random(100, 250), random(100, 250), random(100, 250));
this.c = color(map(p.x, 0, _w, 50, 160), map(p.y, 0, _h, 0, 150), 255);
this.isTextPt = false;
}
public Point(float _x, float _y) {
this.p.x = _x;
this.p.y = _y;
this.c = color(random(50, 160), random(100, 250), 255);
this.isTextPt = true;
}
}
int baseAmountOfCells = 50;
RShape shape;
RPoint[] textPts;
Point[] points;
void setup() {
RG.init(this);
shape = new RFont("RobotoMono-Medium.ttf", 140, RFont.CENTER).toShape("voronoi songs for worley days");
textPts = shape.getPoints();
fullScreen();
colorMode(HSB);
points = new Point[baseAmountOfCells + textPts.length];
for (int i = 0; i < baseAmountOfCells; i ++) {
points[i] = new Point(width, height);
}
for (int i = 0; i < textPts.length; i ++) {
points[baseAmountOfCells + i] = new Point(textPts[i].x / 2 + width / 2, textPts[i].y / 2 + height / 2);
}
println("Amount of text points: " + str(textPts.length));
}
void draw() {
loadPixels();
int index = 0;
for (int y = 0; y < height; y++) {
for (int x = 0; x < width; x++) {
float record = width * height; //it can never be more than this
int recIndex = 0;
for (int i = 0; i < points.length; i++) {
float d = dist(x, y, points[i].p.x, points[i].p.y);
if (d < record) {
record = d;
recIndex = i;
}
}
Point pt = points[recIndex];
pixels[index] = color(pt.c);
index++;
}
}
updatePixels();
for (Point pt : points) {
if (pt.isTextPt) {
stroke(0);
strokeWeight(2);
point(pt.p.x, pt.p.y);
}
}
noLoop();
}
//----------------------------------------------\\
float x = 300;
float y = 300;
float direction = 0;
float increment = 1;
float speed = 5;
boolean toggle = true; // - For spaceship reversal
float wormX = random(0, 600); // - For wormHole v
float wormY = random(0, 600);
float wormGrowth = 0;
boolean growthSwitch = true; // - for wormHole ^
float[] starXpos = new float[100]; //starsRandom
float[] starYpos = new float[100]; //starsRandom
float d = dist(x, y, wormX, wormY);
int score = 0;
//----------------------------------------------\\
//----------------------------------------------\\ Setup
void setup (){
size (600, 600);
starsP1();
}
//----------------------------------------------\\ Draw
void draw (){
background (0);
spaceShip();
starsP2();
wormHole ();
score();
warpInitial();
blackHoleAt(100, 40);
blackHoleAt(400, 500);
}
//----------------------------------------------\\
//----------------------------------------------\\ starsRandom
void starsP1(){
int i = 0;
while (i < 100){
starXpos[i] = random(0, width);
starYpos[i] = random(0, height);
i = i + 1;
}
}
void starsP2(){
stroke(255);
strokeWeight(5);
int i = 0;
while (i < 100){
point(starXpos[i], starYpos[i]);
i = i + 1;
}
if (key == 'w'){
starYpos[i] = starYpos[i] + 1;
}
}
I'm trying to create a form of parallax for the stars in my code. When the user presses w,a,s,d the array of stars should correspond to the direction. I don't understand how this should work as I keep getting this error.
Try formatting your code to better see what's going on:
void starsP2(){
stroke(255);
strokeWeight(5);
int i = 0;
while (i < 100){
point(starXpos[i], starYpos[i]);
i = i + 1;
}
if (key == 'w'){
starYpos[i] = starYpos[i] + 1;
}
}
Your while loop executes until i == 100. Then after the while loop exits, you use that i variable again. Since i is 100, and your starYpos array only has up to index 99, you get an error.
The fix is to either move that if statement to inside the while loop, or to refactor your code so i doesn't go outside the bounds of the array.
I have to use Sobel edge detection to detect how an image has been tampered with. I have been able to implement the edge filter, but have not been able to figure out how to use it to detect tampering. I want to show the tampering by highlighting the region that has been tampered with in another color.
Can someone help please?
PImage img, edgeImg;
int[][] sobelx = { { -1, -2, -1 }, { 0, 0, 0 }, { 1, 2, 1 } };
int[][] sobely = { { -1, 0, 1 }, { -2, 0, 2 }, { -1, 0, 1 } };
void setup() {
img = loadImage("face1.jpg");
size(img.width, img.height);
edgeImg = createImage(img.width, img.height, RGB);
}
void draw() {
image(img, 0, 0);
int matrixsize = 3;
loadPixels();
img.loadPixels();
int loc = 0;
for (int x = 1; x < img.width - 1; x++) {
for (int y = 1; y < img.height - 1; y++) {
loc = x + y * img.width;
int sx = convolution(x, y, sobelx, matrixsize, img);
int sy = convolution(x, y, sobely, matrixsize, img);
int sum = abs(sy) + abs(sx);
sum = constrain(sum, 0, 255);
edgeImg.pixels[loc] = sum;
}
}
edgeImg.updatePixels();
image(edgeImg, 0, 0);
filter(THRESHOLD, 0.8);
}
int convolution(int x, int y, int [][] mat, int matrixsize, PImage img) {
float rtotal = 0.0;
float gtotal = 0.0;
float btotal = 0.0;
int total = 0;
int offset = matrixsize/2;
for(int i=0; i<matrixsize; i++) {
for(int j=0; j<matrixsize; j++) {
int xloc = x + i - offset;
int yloc = y + j - offset;
int loc = xloc + img.width*yloc;
loc = constrain(loc,0,img.pixels.length - 1);
rtotal = rtotal + red(img.pixels[loc])*mat[i][j];
gtotal = gtotal + green(img.pixels[loc])*mat[i][j];
btotal = btotal + blue(img.pixels[loc])*mat[i][j];
total = total + int(brightness(img.pixels[loc])*mat[i][j]);
}
}
rtotal = constrain(rtotal, 0, 255);
gtotal = constrain(gtotal, 0, 255);
btotal = constrain(btotal, 0, 255);
return total;
}
I don't know how the algorithm can be used for your particular purpose, but I would guess you would need to run the same filter to the original image and compare the results.
PImage original = loadImage("face1.jpg");
PImage edgeImg; // previously created
original.loadPixels();
edgeImg.loadPixels();
for (int i=0; i<original.pixels.length; i++) {
color origPx = original.pixels[i];
color edgePx = edgeImg.pixels[i];
// compare red values, since the edgeImg is B&W
if ( (origPx >> 16 & 0xFF) != (edgePx >> 16 & 0xFF) ) {
// don't match? do something!
}
}
I'm new to Processing. Why don't I see the first matrix drawn? I seem to only see the matrix after the delay, and not the one before. My ultimate goal is to watch how a matrix changes over time steps.
// Number of columns and rows in the grid
int[][] myArray = { {0, 1, 2, 3},
{3, 2, 1, 0},
{3, 5, 6, 1},
{3, 8, 3, 4} };
void setup() {
size(200,200);
}
void draw() {
background(204);
for (int i = 0; i < 4; i++) {
for (int j = 0; j < 4; j++) {
rect(20+30*j,30+30*i,3,3);
}
}
delay(2500);
background(204);
for (int i = 0; i < 4; i++) {
for (int j = 0; j < 4; j++) {
rect(40+30*j,50+30*i,7,7);
}
}
}
Your myArray variable is misleading, it doesn't seem to be used anywhere.
Basically you want to animate/interpolate between values.
Your code does this in the draw loop:
clear the background
draw 16 squares
wait 2500 ms
clear the background
draw 16 squares
which you'll tiny squares and after 2500 ms larger squares and that's it.
What want to do can be achieved in many ways, from the simpler to the more complex. Luckily Processing offers a lot of handy functions.
You want to store a property (like x position of a box) in a variable which you'll update over time and use the updated value to redraw on screen:
int x = 20;
int y = 30;
int w = 3;
int h = 3;
void setup() {
size(200,200);
}
void draw() {
//update
if(x <= 40) x++;
if(y <= 50) y++;
if(w <= 7) w++;
if(h <= 7) h++;
//draw
background(204);
for (int i = 0; i < 4 ; i++) {
for (int j = 0; j < 4; j++) {
rect(x+30*j,y+30*i,w,h);
}
}
}
You could also map() your values to a variable changing over time:
int x,y,s;
int xmin = 20,xmax = 40;
int ymin = 30,ymax = 50;
int smin = 3,smax = 7;
void setup() {
size(200,200);
}
void draw() {
//update
x = (int)map(mouseX,0,width,xmin,xmax);
y = (int)map(mouseX,0,width,ymin,ymax);
s = (int)map(mouseX,0,width,smin,smax);
//draw
background(204);
for (int i = 0; i < 4 ; i++) {
for (int j = 0; j < 4; j++) {
rect(x+30*j,y+30*i,s,s);
}
}
}
Or use linear interpolation (already implemented as lerp()):
int xmin = 20,xmax = 40;
int ymin = 30,ymax = 50;
int smin = 3,smax = 7;
void setup() {
size(200,200);
}
void draw() {
//update
float t = (float)mouseX/width;
//draw
background(204);
for (int i = 0; i < 4 ; i++) {
for (int j = 0; j < 4; j++) {
rect(lerp(xmin,xmax,t)+30*j,
lerp(ymin,ymax,t)+30*i,
lerp(smin,smax,t) ,
lerp(smin,smax,t) );
}
}
}
and you could alter your interpolation amount based on any variable you like:
int xmin = 20,xmax = 40;
int ymin = 30,ymax = 50;
int smin = 3,smax = 7;
void setup() {
size(200,200);
}
void draw() {
//update
float t = abs(sin(frameCount * .01));
//draw
background(204);
for (int i = 0; i < 4 ; i++) {
for (int j = 0; j < 4; j++) {
rect(lerp(xmin,xmax,t)+30*j,
lerp(ymin,ymax,t)+30*i,
lerp(smin,smax,t) ,
lerp(smin,smax,t) );
}
}
}
HTH