In the program below, I try to change the pixel colors form a image with the click of the mouse, however, I'm trying to return to the original image with the second click but I haven't been able to find the rigth argument to do it...
PImage pic;
void setup(){
pic=loadImage("road.jpg"); // Loading the image from a folder "date" attached to the sketch
size (pic.width,pic.height);
image(pic,0,0);
}
void draw(){
}
void mousePressed(){
loadPixels();
pic.loadPixels();
for (int y = 0; y < height; y++ ) {
for (int x = 0; x < width; x++ ) {
int loc = x + y*width;
if(red(pixels[loc]) >170 && red(pixels[loc])<215){
pixels[loc]=color(187,0,0); //changing the pixels color from red to green
}
}
}
for (int y = 0; y < height; y++ ) {
for (int x = 0; x < width; x++ ) {
int loc = x + y*width;
if(green(pixels[loc]) >120 && green(pixels[loc])<160){
pixels[loc]=color(0,192,0); //changing the pixels color form green to red
}
}
}
// I belive that here I have to add an argument that returns to the original image
updatePixels();
}
I will appreciate any help.
Thanks.
What I typically do for this sort of thing is to create /two/ images, one being the file (target) and the other being a blank Image.
PImage target;
PImage destination;
target = loadImage("file.jpg");
destination = createImage(target.width, target.height, RGB);
And then I copy the target's information into the destination's pixels. If I want to switch back, I can just call target; I'm able to freely swap back and forth by saving them as two separate images.
For an example, check out a sketch of mine on openprocesing: http://openprocessing.org/visuals/?visualID=49301
Related
I found a program, that generates random letters in a grid and gives them a random color.
How can I have the letters cange in color or brightness while the program is running?
(sourcecode: https://happycoding.io/examples/processing/for-loops/letters)
I tried making the fill(r, g, b) have a 'r' that cycles from 1 to 255 and back while having 'g' and 'b' at 0, but I could´t get it to update the color. Im cinda new to programming so I´d love to know how I could make that happen.
First, let's change the fill method to accept RGB values:
fill(random(256),random(256),random(256));
To change the colors while the program is running, the changes must be made inside the draw() method, that will constantly loop and update the canvas. Further information about draw here I believe the following code outputs what you asked for:
int rows = 10;
int cols = 10;
int cellHeight;
int cellWidth;
void setup(){
size(500, 500);
cellHeight = height/rows;
cellWidth = width/cols;
textAlign(CENTER, CENTER);
textSize(28);
}
void draw(){
background(32);
for(int y = 0; y < rows; y++){
for(int x = 0; x < cols; x++){
//get a random ascii letter
char c = '!';
c += random(93);
//calculate cell position
int pixelX = cellWidth * x;
int pixelY = cellHeight * y;
//add half to center letters
pixelX += cellWidth/2;
pixelY += cellHeight/2;
fill(random(256),random(256),random(256));
text(c, pixelX, pixelY);
}
}
delay(100);
}
How to split an image into equal-sized parts? Just taking an image from asset and splitting it into equal parts in a grid-like manner, so that each image part can be used as a separate image.
Something similar to picture
You can use this package (https://pub.dev/packages/image) to crop the image from asset with the function copyCrop. Save them to List then display like your example.
Edit:
I think you know how to split your image and display them like your example if you know how to crop your image so I just show you how to change from image from asset to image of image package for cropping.
List<Image> splitImage(List<int> input) {
// convert image to image from image package
imglib.Image image = imglib.decodeImage(input);
int x = 0, y = 0;
int width = (image.width / 3).round();
int height = (image.height / 3).round();
// split image to parts
List<imglib.Image> parts = List<imglib.Image>();
for (int i = 0; i < 3; i++) {
for (int j = 0; j < 3; j++) {
parts.add(imglib.copyCrop(image, x, y, width, height));
x += width;
}
x = 0;
y += height;
}
// convert image from image package to Image Widget to display
List<Image> output = List<Image>();
for (var img in parts) {
output.add(Image.memory(imglib.encodeJpg(img)));
}
return output;
}
Remember to add this import 'package:image/image.dart' as imglib;
So the code I'm writing is to output an array on the screen. The example I have been basing off my problem is here in which there are dots that are an equal distance from each other. If you're too lazy to click the link, this is the code:
float[][] distances;
float maxDistance;
int spacer;
void setup() {
size(640, 360);
maxDistance = dist(width/2, height/2, width, height);
distances = new float[width][height];
for (int y = 0; y < height; y++) {
for (int x = 0; x < width; x++) {
float distance = dist(width/2, height/2, x, y);
distances[x][y] = distance/maxDistance * 255;
}
}
spacer = 10;
noLoop(); // Run once and stop
}
void draw() {
background(0);
// This embedded loop skips over values in the arrays based on
// the spacer variable, so there are more values in the array
// than are drawn here. Change the value of the spacer variable
// to change the density of the points
for (int y = 0; y < height; y += spacer) {
for (int x = 0; x < width; x += spacer) {
stroke(distances[x][y]);
point(x + spacer/2, y + spacer/2);
}
}
}
What I have coded only returns a white window. This is that code:
float [] arrays = {1.0,2.0,3.0,4.0,5.0,6.0,7.0,8.0,9.0,10.0};;
int spacer=50;
PFont font;
int row;
int col;
void setup(){
size(640,360);
font = createFont("Arial",1);
textFont(font,50);
}
void draw(){
background(255,255,255);
for(int i = 0; i<col; i++){
for(int j=0;j<row;j++){
String myArray = nfp(arrays[i*col+j],1,2);
fill(0,0,0);
text(myArray, i+spacer/2, j+spacer/2);
}
}
}
I'm super new to processing, and stuff. Thanks ahead of time!
In your code, i don't see your col and row initializated.
You should do it in void setup()
Maybe that's the reason why you are not seeing anything on your window, because if this two variables has no value your two loops doesn't execute. In the example you provide, use width and height that are "system variables" that return the size of the window (640x360 in the example)
Also, watch out this:
float [] arrays = {1.0,2.0,3.0,4.0,5.0,6.0,7.0,8.0,9.0,10.0};; (two semicolons)
Hey guys i thought this was going to be a 1second thing to do, currently i have a tileset for a 2d game and depending on the terrain it calls these tile sets. and the tile sets are colour coded pink is the material and blue is the material adjacent to the tile.
so far when terrain changes or on load up i draw the tiles on the screen and any new tiles as i move. this is all fine and works very well, but when i have like 50 grass tiles that need to be changed from pink to green and 75 dirt tiles which need to be changed from pink to grey i have a issue.
it only appears the first tile is changed then every other tile infront or before that tile is the same colour as the first colour.
ill give you an example in code what im doing
Color[] storePixels = new Color[50 * 50];
for(int y = 0; y < 100; y ++)
{
for(int x = 0; x < 100; x++)
{
tileTexture[y,x].GetData(storePixels);
for(int i = 0; i < storePixels.Length; i ++)
{
if(tileMaterial[y,x] == "DIRT")
{
storePixels[i] = new Color(100,100,100);
}
if(tileMaterial[y,x] == "GRASS")
{
storePixels[i] = new Color(0,255,0);
}
}
tileTexture[y,x].SetData(storePixels);
}
}
To me i cant see why this wont work. i assume maybe i need to reset the storePixels which i have tried but still it does not create green if its grass or grey if its dirt.
Please let me know if you know why this is not working thank you for your time and thank you in advance :)
OK! i figured it out im calling the same Image in my content folder
for(int y = 0; y < 100; y ++)
{
for(int x = 0; x < 100; x ++)
{
tileTexture[y,x] = Content.Load<Texture2D>("tile");
}
}
so now we are getting somewere we know why the problem is being cuassed as i change the Texture2D through SetData() it actually changes this tile texture2D directly and everything else that calls it will always be changed.
i cannot call it in a loop, i only call it at startup i could try store a copy of the texture2D and then change it.
i dunno does anyone have any further solutions to help solve this problem? thanks for you time :)
for(int y = 0; y < 100; y++)
{
for(int x = 0; x < 100; x++)
{
spriteBatch.Draw(tileTexture[y,x],rectangle,Color.White);
}
}
this is how i am drawing my grid
That code is a bad idea...
you can work with only one white texture...
WhiteTex = new Texture2D(GraphicsDevice,1,1);
WhiteTex.SetData<Color>(new Color[] {Color.White };
you can draw tiles this way...
Enum MaterialTypes { Dirt, Grass }
static readonly Dictionary<int, Color> MaterialTypeToColor = new Dictionary() { {0, new Color(100,100,100)}, {1, new Color(0,255,0) }};
for(int y = 0; y < 100; y ++)
{
for(int x = 0; x < 100; x++)
{
batch.Draw(whiteTex, new Rectangle(x*50,y*50, 50,50), null, (MaterialTypeToColor[ (int) tileMaterial[y,x]]);
}
}
I'm currently making an application using processing intended to take an image and apply 8bit style processing to it: that is to make it look pixelated. To do this it has a method that take a style and window size as parameters (style is the shape in which the window is to be displayed - rect, ellipse, cross etc, and window size is a number between 1-10 squared) - to produce results similar to the iphone app pxl ( http://itunes.apple.com/us/app/pxl./id499620829?mt=8 ). This method then counts through the image's pixels, window by window averages the colour of the window and displays a rect(or which every shape/style chosen) at the equivalent space on the other side of the sketch window (the sketch when run is supposed to display the original image on the left mirror it with the processed version on the right).
The problem Im having is when drawing the averaged colour rects, the order in which they display becomes skewed..
Although the results are rather amusing, they are not what I want. Here the code:
//=========================================================
// GLOBAL VARIABLES
//=========================================================
PImage img;
public int avR, avG, avB;
private final int BLOCKS = 0, DOTS = 1, VERTICAL_CROSSES = 2, HORIZONTAL_CROSSES = 3;
public sRGB styleColour;
//=========================================================
// METHODS FOR AVERAGING WINDOW COLOURS, CREATING AN
// 8 BIT REPRESENTATION OF THE IMAGE AND LOADING AN
// IMAGE
//=========================================================
public sRGB averageWindowColour(color [] c){
// RGB Variables
float r = 0;
float g = 0;
float b = 0;
// Iterator
int i = 0;
int sizeOfWindow = c.length;
// Count through the window's pixels, store the
// red, green and blue values in the RGB variables
// and sum them into the average variables
for(i = 0; i < c.length; i++){
r = red (c[i]);
g = green(c[i]);
b = blue (c[i]);
avR += r;
avG += g;
avB += b;
}
// Divide the sum of the red, green and blue
// values by the number of pixels in the window
// to obtain the average
avR = avR / sizeOfWindow;
avG = avG / sizeOfWindow;
avB = avB / sizeOfWindow;
// Return the colour
return new sRGB(avR,avG,avB);
}
public void eightBitIT(int style, int windowSize){
img.loadPixels();
for(int wx = 0; wx < img.width; wx += (sqrt(windowSize))){
for(int wy = 0; wy < img.height; wy += (sqrt(windowSize))){
color [] tempCols = new color[windowSize];
int i = 0;
for(int x = 0; x < (sqrt(windowSize)); x ++){
for(int y = 0; y < (sqrt(windowSize)); y ++){
int loc = (wx+x) + (y+wy)*(img.width-windowSize);
tempCols[i] = img.pixels[loc];
// println("Window loc X: "+(wx+(img.width+5))+" Window loc Y: "+(wy+5)+" Window pix X: "+x+" Window Pix Y: "+y);
i++;
}
}
//this is ment to be in a switch test (0 = rect, 1 ellipse etc)
styleColour = new sRGB(averageWindowColour(tempCols));
//println("R: "+ red(styleColour.returnColourScaled())+" G: "+green(styleColour.returnColourScaled())+" B: "+blue(styleColour.returnColourScaled()));
rectMode(CORNER);
noStroke();
fill(styleColour.returnColourScaled());
//println("Rect Loc X: "+(wx+(img.width+5))+" Y: "+(wy+5));
ellipse(wx+(img.width+5),wy+5,sqrt(windowSize),sqrt(windowSize));
}
}
}
public PImage load(String s){
PImage temp = loadImage(s);
temp.resize(600,470);
return temp;
}
void setup(){
background(0);
// Load the image and set size of screen to its size*2 + the borders
// and display the image.
img = loadImage("oscilloscope.jpg");
size(img.width*2+15,(img.height+10));
frameRate(25);
image(img,5,5);
// Draw the borders
strokeWeight(5);
stroke(255);
rectMode(CORNERS);
noFill();
rect(2.5,2.5,img.width+3,height-3);
rect(img.width+2.5,2.5,width-3,height-3);
stroke(255,0,0);
strokeWeight(1);
rect(5,5,9,9); //window example
// process the image
eightBitIT(BLOCKS, 16);
}
void draw(){
//eightBitIT(BLOCKS, 4);
//println("X: "+mouseX+" Y: "+mouseY);
}
This has been bugging me for a while now as I can't see where in my code im offsetting the coordinates so they display like this. I know its probably something very trivial but I can seem to work it out. If anyone can spot why this skewed reordering is happening i would be much obliged as i have quite a lot of other ideas i want to implement and this is holding me back...
Thanks,