Translation und Spiegelung
Translation von Funktionen¶
Verschiebung in Richtung der y-Achse¶
import numpy as np
from bokeh.plotting import figure, show, output_notebook
from bokeh.models import Slider, ColumnDataSource, CustomJS
from bokeh.layouts import column
output_notebook()
# x-Werte
x = np.linspace(-3, 3, 100)
y = x**3
k_init = 0
y_shifted = x**3 + k_init
source = ColumnDataSource(data=dict(x=x, y=y, y_shifted=y_shifted))
# Funktionsbeschriftungen
if k_init < 0:
func_label = f"f(x) - {abs(k_init)} = x³ - {abs(k_init)}"
else:
func_label = f"f(x) + {k_init} = x³ + {k_init}"
source_label = ColumnDataSource(data=dict(
x=[0.2], y=[-2], text=[func_label]
))
source_label_f = ColumnDataSource(data=dict(
x=[0.2], y=[-3], text=["f(x) = x³"]
))
# Plot
p = figure(width=400, height=500, x_range=(-5, 8.5), y_range=(-4.5, 4.5))
p.xaxis.axis_label = "x"
p.yaxis.axis_label = "y"
p.grid.grid_line_dash = "dotted"
# Achsen durch (0,0)
p.line([-4, 4], [0, 0], color="black", line_dash="dashed") # x-Achse
p.line([0, 0], [-30, 30], color="black", line_dash="dashed") # y-Achse
# Funktionen
p.line('x', 'y', source=source, color="red", line_width=2, legend_label="f(x) = x³")
p.line('x', 'y_shifted', source=source, color="blue", line_width=2, legend_label="f(x) + k = x³ + k")
# Funktionsbeschriftungen
p.text('x', 'y', text='text', source=source_label, text_color='blue', text_font_size='16pt')
p.text('x', 'y', text='text', source=source_label_f, text_color='red', text_font_size='16pt')
# Slider
slider = Slider(start=-4, end=4, value=k_init, step=0.5, title="k")
# JS-Callback
callback = CustomJS(args=dict(source=source, source_label=source_label, slider=slider), code="""
const data = source.data;
const x = data['x'];
const y_shifted = data['y_shifted'];
const k = slider.value;
for (let i = 0; i < x.length; i++) {
y_shifted[i] = Math.pow(x[i], 3) + k;
}
// Funktionsbeschriftung
let text;
if (k < 0) {
text = `f(x) - ${Math.abs(k)} = x³ - ${Math.abs(k)}`;
} else {
text = `f(x) + ${k} = x³ + ${k}`;
}
source_label.data['text'] = [text];
source.change.emit();
source_label.change.emit();
""")
slider.js_on_change('value', callback)
p.legend.location = "top_left"
p.legend.label_text_font_size = "12pt"
layout = column(p, slider)
#output_file("verschiebung_y_achse.html")
show(layout)Verschiebung in Richtung der x-Achse¶
import numpy as np
from bokeh.plotting import figure, show, output_notebook
from bokeh.models import Slider, ColumnDataSource, CustomJS
from bokeh.layouts import column
output_notebook()
# x-Werte
x = np.linspace(-10, 10, 100)
y = x**3
k_init = 0
y_shifted = (x + k_init)**3
source = ColumnDataSource(data=dict(x=x, y=y, y_shifted=y_shifted))
# Funktionsbeschriftungen
if k_init < 0:
func_label = f"f(x) - {abs(k_init)} = x³ - {abs(k_init)}"
else:
func_label = f"f(x+{k_init}) = (x+{k_init})³"
source_label = ColumnDataSource(data=dict(
x=[0.2], y=[-2], text=[func_label]
))
source_label_f = ColumnDataSource(data=dict(
x=[0.2], y=[-3], text=["f(x) = x³"]
))
# Plot
p = figure(width=400, height=500, x_range=(-5, 8.5), y_range=(-4.5, 4.5))
p.xaxis.axis_label = "x"
p.yaxis.axis_label = "y"
p.grid.grid_line_dash = "dotted"
# Achsen durch (0,0)
p.line([-4, 4], [0, 0], color="black", line_dash="dashed") # x-Achse
p.line([0, 0], [-30, 30], color="black", line_dash="dashed") # y-Achse
# Funktionen
p.line('x', 'y', source=source, color="red", line_width=2, legend_label="f(x) = x³")
p.line('x', 'y_shifted', source=source, color="blue", line_width=2, legend_label="f(x) + k = x³ + k")
# Funktionsbeschriftungen
p.text('x', 'y', text='text', source=source_label, text_color='blue', text_font_size='16pt')
p.text('x', 'y', text='text', source=source_label_f, text_color='red', text_font_size='16pt')
# Slider
slider = Slider(start=-3, end=3, value=k_init, step=0.5, title="k")
# JS-Callback
callback = CustomJS(args=dict(source=source, source_label=source_label, slider=slider), code="""
const data = source.data;
const x = data['x'];
const y_shifted = data['y_shifted'];
const k = slider.value;
for (let i = 0; i < x.length; i++) {
y_shifted[i] = Math.pow(x[i]+k, 3);
}
// Funktionsbeschriftung
let text;
if (k < 0) {
text = `f(x-${Math.round(Math.abs(k*10))/10}) = (x-${Math.round(Math.abs(k)*10)/10})³`;
} else {
text = `f(x+${k}) = (x+${k})³`;
}
source_label.data['text'] = [text];
source.change.emit();
source_label.change.emit();
""")
slider.js_on_change('value', callback)
p.legend.location = "top_left"
p.legend.label_text_font_size = "12pt"
layout = column(p, slider)
#output_file("verschiebung_y_achse.html")
show(layout)Skalierung von Funktionen¶
Skalierung in vertikaler Richtung¶
import numpy as np
from bokeh.plotting import figure, show, output_notebook
from bokeh.models import Slider, ColumnDataSource, CustomJS
from bokeh.layouts import column
output_notebook()
# x-Werte
x = np.linspace(-5, 5, 100)
f_x = 0.5*x**3 + x**2 - x - 0.5
k_init = 1
f_x_scaled = k_init * f_x
source = ColumnDataSource(data=dict(x=x, f_x=f_x, f_x_scaled=f_x_scaled))
# Funktionsbeschriftungen
label_scaled = f"{k_init}·f(x) = {k_init}·(0.5x³ + x² - x - 0.5)"
source_label_scaled = ColumnDataSource(data=dict(x=[1.5], y=[-1], text=[label_scaled]))
source_label_f = ColumnDataSource(data=dict(x=[1.5], y=[1], text=["f(x) = 0.5x³ + x² - x - 0.5"]))
# Plot
p = figure(width=700, height=500, x_range=(-5, 8.5), y_range=(-5, 5))
p.xaxis.axis_label = "x"
p.yaxis.axis_label = "y"
p.grid.grid_line_dash = "dotted"
# Achsen durch (0,0)
p.line([-5, 5], [0, 0], color="black", line_dash="dashed") # x-Achse
p.line([0, 0], [-40, 40], color="black", line_dash="dashed") # y-Achse
# Funktionen
p.line('x', 'f_x', source=source, color="red", line_width=2, legend_label="f(x)")
p.line('x', 'f_x_scaled', source=source, color="blue", line_width=2, legend_label="k·f(x)")
# Funktionsbeschriftungen
p.text('x', 'y', text='text', source=source_label_scaled, text_color='blue', text_font_size='16pt')
p.text('x', 'y', text='text', source=source_label_f, text_color='red', text_font_size='16pt')
# Slider
slider = Slider(start=0, end=3, value=k_init, step=0.25, title="k")
# JS-Callback
callback = CustomJS(args=dict(source=source, source_label_scaled=source_label_scaled, slider=slider), code="""
const data = source.data;
const x = data['x'];
const f_x = data['f_x'];
const f_x_scaled = data['f_x_scaled'];
const k = slider.value;
for (let i = 0; i < x.length; i++) {
f_x_scaled[i] = k * f_x[i];
}
// Funktionsbeschriftung
const text = `${Math.round(k*10)/10}·f(x) = ${Math.round(k*10)/10}·(0.5x³ + x² - x - 0.5)`;
source_label_scaled.data['text'] = [text];
source.change.emit();
source_label_scaled.change.emit();
""")
slider.js_on_change('value', callback)
p.legend.location = "top_left"
p.legend.label_text_font_size = "12pt"
layout = column(p, slider)
#output_file("skalierung_y_achse.html")
show(layout)Skalierung in horizontaler Richtung¶
import numpy as np
from bokeh.plotting import figure, show, output_notebook
from bokeh.models import Slider, ColumnDataSource, CustomJS
from bokeh.layouts import column
output_notebook()
# x-Werte
x = np.linspace(-10, 10, 150)
f_x = 0.5*x**3 + x**2 - x - 0.5
k_init = 1
f_kx = 0.5*(k_init*x)**3 + (k_init*x)**2 - k_init*x - 0.5
source = ColumnDataSource(data=dict(x=x, f_x=f_x, f_kx=f_kx))
# Funktionsbeschriftungen
label_kx = f"f({k_init}·x) = 0.5·({k_init}x)³ + ({k_init}x)² - {k_init}x - 0.5"
source_label_kx = ColumnDataSource(data=dict(x=[0.1], y=[-1.5], text=[label_kx]))
source_label_f = ColumnDataSource(data=dict(x=[0.1], y=[-2.5], text=["f(x) = 0.5x³ + x² - x - 0.5"]))
# Plot
p = figure(width=700, height=500, x_range=(-10, 10.3), y_range=(-6, 6))
p.xaxis.axis_label = "x"
p.yaxis.axis_label = "y"
p.grid.grid_line_dash = "dotted"
# Achsen durch (0,0)
p.line([-10, 10], [0, 0], color="black", line_dash="dashed") # x-Achse
p.line([0, 0], [-6, 6], color="black", line_dash="dashed") # y-Achse
# Funktionen
p.line('x', 'f_x', source=source, color="red", line_width=2, legend_label="f(x)")
p.line('x', 'f_kx', source=source, color="blue", line_width=2, legend_label="f(k·x)")
# Funktionsbeschriftungen
p.text('x', 'y', text='text', source=source_label_kx, text_color='blue', text_font_size='16pt')
p.text('x', 'y', text='text', source=source_label_f, text_color='red', text_font_size='16pt')
# Slider
slider = Slider(start=0, end=3, value=k_init, step=0.25, title="k")
# JS-Callback
callback = CustomJS(args=dict(source=source, source_label_kx=source_label_kx, slider=slider), code="""
const data = source.data;
const x = data['x'];
const f_x = data['f_x'];
const f_kx = data['f_kx'];
const k = slider.value;
for (let i = 0; i < x.length; i++) {
f_kx[i] = 0.5 * Math.pow(k*x[i], 3) + Math.pow(k*x[i], 2) - k*x[i] - 0.5;
}
// Funktionsbeschriftung
const text = `f(${Math.round(k*10)/10}·x) = 0.5·(${Math.round(k*10)/10}x)³ + (${Math.round(k*10)/10}x)² - ${Math.round(k*10)/10}x - 0.5`;
source_label_kx.data['text'] = [text];
source.change.emit();
source_label_kx.change.emit();
""")
slider.js_on_change('value', callback)
p.legend.location = "top_left"
p.legend.label_text_font_size = "12pt"
layout = column(p, slider)
show(layout)Spiegelung von Funktionen¶
import numpy as np
from bokeh.plotting import figure, show, output_notebook
from bokeh.models import ColumnDataSource, CustomJS, RadioButtonGroup
from bokeh.layouts import column
output_notebook()
x = np.linspace(-10, 10, 150)
f_x = 0.5*x**3 + x**2 - x - 0.5
f_negx = 0.5*(-x)**3 + (-x)**2 + x - 0.5
f_minusfx = -f_x
# Start: Spiegelung an der x-Achse
init_selection = 0 # 0 = x-Achse, 1 = y-Achse
f_spiegel = f_minusfx if init_selection == 0 else f_negx
source = ColumnDataSource(data=dict(x=x, f_x=f_x, f_spiegel=f_spiegel))
# Funktionsbeschriftungen
text_fx = r"f(x) = 0.5x³ + x² - x - 0.5"
text_minusfx = "-f(x) = -[0.5x³ + x² - x - 0.5]\n = -0.5x³ - x² + x + 0.5"
text_fnegx = "f(-x) = 0.5(-x)³ + (-x)² - (-x) - 0.5\n = -0.5x³ + x² + x - 0.5"
source_label_fx = ColumnDataSource(data=dict(x=[4], y=[3], text=[text_fx]))
source_label_spiegel = ColumnDataSource(
data=dict(
x=[4], y=[1], text=[text_minusfx if init_selection == 0 else text_fnegx]
)
)
# Plot
p = figure(width=700, height=500, x_range=(-10, 20), y_range=(-6, 6))
p.xaxis.axis_label = "x"
p.yaxis.axis_label = "y"
p.grid.grid_line_dash = "dotted"
# Achsen durch (0,0)
p.line([-10, 10], [0, 0], color="black", line_dash="dashed") # x-Achse
p.line([0, 0], [-6, 6], color="black", line_dash="dashed") # y-Achse
# Funktionen
p.line('x', 'f_x', source=source, color="blue", line_width=2, legend_label="f(x)")
p.line('x', 'f_spiegel', source=source, color="red", line_width=2, legend_label="Spiegelung")
# Funktionsbeschriftungen
p.text('x', 'y', text='text', source=source_label_fx, text_color='blue', text_font_size='16pt')
p.text('x', 'y', text='text', source=source_label_spiegel, text_color='red', text_font_size='16pt')
# RadioButtonGroup für Auswahl
radio = RadioButtonGroup(labels=["x-Achse", "y-Achse"], active=init_selection)
# JS-Callback
callback = CustomJS(args=dict(source=source, source_label_spiegel=source_label_spiegel, radio=radio), code="""
const x = source.data['x'];
const f_x = source.data['f_x'];
const f_spiegel = source.data['f_spiegel'];
const selection = radio.active;
let text;
if (selection === 0) {
// Spiegelung an x-Achse: -f(x)
for (let i = 0; i < x.length; i++) {
f_spiegel[i] = -f_x[i];
}
text = "-f(x) = -[0.5x³ + x² - x - 0.5] \\n = -0.5x³ - x² + x + 0.5";
source_label_spiegel.data['x'] = [4];
source_label_spiegel.data['y'] = [1];
} else {
// Spiegelung an y-Achse: f(-x)
for (let i = 0; i < x.length; i++) {
f_spiegel[i] = 0.5*Math.pow(-x[i], 3) + Math.pow(-x[i], 2) + x[i] - 0.5;
}
text = "f(-x) = 0.5(-x)³ + (-x)² - (-x) - 0.5\\n = -0.5x³ + x² + x - 0.5";
source_label_spiegel.data['x'] = [4];
source_label_spiegel.data['y'] = [1];
}
source_label_spiegel.data['text'] = [text];
source.change.emit();
source_label_spiegel.change.emit();
""")
radio.js_on_change('active', callback)
p.legend.location = "top_left"
p.legend.label_text_font_size = "12pt"
layout = column(radio, p)
show(layout)Beispiel zu Translation und Spiegelung von Funktionen¶
Spiegeln Sie die Funktion f(x)=(x+2)2−1 zunächst an der x-Achse und verschieben Sie die Funktion anschließend um 4 Einheiten nach rechts.
Überlegen Sie sich, wie die Funktion f(x) zunächst und dann nach jedem einzelnen Schritt aussieht. Die Antwort erhalten Sie, wenn Sie auf den jeweiligen Stift klicken.
✎ Darstellung der Funktion
Die gegebene Funktion f(x) ist eine Parabel. Sie ist in Scheitelpunktform gegeben. Der Scheitel liegt bei S(−2∣−1).

✎ Spiegelung der Funktion an der x-Achse
Für die durch Spiegelung neu entstehende Funktion g1(x) gilt:
g1(x)=−f(x)
g1(x)=−[(x+2)2−1]
g1(x)=−(x+2)2+1
Der Scheitelpunkt der Parabel g1 liegt also bei S1(−2∣1).

✎ Verschiebung nach rechts
In einem zweiten Schritt soll die Funktion g1 um vier Einheiten nach rechts verschoben werden. Es gilt:
g2(x)=g1(x−4)=−((x−4)+2)2+1
=−(x−2)2+1
Der Scheitelpunkt der Parabel g2 liegt demnach bei S2(2∣1).
