Scribd
Upload
4 views4 pages

Coded

The document contains a JavaScript program that creates a graphical interface using the p5.js library. It allows users to interact with colored boxes to change the color of an ellipse and a photon that moves across the canvas. The program includes functions for drawing shapes, handling mouse events, and defining a photon class for movement and display.

Uploaded by

singhtanishka100
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
4 views4 pages

Coded

The document contains a JavaScript program that creates a graphical interface using the p5.js library. It allows users to interact with colored boxes to change the color of an ellipse and a photon that moves across the canvas. The program includes functions for drawing shapes, handling mouse events, and defining a photon class for movement and display.

Uploaded by

singhtanishka100
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 4

let ph1;

//variables
var fillbox;
var fillphoton;

function setup()
{
createCanvas(400, 400);
ph1=new photon();
}

function draw()
{
background(220);
//ellipse
fill("white")
ellipse(200,150,50,100)

//photon
ph1.show()
ph1.move()

//functions
boxes();
choice();

//function for boxes


function boxes()
{
fill("white")
rect(20,250,20,20);
fill("red")
rect(45,250,20,20);
fill("blue")
rect(70,250,20,20);
fill("green")
rect(95,250,20,20);

fill("white")
rect(200,250,20,20);
fill("red")
rect(225,250,20,20);
fill("blue")
rect(250,250,20,20);
fill("green")
rect(275,250,20,20);
}

//function for filling circle


function mousePressed()
{
//box1
if(mouseX>20 && mouseX<40 && mouseY>250 && mouseY<270)
{
fillbox=1;
}
//box2
if(mouseX>45 && mouseX<65 && mouseY>250 && mouseY<270)
{
fillbox=2;
}
//box3
if(mouseX>70 && mouseX<90 && mouseY>250 && mouseY<270)
{
fillbox=3;
}
//box3
if(mouseX>95 && mouseX<115 && mouseY>250 && mouseY<270)
{
fillbox=4;
}
if(mouseX>200&&mouseX<220&&mouseY<270&&mouseY>250)
{
fillphoton=1;
}
//box2
if(mouseX>225&&mouseX<245&&mouseY<270&&mouseY>250)
{
fillphoton=2;
}
//box3
if(mouseX>250&&mouseX<270&&mouseY<270&&mouseY>250)
{
fillphoton=3;
}
//box3
if(mouseX>275&&mouseX<295&&mouseY<270&&mouseY>250)
{
fillphoton=4;
}
}

function choice()
{
if(fillbox==1)
{
fill("white")
ellipse(200,150,50,100)

if(fillbox==2)
{
fill("red")
ellipse(200,150,50,100)

}
if(fillbox==3)
{
fill("blue")
ellipse(200,150,50,100)

}
if(fillbox==4)
{
fill("green")
ellipse(200,150,50,100)

}
}
//class for photon to move and show
class photon
{
constructor()
{
this.x=0

}
show()
{

if(fillphoton==1)
{
fill("white")
ellipse(this.x,200,15)

if(fillphoton==2)
{
fill("red")
ellipse(this.x,200,15)

}
if(fillphoton==3)
{
fill("blue")
ellipse(this.x,200,15)

}
if(fillphoton==4)
{
fill("green")
ellipse(this.x,200,15)

}
}

move()
{
this.x=this.x+10
if(this.x>400)
{
this.x=0
}
}
}
function()
{
if
}

You might also like