Skip to content

Commit 9486ddd

Browse files
author
CanvasCraft
authored
Add files via upload
1 parent a9ef97f commit 9486ddd

File tree

1 file changed

+121
-24
lines changed

1 file changed

+121
-24
lines changed

‎index.html

+121-24
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html>
33
<head>
44
<meta charset = utf-8>
5-
<meta name = viewport content = 'width=device-width,initial-scale=1'>
5+
<meta name = viewport content = 'width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no'>
66
<title>CanvasCraft</title>
77
<link rel = icon type = image/x-icon href = logo.ico>
88

@@ -24,7 +24,7 @@
2424
background-color: #000;
2525
height: 100%;
2626
overflow: hidden;
27-
color: #fff
27+
color: #fff;
2828
}
2929

3030
h1, h2, h3, h4 {
@@ -68,7 +68,7 @@
6868

6969
.contents {
7070
display: flex;
71-
height: 100%
71+
height: 100%;
7272
}
7373

7474
.mainSection {
@@ -310,7 +310,7 @@
310310

311311
* {
312312
box-sizing: border-box;
313-
outline: none
313+
outline: none;
314314
}
315315
</style>
316316
</head>
@@ -426,6 +426,7 @@ <h2>Images and shapes</h2>
426426
if (!types[this.name]) types[this.name] = 1
427427
else types[this.name] ++
428428
this.number = types[this.name]
429+
this.initGen = true
429430

430431
this.line = false
431432
if (brushType == 'line')
@@ -440,6 +441,8 @@ <h2>Images and shapes</h2>
440441
this.saved = false
441442
this.movingHovered = false
442443

444+
this.trim = {x: 0, y: 0, s: 1}
445+
443446
this.gray = false
444447
this.color = fill.value
445448
this.originalColor = this.color
@@ -459,7 +462,7 @@ <h2>Images and shapes</h2>
459462
elem.children[2].appendChild(this.cell)
460463
}
461464
else {
462-
if (selectedCell.id && game.shapes.length)
465+
if (selectedCell.id && game.shapes.length && activeLayer.children[2].children.length)
463466
selectedCell.parentElement.appendChild(this.cell)
464467
else activeLayer.children[2].appendChild(this.cell)
465468
}
@@ -497,9 +500,12 @@ <h2>Images and shapes</h2>
497500

498501
let maybeImage = ''
499502
if (this.image) maybeImage = '<span><div id=newRatio>Ratio: '+
500-
this.image.width+'&times;'+this.image.height+
503+
this.image.width+' &times; '+this.image.height+
501504
'</div>Multiply: <input value=1 oninput=changeRatio(this,'+
502-
this.image.width+','+this.image.height+')></span>'
505+
this.image.width+','+this.image.height+')></span>'+
506+
'<span>Offset x: <input type=number oninput=changeTrim(this,'+this.index+',"y") value="'+this.trim.x+'"></span>'+
507+
'<span>Offset y: <input type=number oninput=changeTrim(this,'+this.index+',"x") value="'+this.trim.y+'"></span>'+
508+
'<span>Offset scale: <input type=number oninput=changeTrim(this,'+this.index+',"s") value="'+this.trim.s+'"></span>'
503509

504510
return '<h2>Textures</h2>'+
505511
'<span style=color:#bbb;margin-bottom:15px>Change the texture of this shape</span>'+
@@ -509,9 +515,10 @@ <h2>Images and shapes</h2>
509515
'<option id=default>Default</option>'+
510516
'<option id=rgb>RGB</option>'+
511517
'<option id=noise>Noise</option>'+
512-
'<option id=largeNoise>Large noise</option>'+
518+
'<option id=largenoise>Large noise</option>'+
513519
'<option id=rotated>Rotated</option>'+
514520
addedPresets+'</select>'+
521+
'<button onmousedown=savePresetAsDefault(this)>Save active preset as default</button>'+
515522
'<span class=codeBoxWrite>function (x, y) {'+
516523
'<textarea id=codeBox oninput=writeCode('+
517524
this.index+',this)>'+this.codeContent+'</textarea>}</span>'+
@@ -566,7 +573,14 @@ <h2>Images and shapes</h2>
566573
'<div id=defaultProperties contenteditable oninput="defaultStr=this.textContent">'+
567574
defaultStr+'</div>'
568575

569-
if (!this.line) setCodeBoxHeight()
576+
if (!this.line) {
577+
if (!firstTime) {
578+
const special = document.getElementById('codeTemplate')
579+
special.selectedIndex = defaultPreset
580+
addTemplateCode(special, this.index)
581+
}
582+
setCodeBoxHeight()
583+
}
570584
else this.setLineDraw()
571585

572586
updateScreen = true
@@ -583,8 +597,6 @@ <h2>Images and shapes</h2>
583597
this.ctx.strokeStyle = this.color
584598
this.ctx.lineWidth = thick
585599
this.ctx.beginPath()
586-
// this.ctx.moveTo(this.x, this.y)
587-
// this.ctx.lineTo(this.x2, this.y2)
588600
this.ctx.moveTo(
589601
thick / 2 - w * (.5 + Math.sign(-w) / 2),
590602
thick / 2 - h * (.5 + Math.sign(-h) / 2))
@@ -594,31 +606,42 @@ <h2>Images and shapes</h2>
594606
this.ctx.stroke()
595607
}
596608

