Creative Coding

Experiments on processing, p5.js and unity to improve myself in creative and interactive designs with the help of the analitical thinking in coding.

Creative Computing Lecture from Prof. Dr. Ido Iurgel and Dr. Thomas Laubach

Drawing Sponge Bob (processing)

size(500, 500);

background(255);

stroke(10);

strokeWeight(0);

//sponge' body

fill(255, 246, 117);

rect(150, 100, 200, 150);

//sponge's arms

rect(70, 190, 80, 10);

rect(350, 190, 80, 10);

//sponge's panth

fill(97, 52,28);

rect(150, 250, 200, 50);

rect(170, 300, 10, 30);

rect(320,300,10,30);

//sponge's legs

line(175,330,175,360);

line(325,330,325,360);

//sponge's shoes

fill(0);

ellipse(325,360,15,10);

ellipse(175,360,15,10);

//sponge's eyes

fill(255);

ellipse(220,170,40,50);

ellipse(280,170,40,50);

//sponge's pupils

fill(0);

ellipse(225,170,10,10);

ellipse(275,170,10,10);

//sponge's mouth

fill(255);

rect(225,215,50,20,10);

Pinball Sponge (processing)

float spongeX;

float spongeY;

float xspeed = 4;

float yspeed = 2;

float eyeR;

float eyeG;

float eyeB;

void setup() {

size(500,500);

spongeX = width/2; // Sponge always starts in the middle of the X direction

spongeY = height/2; // Sponge always starts in the middle of the Y direction

smooth();

}

void draw(){

spongeX = spongeX + xspeed;

spongeY = spongeY + yspeed;

if ((spongeX+180 > width)|| (spongeX-180 < 0)) {

xspeed= xspeed * -1;

}

if ((spongeY+125> height)|| (spongeY-75 < 0)) {

yspeed= yspeed * -1;

}

background(255); // Draw a white background

// Set ellipses and rects to CENTER mode

ellipseMode(CENTER);

rectMode(CENTER);

stroke(10);

strokeWeight(0);

//sponge's body

fill(255, 246, 117);

rect(spongeX, spongeY, 200, 150);

//sponge's arms

rect(spongeX-140,spongeY+20,80,10);

rect(spongeX+140,spongeY+20,80,10);

//sponge panths

fill(97, 52,28);

rect(spongeX,spongeY+100,200,50);

//sponge's eyes

fill(random(170,250),random(20,80),random(20,60));

ellipse(spongeX,spongeY,80,100);

}

Array of Sponge (processing)

int numCars = 50;

Car[] myCar = new Car[numCars];

void setup() {

size(1000, 1000);

// Arguments go inside the parentheses when the object is constructed.

for (int i = 0; i < numCars; i++)

{

int carColor = color(random(0, 255), random(0, 255), random(0, 255));

int carX = (int) random (0, width);

int carY = (int) random(0, height);

int carSpeed = (int) random(1, 3);

myCar[i] = new Car(carColor, carX, carY, carSpeed);

}

}

void draw()

{

background(255);

for (int i = 0; i < numCars; i++)

{

myCar[i].move();

myCar[i].display();

}

}

// Even though there are multiple objects, only one class is needed.

// No matter how many cookies you make, only one cookie cutter is needed.

class Car {

color c;

float xpos;

float ypos;

float xspeed;

// The Constructor is defined with parameters.

Car(color tempC, float tempXpos, float tempYpos, float tempXspeed)

{

c = tempC;

xpos = tempXpos;

ypos = tempYpos;

xspeed = tempXspeed;

}

void display()

{

ellipseMode(CENTER);

rectMode(CENTER);

stroke(10);

strokeWeight(0);

//sponge's body

fill(255, 246, 117);

rect(xpos, ypos, 200, 150);

//sponge's arms

rect(xpos-140,ypos+20,80,10);

rect(xpos+140,ypos+20,80,10);

//sponge panths

fill(97, 52,28);

rect(xpos,ypos+100,200,50);

//sponge's eyes

fill(random(170,250),random(20,80),random(20,60));

ellipse(xpos,ypos,80,100);

}

void move() {

xpos = xpos + xspeed;

if ((xpos+100 > width)||(xpos-100 < 0 )) {

xspeed = xspeed*-1;

}

}

}