added everything else
This commit is contained in:
Sam
parent
1e1866bf65
commit
a71f0c97a2
|
|
@ -0,0 +1,16 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Parcel Sandbox</title>
|
||||
<meta charset="UTF-8" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<canvas id="canvas" width="500" height="500">
|
||||
<script src="src/index.js">
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,116 @@
|
|||
const canvas = document.getElementById("canvas");
|
||||
const ctx = canvas.getContext("2d");
|
||||
|
||||
const points = [
|
||||
[50, 250],
|
||||
[450, 250],
|
||||
];
|
||||
let step = 0;
|
||||
let speed = 8;
|
||||
let opening = true;
|
||||
let counter = 0;
|
||||
|
||||
let cooldown = 0;
|
||||
function draw() {
|
||||
ctx.strokeStyle = "orange";
|
||||
ctx.fillStyle = "black";
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
ctx.fillRect(0, 0, 500, 500);
|
||||
|
||||
// let newPath = new Path2D();
|
||||
// newPath.arc(150, 75, 75, 0, 2 * Math.PI);
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.rect(100, 100, 300, 300);
|
||||
ctx.stroke();
|
||||
|
||||
drawEyelid(step);
|
||||
|
||||
ctx.save();
|
||||
// squareCut();
|
||||
eyelidCut(step);
|
||||
|
||||
if (counter % 100 == 0) {
|
||||
counter = 0;
|
||||
}
|
||||
drawGrowEye(100 + counter);
|
||||
|
||||
drawCircle(100);
|
||||
|
||||
ctx.restore();
|
||||
|
||||
stepFunc();
|
||||
counter++;
|
||||
window.requestAnimationFrame(draw);
|
||||
}
|
||||
|
||||
function stepFunc() {
|
||||
if (cooldown != 0) {
|
||||
cooldown--;
|
||||
} else {
|
||||
if (opening == true) {
|
||||
if (step >= 200) {
|
||||
cooldown = 200;
|
||||
opening = false;
|
||||
step -= speed;
|
||||
} else {
|
||||
step += speed;
|
||||
}
|
||||
} else {
|
||||
if (step <= 0) {
|
||||
opening = true;
|
||||
step += speed;
|
||||
} else {
|
||||
step -= speed;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function squareCut() {
|
||||
let squarePath = new Path2D();
|
||||
squarePath.rect(100, 100, 300, 300);
|
||||
|
||||
ctx.clip(squarePath);
|
||||
}
|
||||
|
||||
function drawGrowEye(step) {
|
||||
ctx.strokeStyle = "aqua";
|
||||
ctx.beginPath();
|
||||
ctx.lineWidth = 5;
|
||||
ctx.arc(250, 250, step, 0, 2 * Math.PI);
|
||||
ctx.stroke();
|
||||
ctx.strokeStyle = "orange";
|
||||
}
|
||||
|
||||
function eyelidCut(step) {
|
||||
// ctx.lineWidth = 1;
|
||||
let squarePath = new Path2D();
|
||||
squarePath.moveTo(points[0][0], points[0][1]);
|
||||
squarePath.quadraticCurveTo(250, 250 - step, points[1][0], points[0][1]);
|
||||
|
||||
squarePath.moveTo(points[0][0], points[0][1]);
|
||||
squarePath.quadraticCurveTo(250, 250 + step, points[1][0], points[0][1]);
|
||||
|
||||
ctx.clip(squarePath);
|
||||
}
|
||||
|
||||
function drawCircle(step) {
|
||||
ctx.beginPath();
|
||||
ctx.lineWidth = 5;
|
||||
ctx.arc(250, 250, step, 0, 2 * Math.PI);
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
function drawEyelid(step) {
|
||||
ctx.lineWidth = 1;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(points[0][0], points[0][1]);
|
||||
ctx.quadraticCurveTo(250, 250 - step, points[1][0], points[0][1]);
|
||||
|
||||
ctx.moveTo(points[0][0], points[0][1]);
|
||||
ctx.quadraticCurveTo(250, 250 + step, points[1][0], points[0][1]);
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
window.requestAnimationFrame(draw);
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
body {
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
|
@ -0,0 +1,89 @@
|
|||
import numpy as np
|
||||
import matplotlib.pyplot as plt
|
||||
import matplotlib.animation as animation
|
||||
|
||||
import time
|
||||
#from matplotlib import cm
|
||||
#from matplotlib.colors import ListedColormap, LinearSegmentedColormap
|
||||
|
||||
#ncmap = cm.get_cmap('magma', 400)
|
||||
|
||||
|
||||
def julia_quadratic(zx, zy, cx, cy, threshold):
|
||||
"""Calculates whether the number z[0] = zx + i*zy with a constant c = x + i*y
|
||||
belongs to the Julia set. In order to belong, the sequence
|
||||
z[i + 1] = z[i]**2 + c, must not diverge after 'threshold' number of steps.
|
||||
The sequence diverges if the absolute value of z[i+1] is greater than 4.
|
||||
|
||||
:param float zx: the x component of z[0]
|
||||
:param float zy: the y component of z[0]
|
||||
:param float cx: the x component of the constant c
|
||||
:param float cy: the y component of the constant c
|
||||
:param int threshold: the number of iterations to considered it converged
|
||||
"""
|
||||
# initial conditions
|
||||
z = complex(zx, zy)
|
||||
c = complex(cx, cy)
|
||||
|
||||
for i in range(threshold):
|
||||
z = z**2 + c
|
||||
if abs(z) > 4.: # it diverged
|
||||
return i
|
||||
|
||||
return threshold - 1 # it didn't diverge
|
||||
|
||||
|
||||
x_start, y_start = -2, -2 # an interesting region starts here
|
||||
width, height = 4, 4 # for 4 units up and right
|
||||
density_per_unit = 200 # how many pixles per unit
|
||||
|
||||
# real and imaginary axis
|
||||
re = np.linspace(x_start, x_start + width, width * density_per_unit )
|
||||
im = np.linspace(y_start, y_start + height, height * density_per_unit)
|
||||
|
||||
|
||||
threshold = 100 # max allowed iterations
|
||||
frames = 15 # number of frames in the animation
|
||||
|
||||
# we represent c as c = r*cos(a) + i*r*sin(a) = r*e^{i*a}
|
||||
r = 0.7885
|
||||
a = np.linspace(0, 2*np.pi, frames)
|
||||
|
||||
fig = plt.figure(figsize=(10, 10)) # instantiate a figure to draw
|
||||
ax = plt.axes() # create an axes object
|
||||
|
||||
def animate(i):
|
||||
start = time.time()
|
||||
n = i
|
||||
ax.clear() # clear axes object
|
||||
ax.set_xticks([]) # clear x-axis ticks
|
||||
ax.set_yticks([]) # clear y-axis ticks
|
||||
|
||||
X = np.empty((len(re), len(im))) # the initial array-like image
|
||||
cx, cy = r * np.cos(a[i]), r * np.sin(a[i]) # the initial c number
|
||||
|
||||
# iterations for the given threshold
|
||||
for i in range(len(re)):
|
||||
for j in range(len(im)):
|
||||
X[i, j] = julia_quadratic(re[i], im[j], cx, cy, threshold)
|
||||
|
||||
img = ax.imshow(X.T, interpolation="bicubic", cmap="magma")
|
||||
|
||||
end = time.time()
|
||||
diff = end - start
|
||||
global total_time
|
||||
total_time += diff
|
||||
ave = total_time/(n+1)
|
||||
print(f"time[{n}]: {diff:.3f} ETA: {((frames - n+1)* ave)/60:.2f}")
|
||||
return [img]
|
||||
|
||||
start = time.time()
|
||||
|
||||
total_time = 0
|
||||
print("start")
|
||||
|
||||
anim = animation.FuncAnimation(fig, animate, frames=frames, interval=1, blit=True)
|
||||
#writervideo = animation.FFMpegWriter(fps=60)
|
||||
#anim.save('julia_set_vid.mp4', writer=writervideo)
|
||||
anim.save('julia_set_ahhhh.mp4', writer='imagemagick')
|
||||
print("done")
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 2.6 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 493 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 322 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.3 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.8 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.2 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.5 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 829 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 916 KiB |
|
|
@ -0,0 +1,58 @@
|
|||
import numpy as np
|
||||
import matplotlib.pyplot as plt
|
||||
import matplotlib.animation as animation
|
||||
|
||||
def mandelbrot(x, y, threshold):
|
||||
"""Calculates whether the number c = x + i*y belongs to the
|
||||
Mandelbrot set. In order to belong, the sequence z[i + 1] = z[i]**2 + c
|
||||
must not diverge after 'threshold' number of steps. The sequence diverges
|
||||
if the absolute value of z[i+1] is greater than 4.
|
||||
|
||||
:param float x: the x component of the initial complex number
|
||||
:param float y: the y component of the initial complex number
|
||||
:param int threshold: the number of iterations to considered it converged
|
||||
"""
|
||||
# initial conditions
|
||||
c = complex(x, y)
|
||||
z = complex(0, 0)
|
||||
|
||||
for i in range(threshold):
|
||||
z = z**2 + c
|
||||
if abs(z) > 4.: # it diverged
|
||||
return i
|
||||
|
||||
return threshold - 1 # it didn't diverge
|
||||
|
||||
|
||||
x_start, y_start = -2, -1.5 # an interesting region starts here
|
||||
width, height = 3, 3 # for 3 units up and right
|
||||
density_per_unit = 250 # how many pixles per unit
|
||||
|
||||
# real and imaginary axis
|
||||
re = np.linspace(x_start, x_start + width, width * density_per_unit )
|
||||
im = np.linspace(y_start, y_start + height, height * density_per_unit)
|
||||
|
||||
fig = plt.figure(figsize=(10, 10)) # instantiate a figure to draw
|
||||
ax = plt.axes() # create an axes object
|
||||
|
||||
def animate(i):
|
||||
print(i)
|
||||
ax.clear() # clear axes object
|
||||
ax.set_xticks([]) # clear x-axis ticks
|
||||
ax.set_yticks([]) # clear y-axis ticks
|
||||
|
||||
X = np.empty((len(re), len(im))) # re-initialize the array-like image
|
||||
threshold = round(1.25**(i + 1)) # calculate the current threshold
|
||||
|
||||
# iterations for the current threshold
|
||||
for i in range(len(re)):
|
||||
for j in range(len(im)):
|
||||
X[i, j] = mandelbrot(re[i], im[j], threshold)
|
||||
|
||||
# associate colors to the iterations with an iterpolation
|
||||
img = ax.imshow(X.T, interpolation="bicubic", cmap='Reds')
|
||||
return [img]
|
||||
|
||||
anim = animation.FuncAnimation(fig, animate, frames=45, interval=16, blit=True)
|
||||
anim.save('mandelbrot.gif',writer='imagemagick')
|
||||
print("Done")
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<body>
|
||||
|
||||
<canvas id="myCanvas" width="600" height="600" style="border:1px solid #d3d3d3;">
|
||||
Your browser does not support the HTML5 canvas tag.</canvas>
|
||||
|
||||
<script>
|
||||
function rad(degrees)
|
||||
{
|
||||
var pi = Math.PI;
|
||||
return degrees * (pi/180);
|
||||
}
|
||||
|
||||
var c = document.getElementById("myCanvas");
|
||||
var ctx = c.getContext("2d");
|
||||
|
||||
|
||||
var r = 100;
|
||||
var width = Math.cos(30*Math.PI/180)*r*2;
|
||||
|
||||
startx = 300;
|
||||
starty = 300;//-(Math.tan(30*Math.PI/180)*width/2);
|
||||
|
||||
var stt =0.5;
|
||||
|
||||
var stt1 = (stt-2/3)*Math.PI;
|
||||
var end1 = (stt)*Math.PI ;
|
||||
|
||||
var stt2 = end1;
|
||||
var end2 = stt2+(2/3)*Math.PI;
|
||||
|
||||
var stt3 = end2;
|
||||
var end3 = stt3+(2/3)*Math.PI;
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.arc(startx+ Math.cos(rad(90+120*1))*r, starty+ Math.sin(rad(90+120*1))*r, r, stt1, end1 ,0);
|
||||
ctx.stroke();
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.arc(startx+ Math.cos(rad(90+120*2))*r, starty+ Math.sin(rad(90+120*2))*r, r, stt2, end2 ,0);
|
||||
ctx.stroke();
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.arc(startx + Math.cos(rad(90+120*3))*r, starty+ Math.sin(rad(90+120*3))*r, r, stt3, end3 ,0);
|
||||
ctx.stroke();
|
||||
|
||||
/*
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(300-50, 300);
|
||||
ctx.lineTo(300+50, 300);
|
||||
ctx.strokeStyle = "red";
|
||||
ctx.stroke();
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(300, 300-50);
|
||||
ctx.lineTo(300, 300+50);
|
||||
ctx.strokeStyle = "red";
|
||||
ctx.stroke();
|
||||
*/
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(startx+ Math.cos(rad(90+120*1))*r, starty+ Math.sin(rad(90+120*1))*r);
|
||||
ctx.lineTo(startx+ Math.cos(rad(90+120*2))*r, starty+ Math.sin(rad(90+120*2))*r);
|
||||
ctx.lineTo(startx+ Math.cos(rad(90+120*3))*r, starty+ Math.sin(rad(90+120*3))*r);
|
||||
ctx.lineTo(startx+ Math.cos(rad(90+120*1))*r, starty+ Math.sin(rad(90+120*1))*r);
|
||||
ctx.strokeStyle = "red";
|
||||
ctx.stroke();
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,108 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<body>
|
||||
|
||||
<canvas id="myCanvas" width="2000" height="2000" style="border:1px solid #d3d3d3;">
|
||||
Your browser does not support the HTML5 canvas tag.</canvas>
|
||||
|
||||
<script>
|
||||
function rad(degrees) {
|
||||
var pi = Math.PI;
|
||||
return degrees * (pi / 180);
|
||||
}
|
||||
|
||||
|
||||
var c = document.getElementById("myCanvas");
|
||||
var ctx = c.getContext("2d");
|
||||
|
||||
var sides = 3;
|
||||
var r = 500;
|
||||
var rot = Math.round((sides - 2) * 180 / sides * 2)
|
||||
var piv = 360 / sides;
|
||||
var angle = 120;
|
||||
|
||||
startx = 1000//1875/2;
|
||||
starty = 1000//950/2;//-(Math.tan(30*Math.PI/180)*width/2);
|
||||
|
||||
var stt = 0.5 * Math.PI - rad(rot) + rad(angle);
|
||||
var end = 0;
|
||||
|
||||
for (let j = 0; j < 29; j++) {
|
||||
setTimeout(() => {
|
||||
|
||||
for (let i = 1; i < sides + 1; i++) {
|
||||
end = stt + rad(rot);
|
||||
ctx.beginPath();
|
||||
ctx.arc(startx + Math.cos(rad(90 + piv * i + angle)) * r, starty + Math.sin(rad(90 + piv * i + angle)) * r, r, stt, end, 0);
|
||||
//ctx.arc(startx+ 200*i, starty, r, stt, end ,0);
|
||||
ctx.strokeStyle = "black";
|
||||
ctx.stroke();
|
||||
stt = end + -(rad(rot - piv));
|
||||
}
|
||||
angle += j;
|
||||
|
||||
}, 100 * j);
|
||||
|
||||
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
|
||||
|
||||
|
||||
}
|
||||
/*
|
||||
sides = 6;
|
||||
r = 700;
|
||||
rot = Math.round((sides - 2)*180/sides*2)
|
||||
piv = 360/sides;
|
||||
|
||||
width = Math.cos(30*Math.PI/180)*r*2;
|
||||
|
||||
startx = 1500//1875/2;
|
||||
starty = 1500//950/2;//-(Math.tan(30*Math.PI/180)*width/2);
|
||||
|
||||
stt =0.5*Math.PI - rad(rot);
|
||||
end = 0;
|
||||
|
||||
for (let i = 1; i < sides +1 ; i++) {
|
||||
end = stt + rad(rot)
|
||||
ctx.beginPath();
|
||||
ctx.arc(startx+ Math.cos(rad(90+piv*i))*r, starty+ Math.sin(rad(90+piv*i))*r, r, stt, end ,0);
|
||||
//ctx.arc(startx+ 200*i, starty, r, stt, end ,0);
|
||||
ctx.stroke();
|
||||
stt = end+ -(rad(rot-piv));
|
||||
}
|
||||
*/
|
||||
|
||||
/*
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(300-50, 300);
|
||||
ctx.lineTo(300+50, 300);
|
||||
ctx.strokeStyle = "red";
|
||||
ctx.stroke();
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(300, 300-50);
|
||||
ctx.lineTo(300, 300+50);
|
||||
ctx.strokeStyle = "red";
|
||||
ctx.stroke();
|
||||
*/
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(startx + Math.cos(rad(90 + 120 * 1)) * r, starty + Math.sin(rad(90 + 120 * 1)) * r);
|
||||
ctx.lineTo(startx + Math.cos(rad(90 + 120 * 2)) * r, starty + Math.sin(rad(90 + 120 * 2)) * r);
|
||||
ctx.lineTo(startx + Math.cos(rad(90 + 120 * 3)) * r, starty + Math.sin(rad(90 + 120 * 3)) * r);
|
||||
ctx.lineTo(startx + Math.cos(rad(90 + 120 * 1)) * r, starty + Math.sin(rad(90 + 120 * 1)) * r);
|
||||
ctx.strokeStyle = "red";
|
||||
ctx.stroke();
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(startx + Math.cos(rad(90 + 120 * 1 + 60)) * r, starty + Math.sin(rad(90 + 120 * 1 + 60)) * r);
|
||||
ctx.lineTo(startx + Math.cos(rad(90 + 120 * 2 + 60)) * r, starty + Math.sin(rad(90 + 120 * 2 + 60)) * r);
|
||||
ctx.lineTo(startx + Math.cos(rad(90 + 120 * 3 + 60)) * r, starty + Math.sin(rad(90 + 120 * 3 + 60)) * r);
|
||||
ctx.lineTo(startx + Math.cos(rad(90 + 120 * 1 + 60)) * r, starty + Math.sin(rad(90 + 120 * 1 + 60)) * r);
|
||||
ctx.strokeStyle = "red";
|
||||
ctx.stroke();
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
import turtle
|
||||
import math
|
||||
|
||||
|
||||
turtle.colormode(255)
|
||||
|
||||
fac = .01
|
||||
a=0
|
||||
b=1
|
||||
|
||||
sqr = math.sqrt(5)
|
||||
|
||||
c= 1/sqr
|
||||
d= (1+sqr)/2
|
||||
e = (1-sqr)/2
|
||||
j = 10
|
||||
|
||||
j_max = 30
|
||||
|
||||
turtle.bgcolor("black")
|
||||
|
||||
|
||||
def fibb(t, col):
|
||||
global b
|
||||
global j
|
||||
global j_max
|
||||
global c
|
||||
global d
|
||||
global e
|
||||
|
||||
|
||||
coll = math.radians(col)
|
||||
print(col)
|
||||
print(255*coll)
|
||||
print(round(255*coll))
|
||||
|
||||
if coll >1:
|
||||
coll = 1
|
||||
if coll <0:
|
||||
coll = 0
|
||||
t.pencolor((round(255* coll),0,192))
|
||||
|
||||
for j in range(10, j_max):
|
||||
f=math.pi * b * fac /2
|
||||
f /= 90
|
||||
for i in range(90):
|
||||
turt.forward(f)
|
||||
turt.left(1)
|
||||
|
||||
b = c * ((d**j)- (e**j))
|
||||
|
||||
t.penup()
|
||||
turt = turtle.Turtle()
|
||||
turt.speed(0)
|
||||
|
||||
for ang in range(360):
|
||||
turt.setx(0)
|
||||
turt.sety(0)
|
||||
turt.left(1)
|
||||
turt.pendown()
|
||||
a=0
|
||||
b=1
|
||||
print(ang)
|
||||
if ang>179:
|
||||
ang = ang - 179
|
||||
fibb(turt, ang)
|
||||
|
||||
cv = turt.getcanvas()
|
||||
cv.postscript(file="file_name.ps", colormode='color')
|
||||
|
||||
turtle.done()
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
import turtle
|
||||
MINIMUM_BRANCH_LENGTH = 5
|
||||
def build_tree(t, branch_length, shorten_by, angle, c):
|
||||
if branch_length > MINIMUM_BRANCH_LENGTH:
|
||||
t.pendown()
|
||||
t.color(c)
|
||||
t.forward(branch_length)
|
||||
|
||||
new_length = branch_length - shorten_by
|
||||
t.left(angle)
|
||||
build_tree(t, new_length, shorten_by, angle, "#8a1cff")
|
||||
t.right(angle * 2)
|
||||
|
||||
build_tree(t, new_length, shorten_by, angle, "#ff7e1c")
|
||||
t.left(angle)
|
||||
|
||||
t.penup()
|
||||
t.backward(branch_length)
|
||||
|
||||
tree = turtle.Turtle()
|
||||
tree.hideturtle()
|
||||
tree.speed(0)
|
||||
tree.setheading(90)
|
||||
tree.color('green')
|
||||
turtle.bgcolor("black")
|
||||
build_tree(tree, 40, 3, 15, "red")
|
||||
turtle.mainloop()
|
||||
Loading…
Reference in New Issue