Piecewise Stuff

by turtaniumx

HTML

<script src="https://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
<link rel="stylesheet" href="https://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css">
<div id='box3' class='jxgbox'></div>

CSS

#box3 {
    width:500px;
    height:500px;
}

JavaScript

var brd = JXG.JSXGraph.initBoard('box3', 
	{axis: false, 
  boundingbox: [-8,8,8,-8], 
  //keepaspectratio: true, 
  zoom: {factorX: 1.25,factorY: 1.2,wheel: true,needshift: false},
  //zoomX: 0.8,
  //zoomY: 0.05, 
  pan: {needShift: false,needTwoFingers: true,enabled: true},     
  showCopyright:false
  });

var a = brd.create('axis', [[0, 0], [1, 0]], {ticks: {scale: 1}});
var b = brd.create('axis', [[0, 0], [0, 1]], {ticks: {scale: 1}});

var aa = 1;

var f = brd.jc.snippet(
    // the function term
    '2*abs((x+1))',
    // wrap a function around it
    true,
    // the parameters to the function
    'x'
);
var f2 = brd.jc.snippet(
    // the function term
    '2',
    // wrap a function around it
    true,
    // the parameters to the function
    'x'
);

brd.create('point',[-3*aa, 4 ],{color:'blue',name:'',size:1, opacity:0.5});
brd.create('plot', [f,-3*aa,0*aa], {opacity:0.5});
brd.create('plot', [f2,0*aa,2*aa], {opacity:0.5, strokeColor:'red'});
brd.create('point',[2*aa,2],{color:'blue',name:'',size:1, opacity:0.5});