Hmm, that probably will never happen unless I make an editor out of it.
I will add editing-like features for fun and they will add to interactivity in some example websites. There will be snapping (such as dragging a red triangle thing to a triangle shaped “hole” will snap the red triangle over the “hole”) but grid snapping is purely an editing feature.
oh i thought this was an editor
Nah, my own flexible javascript (library/framework)? to make interactive and lively websites with.
I now feel like I have been misled this entire time… /thread
Awh, really? 
I’ve noticed there’s been ambiguity after reading hosler’s post but I’ve been clear from the beginning:
OP mentions:
So yeah, I was thinking: damnit it would be so easy to use my scripting knowledge and just make websites as a freelancer.
I mentioned later on, answering to you, that:
I’m kind of boggled. Sorry guys.
This project is very important to me because it is about developing an expertise with webGL that will soon be sought for and taking over control of my life, allowing me to be my own boss, work part time with a good pay and afford casually going to the university. Because of the former, I will not release the code. Sorry. Regardless of the latter, I have considered making an editor out of it but expect it way later in the production process and only once I’m comfortable enough and know I can do better than what an editor can do, keeping my leverage as a website developer. It may never happen, I guess it would be possible to compete with joomla and wordpress in the future, because I’m using webGL and they don’t seem to. It also takes a lot more knowledge than I already have: automated online sales, members management, strong anti piracy features, server files management, customer support, marketing, support for plugins…
In the end, because of the way it is built (modular), coupled with the programmation technique I’m using (avoiding “this” has proven to be a great choice) and the nature of javascript, it is and will be flexible enough to make it an editor if I ever decide to. For now, you can see it as an editor; the difference is that its interface is not graphical. Here’s what code the pages are made of:
/*
Main: loads required stuff
hosts the main loop
mainpage :
*/
/////It needs to be after the function definition
var mainTexs = ["ressources/hello.png", "ressources/btnback.png", "ressources/dropDownBack1x1.png"];
for (var i = 0; i < mainTexs.length; i++) {
renderStack.addTexture(mainTexs[i], i, mainTexs.length);
}
//registerToMainLoop function
//that will register functions to the main loop
//
//they can be looked up and removed
//No, it could create a security breach.. could it?
function mainLoop() {
}
function loadLevel() {
//createContainer({
//});
//the test will go as follows:
//I will create multiple polygons
//I will then group them
//once that works
//I will add a tint to the group polygon and test all the features
//CONTAINER
//addToGroup
//nameGroup
//move
//
var toGroup1 = createPolygon({
initX: 64,
initY: 64,
width: 100,
height: 300,
color: [1, .2, .6, 1.0],
align: "absolute",
intName: "poly1",
mouseOverName: "polygon number 1",
layer: 1
});
var toGroup2 = createPolygon({
initX: 120,
initY: 4,
width: 100,
height: 150,
color: [1, 0, 0, .6],
align: "absolute",
intName: "poly2",
mouseOverName: "polygon number 2",
layer: 2
});
containment = group(toGroup1, toGroup2);
createPolygon({
initX: 230,
initY: 4,
width: 100,
height: 150,
color: [1, .7, .6, .5],
align: "absolute",
intName: "saludos",
mouseOverName: "polygon number 2",
layer: 3
});
createImage({
mouseOverName: "Hello",
intName: "Helloz",
align: "window t",
texture: renderStack.getTextureByName("ressources/hello.png"),
layer: 0, //layer
initX: 0,
initY: 0
});
//group 1, leader is first
createImage({
//groupId: "dropDownMenu1",
intName: "btnBack",
mouseOverName: "Gray rectangle",
align: "outer b",
relatedTo: renderStack.getFromStack("Helloz"),
texture: renderStack.getTextureByName("ressources/btnback.png"),
layer: 0, //layer
initX: 0,
initY: 120
});
let tmpDDM = createDropDownMenu({
choices: ["beautiful", "fun", "interactive", "dark", "upbeat", "playful", "bizarre", "colorful", "blue", "conventional", "updateable", "corporate", "regular"],
selected: "beautiful",
main: {
align: "center",
layer: 1,
initX: 20,
initY: 0,
mouseOverName: "Kinds of websites",
intName: "kindsOfWebsites",
color: [1.0,1.0,0.0,0.5],
width: 100,
height: 100
},
text: {
x: 0,
y: 0,
align: "center"
},
background: {
fit: "stretchToText", //larger
color: [1.0,1.0,0.0,0.1],
width: 100,
height: 100
},
style: "polyBackground"
});
console.log("tmpddmwidth = " + tmpDDM.width);
var titleText1 = createText({
//groupId: "dropDownMenu1",
intName: "internal",
mouseOverName: "Button text 1",
tagId: "sometext",
align: "outer l",
initX: 0,
initY: 0,
content: "I make",
size: "72px",
color: "#ffffff",
relatedTo: tmpDDM
});
var titleText2 = createText({
//groupId: "dropDownMenu1",
intName: "internal",
mouseOverName: "Button text 1",
tagId: "sometext",
align: "outer r",
initX: 0,
initY: 0,
content: "websites",
size: "72px",
color: "#ffffff",
relatedTo: tmpDDM
});
console.log(renderStack.getFromStack("poly1"));
///////////////////////////////////////////////////////////////////////////
Mouse.addClickable(containment);
containment.hover = function () {
containment.colorIt(containment, [.3, .9, .3, .5]);
requestAnimationFrame(renderStack.render);
}
setTimeout(function () {
titleText2.move(titleText2, 32, 10);
}, 2000);
/* setTimeout(function () {
toGroup2.move(toGroup2, 10, 330);
}, 3000);
setTimeout(function () {
group(renderStack.getFromStack("btnBack"), toGroup2);
}, 4000);
setTimeout(function () {
containment.move(containment, 170, 10);
console.log(renderStack.getFromStack("btnBack").x + " group2:" + toGroup2.x);
}, 5000);*/
for (i = 0; i < textElements.length; i++) {
testTextElements.push(textElements[i].width);
}
//text elements will have color and size management functions
requestAnimationFrame(renderStack.render);
}
//texture stack and regular stack are different things
// regular stack contains image elements
//texture stack is what the images are created from
I believe I’m being realist but thanks for the support so far, it’s been helpful; especially at the beginning. I will keep updating the journal, as it proved to be a powerful tool helping me think, figure out solutions and manage what’s the next step.
Here’s what it looks like with transparency. Cool, huh?
[ATTACH=JSON]{“data-align”:“none”,“data-size”:“custom”,“height”:“520”,“title”:“Untitled.png”,“width”:“1050”,“data-attachmentid”:187620}[/ATTACH]
Finally I can output something interesting 
Sorry I’ve had a hard time making a gif work. It doesn’t, so here’s a video.
nice stuff. I don’t post much in this thread but I just wanted to say I enjoy seeing every update and check regularly to see what you’ve done. I’m glad to see at least someone here is still making stuff.
Thanks Dylan. When I output that video my expectations on how people would react were way too high. Every drop counts.
I’ve been checking in quite frequently and your doing good work mate. Keep it up.
Sidenote: The music make it seem like an opening to a 70’s porno.
Hahahahaha, I was listening to that stream:
https://www.youtube.com/watch?v=j3sPW0uIgs8
It sounds like the same song over and over but it’s relaxing and I found time decelerates listening to that. The music wasn’t intended. I could only get very small gifs to show on here.
[ATTACH=JSON]{“data-align”:“none”,“data-size”:“full”,“title”:“giphy.gif”,“data-attachmentid”:187650}[/ATTACH]
New bug/feature?
Quick update as I am close to the end of my Wordpress course.
When I started believing it was to be an editor. I did that:
[ATTACH=JSON]{“data-align”:“none”,“data-size”:“full”,“title”:“capture.gif”,“data-attachmentid”:188672}[/ATTACH]
That’s been incredibly easy to implement.
The pic doesn’t seem to enlarge :X
Good to see you’re still doing things though 
Will start posting new journal entries soon enough. I will also eventually have a webpage ready that demos things I did. Such as the waves background and the rectangle creation thing.
Right now I’m revisiting the basics of CSS.
Next, I will be designing a Wordpress webpage.
Finally, I will integrate WebGL and demos in it.
Once that is done, I have multiple pathways in front of me:
Learning more about the Wordpress API.
Design a second website.
Pushing my PHP knowledge a bit further.
Learn about search engine optimisation.
Build interface things with WebGL, do more WebGL.
Edit this list that I will paste in the original post.
CSS is fun as fuck. If there’s anything you want to change visually and you only have access to CSS, even in the most extreme cases there is usually a way to do it. I’m not sure how much you know about it, but you should (generally) use HTML for structure, CSS for visuals, and JS/PHP for behavior, if what I’ve learned is correct.
edit: after reading through this thread I think I finally understand it to just be a journal of your own web design progress, yes? If you’re looking for CSS practice, I recommend grabbing a plug-in like Stylish, and then going to one of your favourite sites and messing around with the layout. Last weekend I actually got around to overhauling my CSS for Danbooru (anime image database site). A quick comparison can show you the power of CSS:
[ATTACH=JSON]{“data-align”:“none”,“data-attachmentid”:“188678”,“data-size”:“thumb”}[/ATTACH][ATTACH=JSON]{“data-align”:“none”,“data-attachmentid”:“188679”,“data-size”:“thumb”}[/ATTACH]
edit2: I dunno what happened to the spoilerbox tags but that’s the best I can do to not make this an attention-whore opportunity
You learned it correctly. HTML for structure, CSS for styling and JS/PHP for behavior. Yup, sounds correct. Actually, I’ve known HTML forever and learned some CSS back when it was kind of new, 10 years ago. Things changed though, so I’m going through a quick refresher.
Good job on the CSS for Danbooru, looks much better. I might check out Stylish.
Nothing was attention-whore-ish in your post and this thread is for whatever you might want to say, like any other thread. The journal is already in place to fulfill my egoist needs.
My work can be found at
http://araknyd.ca/dom/
Watch out, the sine wave thing is very graphics card intensive.
The A page is sine waves.
On the B page (or land page) you can click and drag in empty space to create red rectangles.
The C page is supposed to throw a different error than it actually does.
Seeing the gif of Experiment B wasn’t nearly as exciting as messing around with the squares myself