# P5js to Processing

**URL:** <https://discourse.processing.org/t/p5js-to-processing/33900>\
**Category:** p5.js\
**Created:** [December 3, 2021, 7:17pm UTC](https://discourse.processing.org/t/p5js-to-processing/33900 "2021-12-03T19:17:28Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Kristina](https://avatars.discourse-cdn.com/v4/letter/k/2acd7d/32.png) [@Kristina](https://discourse.processing.org/u/Kristina)\
**Post date:** [December 3, 2021, 7:17pm UTC](https://discourse.processing.org/t/p5js-to-processing/33900/1 "2021-12-03T19:17:28Z")

</div>

Hello! I have created this game in p5js but now i have to convert it to processing and i have no idea how to do it. Can anyone help me?

> var enemy, enemyList,enemyIMG; //Obstacle Variables  
> var player, playerIMG, bullets;//Player Variables  
> var health=100;  
> var damage=1;  
> var hurtFeedBack= {r:255, g:67, b:64};  
> var hurt=false;  
> function setup() {  
> createCanvas(600, windowHeight);  
> background(0);

```
player= createSprite(windowWidth/2,windowHeight-50,50,50); //Initiate the player sprite
player.shapeColor=color(0,0,0,0); //Set the sprite colour to transparent

enemyList= new Group(); //Create a group to contain all of the generated obstacles
bullets = new Group(); //Create a group to contain all of the generated bullets

enemyIMG= loadImage('mr-poop.png');
playerIMG= loadImage('original.gif');

```

> }  
> //====SPAWN BULLET WHEN MOUSE CLICKED===//  
> function mousePressed(){  
> var b = createSprite(mouseX,windowHeight-50,2,20);  
> b.addToGroup(bullets);  
> b.shapeColor = color(250, 255, 0);  
> b.velocity.y =-5;  
> }

> function draw() {

```
>//====CHANGE BACKGROUND COLOUR WHEN HURT====//
if(hurt){
				background(hurtFeedBack.r, hurtFeedBack.g, hurtFeedBack.b,20);
}else{
		background(12, 0, 61);
}

//===SPAWN ENEMY/OBSTACLESx1ps===//
if(frameCount%25==0){
		enemy=createSprite(random(0,600),0,50,50); //creating an enemy at a random position between 0 and width
		enemy.draw=function(){ //customise the appearance of the enemy sprite
				push();
				translate(this.deltaX,this.deltaY);
				image(enemyIMG,0,0,50,50); //change img size here
				pop();
		}
		enemy.velocity.y=5; //the speed at which the enemy travels down the window
		enemy.addToGroup(enemyList); //must add the enemies spawed to the list so we can check for collisions later
}	

//===ENEMY COLLIDES WITH PLAYER===//
if(enemyList.overlap(player)){
			health=health-damage;
			hurt=true;
		print("hurt "+hurt);
	}else{
		hurt=false;
	}	

//===WHEN EACH BULLTER OVERLAPS ANY OF THE ENEMIES==//
for(var i=0;i<enemyList.length;i++){
		if(bullets.overlap(enemyList[i])){
				enemyList[i].remove();	
			 }	
}

//======PLAYER BEHAVIOUR=====//
player.position.x=mouseX;
//player.shapeColor=color(255,255,255,0);
image(playerIMG,mouseX-50,windowHeight-100,100,100);
//player.position.y=mouseY;

//==RENDER ALL SPRITES==//
drawSprites();
//===THE FRAME===//
noFill();
stroke(255);
strokeWeight(3);
rect(0,0,600,windowHeight);

HealthBar(50,10,500,10,health);
GameOver();

```

} \>

Also i am sorry if i messed up the formatting haha i dont get how it works.

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [December 4, 2021, 1:23pm UTC](https://discourse.processing.org/t/p5js-to-processing/33900/2 "2021-12-04T13:23:09Z")

</div>

Hello,

> [@Kristina](#):
>
> Also i am sorry if i messed up the formatting haha i dont get how it works.

[https://discourse.processing.org/faq#format-your-code](https://discourse.processing.org/faq#format-your-code)

You can go back and edit your code:  
 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/4/4c54d07d5e8d8e1f4cb645047dd0851bf5f55519.png)

Click on the icon that looks like a pencil (second from the left).

`:)`