I need to create a page looks like a picture. But it looks different.pdf
•
0 likes•2 views
I need to create a page looks like a picture. But it looks different. My html Assignment 8Shapes Exercise SquareCircleTriangleAdd to ArrayRemove LastDraw Shapes My Js let shapeArray = []; const shapeSelect = document.getElementById("shapeSelect"); const addBtn = document.getElementById("addBtn"); const removeBtn = document.getElementById("removeBtn"); const drawBtn = document.getElementById("drawBtn"); const canvas = document.getElementById("canvas"); const ctx = canvas.getContext("2d"); canvas.width = window.innerWidth; canvas.height = window.innerHeight; addBtn.addEventListener("click", function () { const selectedShape = shapeSelect.value; if (shapeArray.length < 5) { shapeArray.push(selectedShape); } else { alert("You cannot add more than 5 shapes to the array."); } }); removeBtn.addEventListener("click", function () { shapeArray.pop(); }); function drawCircle(x, y) { ctx.beginPath(); ctx.arc(x, y, 50, 0, 2 * Math.PI); ctx.stroke(); } function drawTriangle(x, y) { const sideLength = 100; const height = sideLength * Math.sqrt(3) / 2; ctx.beginPath(); ctx.moveTo(x, y); ctx.lineTo(x + sideLength / 2, y + height); ctx.lineTo(x - sideLength / 2, y + height); ctx.closePath(); ctx.stroke(); } function drawSquare(x, y) { ctx.beginPath(); ctx.rect(x, y, 100, 100); ctx.stroke(); } drawBtn.addEventListener("click", function () { ctx.clearRect(0, 0, canvas.width, canvas.height); shapeArray.forEach(function (shape, index) { switch (shape) { case"circle": drawCircle(50 + index * 150, 100); break; case"triangle": drawTriangle(50 + index * 150, 100); break; case"square": drawSquare(50 + index * 150, 100); break; default: console.error("Unknown shape: " + shape); break; } }); }); let shapeArray = []; const shapeSelect = document.getElementById("shapeSelect"); const addBtn = document.getElementById("addBtn"); const removeBtn = document.getElementById("removeBtn"); const drawBtn = document.getElementById("drawBtn"); const canvas = document.getElementById("canvas"); const ctx = canvas.getContext("2d"); canvas.width = window.innerWidth; canvas.height = window.innerHeight; addBtn.addEventListener("click", function () { const selectedShape = shapeSelect.value; if (shapeArray.length < 5) { shapeArray.push(selectedShape); } else { alert("You cannot add more than 5 shapes to the array."); } }); removeBtn.addEventListener("click", function () { shapeArray.pop(); }); function drawCircle(x, y) { ctx.beginPath(); ctx.arc(x, y, 50, 0, 2 * Math.PI); ctx.stroke(); } function drawTriangle(x, y) { const sideLength = 100; const height = sideLength * Math.sqrt(3) / 2; ctx.beginPath(); ctx.moveTo(x, y); ctx.lineTo(x + sideLength / 2, y + height); ctx.lineTo(x - sideLength / 2, y + height); ctx.closePath(); ctx.stroke(); } function drawSquare(x, y) { ctx.beginPath(); ctx.rect(x, y, 100, 100); ctx.stroke(); } drawBtn.addEventListener("click", function () { ctx.clearRect(0, 0, canvas.width, canvas.height); shapeArray.forEach(function (shape, index) { switch (shape) { case"circle.
Report
Share
Report
Share
Download to read offline
![I need to create a page looks like a picture. But it looks different.
My html
Assignment 8Shapes Exercise
SquareCircleTriangleAdd to ArrayRemove LastDraw Shapes
My Js
let shapeArray = [];
const shapeSelect = document.getElementById("shapeSelect");
const addBtn = document.getElementById("addBtn");
const removeBtn = document.getElementById("removeBtn");
const drawBtn = document.getElementById("drawBtn");
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
addBtn.addEventListener("click", function () {
const selectedShape = shapeSelect.value;
if (shapeArray.length < 5) {](https://image.slidesharecdn.com/ineedtocreateapagelookslikeapicture-230330070822-855bc3a5/85/I-need-to-create-a-page-looks-like-a-picture-But-it-looks-different-pdf-1-320.jpg)
Recommended
Exploring Canvas
The document provides an overview of using the HTML5 canvas element to draw graphics and animations. It covers topics like rendering contexts, paths, styles, gradients, text, shapes, mouse/touch interaction, animation, and libraries. Code examples demonstrate how to draw basic shapes, handle user input, interpolate lines, add gradients, render to canvas, and more. The document is a tutorial for learning the capabilities of the canvas element.
Css5 canvas
The document provides information about using the canvas API to draw graphics on an HTML5 canvas element. It covers topics such as drawing shapes, paths, images, text, applying styles, transformations, gradients and saving state. Code examples are provided to demonstrate how to use various canvas drawing methods and properties.
Exploring Canvas
This presentation introduces developers to the functionality of the HTML5 canvas tag. It runs from getting started (slow start) to more comprehensive examples designed to be inspirational in nature. This presentation is not designed to make you an expert with canvas, but to introduce developers to the wealth of possibilities.
Create a java project that - Draw a circle with three random init.pdf
Create a java project that:
- Draw a circle with three random initial points on the circle.
- Link the points to form a triangle.
- Print the angles values in the triangle.
- Use the mouse to drag a point along the perimeter of the circle. As you drag it, the triangle and
angles are redisplayed dynamically.
Here is the formula to compute angles:
A = acos((a * a - b * b - c * c) / (-2 * b * c))
B = acos((b * b - a * a - c * c) / (-2 * a * c))
C = acos((c * c - b * b - a * a) / (-2 * a * b))
Solution
@Suppresswarnings(\"WeakerAccess\")
public class DragPoints extends Application {
@Override
public void start(Stage primaryStage) {
final PointPane pane = new PointPane(640, 480);
pane.setStyle(\"-fx-background-color: wheat;\");
Label label = new Label(\"Click and drag the points.\");
BorderPane borderPane = new BorderPane(pane);
BorderPane.setAlignment(label, Pos.CENTER);
label.setPadding(new Insets(5));
borderPane.setBottom(label);
Scene scene = new Scene(borderPane);
primaryStage.setTitle(\"Exercise15_21\");
primaryStage.setScene(scene);
primaryStage.show();
}
private class PointPane extends Pane {
final Circle circle = new Circle();
final Vertex[] v = new Vertex[3];
final int strokeWidth = 2;
final Color circleStroke = Color.GRAY, legStroke = Color.BLACK;
@SuppressWarnings(\"SameParameterValue\")
PointPane(double w, double h) {
this.setPrefSize(w, h);
this.setWidth(w);
this.setHeight(h);
circle.setStroke(circleStroke);
circle.setFill(Color.TRANSPARENT);
circle.setStrokeWidth(strokeWidth);
circle.radiusProperty().bind(this.heightProperty().multiply(0.4));
circle.centerXProperty().bind(this.widthProperty().divide(2));
circle.centerYProperty().bind(this.heightProperty().divide(2));
this.getChildren().add(circle);
for (int i = 0; i < v.length; i++) {
v[i] = new Vertex(circle, 2 * Math.PI / v.length * (i + Math.random()));
v[i].radiusProperty().bind(circle.radiusProperty().divide(10));
v[i].setPosition();
v[i].setStroke(new Color(i == 0 ? 1 : 0, i == 1 ? 1 : 0, i == 2 ? 1 : 0, 1));
v[i].setFill(Color.TRANSPARENT);
v[i].setStrokeWidth(strokeWidth);
this.getChildren().add(v[i]);
v[i].setOnMouseDragged(new EventHandler() {
@Override
public void handle(MouseEvent event) {
int i;
for (i = 0; i < v.length; i++)
if (v[i] == event.getSource())
break;
v[i].setAngle(event.getX(), event.getY());
moveUpdate((Vertex) event.getSource());
}
});
}
for (int i = 0; i < v.length; i++) {
int j = i + 1 < v.length ? i + 1 : 0;
int k = j + 1 < v.length ? j + 1 : 0;
v[i].bindLeg(v[j], v[k]);
v[i].leg.setStroke(legStroke);
v[i].leg.setStrokeWidth(strokeWidth);
this.getChildren().add(v[i].leg);
this.getChildren().add(v[i].text);
}
for(DoubleProperty p: new DoubleProperty[]
{circle.radiusProperty(), circle.centerXProperty(), circle.centerYProperty()})
p.addListener(new ResizeListener());
moveUpdate(v[0]);
}
void moveUpdate(Vertex vert) {
vert.setPosition();
double[] legLength = new double[3];
for (int i = 0; i < v.length; i++)
legLength[i] = v[i].getLegLength();
for (int i = .
I need to create a page that looks like the picture The pro.pdf
I need to create a page that looks like the picture. The problem with my code is that my smile faces looks different from the example(the angle of the faces). And When you enter the negative value and value that does fit the canvas, there should be an alert message but it only alerts when I enter a negative value.
First pic is the example
Second pic is mine.
My Html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="a8.js" defer></script>
<title>Assignment 8</title>
</head>
<body>
<div>
<h1>CPSC 1045 Assignment - Smiley Rotator</h1>
<P>Enter a number of smiles to draw <input id="number" type="text"></P>
<p>Enter how far from the center of the canvas to draw them <input id="center" type="text"></p>
<canvas id="myCanvas" width="500" height="500" style="border:1px solid #000000;display: block;">
</canvas>
<button id="draw">Draw</button>
</div>
</body>
</html>
My Js
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
function drawSmile(x, y) {
// smile face
ctx.fillStyle = "yellow";
ctx.beginPath();
ctx.arc(x, y, 75, 0, 2 * Math.PI);
ctx.stroke();
ctx.fill();
ctx.fillStyle = "black";
ctx.beginPath();
ctx.arc(x - 20, y - 30, 15, 0, 2 * Math.PI);
ctx.fill();
ctx.beginPath();
ctx.arc(x + 20, y - 30, 15, 0, 2 * Math.PI);
ctx.fill();
ctx.beginPath();
ctx.arc(x, y + 5, 50, 0, Math.PI);
ctx.stroke();
}
function draw() {
var number = parseInt(document.getElementById("number").value);
var center = parseInt(document.getElementById("center").value);
if (isNaN(number) || isNaN(center) || number <= 0 || center <= 0) {
alert("You entered an invalid value.");
return;
}
ctx.clearRect(0, 0, c.width, c.height);
var centerX = c.width / 2;
var centerY = c.height / 2;
var angleIncrement = 2 * Math.PI / number;
for (var i = 0; i < number; i++) {
var angle = i * angleIncrement;
var smileX = centerX + center * Math.cos(angle);
var smileY = centerY + center * Math.sin(angle);
drawSmile(smileX, smileY);
}
}
document.getElementById("draw").addEventListener('click', draw);
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
function drawSmile(x, y) {
// smile face
ctx.fillStyle = "yellow";
ctx.beginPath();
ctx.arc(x, y, 75, 0, 2 * Math.PI);
ctx.stroke();
ctx.fill();
ctx.fillStyle = "black";
ctx.beginPath();
ctx.arc(x - 20, y - 30, 15, 0, 2 * Math.PI);
ctx.fill();
ctx.beginPath();
ctx.arc(x + 20, y - 30, 15, 0, 2 * Math.PI);
ctx.fill();
ctx.beginPath();
ctx.arc(x, y + 5, 50, 0, Math.PI);
ctx.stroke();
}
function draw() {
var number = parseInt(document.getElementById("number").value);
var center = parseInt(document.getElementById("center").value);
if (isNaN(number) || isNaN(center) || number <= 0 || center <= 0) {
alert("You entered an invalid value.");
return;
}
ctx.clearRect(0, 0, c.width, c.height);
var centerX = c.width / 2;
var centerY = c.height / 2;
var angleIncrement = 2 * Ma.
UI Design From Scratch - Part 5 - transcript.pdf
This is a part of an online Codename One course published around 2017 see it all for free at https://debugagent.com/series/cn1
HTML5 Canvas (Wall Clock).pptx
The document provides code for creating an analog wall clock using HTML5 canvas. It includes functions for drawing the clock face, numbers, and hands. To start the clock updating, the drawClock function is called each second using setInterval. Code is included to initialize the canvas, calculate radii, and transform coordinates. Angles are used to position numbers and set hand positions based on the system time.
How to make a video game
The document provides instructions and examples for making games using HTML5 canvas and JavaScript. It discusses using canvas to draw basic shapes and images. It introduces the concept of sprites as reusable drawing components and provides an example sprite class. It demonstrates how to create a game loop to continuously update and render sprites to animate them. It also provides an example of making a sprite respond to keyboard input to allow user control. The document serves as a tutorial for building the core components of a simple HTML5 canvas game.
Recommended
Exploring Canvas
The document provides an overview of using the HTML5 canvas element to draw graphics and animations. It covers topics like rendering contexts, paths, styles, gradients, text, shapes, mouse/touch interaction, animation, and libraries. Code examples demonstrate how to draw basic shapes, handle user input, interpolate lines, add gradients, render to canvas, and more. The document is a tutorial for learning the capabilities of the canvas element.
Css5 canvas
The document provides information about using the canvas API to draw graphics on an HTML5 canvas element. It covers topics such as drawing shapes, paths, images, text, applying styles, transformations, gradients and saving state. Code examples are provided to demonstrate how to use various canvas drawing methods and properties.
Exploring Canvas
This presentation introduces developers to the functionality of the HTML5 canvas tag. It runs from getting started (slow start) to more comprehensive examples designed to be inspirational in nature. This presentation is not designed to make you an expert with canvas, but to introduce developers to the wealth of possibilities.
Create a java project that - Draw a circle with three random init.pdf
Create a java project that:
- Draw a circle with three random initial points on the circle.
- Link the points to form a triangle.
- Print the angles values in the triangle.
- Use the mouse to drag a point along the perimeter of the circle. As you drag it, the triangle and
angles are redisplayed dynamically.
Here is the formula to compute angles:
A = acos((a * a - b * b - c * c) / (-2 * b * c))
B = acos((b * b - a * a - c * c) / (-2 * a * c))
C = acos((c * c - b * b - a * a) / (-2 * a * b))
Solution
@Suppresswarnings(\"WeakerAccess\")
public class DragPoints extends Application {
@Override
public void start(Stage primaryStage) {
final PointPane pane = new PointPane(640, 480);
pane.setStyle(\"-fx-background-color: wheat;\");
Label label = new Label(\"Click and drag the points.\");
BorderPane borderPane = new BorderPane(pane);
BorderPane.setAlignment(label, Pos.CENTER);
label.setPadding(new Insets(5));
borderPane.setBottom(label);
Scene scene = new Scene(borderPane);
primaryStage.setTitle(\"Exercise15_21\");
primaryStage.setScene(scene);
primaryStage.show();
}
private class PointPane extends Pane {
final Circle circle = new Circle();
final Vertex[] v = new Vertex[3];
final int strokeWidth = 2;
final Color circleStroke = Color.GRAY, legStroke = Color.BLACK;
@SuppressWarnings(\"SameParameterValue\")
PointPane(double w, double h) {
this.setPrefSize(w, h);
this.setWidth(w);
this.setHeight(h);
circle.setStroke(circleStroke);
circle.setFill(Color.TRANSPARENT);
circle.setStrokeWidth(strokeWidth);
circle.radiusProperty().bind(this.heightProperty().multiply(0.4));
circle.centerXProperty().bind(this.widthProperty().divide(2));
circle.centerYProperty().bind(this.heightProperty().divide(2));
this.getChildren().add(circle);
for (int i = 0; i < v.length; i++) {
v[i] = new Vertex(circle, 2 * Math.PI / v.length * (i + Math.random()));
v[i].radiusProperty().bind(circle.radiusProperty().divide(10));
v[i].setPosition();
v[i].setStroke(new Color(i == 0 ? 1 : 0, i == 1 ? 1 : 0, i == 2 ? 1 : 0, 1));
v[i].setFill(Color.TRANSPARENT);
v[i].setStrokeWidth(strokeWidth);
this.getChildren().add(v[i]);
v[i].setOnMouseDragged(new EventHandler() {
@Override
public void handle(MouseEvent event) {
int i;
for (i = 0; i < v.length; i++)
if (v[i] == event.getSource())
break;
v[i].setAngle(event.getX(), event.getY());
moveUpdate((Vertex) event.getSource());
}
});
}
for (int i = 0; i < v.length; i++) {
int j = i + 1 < v.length ? i + 1 : 0;
int k = j + 1 < v.length ? j + 1 : 0;
v[i].bindLeg(v[j], v[k]);
v[i].leg.setStroke(legStroke);
v[i].leg.setStrokeWidth(strokeWidth);
this.getChildren().add(v[i].leg);
this.getChildren().add(v[i].text);
}
for(DoubleProperty p: new DoubleProperty[]
{circle.radiusProperty(), circle.centerXProperty(), circle.centerYProperty()})
p.addListener(new ResizeListener());
moveUpdate(v[0]);
}
void moveUpdate(Vertex vert) {
vert.setPosition();
double[] legLength = new double[3];
for (int i = 0; i < v.length; i++)
legLength[i] = v[i].getLegLength();
for (int i = .
I need to create a page that looks like the picture The pro.pdf
I need to create a page that looks like the picture. The problem with my code is that my smile faces looks different from the example(the angle of the faces). And When you enter the negative value and value that does fit the canvas, there should be an alert message but it only alerts when I enter a negative value.
First pic is the example
Second pic is mine.
My Html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="a8.js" defer></script>
<title>Assignment 8</title>
</head>
<body>
<div>
<h1>CPSC 1045 Assignment - Smiley Rotator</h1>
<P>Enter a number of smiles to draw <input id="number" type="text"></P>
<p>Enter how far from the center of the canvas to draw them <input id="center" type="text"></p>
<canvas id="myCanvas" width="500" height="500" style="border:1px solid #000000;display: block;">
</canvas>
<button id="draw">Draw</button>
</div>
</body>
</html>
My Js
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
function drawSmile(x, y) {
// smile face
ctx.fillStyle = "yellow";
ctx.beginPath();
ctx.arc(x, y, 75, 0, 2 * Math.PI);
ctx.stroke();
ctx.fill();
ctx.fillStyle = "black";
ctx.beginPath();
ctx.arc(x - 20, y - 30, 15, 0, 2 * Math.PI);
ctx.fill();
ctx.beginPath();
ctx.arc(x + 20, y - 30, 15, 0, 2 * Math.PI);
ctx.fill();
ctx.beginPath();
ctx.arc(x, y + 5, 50, 0, Math.PI);
ctx.stroke();
}
function draw() {
var number = parseInt(document.getElementById("number").value);
var center = parseInt(document.getElementById("center").value);
if (isNaN(number) || isNaN(center) || number <= 0 || center <= 0) {
alert("You entered an invalid value.");
return;
}
ctx.clearRect(0, 0, c.width, c.height);
var centerX = c.width / 2;
var centerY = c.height / 2;
var angleIncrement = 2 * Math.PI / number;
for (var i = 0; i < number; i++) {
var angle = i * angleIncrement;
var smileX = centerX + center * Math.cos(angle);
var smileY = centerY + center * Math.sin(angle);
drawSmile(smileX, smileY);
}
}
document.getElementById("draw").addEventListener('click', draw);
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
function drawSmile(x, y) {
// smile face
ctx.fillStyle = "yellow";
ctx.beginPath();
ctx.arc(x, y, 75, 0, 2 * Math.PI);
ctx.stroke();
ctx.fill();
ctx.fillStyle = "black";
ctx.beginPath();
ctx.arc(x - 20, y - 30, 15, 0, 2 * Math.PI);
ctx.fill();
ctx.beginPath();
ctx.arc(x + 20, y - 30, 15, 0, 2 * Math.PI);
ctx.fill();
ctx.beginPath();
ctx.arc(x, y + 5, 50, 0, Math.PI);
ctx.stroke();
}
function draw() {
var number = parseInt(document.getElementById("number").value);
var center = parseInt(document.getElementById("center").value);
if (isNaN(number) || isNaN(center) || number <= 0 || center <= 0) {
alert("You entered an invalid value.");
return;
}
ctx.clearRect(0, 0, c.width, c.height);
var centerX = c.width / 2;
var centerY = c.height / 2;
var angleIncrement = 2 * Ma.
UI Design From Scratch - Part 5 - transcript.pdf
This is a part of an online Codename One course published around 2017 see it all for free at https://debugagent.com/series/cn1
HTML5 Canvas (Wall Clock).pptx
The document provides code for creating an analog wall clock using HTML5 canvas. It includes functions for drawing the clock face, numbers, and hands. To start the clock updating, the drawClock function is called each second using setInterval. Code is included to initialize the canvas, calculate radii, and transform coordinates. Angles are used to position numbers and set hand positions based on the system time.
How to make a video game
The document provides instructions and examples for making games using HTML5 canvas and JavaScript. It discusses using canvas to draw basic shapes and images. It introduces the concept of sprites as reusable drawing components and provides an example sprite class. It demonstrates how to create a game loop to continuously update and render sprites to animate them. It also provides an example of making a sprite respond to keyboard input to allow user control. The document serves as a tutorial for building the core components of a simple HTML5 canvas game.
Supstat nyc subway
The document describes how to create an interactive visualization showing subway lines and median household income data on a map of New York City. It involves loading data from Google sheets, creating scales and axes, drawing the subway lines and income data as paths on a map, and adding interactivity through hovering and clicking on points. Key elements include filtering the data by subway line, drawing the corresponding path on the chart and highlighting the matching line on the map, and aggregating data by borough to add labeled regions to the chart.
Making Games in JavaScript
The document provides an overview of making games using JavaScript, HTML, and the DOM. It discusses JavaScript and HTML5 as languages well-suited for game development due to features like fast iteration, treating scripts as data, and allowing different game types. It covers key concepts like the DOM tree, rendering to a <canvas> element, using the 2D context to draw, implementing a main loop with setInterval(), drawing sprites and images, handling user input, and creating basic animations and games with concepts like sprites, matrices, vectors, bullets, and zombies.
Creating an Uber Clone - Part VIII.pdf
This document describes the creation of a navigation toolbar for entering pick-up and drop-off locations in an Uber clone app. It includes code for adding a back button, from and to text fields, and labels for selected locations. Styles are defined for the toolbar and text fields. Functionality is added to animate the toolbar onto the screen and hide it by sliding up when the back button is pressed.
You will learn RxJS in 2017
The document discusses RxJS, a library for reactive programming using Observables that provide an API for asynchronous programming with observable streams. It provides code examples of using RxJS to handle events, AJAX requests, and animations as Observables. It also compares RxJS to Promises and native JavaScript event handling, and lists several frameworks that use RxJS like Angular and Redux.
QML\Qt Quick на практике
QML\Qt Quick это превосходный декларативный язык программирования, призванный сильно упростить создание и дальнейшую поддержку пользовательских интерфейсов.В докладе я расскажу что из себя представляет QML, попробуем разобраться в вопросе “Где и как уместно использовать QML\Qt Quick” и приведу краткий обзор полезных инструментов для разработки QML\Qt Quick приложений.
Canvas al ajillo
The document discusses various techniques for customizing Canvas and View objects in Android, including:
1. The lifecycle of a View, including constructor, layout, measure, draw, and animation methods.
2. Creating circular progress indicators using Canvas, with techniques like animating drawing arcs and adding effects like blurring.
3. Avoiding square views by using paths with curves and drawing on non-rectangular canvases.
4. Improving performance by optimizing drawing operations and avoiding unnecessary invalidates.
package chapter15;import javafx.application.Application;import j.pdf
package chapter15;
import javafx.application.Application;
import javafx.beans.property.DoubleProperty;
import javafx.beans.value.ChangeListener;
import javafx.beans.value.ObservableValue;
import javafx.event.EventHandler;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.Pane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.scene.shape.Line;
import javafx.scene.text.Font;
import javafx.scene.text.Text;
import javafx.scene.text.TextAlignment;
import javafx.stage.Stage;
/**
* Java Programming: Comprehensive (10e); Liang; Pearson 2014
*
* *15.21(Drag points) Draw a circle with three random points on the circle. Connect
* the points to form a triangle. Display the angles in the triangle. Use the mouse
* to drag a point along the perimeter of the circle. As you drag it, the triangle and
* angles are redisplayed dynamically, as shown in Figure 15.30b. For computing
* angles in a triangle, see Listing 4.1.
*
* {@code A = Math.acos((a * a - b * b - c * c) / (-2 * b * c))}
* {@code B = Math.acos((b * b - a * a - c * c) / (-2 * a * c))}
* {@code C = Math.acos((c * c - b * b - a * a) / (-2 * a * b))}
*
* @author ncoop
*/
@SuppressWarnings(\"WeakerAccess\")
public class DragPoints extends Application {
@Override
public void start(Stage primaryStage) {
final PointPane pane = new PointPane(640, 480);
pane.setStyle(\"-fx-background-color: wheat;\");
Label label = new Label(\"Click and drag the points.\");
BorderPane borderPane = new BorderPane(pane);
BorderPane.setAlignment(label, Pos.CENTER);
label.setPadding(new Insets(5));
borderPane.setBottom(label);
Scene scene = new Scene(borderPane);
primaryStage.setTitle(\"Exercise15_21\");
primaryStage.setScene(scene);
primaryStage.show();
}
private class PointPane extends Pane {
final Circle circle = new Circle();
final Vertex[] v = new Vertex[3];
final int strokeWidth = 2;
final Color circleStroke = Color.GRAY, legStroke = Color.BLACK;
@SuppressWarnings(\"SameParameterValue\")
PointPane(double w, double h) {
this.setPrefSize(w, h);
this.setWidth(w);
this.setHeight(h);
circle.setStroke(circleStroke);
circle.setFill(Color.TRANSPARENT);
circle.setStrokeWidth(strokeWidth);
circle.radiusProperty().bind(this.heightProperty().multiply(0.4));
circle.centerXProperty().bind(this.widthProperty().divide(2));
circle.centerYProperty().bind(this.heightProperty().divide(2));
this.getChildren().add(circle);
// create the vertices at random angles
for (int i = 0; i < v.length; i++) {
v[i] = new Vertex(circle, 2 * Math.PI / v.length * (i + Math.random()));
v[i].radiusProperty().bind(circle.radiusProperty().divide(10));
v[i].setPosition();
v[i].setStroke(new Color(i == 0 ? 1 : 0, i == 1 ? 1 : 0, i == 2 ? 1 : 0, 1));
v[i].setFill(Color.TRANSPARENT);
v[i].setStrokeWidth(strokeWidth);
this.getChildren().add(v[i]);
v[i].setOnMouseDr.
Computer Graphics in Java and Scala - Part 1b
First see the Scala program from Part 1 translated into Java.
Then see the Scala program modified to produce a more intricate drawing.
Java Code: https://github.com/philipschwarz/computer-graphics-50-triangles-java
Scala Code: https://github.com/philipschwarz/computer-graphics-chessboard-with-a-great-many-squares-scala
Introduction to d3js (and SVG)
The document provides an overview of Scalable Vector Graphics (SVG) and the D3.js library for manipulating SVG graphics. It discusses basic SVG shapes and paths that can be used to create visualizations like bar charts. It then demonstrates how to generate SVG elements like rectangles and circles using D3 selections and data binding. Transitions and interactive elements are also covered. Examples are provided to illustrate D3 concepts like entering new data, updating existing elements, and exiting stale elements from the DOM.
NewTetrisScore.cppNewTetrisScore.cpp newTetris.cpp Defines t.docx
This document contains C++ code for a Tetris game. It defines classes and functions for representing Tetris shapes, moving and rotating the shapes, generating a falling sequence of shapes, and handling game logic and drawing the game board. Key aspects include a TetrisShape class to represent game pieces, functions for populating shape arrays, moving/rotating shapes, generating a random sequence of falling shapes, and a game tick function that handles core game logic like shape movement/falling and checking for completed lines to remove.
Prototype programming in JavaScript
Author: Timur Shemsedinov
Video: https://youtu.be/SzaXTW2qcJE
Code examples: https://github.com/HowProgrammingWorks/PrototypeChain
Maps
This document discusses techniques for creating scrolling maps in 2D games. It describes how to create horizontal and vertical scrolling by loading multiple background images and moving them across the screen. It also covers creating square and rhombus shaped maps by defining a viewport and converting between cell and point coordinates. Methods are provided for loading map textures, drawing the viewport region, and abstractly converting between coordinate systems for different map shapes.
Import java.awt.; Import acm.program.; Import acm.graphics.;.pdf
Import java.awt.*;
Import acm.program.*;
Import acm.graphics.*;
public class Sierpinski extends GraphicsProgram
{
public void run()
{
GRect box = new GRect(20, 20, 242, 242);
box.setFilled(true);
add(box);
drawGasket(20, 20, 243);
}
private void drawFigure(int x, int y, int side) {
int sub = side / 3;
GRect box = new GRect(x + sub, y + sub, sub - 1, sub - 1);
box.setFilled(true);
box.setColor(Color.WHITE);
add(box);
if (sub >= 3) {
drawFigure(x, y, sub);
drawFigure(x + sub, y, sub);
drawFigure(x + 2 * sub, y, sub);
drawFigure(x, y + sub, sub);
drawFigure(x + 2 * sub, y + sub, sub);
drawFigure(x, y + 2 * sub, sub);
drawFigure(x + sub, y + 2 * sub, sub);
drawFigure(x + 2 * sub, y + 2 * sub, sub);
}
}
C.8 SQUARE in recursive method:-
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
public class SierpinskiCarpet extends JPanel implements ActionListener
{
public static void main(String[] args)
{
JFrame window = new JFrame(\"Sierpinski Carpet\");
window.setContentPane( new SierpinskiCarpet() );
window.pack();
window.setResizable(false);
window.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
Dimension screensize = Toolkit.getDefaultToolkit().getScreenSize();
int x = Math.max(10, (screensize.width - window.getWidth()) / 2);
int y = Math.max(10, (screensize.height - window.getHeight()) / 2);
window.setLocation(x,y);
window.setVisible(true);
}
private int level;
private JRadioButton[] levelButton;
private JCheckBox[][] regionCheckbox;
private Display display;
private class Display extends JPanel
{
Display()
{
setBackground(Color.WHITE);
setPreferredSize(new Dimension(729,729));
}
protected void paintComponent(Graphics g)
{
super.paintComponent(g);
drawCarpet(g,level,0,0,729);
}
}
public SierpinskiCarpet()
{
setLayout(new BorderLayout(3,3));
setBackground(Color.GRAY);
setBorder(BorderFactory.createLineBorder(Color.GRAY,3));
display = new Display();
add(display,BorderLayout.CENTER);
Box controls = Box.createVerticalBox();
controls.setBorder(BorderFactory.createEmptyBorder(10, 10, 10, 10));
controls.setBackground(Color.WHITE);
controls.setOpaque(true);
add(controls, BorderLayout.EAST);
controls.add(new JLabel(\"Controls\"));
controls.add(Box.createVerticalStrut(30));
levelButton = new JRadioButton[7];
ButtonGroup grp = new ButtonGroup();
for (int i = 0; i < 7; i++)
{
levelButton[i] = new JRadioButton(\"Recursion Level \" + i);
grp.add(levelButton[i]);
levelButton[i].addActionListener(this);controls.add(levelButton[i]);
}
level = 4;
levelButton[4].setSelected(true);
regionCheckbox = new JCheckBox[3][3];
JPanel checks = new JPanel();
checks.setLayout(new GridLayout(3,3,5,5));
for (int r = 0; r < 3; r++)
{
for (int c = 0; c < 3; c++)
{
regionCheckbox[r][c] = new JCheckBox();
checks.add(regionCheckbox[r][c]);
regionCheckbox[r][c].addActionListener(this);
regionCheckbox[r][c].setSelected(true);
}
}
checks.setMaximumSize(new Dimension(90,90));
checks.setAlignmentX(LEFT_ALIGNMENT);
checks.setBackground(Color.WHITE);
regionCheckbox[1][1].setSelec.
Having fun with graphs, a short introduction to D3.js
This talk is all about drawing on your webpage. We will have a short introduction to d3.js, a library to easily create SVGs in your webpage. Along the way we will render graphs using different layouting strategies. But what are the problems when displaying a graph? Just think of graphs having more vertices then you have pixels on your screen. Or what if you want a user to manupilate the graph and his changes being persistent? Michael will present his answers to this questions, ending up wit a GUI for a graph database.
Raspberry Pi à la GroovyFX
The document discusses using JavaFX on Raspberry Pi devices. It provides examples of JavaFX applications written in both Java and the GroovyFX declarative syntax. It demonstrates how GroovyFX simplifies common tasks like creating UI elements, adding animations, handling events, and laying out components compared to the Java approach.
Game dev 101 part 3
The document provides instructions for building a basic space shooter game using JavaScript and canvas. It demonstrates how to load assets like images, handle input events from keyboard keys to control player movement, create enemy objects that move across the screen, detect collisions between lasers and enemies, and add game states to track lives and score. The game loop redraws the game objects on an interval to animate their movement. Event handling is implemented through an event emitter to avoid messy code. The final sections provide a demo of the moving game elements and lasers firing, along with tips for continuing to learn game development.
Cara membuat tulisan mengikuti kursor di blog
This document provides instructions on how to add scrolling text that follows the cursor on a blog. It involves opening the blog layout, adding an HTML/Javascript gadget, inserting code to style the text and make it move with cursor movement using JavaScript, then saving and viewing the results. The code creates a scrolling circular text effect that follows the mouse position and can be customized by changing the text color code.
I need to create a page like a picture My code is working .pdf
I need to create a page like a picture. My code is working, but its different from the picture.
Tried to fix it but not working.
My Html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="a8.js" defer></script>
<title>Assignment 8</title>
</head>
<body>
<div>
<h1>CPSC 1045 Assignment - Smiley Rotator</h1>
<P>Enter a number of smiles to draw <input id="number" type="text"></P>
<p>Enter how far from the center of the canvas to draw them <input id="center" type="text"></p>
<canvas id="myCanvas" width="500" height="500" style="border:1px solid #000000;display: block;">
</canvas>
<button id="draw">Draw</button>
</div>
</body>
</html>
My Js
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
function drawSmile(x, y) {
// smile face
ctx.fillStyle = "yellow";
ctx.beginPath();
ctx.arc(x, y, 75, 0, 2 * Math.PI);
ctx.stroke();
ctx.fill();
ctx.fillStyle = "black";
ctx.beginPath();
ctx.arc(x - 20, y - 30, 15, 0, 2 * Math.PI);
ctx.fill();
ctx.beginPath();
ctx.arc(x + 20, y - 30, 15, 0, 2 * Math.PI);
ctx.fill();
ctx.beginPath();
ctx.arc(x, y + 5, 50, 0, Math.PI);
ctx.stroke();
}
function draw() {
var number = parseInt(document.getElementById("number").value);
var center = parseInt(document.getElementById("center").value);
if (isNaN(number) || isNaN(center) || number <= 0 || center <= 0) {
alert("You entered an invalid value.");
return;
}
ctx.clearRect(0, 0, c.width, c.height);
var centerX = c.width / 2;
var centerY = c.height / 2;
var angleIncrement = 2 * Math.PI / number;
for (var i = 0; i < number; i++) {
var angle = i * angleIncrement;
var smileX = centerX + center * Math.cos(angle);
var smileY = centerY + center * Math.sin(angle);
drawSmile(smileX, smileY);
}
}
document.getElementById("draw").addEventListener('click', draw);
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
function drawSmile(x, y) {
// smile face
ctx.fillStyle = "yellow";
ctx.beginPath();
ctx.arc(x, y, 75, 0, 2 * Math.PI);
ctx.stroke();
ctx.fill();
ctx.fillStyle = "black";
ctx.beginPath();
ctx.arc(x - 20, y - 30, 15, 0, 2 * Math.PI);
ctx.fill();
ctx.beginPath();
ctx.arc(x + 20, y - 30, 15, 0, 2 * Math.PI);
ctx.fill();
ctx.beginPath();
ctx.arc(x, y + 5, 50, 0, Math.PI);
ctx.stroke();
}
function draw() {
var number = parseInt(document.getElementById("number").value);
var center = parseInt(document.getElementById("center").value);
if (isNaN(number) || isNaN(center) || number <= 0 || center <= 0) {
alert("You entered an invalid value.");
return;
}
ctx.clearRect(0, 0, c.width, c.height);
var centerX = c.width / 2;
var centerY = c.height / 2;
var angleIncrement = 2 * Math.PI / number;
for (var i = 0; i < number; i++) {
var angle = i * angleIncrement;
var smileX = centerX + center * Math.cos(angle);
var smileY = centerY + center * Math.sin(angle);
drawSmile(smileX, smileY);
}
}
document.getElementB.
Creating an Uber Clone - Part VIII - Transcript.pdf
This is a part of an online Codename One course published around 2017 see it all for free at https://debugagent.com/series/cn1
Writing a Space Shooter with HTML5 Canvas
This talk reviews a Space Shooter game that I wrote to learn about HTML5 canvas. It covers:
* Basics of canvas 2D
* Overview of how the game is put together
* Some performance tips
First presented @ Ottawa JavaScript in September 2012.
Current Attempt in Progress. At December 31, 2024, Culiumber Imports .pdf
Current Attempt in Progress. At December 31, 2024, Culiumber Imports reported this
information on its balince sheet. During 2025, the compary had the following transactions related
to recelvables.
Prepare the journal ertries to record eachof these five transactions. Assume that no cash
disoounts were taken ca the collections. of accounts receivabie. (Omit cost of goods sold entries.)
(List oll debit entries before credit entries, Credit account tieles are dutomaticaliy indented when
amount is entered. Do not indent manually . If no entry is required, seiect "No Entry. for the
occount tities and enter 0 for the amounts.)
Question 2 of 4 Acopurts Receivible 4. 5. 17000 (To reinstate account previously written off)
\begin{tabular}{l} Cash \\ Accounts Receivatile \\ \hline \end{tabular} (To rocord collection of
accounts recelvable) efextbook and Media List of Accounts Attemptsi unlimited
Enter the January 1, 2025, balances in Accounts Recelvable and Alowance for Doubtful
Accounts, post the entries to the twe? accounts and determine the balances. (Aost entries in the
order of journal entries presented in the previous port.)
List of Accounts Attempts: inlimited (c) The parts of this question must be completed in order.
This part will be available when you complete the part above..
Current Attempt in Progress Waterway Company uses a periodic inventor.pdf
Current Attempt in Progress Waterway Company uses a periodic inventory system. Details for
the inventory account for the month of January, 2020 are as follows: An end of the month
(1/31/20) inventory showed that 110 units were on hand. If the company uses LIFO, what is the
value of the ending inventory? $652$572$550$616.
More Related Content
Similar to I need to create a page looks like a picture. But it looks different.pdf
Supstat nyc subway
The document describes how to create an interactive visualization showing subway lines and median household income data on a map of New York City. It involves loading data from Google sheets, creating scales and axes, drawing the subway lines and income data as paths on a map, and adding interactivity through hovering and clicking on points. Key elements include filtering the data by subway line, drawing the corresponding path on the chart and highlighting the matching line on the map, and aggregating data by borough to add labeled regions to the chart.
Making Games in JavaScript
The document provides an overview of making games using JavaScript, HTML, and the DOM. It discusses JavaScript and HTML5 as languages well-suited for game development due to features like fast iteration, treating scripts as data, and allowing different game types. It covers key concepts like the DOM tree, rendering to a <canvas> element, using the 2D context to draw, implementing a main loop with setInterval(), drawing sprites and images, handling user input, and creating basic animations and games with concepts like sprites, matrices, vectors, bullets, and zombies.
Creating an Uber Clone - Part VIII.pdf
This document describes the creation of a navigation toolbar for entering pick-up and drop-off locations in an Uber clone app. It includes code for adding a back button, from and to text fields, and labels for selected locations. Styles are defined for the toolbar and text fields. Functionality is added to animate the toolbar onto the screen and hide it by sliding up when the back button is pressed.
You will learn RxJS in 2017
The document discusses RxJS, a library for reactive programming using Observables that provide an API for asynchronous programming with observable streams. It provides code examples of using RxJS to handle events, AJAX requests, and animations as Observables. It also compares RxJS to Promises and native JavaScript event handling, and lists several frameworks that use RxJS like Angular and Redux.
QML\Qt Quick на практике
QML\Qt Quick это превосходный декларативный язык программирования, призванный сильно упростить создание и дальнейшую поддержку пользовательских интерфейсов.В докладе я расскажу что из себя представляет QML, попробуем разобраться в вопросе “Где и как уместно использовать QML\Qt Quick” и приведу краткий обзор полезных инструментов для разработки QML\Qt Quick приложений.
Canvas al ajillo
The document discusses various techniques for customizing Canvas and View objects in Android, including:
1. The lifecycle of a View, including constructor, layout, measure, draw, and animation methods.
2. Creating circular progress indicators using Canvas, with techniques like animating drawing arcs and adding effects like blurring.
3. Avoiding square views by using paths with curves and drawing on non-rectangular canvases.
4. Improving performance by optimizing drawing operations and avoiding unnecessary invalidates.
package chapter15;import javafx.application.Application;import j.pdf
package chapter15;
import javafx.application.Application;
import javafx.beans.property.DoubleProperty;
import javafx.beans.value.ChangeListener;
import javafx.beans.value.ObservableValue;
import javafx.event.EventHandler;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.Pane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.scene.shape.Line;
import javafx.scene.text.Font;
import javafx.scene.text.Text;
import javafx.scene.text.TextAlignment;
import javafx.stage.Stage;
/**
* Java Programming: Comprehensive (10e); Liang; Pearson 2014
*
* *15.21(Drag points) Draw a circle with three random points on the circle. Connect
* the points to form a triangle. Display the angles in the triangle. Use the mouse
* to drag a point along the perimeter of the circle. As you drag it, the triangle and
* angles are redisplayed dynamically, as shown in Figure 15.30b. For computing
* angles in a triangle, see Listing 4.1.
*
* {@code A = Math.acos((a * a - b * b - c * c) / (-2 * b * c))}
* {@code B = Math.acos((b * b - a * a - c * c) / (-2 * a * c))}
* {@code C = Math.acos((c * c - b * b - a * a) / (-2 * a * b))}
*
* @author ncoop
*/
@SuppressWarnings(\"WeakerAccess\")
public class DragPoints extends Application {
@Override
public void start(Stage primaryStage) {
final PointPane pane = new PointPane(640, 480);
pane.setStyle(\"-fx-background-color: wheat;\");
Label label = new Label(\"Click and drag the points.\");
BorderPane borderPane = new BorderPane(pane);
BorderPane.setAlignment(label, Pos.CENTER);
label.setPadding(new Insets(5));
borderPane.setBottom(label);
Scene scene = new Scene(borderPane);
primaryStage.setTitle(\"Exercise15_21\");
primaryStage.setScene(scene);
primaryStage.show();
}
private class PointPane extends Pane {
final Circle circle = new Circle();
final Vertex[] v = new Vertex[3];
final int strokeWidth = 2;
final Color circleStroke = Color.GRAY, legStroke = Color.BLACK;
@SuppressWarnings(\"SameParameterValue\")
PointPane(double w, double h) {
this.setPrefSize(w, h);
this.setWidth(w);
this.setHeight(h);
circle.setStroke(circleStroke);
circle.setFill(Color.TRANSPARENT);
circle.setStrokeWidth(strokeWidth);
circle.radiusProperty().bind(this.heightProperty().multiply(0.4));
circle.centerXProperty().bind(this.widthProperty().divide(2));
circle.centerYProperty().bind(this.heightProperty().divide(2));
this.getChildren().add(circle);
// create the vertices at random angles
for (int i = 0; i < v.length; i++) {
v[i] = new Vertex(circle, 2 * Math.PI / v.length * (i + Math.random()));
v[i].radiusProperty().bind(circle.radiusProperty().divide(10));
v[i].setPosition();
v[i].setStroke(new Color(i == 0 ? 1 : 0, i == 1 ? 1 : 0, i == 2 ? 1 : 0, 1));
v[i].setFill(Color.TRANSPARENT);
v[i].setStrokeWidth(strokeWidth);
this.getChildren().add(v[i]);
v[i].setOnMouseDr.
Computer Graphics in Java and Scala - Part 1b
First see the Scala program from Part 1 translated into Java.
Then see the Scala program modified to produce a more intricate drawing.
Java Code: https://github.com/philipschwarz/computer-graphics-50-triangles-java
Scala Code: https://github.com/philipschwarz/computer-graphics-chessboard-with-a-great-many-squares-scala
Introduction to d3js (and SVG)
The document provides an overview of Scalable Vector Graphics (SVG) and the D3.js library for manipulating SVG graphics. It discusses basic SVG shapes and paths that can be used to create visualizations like bar charts. It then demonstrates how to generate SVG elements like rectangles and circles using D3 selections and data binding. Transitions and interactive elements are also covered. Examples are provided to illustrate D3 concepts like entering new data, updating existing elements, and exiting stale elements from the DOM.
NewTetrisScore.cppNewTetrisScore.cpp newTetris.cpp Defines t.docx
This document contains C++ code for a Tetris game. It defines classes and functions for representing Tetris shapes, moving and rotating the shapes, generating a falling sequence of shapes, and handling game logic and drawing the game board. Key aspects include a TetrisShape class to represent game pieces, functions for populating shape arrays, moving/rotating shapes, generating a random sequence of falling shapes, and a game tick function that handles core game logic like shape movement/falling and checking for completed lines to remove.
Prototype programming in JavaScript
Author: Timur Shemsedinov
Video: https://youtu.be/SzaXTW2qcJE
Code examples: https://github.com/HowProgrammingWorks/PrototypeChain
Maps
This document discusses techniques for creating scrolling maps in 2D games. It describes how to create horizontal and vertical scrolling by loading multiple background images and moving them across the screen. It also covers creating square and rhombus shaped maps by defining a viewport and converting between cell and point coordinates. Methods are provided for loading map textures, drawing the viewport region, and abstractly converting between coordinate systems for different map shapes.
Import java.awt.; Import acm.program.; Import acm.graphics.;.pdf
Import java.awt.*;
Import acm.program.*;
Import acm.graphics.*;
public class Sierpinski extends GraphicsProgram
{
public void run()
{
GRect box = new GRect(20, 20, 242, 242);
box.setFilled(true);
add(box);
drawGasket(20, 20, 243);
}
private void drawFigure(int x, int y, int side) {
int sub = side / 3;
GRect box = new GRect(x + sub, y + sub, sub - 1, sub - 1);
box.setFilled(true);
box.setColor(Color.WHITE);
add(box);
if (sub >= 3) {
drawFigure(x, y, sub);
drawFigure(x + sub, y, sub);
drawFigure(x + 2 * sub, y, sub);
drawFigure(x, y + sub, sub);
drawFigure(x + 2 * sub, y + sub, sub);
drawFigure(x, y + 2 * sub, sub);
drawFigure(x + sub, y + 2 * sub, sub);
drawFigure(x + 2 * sub, y + 2 * sub, sub);
}
}
C.8 SQUARE in recursive method:-
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
public class SierpinskiCarpet extends JPanel implements ActionListener
{
public static void main(String[] args)
{
JFrame window = new JFrame(\"Sierpinski Carpet\");
window.setContentPane( new SierpinskiCarpet() );
window.pack();
window.setResizable(false);
window.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
Dimension screensize = Toolkit.getDefaultToolkit().getScreenSize();
int x = Math.max(10, (screensize.width - window.getWidth()) / 2);
int y = Math.max(10, (screensize.height - window.getHeight()) / 2);
window.setLocation(x,y);
window.setVisible(true);
}
private int level;
private JRadioButton[] levelButton;
private JCheckBox[][] regionCheckbox;
private Display display;
private class Display extends JPanel
{
Display()
{
setBackground(Color.WHITE);
setPreferredSize(new Dimension(729,729));
}
protected void paintComponent(Graphics g)
{
super.paintComponent(g);
drawCarpet(g,level,0,0,729);
}
}
public SierpinskiCarpet()
{
setLayout(new BorderLayout(3,3));
setBackground(Color.GRAY);
setBorder(BorderFactory.createLineBorder(Color.GRAY,3));
display = new Display();
add(display,BorderLayout.CENTER);
Box controls = Box.createVerticalBox();
controls.setBorder(BorderFactory.createEmptyBorder(10, 10, 10, 10));
controls.setBackground(Color.WHITE);
controls.setOpaque(true);
add(controls, BorderLayout.EAST);
controls.add(new JLabel(\"Controls\"));
controls.add(Box.createVerticalStrut(30));
levelButton = new JRadioButton[7];
ButtonGroup grp = new ButtonGroup();
for (int i = 0; i < 7; i++)
{
levelButton[i] = new JRadioButton(\"Recursion Level \" + i);
grp.add(levelButton[i]);
levelButton[i].addActionListener(this);controls.add(levelButton[i]);
}
level = 4;
levelButton[4].setSelected(true);
regionCheckbox = new JCheckBox[3][3];
JPanel checks = new JPanel();
checks.setLayout(new GridLayout(3,3,5,5));
for (int r = 0; r < 3; r++)
{
for (int c = 0; c < 3; c++)
{
regionCheckbox[r][c] = new JCheckBox();
checks.add(regionCheckbox[r][c]);
regionCheckbox[r][c].addActionListener(this);
regionCheckbox[r][c].setSelected(true);
}
}
checks.setMaximumSize(new Dimension(90,90));
checks.setAlignmentX(LEFT_ALIGNMENT);
checks.setBackground(Color.WHITE);
regionCheckbox[1][1].setSelec.
Having fun with graphs, a short introduction to D3.js
This talk is all about drawing on your webpage. We will have a short introduction to d3.js, a library to easily create SVGs in your webpage. Along the way we will render graphs using different layouting strategies. But what are the problems when displaying a graph? Just think of graphs having more vertices then you have pixels on your screen. Or what if you want a user to manupilate the graph and his changes being persistent? Michael will present his answers to this questions, ending up wit a GUI for a graph database.
Raspberry Pi à la GroovyFX
The document discusses using JavaFX on Raspberry Pi devices. It provides examples of JavaFX applications written in both Java and the GroovyFX declarative syntax. It demonstrates how GroovyFX simplifies common tasks like creating UI elements, adding animations, handling events, and laying out components compared to the Java approach.
Game dev 101 part 3
The document provides instructions for building a basic space shooter game using JavaScript and canvas. It demonstrates how to load assets like images, handle input events from keyboard keys to control player movement, create enemy objects that move across the screen, detect collisions between lasers and enemies, and add game states to track lives and score. The game loop redraws the game objects on an interval to animate their movement. Event handling is implemented through an event emitter to avoid messy code. The final sections provide a demo of the moving game elements and lasers firing, along with tips for continuing to learn game development.
Cara membuat tulisan mengikuti kursor di blog
This document provides instructions on how to add scrolling text that follows the cursor on a blog. It involves opening the blog layout, adding an HTML/Javascript gadget, inserting code to style the text and make it move with cursor movement using JavaScript, then saving and viewing the results. The code creates a scrolling circular text effect that follows the mouse position and can be customized by changing the text color code.
I need to create a page like a picture My code is working .pdf
I need to create a page like a picture. My code is working, but its different from the picture.
Tried to fix it but not working.
My Html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="a8.js" defer></script>
<title>Assignment 8</title>
</head>
<body>
<div>
<h1>CPSC 1045 Assignment - Smiley Rotator</h1>
<P>Enter a number of smiles to draw <input id="number" type="text"></P>
<p>Enter how far from the center of the canvas to draw them <input id="center" type="text"></p>
<canvas id="myCanvas" width="500" height="500" style="border:1px solid #000000;display: block;">
</canvas>
<button id="draw">Draw</button>
</div>
</body>
</html>
My Js
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
function drawSmile(x, y) {
// smile face
ctx.fillStyle = "yellow";
ctx.beginPath();
ctx.arc(x, y, 75, 0, 2 * Math.PI);
ctx.stroke();
ctx.fill();
ctx.fillStyle = "black";
ctx.beginPath();
ctx.arc(x - 20, y - 30, 15, 0, 2 * Math.PI);
ctx.fill();
ctx.beginPath();
ctx.arc(x + 20, y - 30, 15, 0, 2 * Math.PI);
ctx.fill();
ctx.beginPath();
ctx.arc(x, y + 5, 50, 0, Math.PI);
ctx.stroke();
}
function draw() {
var number = parseInt(document.getElementById("number").value);
var center = parseInt(document.getElementById("center").value);
if (isNaN(number) || isNaN(center) || number <= 0 || center <= 0) {
alert("You entered an invalid value.");
return;
}
ctx.clearRect(0, 0, c.width, c.height);
var centerX = c.width / 2;
var centerY = c.height / 2;
var angleIncrement = 2 * Math.PI / number;
for (var i = 0; i < number; i++) {
var angle = i * angleIncrement;
var smileX = centerX + center * Math.cos(angle);
var smileY = centerY + center * Math.sin(angle);
drawSmile(smileX, smileY);
}
}
document.getElementById("draw").addEventListener('click', draw);
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
function drawSmile(x, y) {
// smile face
ctx.fillStyle = "yellow";
ctx.beginPath();
ctx.arc(x, y, 75, 0, 2 * Math.PI);
ctx.stroke();
ctx.fill();
ctx.fillStyle = "black";
ctx.beginPath();
ctx.arc(x - 20, y - 30, 15, 0, 2 * Math.PI);
ctx.fill();
ctx.beginPath();
ctx.arc(x + 20, y - 30, 15, 0, 2 * Math.PI);
ctx.fill();
ctx.beginPath();
ctx.arc(x, y + 5, 50, 0, Math.PI);
ctx.stroke();
}
function draw() {
var number = parseInt(document.getElementById("number").value);
var center = parseInt(document.getElementById("center").value);
if (isNaN(number) || isNaN(center) || number <= 0 || center <= 0) {
alert("You entered an invalid value.");
return;
}
ctx.clearRect(0, 0, c.width, c.height);
var centerX = c.width / 2;
var centerY = c.height / 2;
var angleIncrement = 2 * Math.PI / number;
for (var i = 0; i < number; i++) {
var angle = i * angleIncrement;
var smileX = centerX + center * Math.cos(angle);
var smileY = centerY + center * Math.sin(angle);
drawSmile(smileX, smileY);
}
}
document.getElementB.
Creating an Uber Clone - Part VIII - Transcript.pdf
This is a part of an online Codename One course published around 2017 see it all for free at https://debugagent.com/series/cn1
Writing a Space Shooter with HTML5 Canvas
This talk reviews a Space Shooter game that I wrote to learn about HTML5 canvas. It covers:
* Basics of canvas 2D
* Overview of how the game is put together
* Some performance tips
First presented @ Ottawa JavaScript in September 2012.
Similar to I need to create a page looks like a picture. But it looks different.pdf (20)
package chapter15;import javafx.application.Application;import j.pdf
package chapter15;import javafx.application.Application;import j.pdf
NewTetrisScore.cppNewTetrisScore.cpp newTetris.cpp Defines t.docx
NewTetrisScore.cppNewTetrisScore.cpp newTetris.cpp Defines t.docx
Import java.awt.; Import acm.program.; Import acm.graphics.;.pdf
Import java.awt.; Import acm.program.; Import acm.graphics.;.pdf
Having fun with graphs, a short introduction to D3.js
Having fun with graphs, a short introduction to D3.js
I need to create a page like a picture My code is working .pdf
I need to create a page like a picture My code is working .pdf
Creating an Uber Clone - Part VIII - Transcript.pdf
Creating an Uber Clone - Part VIII - Transcript.pdf
More from allurafashions98
Current Attempt in Progress. At December 31, 2024, Culiumber Imports .pdf
Current Attempt in Progress. At December 31, 2024, Culiumber Imports reported this
information on its balince sheet. During 2025, the compary had the following transactions related
to recelvables.
Prepare the journal ertries to record eachof these five transactions. Assume that no cash
disoounts were taken ca the collections. of accounts receivabie. (Omit cost of goods sold entries.)
(List oll debit entries before credit entries, Credit account tieles are dutomaticaliy indented when
amount is entered. Do not indent manually . If no entry is required, seiect "No Entry. for the
occount tities and enter 0 for the amounts.)
Question 2 of 4 Acopurts Receivible 4. 5. 17000 (To reinstate account previously written off)
\begin{tabular}{l} Cash \\ Accounts Receivatile \\ \hline \end{tabular} (To rocord collection of
accounts recelvable) efextbook and Media List of Accounts Attemptsi unlimited
Enter the January 1, 2025, balances in Accounts Recelvable and Alowance for Doubtful
Accounts, post the entries to the twe? accounts and determine the balances. (Aost entries in the
order of journal entries presented in the previous port.)
List of Accounts Attempts: inlimited (c) The parts of this question must be completed in order.
This part will be available when you complete the part above..
Current Attempt in Progress Waterway Company uses a periodic inventor.pdf
Current Attempt in Progress Waterway Company uses a periodic inventory system. Details for
the inventory account for the month of January, 2020 are as follows: An end of the month
(1/31/20) inventory showed that 110 units were on hand. If the company uses LIFO, what is the
value of the ending inventory? $652$572$550$616.
Current Attempt in Progress The comparative balance.pdf
Current Attempt in Progress The comparative balance sheet of Delta Company appears below:
Using horizontal analysis, show the percentage change for each balance sheet item using 2020 as
a base year. (If percentage
The parts of this question must be completed in order. This part will be available when you
complete the part above..
Current Attempt in Progress Novaks Market recorded the following eve.pdf
Current Attempt in Progress Novak's Market recorded the following events involving a recent
purchase of inventory: Received goods for $112000, terms 2/11,n/30. Returned $2200 of the
shipment for credit. Paid $400 freight on the shipment. Paid the invoice within the discount
period. As a result of these events, the company's inventory increased by $110200. increased by
$107604. increased by $108004. increased by $107996..
Current Attempt in Progress Ivanhoe Corporation reported the followin.pdf
Current Attempt in Progress Ivanhoe Corporation reported the following information (in
thousands) at December 31,2021 :
Additional information: 1. The company purchased long-term investments during the year; none
were sold. 2. The company purchased equipment during the year and sold some equipment that
cost $150 and had a carrying amount of $55 for a gain of $30. Prepare the investing activities
section of Ivanhoe's statement of cash flows for the year, (Show amounts that decrease cash flow
with either a-sign eg, 15,000 or in parenthesis es. (15,000))
IVANHOE CORPORATION Statement of Cash Flows (Partial) (\$ in thousands) Investing
activities $
eTextbook and Media.
Define a class called Disk with two member variables, an int called.pdf
Define a class called Disk with two member variables, an int called width, and a float called
height. Add a constructor that takes two parameters (each of which will be used to set initial
values for the member variables, so set their types accordingly), which uses the values provided
to set the member variables values. Then include a function called display() that has no
parameters and no return,.
Define to be the median of the Exponential () distribution. That is,.pdf
The median of the exponential distribution with rate parameter λ is defined as the value such that the probability of the random variable being less than or equal to that value is 0.5. The formula to calculate the median m in terms of λ for an exponential distribution is m = ln(2)/λ.
Dedewine the bridthenes tar this test Choose the conist answet below .pdf
Dedewine the bridthenes tar this test Choose the conist answet below 4. H,D012 A. Hy: p=0,2
Hh p 0.12 HA p:012 C. H0p=e is D. 4%,=612HAD<015H4p>012 E tho.0.15 1. tho eots in
p=0.15 14 an. 00015 (1) (ires minger io anchis reanded of las decme places as feeded) P saidin
(The wh pheger or decime iovided ss touse aicina jiaces as neoded)
H2<2.12H(-p=0.131rs2015 b. H0;=0.12 E. Ho =0.15 11 in p=0.15.
Davenport Incorporated has two divisions, Howard and Jones. The f.pdf
Davenport Incorporated has two divisions, Howard and Jones. The income statement showed Howard division had a $70,875 profit while Jones division had an $81,000 loss. If the Jones division was dropped, Davenport would have a $70,875 profit for the month.
Data tableRequirements 1. Prepare the income statement for the mon.pdf
Data table
Requirements 1. Prepare the income statement for the month ended July 31,2024. 2. Prepare the
statement of retained earnings for the month ended July 31 , 2024. The beginning balance of
retained earnings was $0. 3. Prepare the balance sheet as of July 31,2024. 4. Calculate the debt
ratio as of July 31,2024..
Current Attempt in Progress Items from Oriole Companys budget for Ma.pdf
Current Attempt in Progress Items from Oriole Company's budget for March, in which 1500
units were produced and sold, appear below: At 1600 units, how much are budgeted variable
manufacturing costs? $24000$46293$21281$19219 eTextbook and Media.
Data tableAfter researching the competitors of EJH Enterprises, yo.pdf
Data table
After researching the competitors of EJH Enterprises, you determine that most comparable firms
have the following valuation ratios EJH Enterprises has EPS of $1,90, EBITDA of $295 million,
$27 million in cash, $42 million in debt, and 105 million shares outstanding. What range of
prices is consistent with both sets of multiples? The range of prices will be: Lowest price within
both ranges, the PIE and EVIEBITDA ranges, is $ (Round to two decimal places.) Highest price
within both ranges, the PIE and the EVIEBITDA ranges, is \$ (Round to two decimal places).
Current Attempt in Progress If a qualitative variable has c categ.pdf
Current Attempt in Progress If a qualitative variable has " c " categories, how many dummy
variables must be created and used in the regression analysis? c1 c 4+cc+1c2.
Data tableData tableThe figures to the right show the BOMs for .pdf
Data table
Data table
The figures to the right show the BOMs for two products, A and B. Table 1 shows the MPS
quantity start date for each one. Table 2 contains data from inventory records for items C,D, and
E. There are no safety stock requirements for any of the items. Determine the material
requirements plan for items C. D, and E for the next 8 weeks. Click the icon to view Table 1.
Click the icon to view Table 2 ..
Data table Requirements 1. Compute the product cost per meal produced.pdf
The document outlines requirements for analyzing costing methods for a food production company. It asks to:
1) Calculate product costs per meal for January and February under absorption and variable costing.
2) Prepare income statements for January and February using absorption and variable costing.
3) Determine if operating income is higher under absorption or variable costing for each month and explain differences.
Darla, Ellen, and Frank have capital balances of $30,000,$40,000 and .pdf
Darla, Ellen, and Frank have capital balances of $30,000,$40,000 and $50,000 respectively
when Ellen personally agrees to buy Daria's share of the partnership. Ellen pays Darla $35,000.
Once the transaction has been recorded, total net assets are $85,000$115,000$90,000$120,000.
Daniel, age 38 , is single and has the following income and exnencac .pdf
Daniel, age 38 , is single and has the following income and exnencac in on?.
a. Classify the following exnenese AGI", or "Not deductible". 7 Gross income: AGI: $ b. Should
Daniel itemize his deductions from AGI or take the standard deduction? Because Daniel's total
itemized deductions (after any limitations) are $ he would benefit from.
Danny Anderson admired his wifes success at selling scarves at local.pdf
Danny Anderson admired his wife's success at selling scarves at local crafts shows, so he The
twig stands are mare populas, so Danny sels tour twig stands for evory one oak decided to make
two types of plant stands to sell at the shows. Danny makes twig stabds out of stand. Kabe
charges her husband \$300 to share her booth at the craft shows \&after all. downed wood from
his backyard and the yaeds of his neighbors, so his variable cost is she has paid the entrance
fees). How many of each plant stand does Darmy need to seil minimal (wood screws, glue, and
so forth) Howover, Danny has to purchase wood to make his to beeakeven? Wil this aflect tie
number of scarves Katie needs to sel to breakevec? ook plant stands. His unit prices and costs are
as follows: Explan (Click the icon to verw the data.) Data table Determine how mamy of each
plant stand Danny ne a per une. First idantify the formula labes, then cemplete the calculations
step by step. Lebs: Weinhted average contribution margin per unit 1+4. 1 * = Breakeven sales in
units Deiemine how many of each plant stands Danny needs to seli to breakeven.
the calculations sesp by stop Areakever sies in unte Determine how many of eoch plant atands
Damy need to sel to breaknven Breakeren cales of twig stands ia Breakeven aaris of oak tiande is
Wia this afect the nurber of scaves riote needt to sell to breakrven' Explain. Or chariging her
hasband part of the cont fair entance fees, her fuod costs will cecised to share her orat hooths..
CX Enterprises has the following expected dividends $1.05 in one yea.pdf
CX Enterprises has the following expected dividends: $1.05 in one year, $1.15 in two years, and
$1.25 in three years. After that, its dividends are expected to grow at 4% per year forever (so that
year 4 's dividend will be 4% more than $1.25 and so on). If CX's equity cost of capital is 11.7%,
what is the current price of its stock? The price of the stock will be $ (Round to the nearest cent.).
Daring the financial crisis an the end of the firs decade of the 2000.pdf
Daring the financial crisis an the end of the firs decade of the 2000 s, Memill Lynch was
acquired by Bank of America for $50 biltion. The reason for the acquisition was that Merrill
Lynch was unsure it could survive the crisis on its own. Bank of America received government
assistance during the financial crisis from (and was thas covered by) TARP (the Troubled Asset
Relief Program). So too then was Merrill Lynch. One initial consequence of TARP coverage was
that some employees, including some high-level, highrevenue generating employecs, began to
leave larger financial institutions like Merrill Lynch/Bank of America to go so-called "boutique"
financial services firms, which had not received TARP money and thus were not covered by
TARP restrictions on compensation. Another initial reaction was an increase in base salary levels
and a decrease in bonns levels, apparently in response to all of the negative publicity boneses had
received and as a way to get around TARP resirictions. One senior executive at the company
roceiving TARP moncy and now paying smaller bosuses and bigger salaries, bowever,
questioned whether TARP-induced greater emphasis on base pay made sense: So, "Yoa're going
to overpay them regularly, instead of just sometimes? However, now that some time has passed,
the eccoomy has recovered (somewhat), and the stock market has botinced back, Merrill Lynch
and other financial services companies are making money again. At Merrill Lynch, there is
always a lot of action and discussion around compensation strategy, Merrill introduced a plan to
expand its number of financial advisors by 8% (about 12,000 people). Where would they come
from? Ohter firms? How would Merrill get them to move? By offering unusually high up-front
signing bonuses and decentralizing authority to make such offers. Traditionally, top berokers
from other firms can receive 1.5 times their pay at the firm they are leaving. Merrill was not the
only firm looking to add top brokers. Indeed, what was described as a "bidding war" broke out,
and signing boeuses were reported to have gone as high as three to four times previous pay in
some cases. Why the bidding war? "Wealth management firms make the bulk of their profits on
the top 10 percent of their producers" - acconding to compensation attorney Ketten Muchin.
And, very wealthy clients tend to be more loyal to their advisors than to the advisors" fims. At
Merrill, there are some concerns among financial advisors. First, in the noe-Merrill part of the
Bank of America, brokers are under a discretionary bonus system rahher than (objective)
incentive syster where pay is based on a formula. Merrill financial advisors fear the Bank of
America wants 3 I P a d e to extend that system to cover them. Second, and likely related, non-
Merrill brokers at Bank of America are expected to cross-sell - in other words, to push prodacts
sold by other parts of the bank. The opportunities for such synergies are typically seen as source
of c.
More from allurafashions98 (20)
Current Attempt in Progress. At December 31, 2024, Culiumber Imports .pdf
Current Attempt in Progress. At December 31, 2024, Culiumber Imports .pdf
Current Attempt in Progress Waterway Company uses a periodic inventor.pdf
Current Attempt in Progress Waterway Company uses a periodic inventor.pdf
Current Attempt in Progress The comparative balance.pdf
Current Attempt in Progress The comparative balance.pdf
Current Attempt in Progress Novaks Market recorded the following eve.pdf
Current Attempt in Progress Novaks Market recorded the following eve.pdf
Current Attempt in Progress Ivanhoe Corporation reported the followin.pdf
Current Attempt in Progress Ivanhoe Corporation reported the followin.pdf
Define a class called Disk with two member variables, an int called.pdf
Define a class called Disk with two member variables, an int called.pdf
Define to be the median of the Exponential () distribution. That is,.pdf
Define to be the median of the Exponential () distribution. That is,.pdf
Dedewine the bridthenes tar this test Choose the conist answet below .pdf
Dedewine the bridthenes tar this test Choose the conist answet below .pdf
Davenport Incorporated has two divisions, Howard and Jones. The f.pdf
Davenport Incorporated has two divisions, Howard and Jones. The f.pdf
Data tableRequirements 1. Prepare the income statement for the mon.pdf
Data tableRequirements 1. Prepare the income statement for the mon.pdf
Current Attempt in Progress Items from Oriole Companys budget for Ma.pdf
Current Attempt in Progress Items from Oriole Companys budget for Ma.pdf
Data tableAfter researching the competitors of EJH Enterprises, yo.pdf
Data tableAfter researching the competitors of EJH Enterprises, yo.pdf
Current Attempt in Progress If a qualitative variable has c categ.pdf
Current Attempt in Progress If a qualitative variable has c categ.pdf
Data tableData tableThe figures to the right show the BOMs for .pdf
Data tableData tableThe figures to the right show the BOMs for .pdf
Data table Requirements 1. Compute the product cost per meal produced.pdf
Data table Requirements 1. Compute the product cost per meal produced.pdf
Darla, Ellen, and Frank have capital balances of $30,000,$40,000 and .pdf
Darla, Ellen, and Frank have capital balances of $30,000,$40,000 and .pdf
Daniel, age 38 , is single and has the following income and exnencac .pdf
Daniel, age 38 , is single and has the following income and exnencac .pdf
Danny Anderson admired his wifes success at selling scarves at local.pdf
Danny Anderson admired his wifes success at selling scarves at local.pdf
CX Enterprises has the following expected dividends $1.05 in one yea.pdf
CX Enterprises has the following expected dividends $1.05 in one yea.pdf
Daring the financial crisis an the end of the firs decade of the 2000.pdf
Daring the financial crisis an the end of the firs decade of the 2000.pdf
Recently uploaded
Leveraging Generative AI to Drive Nonprofit Innovation
In this webinar, participants learned how to utilize Generative AI to streamline operations and elevate member engagement. Amazon Web Service experts provided a customer specific use cases and dived into low/no-code tools that are quick and easy to deploy through Amazon Web Service (AWS.)
Gender and Mental Health - Counselling and Family Therapy Applications and In...
A proprietary approach developed by bringing together the best of learning theories from Psychology, design principles from the world of visualization, and pedagogical methods from over a decade of training experience, that enables you to: Learn better, faster!
Traditional Musical Instruments of Arunachal Pradesh and Uttar Pradesh - RAYH...
Traditional Musical Instruments of Arunachal Pradesh and Uttar Pradesh
Benner "Expanding Pathways to Publishing Careers"
This presentation was provided by Rebecca Benner, Ph.D., of the American Society of Anesthesiologists, for the second session of NISO's 2024 Training Series "DEIA in the Scholarly Landscape." Session Two: 'Expanding Pathways to Publishing Careers,' was held June 13, 2024.
Walmart Business+ and Spark Good for Nonprofits.pdf
"Learn about all the ways Walmart supports nonprofit organizations.
You will hear from Liz Willett, the Head of Nonprofits, and hear about what Walmart is doing to help nonprofits, including Walmart Business and Spark Good. Walmart Business+ is a new offer for nonprofits that offers discounts and also streamlines nonprofits order and expense tracking, saving time and money.
The webinar may also give some examples on how nonprofits can best leverage Walmart Business+.
The event will cover the following::
Walmart Business + (https://business.walmart.com/plus) is a new shopping experience for nonprofits, schools, and local business customers that connects an exclusive online shopping experience to stores. Benefits include free delivery and shipping, a 'Spend Analytics” feature, special discounts, deals and tax-exempt shopping.
Special TechSoup offer for a free 180 days membership, and up to $150 in discounts on eligible orders.
Spark Good (walmart.com/sparkgood) is a charitable platform that enables nonprofits to receive donations directly from customers and associates.
Answers about how you can do more with Walmart!"
BÀI TẬP BỔ TRỢ TIẾNG ANH LỚP 9 CẢ NĂM - GLOBAL SUCCESS - NĂM HỌC 2024-2025 - ...
BÀI TẬP BỔ TRỢ TIẾNG ANH LỚP 9 CẢ NĂM - GLOBAL SUCCESS - NĂM HỌC 2024-2025 - ...Nguyen Thanh Tu Collection
https://app.box.com/s/tacvl9ekroe9hqupdnjruiypvm9rdaneThe History of Stoke Newington Street Names
Presented at the Stoke Newington Literary Festival on 9th June 2024
www.StokeNewingtonHistory.com
BIOLOGY NATIONAL EXAMINATION COUNCIL (NECO) 2024 PRACTICAL MANUAL.pptx
Practical manual for National Examination Council, Nigeria.
Contains guides on answering questions on the specimens provided
Mule event processing models | MuleSoft Mysore Meetup #47
Mule event processing models | MuleSoft Mysore Meetup #47
Event Link:- https://meetups.mulesoft.com/events/details/mulesoft-mysore-presents-mule-event-processing-models/
Agenda
● What is event processing in MuleSoft?
● Types of event processing models in Mule 4
● Distinction between the reactive, parallel, blocking & non-blocking processing
For Upcoming Meetups Join Mysore Meetup Group - https://meetups.mulesoft.com/mysore/YouTube:- youtube.com/@mulesoftmysore
Mysore WhatsApp group:- https://chat.whatsapp.com/EhqtHtCC75vCAX7gaO842N
Speaker:-
Shivani Yasaswi - https://www.linkedin.com/in/shivaniyasaswi/
Organizers:-
Shubham Chaurasia - https://www.linkedin.com/in/shubhamchaurasia1/
Giridhar Meka - https://www.linkedin.com/in/giridharmeka
Priya Shaw - https://www.linkedin.com/in/priya-shaw
Chapter wise All Notes of First year Basic Civil Engineering.pptx
Chapter wise All Notes of First year Basic Civil Engineering
Syllabus
Chapter-1
Introduction to objective, scope and outcome the subject
Chapter 2
Introduction: Scope and Specialization of Civil Engineering, Role of civil Engineer in Society, Impact of infrastructural development on economy of country.
Chapter 3
Surveying: Object Principles & Types of Surveying; Site Plans, Plans & Maps; Scales & Unit of different Measurements.
Linear Measurements: Instruments used. Linear Measurement by Tape, Ranging out Survey Lines and overcoming Obstructions; Measurements on sloping ground; Tape corrections, conventional symbols. Angular Measurements: Instruments used; Introduction to Compass Surveying, Bearings and Longitude & Latitude of a Line, Introduction to total station.
Levelling: Instrument used Object of levelling, Methods of levelling in brief, and Contour maps.
Chapter 4
Buildings: Selection of site for Buildings, Layout of Building Plan, Types of buildings, Plinth area, carpet area, floor space index, Introduction to building byelaws, concept of sun light & ventilation. Components of Buildings & their functions, Basic concept of R.C.C., Introduction to types of foundation
Chapter 5
Transportation: Introduction to Transportation Engineering; Traffic and Road Safety: Types and Characteristics of Various Modes of Transportation; Various Road Traffic Signs, Causes of Accidents and Road Safety Measures.
Chapter 6
Environmental Engineering: Environmental Pollution, Environmental Acts and Regulations, Functional Concepts of Ecology, Basics of Species, Biodiversity, Ecosystem, Hydrological Cycle; Chemical Cycles: Carbon, Nitrogen & Phosphorus; Energy Flow in Ecosystems.
Water Pollution: Water Quality standards, Introduction to Treatment & Disposal of Waste Water. Reuse and Saving of Water, Rain Water Harvesting. Solid Waste Management: Classification of Solid Waste, Collection, Transportation and Disposal of Solid. Recycling of Solid Waste: Energy Recovery, Sanitary Landfill, On-Site Sanitation. Air & Noise Pollution: Primary and Secondary air pollutants, Harmful effects of Air Pollution, Control of Air Pollution. . Noise Pollution Harmful Effects of noise pollution, control of noise pollution, Global warming & Climate Change, Ozone depletion, Greenhouse effect
Text Books:
1. Palancharmy, Basic Civil Engineering, McGraw Hill publishers.
2. Satheesh Gopi, Basic Civil Engineering, Pearson Publishers.
3. Ketki Rangwala Dalal, Essentials of Civil Engineering, Charotar Publishing House.
4. BCP, Surveying volume 1
BÀI TẬP DẠY THÊM TIẾNG ANH LỚP 7 CẢ NĂM FRIENDS PLUS SÁCH CHÂN TRỜI SÁNG TẠO ...
BÀI TẬP DẠY THÊM TIẾNG ANH LỚP 7 CẢ NĂM FRIENDS PLUS SÁCH CHÂN TRỜI SÁNG TẠO ...Nguyen Thanh Tu Collection
https://app.box.com/s/qhtvq32h4ybf9t49ku85x0n3xl4jhr15Philippine Edukasyong Pantahanan at Pangkabuhayan (EPP) Curriculum
(𝐓𝐋𝐄 𝟏𝟎𝟎) (𝐋𝐞𝐬𝐬𝐨𝐧 𝟏)-𝐏𝐫𝐞𝐥𝐢𝐦𝐬
𝐃𝐢𝐬𝐜𝐮𝐬𝐬 𝐭𝐡𝐞 𝐄𝐏𝐏 𝐂𝐮𝐫𝐫𝐢𝐜𝐮𝐥𝐮𝐦 𝐢𝐧 𝐭𝐡𝐞 𝐏𝐡𝐢𝐥𝐢𝐩𝐩𝐢𝐧𝐞𝐬:
- Understand the goals and objectives of the Edukasyong Pantahanan at Pangkabuhayan (EPP) curriculum, recognizing its importance in fostering practical life skills and values among students. Students will also be able to identify the key components and subjects covered, such as agriculture, home economics, industrial arts, and information and communication technology.
𝐄𝐱𝐩𝐥𝐚𝐢𝐧 𝐭𝐡𝐞 𝐍𝐚𝐭𝐮𝐫𝐞 𝐚𝐧𝐝 𝐒𝐜𝐨𝐩𝐞 𝐨𝐟 𝐚𝐧 𝐄𝐧𝐭𝐫𝐞𝐩𝐫𝐞𝐧𝐞𝐮𝐫:
-Define entrepreneurship, distinguishing it from general business activities by emphasizing its focus on innovation, risk-taking, and value creation. Students will describe the characteristics and traits of successful entrepreneurs, including their roles and responsibilities, and discuss the broader economic and social impacts of entrepreneurial activities on both local and global scales.
Pengantar Penggunaan Flutter - Dart programming language1.pptx
Pengantar Penggunaan Flutter - Dart programming language1.pptx
Recently uploaded (20)
SWOT analysis in the project Keeping the Memory @live.pptx
SWOT analysis in the project Keeping the Memory @live.pptx
Leveraging Generative AI to Drive Nonprofit Innovation
Leveraging Generative AI to Drive Nonprofit Innovation
spot a liar (Haiqa 146).pptx Technical writhing and presentation skills
spot a liar (Haiqa 146).pptx Technical writhing and presentation skills
Gender and Mental Health - Counselling and Family Therapy Applications and In...
Gender and Mental Health - Counselling and Family Therapy Applications and In...
Traditional Musical Instruments of Arunachal Pradesh and Uttar Pradesh - RAYH...
Traditional Musical Instruments of Arunachal Pradesh and Uttar Pradesh - RAYH...
REASIGNACION 2024 UGEL CHUPACA 2024 UGEL CHUPACA.pdf
REASIGNACION 2024 UGEL CHUPACA 2024 UGEL CHUPACA.pdf
Film vocab for eal 3 students: Australia the movie
Film vocab for eal 3 students: Australia the movie
Walmart Business+ and Spark Good for Nonprofits.pdf
Walmart Business+ and Spark Good for Nonprofits.pdf
BÀI TẬP BỔ TRỢ TIẾNG ANH LỚP 9 CẢ NĂM - GLOBAL SUCCESS - NĂM HỌC 2024-2025 - ...
BÀI TẬP BỔ TRỢ TIẾNG ANH LỚP 9 CẢ NĂM - GLOBAL SUCCESS - NĂM HỌC 2024-2025 - ...
BIOLOGY NATIONAL EXAMINATION COUNCIL (NECO) 2024 PRACTICAL MANUAL.pptx
BIOLOGY NATIONAL EXAMINATION COUNCIL (NECO) 2024 PRACTICAL MANUAL.pptx
Mule event processing models | MuleSoft Mysore Meetup #47
Mule event processing models | MuleSoft Mysore Meetup #47
Chapter wise All Notes of First year Basic Civil Engineering.pptx
Chapter wise All Notes of First year Basic Civil Engineering.pptx
BÀI TẬP DẠY THÊM TIẾNG ANH LỚP 7 CẢ NĂM FRIENDS PLUS SÁCH CHÂN TRỜI SÁNG TẠO ...
BÀI TẬP DẠY THÊM TIẾNG ANH LỚP 7 CẢ NĂM FRIENDS PLUS SÁCH CHÂN TRỜI SÁNG TẠO ...
Philippine Edukasyong Pantahanan at Pangkabuhayan (EPP) Curriculum
Philippine Edukasyong Pantahanan at Pangkabuhayan (EPP) Curriculum
Pengantar Penggunaan Flutter - Dart programming language1.pptx
Pengantar Penggunaan Flutter - Dart programming language1.pptx
I need to create a page looks like a picture. But it looks different.pdf
- 1. I need to create a page looks like a picture. But it looks different. My html Assignment 8Shapes Exercise SquareCircleTriangleAdd to ArrayRemove LastDraw Shapes My Js let shapeArray = []; const shapeSelect = document.getElementById("shapeSelect"); const addBtn = document.getElementById("addBtn"); const removeBtn = document.getElementById("removeBtn"); const drawBtn = document.getElementById("drawBtn"); const canvas = document.getElementById("canvas"); const ctx = canvas.getContext("2d"); canvas.width = window.innerWidth; canvas.height = window.innerHeight; addBtn.addEventListener("click", function () { const selectedShape = shapeSelect.value; if (shapeArray.length < 5) {
- 2. shapeArray.push(selectedShape); } else { alert("You cannot add more than 5 shapes to the array."); } }); removeBtn.addEventListener("click", function () { shapeArray.pop(); }); function drawCircle(x, y) { ctx.beginPath(); ctx.arc(x, y, 50, 0, 2 * Math.PI); ctx.stroke(); } function drawTriangle(x, y) { const sideLength = 100; const height = sideLength * Math.sqrt(3) / 2; ctx.beginPath(); ctx.moveTo(x, y); ctx.lineTo(x + sideLength / 2, y + height); ctx.lineTo(x - sideLength / 2, y + height); ctx.closePath(); ctx.stroke(); } function drawSquare(x, y) { ctx.beginPath(); ctx.rect(x, y, 100, 100); ctx.stroke(); } drawBtn.addEventListener("click", function () {
- 3. ctx.clearRect(0, 0, canvas.width, canvas.height); shapeArray.forEach(function (shape, index) { switch (shape) { case"circle": drawCircle(50 + index * 150, 100); break; case"triangle": drawTriangle(50 + index * 150, 100); break; case"square": drawSquare(50 + index * 150, 100); break; default: console.error("Unknown shape: " + shape); break; } }); }); let shapeArray = []; const shapeSelect = document.getElementById("shapeSelect"); const addBtn = document.getElementById("addBtn"); const removeBtn = document.getElementById("removeBtn"); const drawBtn = document.getElementById("drawBtn"); const canvas = document.getElementById("canvas"); const ctx = canvas.getContext("2d"); canvas.width = window.innerWidth; canvas.height = window.innerHeight; addBtn.addEventListener("click", function () { const selectedShape = shapeSelect.value;
- 4. if (shapeArray.length < 5) { shapeArray.push(selectedShape); } else { alert("You cannot add more than 5 shapes to the array."); } }); removeBtn.addEventListener("click", function () { shapeArray.pop(); }); function drawCircle(x, y) { ctx.beginPath(); ctx.arc(x, y, 50, 0, 2 * Math.PI); ctx.stroke(); } function drawTriangle(x, y) { const sideLength = 100; const height = sideLength * Math.sqrt(3) / 2; ctx.beginPath(); ctx.moveTo(x, y); ctx.lineTo(x + sideLength / 2, y + height); ctx.lineTo(x - sideLength / 2, y + height); ctx.closePath(); ctx.stroke(); } function drawSquare(x, y) { ctx.beginPath(); ctx.rect(x, y, 100, 100); ctx.stroke(); }
- 5. drawBtn.addEventListener("click", function () { ctx.clearRect(0, 0, canvas.width, canvas.height); shapeArray.forEach(function (shape, index) { switch (shape) { case"circle": drawCircle(50 + index * 150, 100); break; case"triangle": drawTriangle(50 + index * 150, 100); break; case"square": drawSquare(50 + index * 150, 100); break; default: console.error("Unknown shape: " + shape); break; } }); }); let shapeArray = []; const shapeSelect = document.getElementById("shapeSelect"); const addBtn = document.getElementById("addBtn"); const removeBtn = document.getElementById("removeBtn"); const drawBtn = document.getElementById("drawBtn"); const canvas = document.getElementById("canvas"); const ctx = canvas.getContext("2d"); canvas.width = window.innerWidth; canvas.height = window.innerHeight; addBtn.addEventListener("click", function () { const selectedShape = shapeSelect.value; if (shapeArray.length < 5) { shapeArray.push(selectedShape); } else { alert("You cannot add more than 5 shapes to the array.");
- 6. } }); removeBtn.addEventListener("click", function () { shapeArray.pop(); }); function drawCircle(x, y) { ctx.beginPath(); ctx.arc(x, y, 50, 0, 2 * Math.PI); ctx.stroke(); } function drawTriangle(x, y) { const sideLength = 100; const height = sideLength * Math.sqrt(3) / 2; ctx.beginPath(); ctx.moveTo(x, y); ctx.lineTo(x + sideLength / 2, y + height); ctx.lineTo(x - sideLength / 2, y + height); ctx.closePath(); ctx.stroke(); } function drawSquare(x, y) { ctx.beginPath(); ctx.rect(x, y, 100, 100); ctx.stroke(); } drawBtn.addEventListener("click", function () { ctx.clearRect(0, 0, canvas.width, canvas.height); shapeArray.forEach(function (shape, index) { switch (shape) { case"circle": drawCircle(50 + index * 150, 100); break; case"triangle": drawTriangle(50 + index * 150, 100); break; case"square":
- 7. drawSquare(50 + index * 150, 100); break; default: console.error("Unknown shape: " + shape); break; } }); }); Exercise 11 Draw Shapes