xxxxxxxxxx
let ss
let historyStack = []
let gh1
let options = {
scale: {
value: 1,
target: 2,
range: [0,5]
},
rotate: {
value: 0,
target: 0,
range: [-5,5]
},
translateX: {
value: 0,
target: 0,
range: [-500,500]
},
translateY: {
value: 0,
target: 0,
range: [-500,500]
},
shearX: {
value: 0,
target: 0,
range: [-1,1]
},
shearY: {
value: 0,
target: 0,
range: [-1,1]
}
}
function setup() {
createCanvas(windowWidth, windowHeight);
background(100);
gh1 = createGraphics(width,height)
Object.keys(options).forEach( (attr,aid)=>{
options[attr].slider = createSlider(options[attr].range,options[attr].value,0.01)
let lbl = createSpan(attr)
lbl.style("color","white")
lbl.position(10,height-150+aid*30)
options[attr].slider .position(100,height-150+aid*30)
options[attr].slider.mouseMoved(()=>{
options[attr].target=options[attr].slider.value()
})
})
let btn1 = createButton("Draw Rect rect(0,0,50,50)")
btn1.position(10,height-250)
btn1.mousePressed(()=>{
drawOnGraphic()
})
let btn2 = createButton("Push(Save Status)")
btn2.position(10,height-220)
btn2.mousePressed(()=>{
historyStack.push(Object.entries(options).map(arr=>{
return [
arr[0],arr[1].target
]
}))
})
let btn3 = createButton("Pop(Restore Status)")
btn3.position(10,height-190)
btn3.mousePressed(()=>{
let pvData = historyStack.pop()
if (pvData){
pvData.forEach(d=>{
options[d[0]].slider.value(d[1])
})
}
})
let btn4 = createButton("Demo")
btn4.position(10,height-280)
btn4.mousePressed(()=>{demo=true})
}
let sc = 1
let targetSc = 2
let demo = false
function drawOnGraphic(func){
gh1.push()
gh1.translate(width/2,height/2)
gh1.rotate(options.rotate.value)
gh1.scale(options.scale.value)
gh1.translate(options.translateX.value,options.translateY.value)
gh1.shearX(options.shearX.value)
gh1.shearY(options.shearY.value)
if (!func){
gh1.fill(255,0,0,230)
gh1.stroke(0)
gh1.rect(0,0,50,50)
}else{
func(gh1)
}
gh1.pop()
}
function modify(attrObj, delta){
attrObj.target=attrObj.target+delta
}
function draw() {
background(0)
image(gh1,0,0)
if (frameCount%10==0 && demo){
drawOnGraphic((gh)=>{
gh.noStroke()
gh.colorMode(HSB)
gh.stroke(0)
gh.strokeWeight(1)
gh.fill(frameCount%360,80,100)
gh.ellipse(0,0,frameCount/4)
})
modify(options.rotate,0.1)
modify(options.scale,0.01)
modify(options.translateX,2)
// modify(options.shearX,0.1)
}
fill(255)
stroke(255)
let span = 20
let dsText = ""
Object.keys(options).forEach(attr=>{
// options[attr].target = options[attr].slider.value()
options[attr].value = lerp(options[attr].value,options[attr].target,0.1)
dsText+=attr+": "+ options[attr].value.toFixed(2)+"\n"
})
fill(255)
textSize(20)
text(dsText ,30,30)
fill(255)
noStroke()
text("Stack: "+ historyStack.length,width-120,50)
translate(width/2,height/2)
rotate(options.rotate.value)
scale(options.scale.value)
translate(options.translateX.value,options.translateY.value)
shearX(options.shearX.value)
shearY(options.shearY.value)
fill(255)
push()
// ellipse(mouseX, mouseY, 20, 20);
for(var i=-600;i<=600;i+=span){
stroke(255,150)
if (i%100==0){
strokeWeight(3/ options.scale.value)
}else{
stroke(255,50)
}
line(i,-600,i,600)
push()
noStroke()
textSize(15 / options.scale.value)
text(i,i+5,0)
pop()
}
for(var o=-600;o<=600;o+=span){
push()
if (o%100==0){
stroke(255,150)
strokeWeight(2/ options.scale.value)
}else{
stroke(255,50)
}
line(-600,o,600,o)
pop()
push()
noStroke()
textSize(15 / options.scale.value)
text(o,0,o+5)
pop()
}
pop()
}