top of page
Search

It's Bananas

Updated: Jul 16, 2020


After everything I have learned, I wanted to make a digital poster, using deviant pixels and a little bit of movement, to cath the attention of the user. This is what I came up with:



This is the code:


PImage banana;

int x = 0;

int y = 0;

int speed = 7;

int state = 0;

void setup(){

size(1080, 700);

background(200,160,150);

//load the image

banana = loadImage("banana.jpg");

//display the image at position 0,0

//image(banana,0,0);

int widthNewPixel=7;

int heightNewPixel=7;

for (int x=4; x<width; x=x+widthNewPixel) {

for (int y=0; y<height; y=y+heightNewPixel) {

color imagePixelColor=banana.get(x, y);

noStroke();

fill(imagePixelColor);

ellipse(x, y, widthNewPixel-1, heightNewPixel-1);

}

}

//text

PFont f = createFont("overpass", 100);

String s = "Eat your";

String t = "Bananas!";

fill(255);

textFont(f);

textSize(130);

text(s,75,200);

text(t,75,350);

}

void draw() {

// Display the square

noStroke();

fill(255,215,210);

rect(x,y,30,30);

if (state == 0) {

x = x + speed;

if (x > width-30) {

x = width-30;

state = 1;

}

} else if (state == 1) {

y = y + speed;

if (y > height-30) {

y = height-30;

state = 2;

}

} else if (state == 2) {

x = x - speed;

if (x < 0) {

x = 0;

state = 3;

}

} else if (state == 3) {

y = y - speed;

if (y < 0) {

y = 0;

state = 0;

}

}

}



This is important because of the different states I need to change the directions of the rectangle. Since I don't have a background in draw, I can still se the image behind. This way it looks like the maring draws itself.


This excercise was a combination of the las things I learned and an excercise I did months ago. I love Bananas and I really like the color combination, that is why I decided to use this and just have a bit of fun with it.

 
 
 

Commentaires


© 2020 by Maria Guzman. Proudly created with Wix.com.

bottom of page