I am not able to draw the circle using triangle fan.
The following code is of my JavaScript file.
My html contains canvas and shaders.
Also I have another JavaScript which initializes the vertex shaders and fragment shaders. Initializing shaders from the other javascript files has no issues at all becuase it is working properly with other codes.
Please help me with this code, finding what is wrong with it.
var xCenterOfCircle;
var yCenterOfCircle;
var centerOfCircle;
var radiusOfCircle = 200;
var ATTRIBUTES = 2;
var noOfFans = 80;
var anglePerFan;
var verticesData = [];
var canvas;
var gl;
window.onload = function init()
{
canvas = document.getElementById( "gl-canvas" );
gl = WebGLUtils.setupWebGL( canvas );
if ( !gl ) { alert( "WebGL isn't available" ); }
//
// Configure WebGL
//
gl.viewport( 0.0, 0.0, canvas.width, canvas.height );
gl.clearColor( 1.0, 1.0, 1.0, 1.0 );
// Load shaders and initialize attribute buffers
var program = initShaders( gl, "vertex-shader", "fragment-shader" );
gl.useProgram( program );
drawCircle();
// Load the data into the GPU
var bufferId = gl.createBuffer();
gl.bindBuffer( gl.ARRAY_BUFFER, bufferId );
gl.bufferData( gl.ARRAY_BUFFER, flatten(verticesData), gl.STATIC_DRAW );
// Associate out shader variables with our data buffer
var vPosition = gl.getAttribLocation( program, "vPosition" );
gl.vertexAttribPointer( vPosition, 2, gl.FLOAT, false, 0, 0 );
gl.enableVertexAttribArray( vPosition );
render();
}
function drawCircle()
{
xCenterOfCircle = 400;
yCenterOfCircle = 400;
centerOfCircle = vec2(400, 400);
anglePerFan = (2*Math.PI) / noOfFans;
verticesData = [centerOfCircle];
for(var i = 0; i <= noOfFans; i++)
{
var index = ATTRIBUTES * i + 2;
var angle = anglePerFan * (i+1);
var xCoordinate = xCenterOfCircle + Math.cos(angle) * radiusOfCircle;
var yCoordinate = yCenterOfCircle + Math.sin(angle) * radiusOfCircle;
document.write(xCoordinate);
document.write("\n");
document.write(yCoordinate);
var point = vec2(xCoordinate, yCoordinate);
verticesData.push(point);
}
}
function render()
{
gl.clear( gl.COLOR_BUFFER_BIT );
gl.drawArrays( gl.TRIANGLE_FAN, 0, verticesData.length/ATTRIBUTES );
}
This is my html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Supper Bug Zapper</title>
<script id="vertex-shader" type="x-shader/x-vertex">
attribute vec4 vPosition;
void main(void)
{
gl_Position = vPosition;
}
</script>
<script id="fragment-shader" type="x-shader/x-fragment">
precision mediump float;
void main(void)
{
gl_FragColor = vec4(1.0, 0.0, 1.0, 0.5);
}
</script>
<script type="text/javascript" src="js/webgl-utils.js"></script>
<script type="text/javascript" src="js/MV.js"></script>
<script type="text/javascript" src="js/initShaders.js"></script>
<script type="text/javascript" src="js/superBugZapper.js"></script>
</head>
<body>
<canvas id="gl-canvas" width="800" height="800" style="border:1px solid #000000;">
Oops ... your browser doesn't support the HTML5 canvas element
</canvas>
</body>
</html>
The viewport coordinates of the screen are define between -1 and 1. The center of the screen is [0, 0], the bottom left is [-1, -1] etc.
Your circle's radius is 200 and it's center is [400, 400], in your screen it's a huge circle way beyond in the top right corner.
Start creating a circle with let's say .5 radius in center [0, 0]. You should see something.
If you need to keep this scale in your buffer, you can also provide a matrix to your vertex shader to transform your space coordinate to the regular openGL viewport coordinates.
Related
I want to give users the ability to find out how far they are from a Point of Interest to the edge of a radius on a map. I would also like to convert that unit to kilometers, meter or nautical mile.
I understand that all polygons are drawn in meters.
I am using fromCircle to convert a circle to a geometer polygon. Please help me. I remember there was a getbound() function in openlayers 2 but i can not find it anymore to use to calculate the distance form the the point of interest or center of the map to the edge. I have searched through stackoverflow for days but can not find exactly what is need or the solution that worked with the new version of openlayers.
var vectorSource = vectorLayer.getSource();
var centerLongitudeLatitude = map.getView().getCenter();
var viewProjection = map.getView().getProjection();
var pointResolution = olProj.getPointResolution(viewProjection, 1, centerLongitudeLatitude);
console.log('pointResolution', pointResolution)
function addCirclePolygon(coordinates, radius=1600) {
var _radius = radius/pointResolution;
// var circle = new Feature(new Circle(coordinates, _radius));
var circle = new Feature(new Circle(coordinates, _radius));
circle.setStyle(new Style({
stroke: new Stroke({
color: 'blue',
width: 3
}),
fill: new Fill({
color: 'rgba(0, 0, 255, 0.1)'
})
}));
var geom=circle.get('geometry');
if (circle instanceof Circle) {
circle.set('geometry', fromCircle(geom));
}
vectorSource.addFeature(circle);
}
The distance from a point to the edge of a ctrcle is the distance from the point to the center of the circle minus the radius.
But OpenLayers has a getClosestPoint method which will work with any geometry:
var point1 = point.getGeometry().getCoordinates();
var point2 = circle.getClosestPoint(point1);
Then you can calculate a distance using Pythagoras and adjust for point resolution:
var dx = point1[0] - point2[0];
var dy = point1[1] - point2[1];
var meters = Math.sqrt(dx * dx + dy * dy) * pointResolution;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" href="https://openlayers.org/en/v6.4.3/css/ol.css" type="text/css">
<script src="https://openlayers.org/en/v6.4.3/build/ol.js"></script>
</script>
<style>
html, body, .map {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="map" class="map"></div>
<script>
var vectorLayer = new ol.layer.Vector({
source: new ol.source.Vector()
});
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
vectorLayer
],
target: 'map',
view: new ol.View({
center: ol.proj.fromLonLat([0, 52]),
maxZoom: 20,
zoom: 12,
}),
});
var vectorSource = vectorLayer.getSource();
var centerLongitudeLatitude = map.getView().getCenter();
var viewProjection = map.getView().getProjection();
var pointResolution = ol.proj.getPointResolution(viewProjection, 1, centerLongitudeLatitude);
console.log('pointResolution', pointResolution);
var circle;
function addCirclePolygon(coordinates, radius=1600) {
var _radius = radius/pointResolution;
circle = new ol.Feature(new ol.geom.Circle(coordinates, _radius));
circle.setStyle(new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'blue',
width: 3
}),
fill: new ol.style.Fill({
color: 'rgba(0, 0, 255, 0.1)'
})
}));
var geom=circle.get('geometry');
if (circle instanceof ol.geom.Circle) {
circle.set('geometry', fromCircle(geom));
}
vectorSource.addFeature(circle);
}
addCirclePolygon(centerLongitudeLatitude);
map.on(
'click',
function (event) {
var point1 = event.coordinate;
var point2 = circle.getGeometry().getClosestPoint(point1);
console.log(point1, point2);
var line = new ol.Feature(new ol.geom.LineString([point1, point2]));
vectorSource.addFeature(line);
var dx = point1[0] - point2[0];
var dy = point1[1] - point2[1];
var meters = Math.sqrt(dx * dx + dy * dy) * pointResolution;
console.log('meters to edge = ' + meters);
var dx = point1[0] - centerLongitudeLatitude[0];
var dy = point1[1] - centerLongitudeLatitude[1];
var toCenter = Math.sqrt(dx * dx + dy * dy) * pointResolution;
console.log('to center = ' + toCenter);
}
);
</script>
</body>
</html>
I want to make a game in Phaser3 with multiple scenes. When I try to run the code with "cordova run browser" it renders a grey screen and in the code inspect console I get the error: "Uncaught ReferenceError: loadScene is not defined at config.js:19".
//I linked all the files in the index.html
<script type="text/javascript" src="./js/config.js"></script>
<script type="text/javascript" src="./js/helpers.js"></script>
<script type="text/javascript" src="./js/loadScene.js"></script>
<script type="text/javascript" src="./js/mainMenu.js"></script>
<script type="text/javascript" src="./js/gamePlay.js"></script>
<script type="text/javascript" src="./js/gameOver.js"></script>```
// set the configuration file config.js
const gameState = {
score: 0
};
const config = {
type: Phaser.AUTO,
width: 800,
height: 1368,
physics: {
default: 'arcade',
arcade: { debug: true }
},
scene: [loadScene, mainMenu, gamePlay, gameOver] //**here a get the error**
};
const game = new Phaser.Game(config);
// loadScene.js is one of the scenes
class loadScene extends Phaser.Scene {
constructor() { super({ key: 'loadScene' }); }
preload() {
this.load.image('background', '../img/BG/bgVstretch.png');
}
create() {
window.addEventListener('resize', resize);
resize();
this.add.image(0, 0, 'background').setOrigin(0);
this.add.text(100, 100, "Loading Scene", { font: "20px Impact" });
this.input.on('pointerdown', () => {
this.scene.stop('loadScene');
this.scene.start('mainMenu');
});
}
}
// mainMenu.js gamePlay.js gameOver.js....have the same structure as loadScene.js
// helpers.js contains the functions that resizes the game according to the screen.
function resize() {
var canvas = gameState.game.canvas,
width = window.innerWidth,
height = window.innerHeight;
var wratio = width / height,
ratio = canvas.width / canvas.height;`
`if (wratio < ratio) {
canvas.style.width = width + "px";
canvas.style.height = (width / ratio) + "px";
} else {
canvas.style.width = (height * ratio) + "px";
canvas.style.height = height + "px";
}
}```
The game does not render. For now I just wanted it to switch from one scene to another on pointerdown.
if you would like to switch scenes for me the following code worked
`this.scene.switch('whatever the key is')`
I wrote this code after I created a rectangle, this code makes the rectangle interactive and when you click on it it takes you to the next level.
`advanceButton.setInteractive();
advanceButton.on('pointerup', ()=>{
this.scene.switch('level2')
})
});`
as for why your code isn't rendering remove the semicolon after you finish the key
I am trying to learn about shaders using three.js. What I am trying to do is create a shader that generates gradients to texture planets with. Right now I am just trying to generate one gradient to make sure it works. However, when I apply the shader it only renders one of the colors, and does not create the gradient effect I'm looking for. I can't seem to find where I'm going wrong with my code.
I'm using the Book of Shaders as the basis for my code. Specifically, I was looking at this example, trying to replicate the background color.
Here is my shader code:
<section id="fragmentshader">
#ifdef GL_ES
precision mediump float;
#endif
// #define PI 3.14159265359
uniform vec2 u_resolution;
// uniform vec2 u_mouse;
// uniform float u_time;
vec3 colorA = vec3(0.500,0.141,0.912);
vec3 colorB = vec3(1.000,0.833,0.224);
void main() {
vec2 st = gl_FragCoord.xy/u_resolution.xy;
vec3 color = vec3(0.0);
color = mix( colorA,
colorB,
st.y);
gl_FragColor = vec4(color,1.0);
}
</section>
<section id="vertexshader">
void main() {
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
</section>
and my three.js code inside an a-frame component:
var uniforms = {
u_resolution: { type: "v2", value: new THREE.Vector2() },
};
var fShader = $('#fragmentshader');
var vShader = $('#vertexshader');
var geometry = new THREE.SphereGeometry(getRandomInt(100, 250), 20, 20);
// var material = new THREE.MeshBasicMaterial( {wireframe: true });
var material = new THREE.ShaderMaterial({
uniforms: uniforms,
vertexShader: vShader.text(),
fragmentShader: fShader.text()
});
var sphere = new THREE.Mesh(geometry, material);
This is what my spheres currently look like
var camera, scene, renderer, mesh, material;
init();
animate();
function init() {
// Renderer.
renderer = new THREE.WebGLRenderer();
//renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
// Add renderer to page
document.body.appendChild(renderer.domElement);
// Create camera.
camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.z = 400;
// Create scene.
scene = new THREE.Scene();
var uniforms = {
"color1" : {
type : "c",
value : new THREE.Color(0xffffff)
},
"color2" : {
type : "c",
value : new THREE.Color(0x000000)
},
};
var fShader = document.getElementById('fragmentShader').text;
var vShader = document.getElementById('vertexShader').text;
// Create material
var material = new THREE.ShaderMaterial({
uniforms: uniforms,
vertexShader: vShader,
fragmentShader: fShader
});
// Create cube and add to scene.
var geometry = new THREE.BoxGeometry(200, 200, 200);
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
// Create ambient light and add to scene.
var light = new THREE.AmbientLight(0x404040); // soft white light
scene.add(light);
// Create directional light and add to scene.
var directionalLight = new THREE.DirectionalLight(0xffffff);
directionalLight.position.set(1, 1, 1).normalize();
scene.add(directionalLight);
// Add listener for window resize.
window.addEventListener('resize', onWindowResize, false);
}
function animate() {
requestAnimationFrame(animate);
mesh.rotation.x += 0.005;
mesh.rotation.y += 0.01;
renderer.render(scene, camera);
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
<script src="https://rawgit.com/mrdoob/three.js/r86/build/three.min.js"></script>
<script id="vertexShader" type="x-shader/x-vertex">
varying vec2 vUv;
void main() {
vUv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);
}
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
uniform vec3 color1;
uniform vec3 color2;
varying vec2 vUv;
void main() {
gl_FragColor = vec4(mix(color1, color2, vUv.y),1.0);
}
</script>
I'm currently making a agar.io like program for my school project using p5.js and node.js for the networking. However I'm having a problem setting all the little blobs in one locations for multiplayer mode because I wrote the program of setting the little blobs on a local javascript(circle.js). I tried to transfer the functions of the local javascript to the server.js(node.js) but when i call it, it only hangs up. This is the screenshot of the directory.
Here is the code of server.js
var express = require('express');
var app = express();
var server = app.listen(3000);
app.use(express.static('public'));
console.log("Running");
var socket = require('socket.io');
var io = socket(server);
io.sockets.on('connection', newConnection);
function newConnection(socket){
console.log('new connection' + socket.id);
}
function asd(){
fill(255);
ellipse(200, 200, 100 * 2, 100 * 2);
}
Here is the code of the index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>agar.io</title>
<script src="libraries/p5.js" type="text/javascript"></script>
<script src="libraries/p5.dom.js" type="text/javascript"></script>
<script src="libraries/p5.sound.js" type="text/javascript"></script>
<script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>
<script src="sketch.js" type="text/javascript"></script>
<script src="circle.js" type="text/javascript"></script>
<script src="C:/Users/hp/Desktop/p5.js/Project/agario/server.js" type="text/javascript"></script>
<style> body {padding: 0; margin: 0;} canvas {vertical-align: top;} </style>
</head>
<body>
</body>
</html>
Here is the code of Circle.js
function Circle(positionX, positionY, radius) {
this.position = createVector(positionX, positionY);
this.radius = radius;
this.velocity = createVector(0, 0);
this.show = function() {
fill(255);
ellipse(this.position.x, this.position.y, this.radius * 2, this.radius * 2);
}
this.update = function() {
var newVelocity;
velocity = createVector(mouseX - width / 2, mouseY - height / 2);
newVelocity = createVector(mouseX - width / 2, mouseY - height / 2);
newVelocity.setMag(3);
this.velocity.lerp(newVelocity, 0.2);
this.position.add(this.velocity);
}
this.eat = function(other) {
var distance = p5.Vector.dist(this.position, other.position);
if (distance < this.radius + other.radius) {
var area = Math.PI * Math.pow(this.radius, 2) + Math.PI * Math.pow(other.radius, 2);
this.radius = Math.sqrt(area / Math.PI);
return true;
} else {
return false;
}
}
}
Here is the code of sketch.js
var circle;
var circles = [];
var zoom = 1;
var newZoom;
var socket;
function setup() {
socket = io.connect('http://localhost:3000');
createCanvas(1366, 666);
circle = new Circle(0, 0, 64);
for (var x = 0; x < 410; x++) {
circles[x] = new Circle(random(-width, width * 4), random(-height, height * 4), 20);
}
}
function draw() {
background(60);
translate(width / 2, height / 2);
newZoom = (64 / circle.radius*1.5);
zoom = lerp(zoom, newZoom, 0.1);
scale(zoom);
translate(-circle.position.x, -circle.position.y);
for (var x = circles.length - 1; x >= 0; x--) {
if (circle.eat(circles[x])) {
circles.splice(x, 1);
}
}
circle.show();
circle.update();
for (var x = 0; x < circles.length; x++) {
circles[x].show();
}
asd();
}
As you can see, i tried to call a function on node.js just to try if it is valid to get an information from server.js to have a similar counts and positions of little blobs, my question is how I can make a server that gives an x and y position for the little blobs?
socket.on('mouse',
function(data) {
// Data comes in as whatever was sent, including objects
console.log("Received: 'mouse' " + data.x + " " + data.y);
// Send it to all other clients
socket.broadcast.emit('mouse', data);
// This is a way to send to everyone including sender
// io.sockets.emit('message', "this goes to everyone");
}
);
I want to draw this:
Two lines following a along a beizer path with equal distance. The fat lines are what I want, the small dotted one is the guiding path.
The image above is done by first stroking the path with width 30, and then with width 25 in the same color as the background. This works OK sometimes, but not if the background isn't plain colored.
I want something like 'clip' with a shape. And I would prefer to do it using standard graphic libraries. Even better the tools that come in most 2d graphics canvases.
Notes:
I'm using HTML canvas, but I don't think that's important to the problem.
I can translate the path up and down, but that won't give me the same distance to the center everywhere.
Maybe it could be done with a gradient stroke, but I'm not sure how those work.
I can think of a way to do this in HTML5 Canvas.
What you want to do is draw a curve - on an in-memory, temporary canvas - and then draw the same curve with less thickness and with the globalCompositeOperation set to destination-out on that same canvas.
That will get you the shape you want, essentially 2 lines with transparency between them.
Then you draw that canvas onto the real canvas that has whatever on it (complex background, etc).
Here's an example:
http://jsfiddle.net/at3zR/
The following should better illustrate what I meant. There is a simple algorithm that needs to be added to adjust the offset depending on where the control points are located in relation to each other. If I get more time, and remember, I'll add it.
bezier.js
/*
*
* This code was Shamlessly stolen from:
* Canvas curves example
*
* By Craig Buckler, http://twitter.com/craigbuckler
* of OptimalWorks.net http://optimalworks.net/
* for SitePoint.com http://sitepoint.com/
*
* Refer to:
* http://blogs.sitepoint.com/html5-canvas-draw-quadratic-curves/
* http://blogs.sitepoint.com/html5-canvas-draw-bezier-curves/
*
* This code can be used without restriction.
*/
(function() {
var canvas, ctx, code, point, style, drag = null, dPoint;
// define initial points
function Init(quadratic) {
point = {
p1: { x:100, y:250 },
p2: { x:400, y:250 }
};
if (quadratic) {
point.cp1 = { x: 250, y: 100 };
}
else {
point.cp1 = { x: 150, y: 100 };
point.cp2 = { x: 350, y: 100 };
}
// default styles
style = {
//#333
curve: { width: 2, color: "#C11" },
cpline: { width: 1, color: "#C11" },
point: { radius: 10, width: 2, color: "#900", fill: "rgba(200,200,200,0.5)", arc1: 0, arc2: 2 * Math.PI }
}
// line style defaults
ctx.lineCap = "round";
ctx.lineJoin = "round";
// event handlers
canvas.onmousedown = DragStart;
canvas.onmousemove = Dragging;
canvas.onmouseup = canvas.onmouseout = DragEnd;
DrawCanvas();
}
function controlLine(offset) {
// curve
ctx.lineWidth = style.curve.width;
ctx.strokeStyle = style.curve.color;
ctx.beginPath();
ctx.moveTo(point.p1.x+offset, point.p1.y+offset);
ctx.bezierCurveTo(point.cp1.x+offset, point.cp1.y+offset, point.cp2.x+offset, point.cp2.y+offset, point.p2.x+offset, point.p2.y+offset);
ctx.stroke();
}
function controlPoints(/*hidden*/) {
// control point tethers
ctx.lineWidth = style.cpline.width;
ctx.strokeStyle = style.cpline.color;
ctx.beginPath();
ctx.moveTo(point.p1.x, point.p1.y);
ctx.lineTo(point.cp1.x, point.cp1.y);
ctx.moveTo(point.p2.x, point.p2.y);
ctx.lineTo(point.cp2.x, point.cp2.y);
ctx.stroke();
// control points
for (var p in point) {
ctx.lineWidth = style.point.width;
ctx.strokeStyle = style.point.color;
ctx.fillStyle = style.point.fill;
ctx.beginPath();
ctx.arc(point[p].x, point[p].y, style.point.radius, style.point.arc1, style.point.arc2, true);
ctx.fill();
ctx.stroke();
}
}
// draw canvas
function DrawCanvas() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
controlLine(-10);
controlLine(+10);
controlPoints();
}
// start dragging
function DragStart(e) {
e = MousePos(e);
var dx, dy;
for (var p in point) {
dx = point[p].x - e.x;
dy = point[p].y - e.y;
if ((dx * dx) + (dy * dy) < style.point.radius * style.point.radius) {
drag = p;
dPoint = e;
canvas.style.cursor = "move";
return;
}
}
}
// dragging
function Dragging(e) {
if (drag) {
e = MousePos(e);
point[drag].x += e.x - dPoint.x;
point[drag].y += e.y - dPoint.y;
dPoint = e;
DrawCanvas();
}
}
// end dragging
function DragEnd(e) {
drag = null;
canvas.style.cursor = "default";
DrawCanvas();
}
// event parser
function MousePos(event) {
event = (event ? event : window.event);
return {
x: event.pageX - canvas.offsetLeft,
y: event.pageY - canvas.offsetTop
}
}
// start
canvas = document.getElementById("canvas");
code = document.getElementById("code");
if (canvas.getContext) {
ctx = canvas.getContext("2d");
Init(canvas.className == "quadratic");
}
})();
bezier.html
<!--
bezier.html
Copyright 2012 DT <dtyree#inkcogito>
This program is free software; you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation; either version 2 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program; if not, write to the Free Software
Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston,
MA 02110-1301, USA.
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>untitled</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="generator" content="Geany 0.21" />
<meta charset="UTF-8" />
<title>Bézier Example</title>
</head>
<link rel="stylesheet" type="text/css" media="all" href="styles.css" />
<body>
<h1>Canvas Bézier Curve Example</h1>
<canvas id="canvas" height="500" width="500" class="bezier"></canvas>
<pre id="code">code</pre>
<p>This demonstration shows how parallel bézier curves can be drawn on a canvas element. Drag the line ends or the control points to change the curve.</p>
<script type="text/javascript" src="bezier.js"></script>
</body>
</html>
styles.css
/* CSS */
body
{
font-family: arial, helvetica, sans-serif;
font-size: 85%;
margin: 10px 15px;
color: #333;
background-color: #ddd;
}
h1
{
font-size: 1.6em;
font-weight: normal;
margin: 0 0 0.3em 0;
}
h2
{
font-size: 1.4em;
font-weight: normal;
margin: 1.5em 0 0 0;
}
p
{
margin: 1em 0;
}
#canvas
{
display: inline;
float: left;
margin: 0 10px 10px 0;
background-color: #fff;
}