From 9d33d175b5cd564e77bda07fcbce252477f7c40f Mon Sep 17 00:00:00 2001 From: Matthew Kosarek Date: Sun, 19 Sep 2021 19:53:42 -0400 Subject: Decently working autumn theme --- themes/Renderer2d.cpp | 2 +- themes/Renderer2d.h | 1 + themes/TreeShape.h | 39 ++++++++++++++++++++++++++------------- themes/WebglContext.cpp | 11 +++++++++++ themes/WebglContext.cpp~ | 0 themes/WebglContext.h | 4 ++++ themes/dist/output.js | 47 +++++++++++++++++++++++++++++++++++++++++++++++ themes/dist/output.wasm | Bin 39899 -> 44887 bytes themes/main.cpp | 4 +++- themes/mathlib.cpp | 6 ++++++ themes/mathlib.h | 1 + 11 files changed, 100 insertions(+), 15 deletions(-) create mode 100644 themes/WebglContext.cpp create mode 100644 themes/WebglContext.cpp~ diff --git a/themes/Renderer2d.cpp b/themes/Renderer2d.cpp index c51d4a9..7a69ba4 100644 --- a/themes/Renderer2d.cpp +++ b/themes/Renderer2d.cpp @@ -38,7 +38,7 @@ void Renderer2d::render() { glEnable(GL_DEPTH_TEST); glDepthFunc(GL_LEQUAL); glDepthMask(GL_TRUE); - glClearColor(0.f, 0.f, 0.f, 1.f); + glClearColor(clearColor.x, clearColor.y, clearColor.z, clearColor.w); glClearDepth(1.0f); glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT | GL_STENCIL_BUFFER_BIT); useShader(shader); diff --git a/themes/Renderer2d.h b/themes/Renderer2d.h index e878b35..ad79e70 100644 --- a/themes/Renderer2d.h +++ b/themes/Renderer2d.h @@ -10,6 +10,7 @@ struct WebglContext; struct Renderer2d { Mat4x4 projection; uint32 shader; + Vector4 clearColor; struct { int32 position; diff --git a/themes/TreeShape.h b/themes/TreeShape.h index fbbb950..a8e3eeb 100644 --- a/themes/TreeShape.h +++ b/themes/TreeShape.h @@ -7,13 +7,22 @@ struct TreeBranch { float32 height = 0.f; Vector2 position; // Center point float32 rotation = 0; // How much we are rotated off of the center point in radians - Vector4 color = Vector4 { 1.f, 0.f, 0.f, 1.f }; + Vector4 color = Vector4(101,56,24, 1.f).toNormalizedColor(); + + // Calculated while filling in vertices + Vector2 bottomLeft; + Vector2 bottomRight; + Vector2 topLeft; + Vector2 topRight; + Vector2 topMidpoint; void fillVertices(Renderer2dVertex* vertices) { - Vector2 bottomLeft = Vector2 { position.x - width / 2.f, position.y }; - Vector2 bottomRight = Vector2 { position.x + width / 2.f, position.y }; - Vector2 topLeft = (Vector2 { position.x - width / 2.f, position.y + height }).rotate(rotation); - Vector2 topRight = (Vector2 { position.x + width / 2.f, position.y + height }).rotate(rotation); + bottomLeft = Vector2 { position.x - width / 2.f, position.y }.rotateAbout(rotation, position); + bottomRight = Vector2 { position.x + width / 2.f, position.y }.rotateAbout(rotation, position); + topLeft = (Vector2 { position.x - width / 2.f, position.y + height }).rotateAbout(rotation, position); + topRight = (Vector2 { position.x + width / 2.f, position.y + height }).rotateAbout(rotation, position); + + topMidpoint = topLeft + (topRight - topLeft) / 2.f; vertices[0] = { bottomLeft, color }; vertices[1] = { bottomRight, color }; @@ -28,19 +37,19 @@ struct TreeShape { Renderer2dShape shape; float32 height = 100.f; // Height of the whole tree - float32 width = 50.f; // Width of the whole tree + float32 width = 40.f; // Width of the whole tree int32 divisionsPerBranch = 2; // How many branches to split into at each branch split int32 numBranchLevels = 8; // How many branch levels to display float32 animateTimeSeconds = 2.f; // How long it takes the tree to form void load(Renderer2d* renderer) { - int32 numBranches = divisionsPerBranch * numBranchLevels; + int32 numBranches = pow(divisionsPerBranch, numBranchLevels + 1); TreeBranch* branches = new TreeBranch[numBranches]; int32 numVertices = 6 * numBranches; Renderer2dVertex* vertices = new Renderer2dVertex[numVertices]; int32 branchIndex = 0; - createBranch(branches, numBranches, &branchIndex, 0, width, height, Vector2 { 0.f, 0.f }, 0, vertices); + createBranch(branches, numBranches, &branchIndex, 0, width, height, Vector2 { 100.f, 50.f }, 0, vertices); shape.load(vertices, numVertices, renderer); @@ -61,13 +70,17 @@ struct TreeShape { } float32 branchWidth = width / divisionsPerBranch; - float32 branchHeight = height / divisionsPerBranch; + float32 branchHeight = height / (0.7 * divisionsPerBranch); + float32 branchRotationAmount = (PI / 4.f); + Vector2 topBranchPos = branch->topMidpoint; for (int division = 0; division < divisionsPerBranch; division++) { - float32 branchXPosition = position.x + (((divisionsPerBranch - division) / (divisionsPerBranch - 1)) * width) - width / 2.0; - Vector2 branchPosition = (Vector2 { branchXPosition, position.y + height }).rotate(rotation); - float32 branchRotation = 0; + float32 weight = static_cast(division) / static_cast(divisionsPerBranch - 1); + + float32 branchXPosition = topBranchPos.x - width / 2.f + weight * width; + Vector2 branchPosition = (Vector2 { branchXPosition, topBranchPos.y }); + float32 branchRotation = branch->rotation + (weight * branchRotationAmount - branchRotationAmount / 2.f); (*branchIndex)++; - createBranch(branchList, numBranches, branchIndex, branchLevel + 1, branchWidth, branchHeight, branchPosition, branchRotation, vertices); + createBranch(branchList, numBranches, branchIndex, branchLevel + 1, branchWidth, branchHeight, branchPosition, -branchRotation, vertices); } } diff --git a/themes/WebglContext.cpp b/themes/WebglContext.cpp new file mode 100644 index 0000000..5ef5388 --- /dev/null +++ b/themes/WebglContext.cpp @@ -0,0 +1,11 @@ +#include "WebglContext.h" +#include + +EM_BOOL onScreenSizeChanged(int eventType, const EmscriptenUiEvent *uiEvent, void *userData) { + printf("Here\n"); + WebglContext* context = (WebglContext*)userData; + + + context->width = uiEvent->documentBodyClientWidth; + context->height = uiEvent->documentBodyClientHeight; +} diff --git a/themes/WebglContext.cpp~ b/themes/WebglContext.cpp~ new file mode 100644 index 0000000..e69de29 diff --git a/themes/WebglContext.h b/themes/WebglContext.h index cbbfbe9..366c675 100644 --- a/themes/WebglContext.h +++ b/themes/WebglContext.h @@ -5,6 +5,8 @@ #include #include +EM_BOOL onScreenSizeChanged(int eventType, const EmscriptenUiEvent *uiEvent, void *userData); + struct WebglContext { EMSCRIPTEN_WEBGL_CONTEXT_HANDLE context; int width = 800; @@ -26,6 +28,8 @@ struct WebglContext { makeCurrentContext(); glClearColor(0, 0, 0, 0.0f); + + emscripten_set_resize_callback(query, this, false, onScreenSizeChanged); }; void makeCurrentContext() { diff --git a/themes/dist/output.js b/themes/dist/output.js index 80389ba..01fdfb4 100644 --- a/themes/dist/output.js +++ b/themes/dist/output.js @@ -2036,6 +2036,52 @@ var ASM_CONSTS = { return 0; } + function registerUiEventCallback(target, userData, useCapture, callbackfunc, eventTypeId, eventTypeString, targetThread) { + if (!JSEvents.uiEvent) JSEvents.uiEvent = _malloc( 36 ); + + target = findEventTarget(target); + + var uiEventHandlerFunc = function(ev) { + var e = ev || event; + if (e.target != target) { + // Never take ui events such as scroll via a 'bubbled' route, but always from the direct element that + // was targeted. Otherwise e.g. if app logs a message in response to a page scroll, the Emscripten log + // message box could cause to scroll, generating a new (bubbled) scroll message, causing a new log print, + // causing a new scroll, etc.. + return; + } + var b = document.body; // Take document.body to a variable, Closure compiler does not outline access to it on its own. + if (!b) { + // During a page unload 'body' can be null, with "Cannot read property 'clientWidth' of null" being thrown + return; + } + var uiEvent = JSEvents.uiEvent; + HEAP32[((uiEvent)>>2)] = e.detail; + HEAP32[(((uiEvent)+(4))>>2)] = b.clientWidth; + HEAP32[(((uiEvent)+(8))>>2)] = b.clientHeight; + HEAP32[(((uiEvent)+(12))>>2)] = innerWidth; + HEAP32[(((uiEvent)+(16))>>2)] = innerHeight; + HEAP32[(((uiEvent)+(20))>>2)] = outerWidth; + HEAP32[(((uiEvent)+(24))>>2)] = outerHeight; + HEAP32[(((uiEvent)+(28))>>2)] = pageXOffset; + HEAP32[(((uiEvent)+(32))>>2)] = pageYOffset; + if (wasmTable.get(callbackfunc)(eventTypeId, uiEvent, userData)) e.preventDefault(); + }; + + var eventHandler = { + target: target, + eventTypeString: eventTypeString, + callbackfunc: callbackfunc, + handlerFunc: uiEventHandlerFunc, + useCapture: useCapture + }; + JSEvents.registerOrRemoveHandler(eventHandler); + } + function _emscripten_set_resize_callback_on_thread(target, userData, useCapture, callbackfunc, targetThread) { + registerUiEventCallback(target, userData, useCapture, callbackfunc, 10, "resize", targetThread); + return 0; + } + function __webgl_enable_ANGLE_instanced_arrays(ctx) { // Extension available in WebGL 1 from Firefox 26 and Google Chrome 30 onwards. Core feature in WebGL 2. var ext = ctx.getExtension('ANGLE_instanced_arrays'); @@ -2942,6 +2988,7 @@ var asmLibraryArg = { "emscripten_resize_heap": _emscripten_resize_heap, "emscripten_set_canvas_element_size": _emscripten_set_canvas_element_size, "emscripten_set_click_callback_on_thread": _emscripten_set_click_callback_on_thread, + "emscripten_set_resize_callback_on_thread": _emscripten_set_resize_callback_on_thread, "emscripten_webgl_create_context": _emscripten_webgl_create_context, "emscripten_webgl_init_context_attributes": _emscripten_webgl_init_context_attributes, "emscripten_webgl_make_context_current": _emscripten_webgl_make_context_current, diff --git a/themes/dist/output.wasm b/themes/dist/output.wasm index a7e52b3..0ebe595 100755 Binary files a/themes/dist/output.wasm and b/themes/dist/output.wasm differ diff --git a/themes/main.cpp b/themes/main.cpp index 7941153..7e08011 100644 --- a/themes/main.cpp +++ b/themes/main.cpp @@ -110,8 +110,9 @@ EM_BOOL selectAutumn(int eventType, const EmscriptenMouseEvent* mouseEvent, void return true; } -// -- Autumn theme +// -- Autumn theme3 void AutumnTheme::load(Renderer2d* renderer) { + renderer->clearColor = Vector4(252,76,2, 0.5).toNormalizedColor(); tree.load(renderer); } @@ -126,3 +127,4 @@ void AutumnTheme::render(Renderer2d* renderer) { void AutumnTheme::unload() { tree.unload(); } + diff --git a/themes/mathlib.cpp b/themes/mathlib.cpp index fb09cd9..6fa4266 100644 --- a/themes/mathlib.cpp +++ b/themes/mathlib.cpp @@ -73,6 +73,12 @@ Vector2 Vector2::rotate(float angle) { }; } +Vector2 Vector2::rotateAbout(float angle, Vector2 p) { + Vector2 prev = { x - p.x, y - p.y }; // Translate the point back to the origin + Vector2 rot = prev.rotate(angle); // Do the rotation + return { rot.x + p.x, rot.y + p.y }; // Translate back to original position +} + void Vector2::printDebug(const char* name) { printf("%s=Vector2(%f, %f)\n", name, x, y); } diff --git a/themes/mathlib.h b/themes/mathlib.h index e3c6875..a0515f1 100644 --- a/themes/mathlib.h +++ b/themes/mathlib.h @@ -36,6 +36,7 @@ struct Vector2 { Vector2 negate(); Vector2 getPerp(); Vector2 rotate(float angle); + Vector2 rotateAbout(float angle, Vector2 p); float determinant(Vector2 other); void printDebug(const char* name); -- cgit v1.2.1