597-
generateImage() {
609+
generateImage(init) {
598610
if (this.line) return
599611
if (this.w > 1) this.cvs.width = Math.floor(this.w)
600612
if (this.h > 1) this.cvs.height = Math.floor(this.h)
601613

602614
if (this.image) {
603-
this.ctx.drawImage(this.image, 0, 0, this.w, this.h)
615+
const scaleX = (this.trim.s * this.w) / this.w
616+
const scaleY = (this.trim.s * this.h) / this.h
617+
const newX = -(this.w * this.trim.x) * scaleX
618+
const newY = -(this.h * this.trim.y) * scaleY
619+
620+
this.ctx.drawImage(
621+
this.image, newX, newY,
622+
this.w * scaleX, this.h * scaleY)
604623
return
605624
}
606625

607626
this.ctx.clearRect(0, 0, this.w, this.h)
627+
if (init) this.initGen = false
608628

609-
let fillFunction = (x, y) => {
629+
const errorFill = (x, y) => {
610630
if ((x + y) % 10 < 4) return '#ff0'
611631
return '#000'
612632
}
613633

634+
let fillFunction = (x, y) => {return errorFill(x, y)}
635+
614636
const calculateFillFunction = () => {
615637
try {
616-
const func = new Function('x', 'y', this.codeContent)
638+
let func = new Function('x', 'y', this.codeContent)
617639
fillFunction = (x, y) => {
618640
try {
619641
return func(x, y)
620642
}
621643
catch (error) {
644+
func = (x, y) => {return errorFill(x, y)}
622645
document.getElementById('errors').innerHTML = 'Error: ' + error.message
623646
}
624647
}
@@ -677,6 +700,24 @@ <h2>Images and shapes</h2>
677700
}
678701
}
679702

703+
function changeTrim(input, index, name) {
704+
const shape = game.shapes[index]
705+
shape.trim[name] = Number(input.value)
706+
shape.generateImage()
707+
updateScreen = true
708+
}
709+
710+
let defaultPreset = 0
711+
function savePresetAsDefault(button) {
712+
const special = document.getElementById('codeTemplate')
713+
714+
button.textContent = 'Saved!'
715+
setTimeout(() => button.textContent = 'Save active preset as default', 1000)
716+
717+
const select = document.getElementById('codeTemplate')
718+
defaultPreset = select.selectedIndex
719+
}
720+
680721
function changeColorLine(index, item) {
681722
const shape = game.shapes[index]
682723
shape.color = item.value
@@ -805,7 +846,7 @@ <h2>Images and shapes</h2>
805846
storePresets.push({name, code})
806847
codeOptions[name] = (e) => {return code}
807848

808-
save.innerHTML = 'Done'
849+
save.innerHTML = 'Saved!'
809850
setTimeout(() => save.innerHTML = 'Save', 1000)
810851
}
811852

@@ -1043,6 +1084,14 @@ <h2>Images and shapes</h2>
10431084
'Transform x: <input type=number id=layerTransformX>'+
10441085
'Transform y: <input type=number id=layerTransformY>'+
10451086
'<button onmousedown=transformLayer(this,"'+div.id+'")>Transform</button>'
1087+
const upButton = document.createElement('button')
1088+
const downButton = document.createElement('button')
1089+
upButton.onmousedown = () => moveLayer(-1, div.id)
1090+
downButton.onmousedown = () => moveLayer(1, div.id)
1091+
upButton.textContent = 'Move Up'
1092+
downButton.textContent = 'Move Down'
1093+
stats.appendChild(upButton)
1094+
stats.appendChild(downButton)
10461095
}
10471096
layerToExport.appendChild(option)
10481097

@@ -1051,6 +1100,42 @@ <h2>Images and shapes</h2>
10511100
return title
10521101
}
10531102

1103+
function moveLayer(dir, layerId) {
1104+
const layer = document.getElementById(layerId)
1105+
const arr = layer.children[2].children
1106+
1107+
if (dir < 0) {
1108+
const prev = layer.previousElementSibling
1109+
if (prev && prev.className == 'layer') shapes.insertBefore(layer, prev)
1110+
}
1111+
else {
1112+
const next = layer.nextElementSibling
1113+
if (next && next.className == 'layer') shapes.insertBefore(next, layer)
1114+
}
1115+
1116+
reCalcShapes()
1117+
1118+
updateScreen = true
1119+
}
1120+
1121+
function reCalcShapes() {
1122+
const gameShapes = []
1123+
let currIndex = 0
1124+
for (let i = 0; i < shapes.children.length; i ++) {
1125+
const lay = shapes.children[i]
1126+
if (lay.className != 'layer') continue
1127+
for (let j = 0; j < lay.children[2].children.length; j ++) {
1128+
const cell = lay.children[2].children[j]
1129+
const shape = game.shapes[Number(cell.realId)]
1130+
shape.index = currIndex
1131+
shape.setStats()
1132+
gameShapes.push(shape)
1133+
currIndex ++
1134+
}
1135+
}
1136+
game.shapes = gameShapes
1137+
}
1138+
10541139
function transformLayer(button, layerId) {
10551140
const x = document.getElementById('layerTransformX')
10561141
const y = document.getElementById('layerTransformY')
@@ -1192,6 +1277,7 @@ <h2>Images and shapes</h2>
11921277

11931278
function loop() {
11941279
requestAnimationFrame(loop)
1280+
11951281
if (!updateScreen && !m.dragZoom && !m.dragNav) return
11961282
updateScreen = false
11971283

@@ -1536,6 +1622,7 @@ <h2>Images and shapes</h2>
15361622
}
15371623

15381624
game.shapes.push(shape)
1625+
reCalcShapes()
15391626

15401627
shape.setStats()
15411628
updateScreen = true
@@ -1593,7 +1680,7 @@ <h2>Images and shapes</h2>
15931680
return 'let r = '+r+' + Math.random() * '+amt+' - '+amt/2+'\nlet g = '+g+' + Math'+
15941681
'.random() * '+amt+' - '+amt/2+'\nlet b = '+b+' + Math.random() * '+amt+' - '+amt/2+'\nlet a = 1\nreturn '+
15951682
'"rgb("+r+","+g+","+b+","+a+")"'},
1596-
largeNoise: (e) => {
1683+
largenoise: (e) => {
15971684
const [r, g, b] = hexToRGB(e.originalColor)
15981685
const amt = 40
15991686
return '// Useful 1D random number generator\nfunction random(seed) {\n'+
@@ -1672,11 +1759,11 @@ <h2>Images and shapes</h2>
16721759
if (m.press) {
16731760
if (m.dragZoom)
16741761
zoomSpeed = -(zoomPadY /
1675-
game.realScale) * Math.abs(zoomPadY / 50) / 1e3
1762+
game.realScale) * Math.abs(zoomPadY / 50) / 5e3
16761763

16771764
else if (m.dragNav) {
1678-
navXSpeed = -(navPadX / game.scale) * Math.abs(navPadX / 20) / 20
1679-
navYSpeed = -(navPadY / game.scale) * Math.abs(navPadY / 20) / 20
1765+
navXSpeed = -(navPadX / game.scale) * Math.abs(navPadX / 20) / 40
1766+
navYSpeed = -(navPadY / game.scale) * Math.abs(navPadY / 20) / 40
16801767
}
16811768

16821769
else {
@@ -1719,6 +1806,7 @@ <h2>Images and shapes</h2>
17191806
else {
17201807
m.dragging = new Shape(val(mousePos.x), val(mousePos.y))
17211808
game.shapes.push(m.dragging)
1809+
reCalcShapes()
17221810
}
17231811
}
17241812
}
@@ -1748,8 +1836,14 @@ <h2>Images and shapes</h2>
17481836
if (!shape.gray &&
17491837
mousePos.x > x && mousePos.y > y &&
17501838
mousePos.x < x + w &&
1751-
mousePos.y < y + h)
1752-
focusOnItem = shape.index
1839+
mousePos.y < y + h) {
1840+
1841+
let onTheRightLayer = true
1842+
if (selectedCell.parentElement && selectedCell.parentElement.parentElement.id != shape.cell.parentElement.parentElement.id)
1843+
onTheRightLayer = false
1844+
1845+
if (onTheRightLayer) focusOnItem = shape.index
1846+
}
17531847
}
17541848
}
17551849

@@ -1809,6 +1903,9 @@ <h2>Images and shapes</h2>
18091903
game.shapes[m.dragging.index - 1].setStats()
18101904
else stats.innerHTML = 'No information available'
18111905
}
1906+
1907+
if (!m.dragging.line && defaultPreset > 0 && m.dragging.initGen)
1908+
m.dragging.generateImage(true)
18121909
}
18131910
m.dragging = false
18141911
updateScreen = true
@@ -1826,8 +1923,8 @@ <h2>Images and shapes</h2>
18261923
updateScreen = true
18271924
}
18281925

1829-
onpointermove = e => moveMouse(e)
1830-
onmousemove = e => moveMouse(e)
1926+
cvs.onpointermove = e => moveMouse(e)
1927+
cvs.onmousemove = e => moveMouse(e)
18311928

18321929
cvs.onpointerdown = e => downMouse(e)
18331930
cvs.onmousedown = e => downMouse(e)

0 commit comments

Comments
 (0)