====== Steve Wang's Surprising Space: Geometry ======
====== HTML Code ======
click here to download this svg!
====== Javascript Code ======
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
move(xDistance, yDistance) {
return new Point(this.x + xDistance, this.y + yDistance);
}
moveByAngle(angle, distance) {
let r = (angle * Math.PI) / 180;
return new Point(
this.x + distance * Math.sin(r),
this.y + distance * Math.cos(r)
);
}
distance(point2) {
let point1 = new Point(this.x, this.y)
let a = point1.x - point2.x
let b = point1.y - point2.y
if (a < 0) {
a = a - (a * 2)
}
if (b < 0) {
b = b - (b * 2)
}
let toSquare = (b ** 2) + (a ** 2)
return Math.sqrt(toSquare)
}
}
let mouse = new Point(0, 0)
document.addEventListener('pointermove', ((e)=>{
mouse.x = e.pageX - 10
mouse.y = e.pageY - 8
}))
//Ensure the mouse position fixes itself even when the page is scrolled
document.addEventListener('scroll', ((e)=>{
mouse.x = e.pageX - 10
mouse.y = e.pageY - 8
}))
function randomRange(min, max,decimalPlaces) {
if (decimalPlaces==undefined){decimalPlaces=0}
return roundOff(min + (max - min) * (Math.random()),decimalPlaces);
}
function roundOff (number,decimalPlaces){
let roundedNumber=number.toFixed(decimalPlaces);
return JSON.parse(roundedNumber)}
function pointsToSvgPoints (transArray) {
let returnArray = []
transArray.forEach(x => {
returnArray.push([x.x, x.y])
})
return returnArray
}
let canvasSize=new Point(1800,800)
var draw = SVG().addTo('body').size(canvasSize.x, canvasSize.y)
function hitEffect (min,max) {
let midPoint;
let returnArray = []
midPoint = new Point(randomRange(-100, canvasSize.x), randomRange(-100, canvasSize.y))
if (min==undefined){
for (let i = 0; i < 180; i++) {
returnArray.push(midPoint.moveByAngle(i * 2, randomRange(310, 360)))
}}
else{
for (let i = 0; i < 180; i++) {
returnArray.push(midPoint.moveByAngle(i * 2, randomRange(min, max)))
}}
return pointsToSvgPoints(returnArray)
}
class BadRobot {
constructor (pos){
console.log(pos)
this.face=draw.rect(300,300).move(pos.x-200,pos.y-30).fill('black')
this.eye1=draw.circle(100).move(pos.x+30-210,pos.y).fill('red')
this.anger1=draw.rect(100,50).move(pos.x-160,pos.y-20).fill('black').rotate(30)
this.eye2=draw.circle(100).move(pos.x+70-100,pos.y).fill('red')
this.anger2=draw.rect(100,50).move(pos.x-50,pos.y-15).fill('black').rotate(-30)
this.forearm=draw.rect(115,23).move(pos.x+80,pos.y+100).fill('black')
this.arm=draw.rect(145,20).move(pos.x+183,160).fill('black').rotate(25)
this.arm2=draw.rect(240,20).move(pos.x+168,55).fill('black').rotate(-46)
this.joint=draw.circle(40).move(pos.x+82,pos.y+90).fill('red');
console.log(this.joint.attr())
this.elbow=draw.circle(36).move(385,128).fill('red');
console.log(this.joint.attr())
this.fist=draw.circle(200).move(400,180).fill('red').stroke({ color: 'black', opacity: 1, width: 5 })
this.hitEffect=draw.polygon(hitEffect(10,20)).fill('orange').move(470,260).size(150)
//this.fist2=draw.circle(50).move(pos.x+330,5).fill('red');
this.hitEffect3=draw.polygon(hitEffect(10,20)).fill('orange').move(420,460).size(150)
this.hitEffect4=draw.polygon(hitEffect(10,20)).fill('orange').move(370,260).size(150)
crackingEarthEffect()
this.whitebox=draw.rect(50,10).move(pos.x+350,0).fill('red')
this.hitEffect2=draw.polygon(hitEffect(10,20)).fill('orange').move(470,390).size(150)
}}
let lineArray=[];
function crackingEarthEffect (){
let pointCheck;
for (let i = 0; i < 180; i++) {
pointCheck=new Point(500,260).moveByAngle(2*i+400, 80)
lineArray.push(draw.line(500, 260, pointCheck.x, pointCheck.y).move(pointCheck.x+30, pointCheck.y-80).rotate(10).size(8).stroke({ color: 'coral', width: 3, linecap: 'round' }))
}
return lineArray
}
//lineArray[0].attr()
class Planet {
constructor(pos){
this.mainCircle=draw.circle(300).fill('#0083e8').move(pos.x,pos.y)
this.land=draw.ellipse(100,150).fill('#029400').move(pos.x+40,pos.y+20)
this.land2=draw.ellipse(100,150).fill('#029400').move(pos.x+160,pos.y+20)
this.land3=draw.ellipse(150,50).fill('#029400').move(pos.x+75,pos.y+180)
}}
class GoodRobot {
constructor (pos){
scrollTo(pos.x,pos.y)
this.face=draw.rect(300,300).move(pos.x-100,pos.y).fill('#5c5a5a').radius(10)
this.eye1=draw.circle(100).move(pos.x-70,50).fill('turquoise').opacity(0.8)
this.eye2=draw.circle(100).move(pos.x+70,50).fill('turquoise').opacity(0.8)
this.arm=draw.ellipse(280,50).move(pos.x+160,pos.y+320).fill('#5c5a5a').rotate(40)
this.joint=draw.circle(80).move(pos.x+160,pos.y+200).fill('turquoise')
this.mouth=draw.ellipse(200,50).move(pos.x-50,pos.y+200).fill('turquoise')
this.hand=draw.circle(130).move(1300,400).fill('turquoise')
}}
class GoodPlanet {
constructor(pos){
this.mainCircle=draw.circle(300).fill('#0083e8').move(pos.x,pos.y)
this.land=draw.ellipse(100,100).fill('#029400').move(pos.x+40,pos.y+30)
this.land2=draw.ellipse(100,100).fill('#029400').move(pos.x+160,pos.y+30)
this.land3=draw.ellipse(150,50).fill('#029400').move(pos.x+75,pos.y+180)
this.arm1=draw.ellipse(200,50).move(pos.x-100,pos.y+80).fill('#0083e8').rotate(65)
this.hand=draw.circle(120).move(pos.x-100,pos.y-50).fill('#0083e8')
}}
let badEarth=new Planet(new Point(400,350))
let theRobot=new BadRobot(new Point(200,30))
let goodRobot=new GoodRobot(new Point(980,30))
let goodEarth= new GoodPlanet(new Point(1430,500))
const thisSvg = draw.svg();
const link = document.getElementsByTagName('a')[0]
const fileName = document.baseURI.replace(/(.*\/)([^\/]*)(\.svg)/, '$2-edited$3')
const data = 'data:image/svg+xml;base64,' + btoa(thisSvg)
link.setAttribute('download', fileName)
link.setAttribute('href', data)
let border=draw.rect(10,820).move(795,-5).fill('grey')
//Two armies robots fighting over the earth and armies be in different patters. Background = black