A program that:(JAVASCRIPT) 1) Increase and Decrease the size of a shape 2) Move the shape(...
A program that:(JAVASCRIPT)
1) Increase and Decrease the size of a shape
2) Move the shape( In random directions)
3) Reset shape to it's original state (Size and position)
4) Shape used must be circle
Create a button for each requirement. (Eg. "Smaller" button, "Bigger" button , "Move" button and "Reset" button)
I have already done the Increase and Decrease shape. I just need the Move and Reset button to the done.
Do PM me for more details.
Homework Answers
Please comment if you need modification/Explanation
HTML page:
<HTML>
<HEAD>
<script src="circleScript.js"> </script>
<TITLE>Draw a circle</TITLE>
</head>
<body onload="draw();">
<button id="increase"
onClick="increase();"> Biger</Button>
<button id="decrease"
onClick="decrease();"> Smaller</Button>
<button id="move" onClick="move();"> Move
Circle </Button>
<button id="reset" onClick="draw();">Reset
</Button>
<canvas id="circle" width="450"
height="450"></canvas>
</body>
</HTML>
Srcipt Page circleScript.js:
//constant for bringing the circle back to its original
place
const X = 250; //X coordinate
const Y = 250; //Y coordinate
const R = 45; //Radius coordinate
//variables for changing size/moving the circle
var X1=X;
var Y1=Y;
var R1=R;
//function for drawing circle when html page is opened
function draw()
{ //get the canvas
var canvas = document.getElementById('circle');
//if getContext of Canvas is successful
if (canvas.getContext)
{
var ctx = canvas.getContext('2d');
//clear whatever is present in the canvas
ctx.clearRect(0, 0, canvas.width,
canvas.height);
//begin drawing
ctx.beginPath();
//arc method creates curve at X and Y coordinate
with angle 0 and Radius R
ctx.arc(X, Y, R, 0, 2 * Math.PI, false);
//set width of the circle to 3
ctx.lineWidth = 3;
//set style of the circle
ctx.strokeStyle = '#FF0000';
ctx.stroke();
}
}
//function for increasing the size of circle
function increase(){
var canvas =
document.getElementById('circle');
if (canvas.getContext)
{
//increment the radius
R1=R1+5;
var ctx = canvas.getContext('2d');
//clear the canvas
ctx.clearRect(0, 0, canvas.width,
canvas.height);
ctx.beginPath();
//draw circle after incrementing radius
value
ctx.arc(X1, Y1, R1, 0, 2 * Math.PI,
false);
ctx.lineWidth = 3;
ctx.strokeStyle = '#FF0000';
ctx.stroke();
}
}
//function for decreasing the size of circle
function decrease(){
var canvas = document.getElementById('circle');
if (canvas.getContext)
{
//decrease the radius of circle
R1=R1-5;
var ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, canvas.width,
canvas.height);
ctx.beginPath();
ctx.arc(X1, Y1, R1, 0, 2 * Math.PI,
false);
ctx.lineWidth = 3;
ctx.strokeStyle = '#FF0000';
ctx.stroke();
}
}
//function for moving the circle
function move(){
var canvas =
document.getElementById('circle');
if (canvas.getContext){
//set X1 coordinate to random value
between 1 to 400
X1=Math.floor((Math.random() * 400)
+ 1);
//set Y1 coordinate to random value
between 1 to 400
Y1=Math.floor((Math.random() * 300)
+ 1);
var ctx =
canvas.getContext('2d');
ctx.clearRect(0, 0, canvas.width,
canvas.height);
ctx.beginPath();
//draw circle after changing the X
and Y coordinates
ctx.arc(X1, Y1, R1, 0, 2 * Math.PI,
false);
ctx.lineWidth = 3;
ctx.strokeStyle = '#FF0000';
ctx.stroke();
}
}
Add Answer to:
A program that:(JAVASCRIPT)
1) Increase and Decrease the size of a shape
2) Move the shape(...
Does anybody know how to create a score of increase and decrease using javascript ? I...
Does anybody know how to create a score of increase and decrease using javascript ? I will like to create a score system where If the user decides to not guess any number and just get what ever number that is given to them then there points is just what ever number comes up. For example: if the user just clicks on the no random button they just get what ever number comes up If the user wants to guess...
GUI bouncing shapes program use this interface the out put of the program should be a jFr...
GUI bouncing shapes program
use this interface
the out put of the program should be a jFrame with three
buttons: “add triangle”, “add square” and “add circle” and a blank
screen. when the user clicks any of these buttons the corresponding
shape appears and starts bouncing around the screen. the shape of
these shaoes and randomized and anytime the user clicks the button
you should be able to keeping adding shapes on the screen while the
previosus shape is bouncing...
[Continued] Your Course class should have: 1)a getter for the course 'code', so that it is...
[Continued] Your Course class should have:
1)a getter for the course 'code', so that it is read-only;
2)a getter and setter for the lecturer attribute, so that it is
readable and writable;
3)a constructor that creates the associations shown in the UML
diagram;
4)an enrolStudent method that adds a given Student object into
the 'enrolled' set;
5)a withdrawStudent method that removes a given Student object
from the 'enrolled' set and returns true if the student was
successfully found and removed,...
Modify the NervousShapes program so that it displays equilateral triangles as well as circles and rectangles....
Modify the NervousShapes program so that it displays equilateral
triangles as well as circles and rectangles. You will need to
define a Triangle class containing a single instance variable,
representing the length of one of the triangle’s sides. Have the
program create circles, rectangles, and triangles with equal
probability. Circle and Rectangle is done, please comment on your
methods so i can understand
*/
package NervousShapes;
import java.awt.*;
import java.awt.event.*;
import java.awt.image.*;
import javax.imageio.*;
import javax.swing.*;
import javax.swing.event.*;
public class...
(This program is to be done on Java) 7.5 ArrayLists Part 1 A significant limitation of...
(This program is to be done on Java) 7.5 ArrayLists Part 1 A significant limitation of the array is you cannot add or delete elements from the array. The size is fixed and you can only do workarounds. An example is the following: public class Ex_7_5_Prep { public static void main(String[] args) { int[] intArray = { 5, 10, 15, 20 }; printArray(intArray); intArray = addNewElement(intArray, 25); printArray(intArray); } public static int[] addNewElement(int[] originalArray, int newInt) { // Create new...
import javax.swing.*; import java.awt.*; import java.util.List; import java.util.*; /** * Canvas is a class to allow...
import javax.swing.*; import java.awt.*; import java.util.List; import java.util.*; /** * Canvas is a class to allow for simple graphical drawing on a canvas. * This is a modification of the general purpose Canvas, specially made for * the BlueJ "shapes" example. * * @author: Bruce Quig * @author: Michael Kolling (mik) * Minor changes to canvas dimensions by William Smith 6/4/2012 * * @version: 1.6 (shapes) */ public class Canvas { // Note: The implementation of this class (specifically the...
import javax.swing.*; import java.awt.*; import java.util.List; import java.util.*; /** * Canvas is a class to allow...
import javax.swing.*; import java.awt.*; import java.util.List; import java.util.*; /** * Canvas is a class to allow for simple graphical drawing on a canvas. * This is a modification of the general purpose Canvas, specially made for * the BlueJ "shapes" example. * * @author: Bruce Quig * @author: Michael Kolling (mik) * Minor changes to canvas dimensions by William Smith 6/4/2012 * * @version: 1.6 (shapes) */ public class Canvas { // Note: The implementation of this class (specifically the...
I created a program to display information about the presidents in Java. When I click the start button, it starts to move, but when I stop and click the start button again, it advance two pages at a t...
I created a program to display information about the presidents
in Java. When I click the start button, it starts to move, but when
I stop and click the start button again, it advance two pages at a
time. It has to change one page at a time. Please correct this
error.
import java.awt.BorderLayout;
import java.awt.Color;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.Timer;
// Defines a class Map2 derived from JFrame
public class...
JAVAFX ONLY PROGRAM!!!!! SORTING WITH NESTED CLASSES AND LAMBDA EXPRESSIONS. DIRECTIONS ARE BELOW: DIRECTIONS: The main...
 {</p>
<p>for (int r = 0; r < SUIT_SIZE; r++) {</p>
<p>String path = resourceDir + suits[s] + rank[r] + ".png)
JAVAFX ONLY PROGRAM!!!!!
SORTING WITH NESTED CLASSES AND LAMBDA
EXPRESSIONS.
DIRECTIONS ARE BELOW:
DIRECTIONS:
The main point of the exercise is to demonstrate your
ability to use various types of nested classes. Of course, sorting
is important as well, but you don’t really need to do much more
than create the class that does the comparison. In general, I like
giving you some latitude in how you design and implement your
projects. However, for this assignment, each piece is very...
Hello I need help with this program. Should programmed in C! Program 2: Sorting with Pointers...
Hello I need help with this program. Should programmed in C!
Program 2: Sorting with Pointers Sometimes we're given an array of data that we need to be able to view in sorted order while leaving the original order unchanged. In such cases we could sort the data set, but then we would lose the information contained in the original order. We need a better solution. One solution might be to create a duplicate of the data set, perhaps make...
GUI bouncing shapes program
use this interface
the out put of the program should be a jFrame with three
buttons: “add triangle”, “add square” and “add circle” and a blank
screen. when the user clicks any of these buttons the corresponding
shape appears and starts bouncing around the screen. the shape of
these shaoes and randomized and anytime the user clicks the button
you should be able to keeping adding shapes on the screen while the
previosus shape is bouncing...
[Continued] Your Course class should have:
1)a getter for the course 'code', so that it is read-only;
2)a getter and setter for the lecturer attribute, so that it is
readable and writable;
3)a constructor that creates the associations shown in the UML
diagram;
4)an enrolStudent method that adds a given Student object into
the 'enrolled' set;
5)a withdrawStudent method that removes a given Student object
from the 'enrolled' set and returns true if the student was
successfully found and removed,...
Modify the NervousShapes program so that it displays equilateral
triangles as well as circles and rectangles. You will need to
define a Triangle class containing a single instance variable,
representing the length of one of the triangle’s sides. Have the
program create circles, rectangles, and triangles with equal
probability. Circle and Rectangle is done, please comment on your
methods so i can understand
*/
package NervousShapes;
import java.awt.*;
import java.awt.event.*;
import java.awt.image.*;
import javax.imageio.*;
import javax.swing.*;
import javax.swing.event.*;
public class...
 {</p>
<p>for (int r = 0; r < SUIT_SIZE; r++) {</p>
<p>String path = resourceDir + suits[s] + rank[r] + ".png)
JAVAFX ONLY PROGRAM!!!!!
SORTING WITH NESTED CLASSES AND LAMBDA
EXPRESSIONS.
DIRECTIONS ARE BELOW:
DIRECTIONS:
The main point of the exercise is to demonstrate your
ability to use various types of nested classes. Of course, sorting
is important as well, but you don’t really need to do much more
than create the class that does the comparison. In general, I like
giving you some latitude in how you design and implement your
projects. However, for this assignment, each piece is very...
Hello I need help with this program. Should programmed in C!
Program 2: Sorting with Pointers Sometimes we're given an array of data that we need to be able to view in sorted order while leaving the original order unchanged. In such cases we could sort the data set, but then we would lose the information contained in the original order. We need a better solution. One solution might be to create a duplicate of the data set, perhaps make...
Most questions answered within 3 hours.
-
Other decisions about scientific claims can have a much broader
impact.ENERGYarrow-10x10.png, environment, health, security - all...
asked 36 minutes ago -
I need to write a research paper and work cited about this
topic: The United States...
asked 58 minutes ago -
Hello! I was wondering if I could have some help?
If the vapor pressure of carvone...
asked 1 hour ago -
An economist wants to estimate the mean per capita income (in
thousands of dollars) for a...
asked 1 hour ago -
What would be the input/output characteristic of a circuit
obtained by putting two of your 2's-complementers...
asked 1 hour ago -
In Drosophila, the transition from the syncytial blastoderm
stage to the cellular blastoderm stage is a...
asked 2 hours ago -
Project management question:
Name 3 different types of resources (hint: humans are one
type)
asked 2 hours ago -
Consider the following reaction: C 2H 2( g) + 2H 2( g) C 2H 6(
g)...
asked 2 hours ago -
Consider a 1.0 L buffer containing 0.092 mol L-1 HCOOH and 0.100
mol L-1 HCOO-. What...
asked 2 hours ago -
Koch Realty has owned a vacant land with a FMV of
$775,000 and an adjusted basis...
asked 2 hours ago -
It is estimated 29% of all adults in United States invest in
stocks and that 85%...
asked 2 hours ago -
What does a 2-sided p value of 0.04 mean? (I am not asking if it
is...
asked 2 hours ago